/* /Components/CookieConsent.razor.rz.scp.css */
.cookie-banner[b-au6qrdexdx] {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 640px;
    background: #1B2A4A;
    color: #fff;
    border-radius: 0.875rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
    z-index: 9999;
    padding: 1rem 1.25rem;
}

.cookie-banner-inner[b-au6qrdexdx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-text[b-au6qrdexdx] {
    flex: 1;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #d0d8e8;
}

.cookie-text a[b-au6qrdexdx] {
    color: #fff;
    text-decoration: underline;
}

.cookie-actions[b-au6qrdexdx] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cookie-btn[b-au6qrdexdx] {
    padding: 0.45rem 1rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.cookie-btn:hover[b-au6qrdexdx] {
    opacity: 0.85;
}

.cookie-btn-accept[b-au6qrdexdx] {
    background: var(--on-ink);
    color: var(--ink);
}

.cookie-btn-decline[b-au6qrdexdx] {
    background: transparent;
    color: #d0d8e8;
    border: 1px solid rgba(255,255,255,.25);
}
/* /Components/HelpHint.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   HelpHint — botão "?" + modal explicativo
   Estilo editorial: amber/yellow accent (associado a "saber",
   ideia, dica), modal centrado small com handle de lightbulb.
   ───────────────────────────────────────────────────────── */

/* Botão "?" trigger — destaque amber sempre (não só hover). User tem
   de reconhecer "isto é ajuda" mesmo sem hover. Mesma cor/tamanho em
   todos os sítios da app para consistência. */
.help-hint-trigger[b-vwtw49we2a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--warn-soft);
    border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
    color: var(--warn);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.help-hint-trigger i[b-vwtw49we2a] { font-size: 14px; }
.help-hint-trigger:hover[b-vwtw49we2a] {
    background: color-mix(in srgb, var(--warn) 18%, transparent);
    border-color: color-mix(in srgb, var(--warn) 55%, transparent);
    transform: scale(1.05);
}

/* Variant: subtle — usado dentro de labels/headers densos (ex: junto à
   palavra "Variantes" na secção do produto). Apenas o ícone tingido,
   sem fundo, para não criar dois círculos amber lado-a-lado. */
.help-hint-trigger.is-subtle[b-vwtw49we2a] {
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    padding: 2px;
    transform: none;
}
.help-hint-trigger.is-subtle i[b-vwtw49we2a] {
    font-size: 15px;
    color: var(--warn);
}
.help-hint-trigger.is-subtle:hover[b-vwtw49we2a] {
    background: transparent;
    color: var(--warn);
    transform: scale(1.1);
}

/* ── Modal ─────────────────────────────────────────────── */
.help-hint-backdrop[b-vwtw49we2a] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: grid;
    place-items: center;
    z-index: 1000;
    padding: 16px;
    animation: helpHintFadeIn-b-vwtw49we2a 160ms ease;
}

@keyframes helpHintFadeIn-b-vwtw49we2a {
    from { opacity: 0; }
    to { opacity: 1; }
}

.help-hint-modal[b-vwtw49we2a] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: helpHintSlideUp-b-vwtw49we2a 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

.help-hint-head[b-vwtw49we2a] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line-2);
}

.help-hint-icon-box[b-vwtw49we2a] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--warn-soft);
    color: var(--warn);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.help-hint-icon-box i[b-vwtw49we2a] { font-size: 18px; }

.help-hint-title[b-vwtw49we2a] {
    margin: 0;
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.2px;
}

.help-hint-close[b-vwtw49we2a] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 140ms ease, color 140ms ease;
}
.help-hint-close:hover[b-vwtw49we2a] {
    background: var(--line-2);
    color: var(--ink);
}
.help-hint-close i[b-vwtw49we2a] { font-size: 18px; }

.help-hint-body[b-vwtw49we2a] {
    padding: 16px 20px;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.6;
}
.help-hint-body p[b-vwtw49we2a] { margin: 0 0 12px; }
.help-hint-body p:last-child[b-vwtw49we2a] { margin-bottom: 0; }
.help-hint-body strong[b-vwtw49we2a] { color: var(--ink); font-weight: 600; }
.help-hint-body ul[b-vwtw49we2a] {
    margin: 8px 0;
    padding-left: 20px;
}
.help-hint-body li[b-vwtw49we2a] { margin-bottom: 4px; color: var(--ink-2); }
.help-hint-body code[b-vwtw49we2a] {
    background: var(--line-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: var(--ink);
}
/* Exemplo destacado dentro do body — bloco com fundo subtil e border-left
   amber para sinalizar "isto é exemplo concreto". */
.help-hint-body .example[b-vwtw49we2a] {
    background: var(--warn-soft);
    border-left: 3px solid var(--warn);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    margin: 12px 0;
    font-size: 13px;
    color: var(--ink);
}
.help-hint-body .example strong[b-vwtw49we2a] { color: var(--warn); }

.help-hint-foot[b-vwtw49we2a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--line-2);
    background: var(--line-2);
    border-radius: 0 0 16px 16px;
    flex-wrap: wrap;
}

.help-hint-dontshow[b-vwtw49we2a] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
}
.help-hint-dontshow input[type="checkbox"][b-vwtw49we2a] {
    margin: 0;
    width: 14px;
    height: 14px;
    accent-color: var(--ink);
    cursor: pointer;
}

.help-hint-ok[b-vwtw49we2a] {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    background: var(--ink);
    color: var(--on-ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease;
}
.help-hint-ok:hover[b-vwtw49we2a] { background: var(--ink-hover); }

@media (max-width: 480px) {
    .help-hint-modal[b-vwtw49we2a] {
        max-width: 100%;
        max-height: 90vh;
    }
    .help-hint-head[b-vwtw49we2a] { padding: 14px 16px 12px; }
    .help-hint-body[b-vwtw49we2a] { padding: 14px 16px; font-size: 13px; }
    .help-hint-foot[b-vwtw49we2a] { padding: 12px 16px; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-zvi2iz6a0h] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-zvi2iz6a0h] {
    flex: 1;
    min-width: 0;
}

.sidebar[b-zvi2iz6a0h] {
    background: var(--nav-bg);
    border-right: 1px solid var(--nav-divider);
}

article.content[b-zvi2iz6a0h] {
    padding: 24px 24px 32px;
}

/* ── Mobile ────────────────────────────────────────── */
@media (max-width: 640.98px) {
    .sidebar[b-zvi2iz6a0h] { display: none; }
    article.content[b-zvi2iz6a0h] {
        padding: 16px 14px;
        /* 60px nav + 10px gap above + 10px gap below + safe-area = 80px + safe-area */
        padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }
}

@media (min-width: 641px) {
    .page[b-zvi2iz6a0h] {
        flex-direction: row;
        height: 100vh;
        overflow: hidden;
    }

    .sidebar[b-zvi2iz6a0h] {
        width: 64px;
        height: 100vh;
        flex-shrink: 0;
        overflow-y: auto;
        overflow-x: hidden;
        transition: width 200ms ease;
    }

    main[b-zvi2iz6a0h] {
        height: 100vh;
        overflow-y: auto;
    }
}

@media (min-width: 1024px) {
    .sidebar[b-zvi2iz6a0h] {
        width: 240px;
    }

    article.content[b-zvi2iz6a0h] {
        padding: 28px 32px 40px;
    }
}

#blazor-error-ui[b-zvi2iz6a0h] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-zvi2iz6a0h] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Sidebar / NavMenu — Linear/Vercel inspired, near-black
   ───────────────────────────────────────────────────────── */

.navbar-toggler[b-lwv20gn790] {
    appearance: none;
    cursor: pointer;
    width: 42px;
    height: 36px;
    color: rgba(255,255,255,0.75);
    position: absolute;
    top: 10px;
    right: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/22px rgba(255, 255, 255, 0.05);
    transition: background-color 120ms ease;
}

.navbar-toggler:checked[b-lwv20gn790],
.navbar-toggler:hover[b-lwv20gn790] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ── Brand area ──────────────────────────────────────── */
.top-row[b-lwv20gn790] {
    min-height: 56px;
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--nav-divider);
    padding: 12px 14px;
}

.navbar-brand[b-lwv20gn790] {
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Logo: tablet shows icon, desktop shows full */
.nav-logo-full[b-lwv20gn790] { display: none; height: 26px !important; }
.nav-logo-icon[b-lwv20gn790] { display: inline; height: 24px !important; }

@media (min-width: 1024px) {
    .nav-logo-full[b-lwv20gn790] { display: inline; }
    .nav-logo-icon[b-lwv20gn790] { display: none; }
}

/* ── Section labels ──────────────────────────────────── */
.nav-section-label[b-lwv20gn790] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    margin-top: 18px;
    margin-bottom: 4px;
    padding: 0 14px !important;
    user-select: none;
}

.nav-item[b-lwv20gn790] {
    font-size: 13px;
    padding: 1px 8px !important;
}

.nav-item:first-of-type[b-lwv20gn790] {
    padding-top: 12px !important;
}

.nav-item:last-of-type[b-lwv20gn790] {
    padding-bottom: 12px !important;
}

.nav-item[b-lwv20gn790]  .nav-link {
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    border-radius: 6px;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    width: 100%;
    font-weight: 500;
    font-size: 13px;
    position: relative;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.nav-item[b-lwv20gn790]  .nav-link i {
    font-size: 14px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    opacity: 0.9;
}

.nav-item[b-lwv20gn790]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.95);
}

/* Active state — subtle */
.nav-item[b-lwv20gn790]  a.active {
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-weight: 500;
}

.nav-scrollable[b-lwv20gn790] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-lwv20gn790] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 56px);
    overflow: hidden;
}

/* ── Bottom area (perfil + logout) ───────────────────── */
.nav-bottom[b-lwv20gn790] {
    flex-shrink: 0;
    padding: 10px 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-bottom[b-lwv20gn790]  .nav-link {
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    border: none;
    border-radius: 6px;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 120ms ease, color 120ms ease;
    text-decoration: none;
}

.nav-bottom[b-lwv20gn790]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.95);
}

.nav-bottom[b-lwv20gn790]  .nav-link i {
    font-size: 14px;
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    opacity: 0.85;
}

.nav-bottom[b-lwv20gn790]  .nav-link-logout:hover {
    color: #fca5a5;
    background-color: rgba(185, 28, 28, 0.12);
}

/* ── Tablet (icon-only) ──────────────────────────────── */
@media (min-width: 641px) {
    .navbar-toggler[b-lwv20gn790] { display: none; }

    .nav-scrollable[b-lwv20gn790] {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 56px);
        overflow: hidden;
    }

    .nav-main[b-lwv20gn790] {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
        flex-wrap: nowrap;
        flex-direction: column;
        padding: 8px 4px;
    }

    .top-row[b-lwv20gn790] {
        justify-content: center;
        padding: 0;
    }

    .nav-section-label[b-lwv20gn790] {
        display: none;
    }

    .nav-item[b-lwv20gn790] {
        padding: 1px 6px !important;
    }

    .nav-item[b-lwv20gn790]  .nav-link {
        justify-content: center;
        padding: 0;
        width: 36px;
        height: 36px;
        margin: 0 auto;
        gap: 0;
    }

    .nav-item[b-lwv20gn790]  .nav-link span {
        display: none;
    }

    .nav-item[b-lwv20gn790]  .nav-link i {
        font-size: 16px;
        width: auto;
    }

    /* Tooltip-on-hover for icon-only mode */
    .nav-item[b-lwv20gn790]  .nav-link {
        position: relative;
    }

    .nav-item[b-lwv20gn790]  .nav-link[title]:hover::after {
        content: attr(title);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--ink);
        color: var(--on-ink);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11.5px;
        font-weight: 500;
        white-space: nowrap;
        z-index: 1000;
        border: 1px solid var(--line);
        pointer-events: none;
        box-shadow: var(--shadow-2);
    }

    .nav-bottom[b-lwv20gn790] {
        padding: 8px 0 16px;
        align-items: center;
    }

    .nav-bottom[b-lwv20gn790]  .nav-link {
        justify-content: center;
        padding: 0;
        width: 36px;
        height: 36px;
        gap: 0;
    }

    .nav-bottom[b-lwv20gn790]  .nav-link span {
        display: none;
    }

    .nav-bottom[b-lwv20gn790]  .nav-link i {
        font-size: 16px;
        width: auto;
    }
}

/* ── Desktop (full sidebar) ──────────────────────────── */
@media (min-width: 1024px) {
    .top-row[b-lwv20gn790] {
        justify-content: flex-start;
        padding: 12px 16px;
    }

    .nav-main[b-lwv20gn790] {
        padding: 8px 8px;
    }

    .nav-section-label[b-lwv20gn790] {
        display: block;
    }

    .nav-item[b-lwv20gn790] {
        padding: 1px 8px !important;
    }

    .nav-item[b-lwv20gn790]  .nav-link {
        justify-content: flex-start;
        padding: 0 10px;
        width: 100%;
        height: 34px;
        gap: 10px;
    }

    .nav-item[b-lwv20gn790]  .nav-link span {
        display: inline;
    }

    .nav-item[b-lwv20gn790]  .nav-link i {
        font-size: 14px;
        width: 16px;
    }

    .nav-item[b-lwv20gn790]  .nav-link:hover::after {
        display: none;
    }

    .nav-bottom[b-lwv20gn790] {
        padding: 10px 8px 16px;
        align-items: stretch;
    }

    .nav-bottom[b-lwv20gn790]  .nav-link {
        justify-content: flex-start;
        padding: 0 10px;
        width: 100%;
        gap: 10px;
    }

    .nav-bottom[b-lwv20gn790]  .nav-link span {
        display: inline;
    }

    .nav-bottom[b-lwv20gn790]  .nav-link i {
        font-size: 14px;
        width: 16px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-1wuzvtacwm],
.components-reconnect-repeated-attempt-visible[b-1wuzvtacwm],
.components-reconnect-failed-visible[b-1wuzvtacwm],
.components-pause-visible[b-1wuzvtacwm],
.components-resume-failed-visible[b-1wuzvtacwm],
.components-rejoining-animation[b-1wuzvtacwm] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-1wuzvtacwm],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-1wuzvtacwm],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-1wuzvtacwm],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-1wuzvtacwm],
#components-reconnect-modal.components-reconnect-retrying[b-1wuzvtacwm],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-1wuzvtacwm],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-1wuzvtacwm],
#components-reconnect-modal.components-reconnect-failed[b-1wuzvtacwm],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-1wuzvtacwm] {
    display: block;
}


#components-reconnect-modal[b-1wuzvtacwm] {
    background-color: var(--surface);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-1wuzvtacwm 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-1wuzvtacwm 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-1wuzvtacwm 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-1wuzvtacwm]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-1wuzvtacwm 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-1wuzvtacwm {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-1wuzvtacwm {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-1wuzvtacwm {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-1wuzvtacwm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-1wuzvtacwm] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-1wuzvtacwm] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-1wuzvtacwm] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-1wuzvtacwm] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-1wuzvtacwm] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-1wuzvtacwm] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-1wuzvtacwm 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-1wuzvtacwm] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-1wuzvtacwm {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TopBar.razor.rz.scp.css */
/* ── Topbar ──────────────────────────────────────────── */
/* Glass scroll: começa transparente sobre o conteúdo, ganha glass +
   sombra subtil quando o utilizador faz scroll. A classe .is-scrolled
   é gerida pelo /js/glassScroll.js que ouve scroll em window e main. */
.topbar[b-3qim0xe2km] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 10px 16px;
    background: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 5;
    transition:
        background-color 220ms ease,
        backdrop-filter 220ms ease,
        -webkit-backdrop-filter 220ms ease,
        border-bottom-color 220ms ease,
        box-shadow 220ms ease;
}

.topbar.is-scrolled[b-3qim0xe2km] {
    background: var(--surface-overlay);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom-color: var(--line);
    box-shadow: 0 6px 16px -8px rgba(15,23,42,0.12);
}

.topbar-actions[b-3qim0xe2km] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.topbar-icon-btn[b-3qim0xe2km] {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: var(--r-sm);
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
    position: relative;
}

.topbar-icon-btn:hover[b-3qim0xe2km] {
    background: var(--line-2);
    color: var(--ink);
}

.topbar-icon-btn i[b-3qim0xe2km] {
    font-size: 16px;
}

/* User dropdown trigger */
.topbar-user-wrap[b-3qim0xe2km] {
    position: relative;
}

.topbar-user[b-3qim0xe2km] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
    font: inherit;
}

.topbar-user:hover[b-3qim0xe2km],
.topbar-user-wrap.is-open .topbar-user[b-3qim0xe2km] {
    background: var(--line-2);
    border-color: var(--line);
}

.topbar-avatar[b-3qim0xe2km] {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-ink);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Avatar dum subscritor Pantry — ring dourado/accent à volta */
.topbar-avatar.is-pro[b-3qim0xe2km] {
    background: linear-gradient(135deg, #1F1F23 0%, #2D2D33 100%);
    box-shadow: 0 0 0 2px var(--color-accent, #C8852C);
}

/* Badge gem no canto inferior-direito do avatar Pantry */
.topbar-avatar-badge[b-3qim0xe2km] {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent, #C8852C);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 8px;
    border: 2px solid var(--bg, #fff);
    line-height: 1;
}
.topbar-avatar-badge i[b-3qim0xe2km] {
    font-size: 8px;
    color: #fff;
}

.topbar-username[b-3qim0xe2km] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.topbar-user-caret[b-3qim0xe2km] {
    font-size: 10px;
    color: var(--ink-3);
    transition: transform 150ms ease;
}

.topbar-user-wrap.is-open .topbar-user-caret[b-3qim0xe2km] {
    transform: rotate(180deg);
}

/* Click-outside backdrop */
.topbar-backdrop[b-3qim0xe2km] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
    cursor: default;
}

/* User dropdown menu */
.topbar-dropdown[b-3qim0xe2km] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    padding: 4px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Header do dropdown — nome + plan badge */
.topbar-dropdown-header[b-3qim0xe2km] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px 4px;
}
.topbar-dropdown-name[b-3qim0xe2km] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-dropdown-plan[b-3qim0xe2km] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--line-2);
    color: var(--ink-3);
    flex-shrink: 0;
}
.topbar-dropdown-plan.is-pro[b-3qim0xe2km] {
    background: var(--color-accent, #C8852C);
    color: #fff;
}
.topbar-dropdown-plan.is-pro i[b-3qim0xe2km] {
    font-size: 9px;
    color: #fff;
    width: auto;
}

/* CTA "Subscrever Pantry" no dropdown — destacado.
   Em dark mode usa surface-2 (slightly elevated) em vez de gradiente cream. */
.topbar-dropdown-item.topbar-dropdown-cta[b-3qim0xe2km] {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink);
    font-weight: 600;
    margin: 4px 0;
}
[data-theme="light"] .topbar-dropdown-item.topbar-dropdown-cta[b-3qim0xe2km],
:root:not([data-theme]) .topbar-dropdown-item.topbar-dropdown-cta[b-3qim0xe2km] {
    background: linear-gradient(135deg, #FBFAF7 0%, #F4F2EA 100%);
}
.topbar-dropdown-item.topbar-dropdown-cta:hover[b-3qim0xe2km] {
    background: var(--ink);
    color: var(--on-ink);
}
.topbar-dropdown-item.topbar-dropdown-cta i[b-3qim0xe2km] {
    color: var(--color-accent, #C8852C);
}
.topbar-dropdown-item.topbar-dropdown-cta:hover i[b-3qim0xe2km] {
    color: var(--color-accent, #C8852C);
}

.topbar-dropdown-item[b-3qim0xe2km] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 120ms ease;
}

.topbar-dropdown-item:hover[b-3qim0xe2km] {
    background: var(--line-2);
    color: var(--ink);
}

.topbar-dropdown-item i[b-3qim0xe2km] {
    font-size: 14px;
    color: var(--ink-3);
    width: 16px;
}

.topbar-dropdown-item.topbar-dropdown-danger[b-3qim0xe2km] {
    color: var(--neg);
}

.topbar-dropdown-item.topbar-dropdown-danger i[b-3qim0xe2km] { color: var(--neg); }

.topbar-dropdown-item.topbar-dropdown-danger:hover[b-3qim0xe2km] {
    background: var(--neg-soft);
}

.topbar-dropdown-sep[b-3qim0xe2km] {
    height: 1px;
    background: var(--line);
    margin: 4px 2px;
}

/* Mobile adjustments */
@media (max-width: 640.98px) {
    .topbar[b-3qim0xe2km] {
        padding: 8px 12px;
        height: 52px;
    }
    .topbar-username[b-3qim0xe2km] { display: none; }
}

@media (min-width: 1024px) {
    .topbar[b-3qim0xe2km] {
        padding-left: 24px;
        padding-right: 24px;
    }
}
/* /Components/LoadingOverlay.razor.rz.scp.css */
.loading-overlay[b-1m5ku0v4ac] {
    position: fixed;
    inset: 0;
    background: rgba(27, 42, 74, 0.25);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.loading-card[b-1m5ku0v4ac] {
    background: var(--color-surface);
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 8px 32px rgba(27, 42, 74, 0.2), 0 2px 8px rgba(0,0,0,.06);
    min-width: 220px;
}

/* ── Spinner variant ───────────────────── */
.loading-spinner[b-1m5ku0v4ac] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: loading-spin-b-1m5ku0v4ac 0.7s linear infinite;
}

@keyframes loading-spin-b-1m5ku0v4ac {
    to { transform: rotate(360deg); }
}

.loading-message[b-1m5ku0v4ac] {
    margin: 0;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
}

/* ── Scan variant ──────────────────────── */
.scan-card[b-1m5ku0v4ac] {
    padding: 1.75rem 2rem;
    gap: 1.25rem;
}

.scan-receipt[b-1m5ku0v4ac] {
    position: relative;
    width: 160px;
    background: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--color-border);
    padding: 0.875rem 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(27,42,74,.10);
}

.scan-receipt-header[b-1m5ku0v4ac] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 0.5rem;
    font-family: ui-monospace, monospace;
}

.scan-receipt-line[b-1m5ku0v4ac] {
    height: 1px;
    background: var(--color-border);
    margin-bottom: 0.5rem;
    border-style: dashed;
}

.scan-receipt-rows[b-1m5ku0v4ac] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.scan-receipt-row[b-1m5ku0v4ac] {
    height: 5px;
    border-radius: 3px;
    background: var(--color-border);
    width: 100%;
}

.scan-receipt-row.short[b-1m5ku0v4ac]  { width: 55%; }
.scan-receipt-row.medium[b-1m5ku0v4ac] { width: 75%; }

.scan-laser[b-1m5ku0v4ac] {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, oklch(0.72 0.18 55 / 0.95), transparent);
    box-shadow: 0 0 10px oklch(0.72 0.18 55 / 0.9), 0 0 22px oklch(0.72 0.18 55 / 0.5);
    animation: scan-line-b-1m5ku0v4ac 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes scan-line-b-1m5ku0v4ac {
    0%   { top: 0%;   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.scan-label[b-1m5ku0v4ac] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
}

.scan-blink[b-1m5ku0v4ac] {
    animation: scan-blink-b-1m5ku0v4ac 1.4s ease-in-out infinite;
}

@keyframes scan-blink-b-1m5ku0v4ac {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
/* /Components/Pages/Admin.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Admin — sophisticated monochrome
   ───────────────────────────────────────────────────────── */

.ad-shell[b-ylneg6cpbf] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.ad-shell .num[b-ylneg6cpbf] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Header ──────────────────────────────────────────── */
.ad-header[b-ylneg6cpbf] { margin-bottom: 0; }
.ad-h1[b-ylneg6cpbf] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
}
.ad-h1-sub[b-ylneg6cpbf] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

.ad-empty[b-ylneg6cpbf] {
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
    padding: 32px 0;
    margin: 0;
}

/* ── Hero stats ──────────────────────────────────────── */
.ad-hero[b-ylneg6cpbf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ad-tile[b-ylneg6cpbf] {
    background: var(--surface);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 90px;
}

.ad-tile-label[b-ylneg6cpbf] { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.ad-tile-value[b-ylneg6cpbf] {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.7px;
    color: var(--ink);
    line-height: 1.1;
}

/* ── Tools (atalhos para subpáginas /admin/*) ───────── */
.ad-tools[b-ylneg6cpbf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
}

.ad-tool-card[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--ink);
    text-decoration: none;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.ad-tool-card:hover[b-ylneg6cpbf] {
    border-color: var(--ink-3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15,23,42,.05);
    text-decoration: none;
    color: var(--ink);
}

.ad-tool-icon[b-ylneg6cpbf] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--line-2);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ad-tool-text[b-ylneg6cpbf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.ad-tool-title[b-ylneg6cpbf] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.2px;
}

.ad-tool-sub[b-ylneg6cpbf] {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.3;
}

.ad-tool-arrow[b-ylneg6cpbf] {
    color: var(--ink-3);
    font-size: 13px;
    flex-shrink: 0;
    transition: color 120ms ease, transform 120ms ease;
}

.ad-tool-card:hover .ad-tool-arrow[b-ylneg6cpbf] {
    color: var(--ink);
    transform: translateX(2px);
}

/* ── Card ────────────────────────────────────────────── */
.ad-card[b-ylneg6cpbf] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ad-card-head[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.ad-card-title[b-ylneg6cpbf] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.2px;
}

.ad-card-count[b-ylneg6cpbf] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-3);
    font-weight: 600;
}
.ad-card-count.is-warn[b-ylneg6cpbf] {
    background: var(--warn-soft, #FEF3C7);
    color: var(--warn, #92400E);
}

.ad-card-body[b-ylneg6cpbf] {
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ad-card-body-flush[b-ylneg6cpbf] { padding: 0; }

/* ── Metrics grid ────────────────────────────────────── */
.ad-metrics-grid[b-ylneg6cpbf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.ad-metric[b-ylneg6cpbf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--line-2, #F5F5F2);
    border: 1px solid var(--line, #E5E5E0);
    border-radius: var(--r-md, 10px);
}

.ad-metric-label[b-ylneg6cpbf] {
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 500;
    letter-spacing: 0.1px;
}

.ad-metric-value[b-ylneg6cpbf] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1.1;
}

.ad-metric-frac[b-ylneg6cpbf] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-3);
}

.ad-metric-sub[b-ylneg6cpbf] {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.3;
}

.ad-metric-sub strong[b-ylneg6cpbf] {
    color: var(--ink);
    font-weight: 600;
}

/* ── Top lists (lojas / famílias) ────────────────────── */
.ad-tops[b-ylneg6cpbf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 600px) {
    .ad-tops[b-ylneg6cpbf] { grid-template-columns: 1fr; }
}

.ad-top-col[b-ylneg6cpbf] { display: flex; flex-direction: column; gap: 8px; }

.ad-top-title[b-ylneg6cpbf] {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ad-top-list[b-ylneg6cpbf] {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: top-rank;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ad-top-list li[b-ylneg6cpbf] {
    counter-increment: top-rank;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line, #E5E5E0);
}

.ad-top-list li[b-ylneg6cpbf]::before {
    content: counter(top-rank);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
    min-width: 18px;
}

.ad-top-name[b-ylneg6cpbf] {
    flex: 1;
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ad-top-meta[b-ylneg6cpbf] {
    font-size: 12px;
    color: var(--ink-2);
    white-space: nowrap;
}

/* ── Form/buttons ────────────────────────────────────── */
.ad-input[b-ylneg6cpbf] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ad-input:focus[b-ylneg6cpbf] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--ring);
}

.ad-btn[b-ylneg6cpbf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}

.ad-btn:disabled[b-ylneg6cpbf] { opacity: 0.6; cursor: not-allowed; }
.ad-btn-primary[b-ylneg6cpbf] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ad-btn-primary:hover:not(:disabled)[b-ylneg6cpbf] { background: var(--ink-hover); }

/* ── Roles ───────────────────────────────────────────── */
.ad-roles[b-ylneg6cpbf] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ad-role[b-ylneg6cpbf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12.5px;
}

.ad-role-name[b-ylneg6cpbf] {
    color: var(--ink);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ad-role-name i[b-ylneg6cpbf] { font-size: 12px; color: var(--ink-2); }

.ad-role-form[b-ylneg6cpbf] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.ad-icon-btn[b-ylneg6cpbf] {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--ink-3);
    border-radius: 999px;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    font-size: 11px;
    transition: all 120ms ease;
    padding: 0;
}

.ad-icon-btn:hover[b-ylneg6cpbf] { color: var(--ink); background: var(--surface-hover); }
.ad-icon-btn-danger:hover[b-ylneg6cpbf] { color: var(--neg); background: var(--neg-soft); }

/* Role pills (per user) */
.ad-role-toggles[b-ylneg6cpbf] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ad-role-pill[b-ylneg6cpbf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-3);
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}

.ad-role-pill:hover[b-ylneg6cpbf] { border-color: var(--ink-3); color: var(--ink); }
.ad-role-pill.is-on[b-ylneg6cpbf] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}

.ad-role-pill i[b-ylneg6cpbf] { font-size: 11px; }

/* ── Tables ──────────────────────────────────────────── */
.ad-table-wrap[b-ylneg6cpbf] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ad-table[b-ylneg6cpbf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ad-table thead th[b-ylneg6cpbf] {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-3);
    background: var(--line-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.ad-table tbody td[b-ylneg6cpbf] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink);
    vertical-align: middle;
}

.ad-table tbody tr:last-child td[b-ylneg6cpbf] { border-bottom: none; }
.ad-table tbody tr:hover[b-ylneg6cpbf] { background: var(--line-2); }

/* Stack para mostrar push + email lado a lado na coluna Notif. */
.ad-notif-stack[b-ylneg6cpbf] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* Push subscription badge na coluna Notif. da tabela de utilizadores */
.ad-push-badge[b-ylneg6cpbf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.ad-push-badge.is-on[b-ylneg6cpbf] {
    background: var(--pos-soft);
    border-color: rgba(21,128,61,.25);
    color: var(--pos);
}

.ad-push-badge i[b-ylneg6cpbf] { font-size: 11px; }

.ad-strong[b-ylneg6cpbf] { font-weight: 600; }
.ad-muted[b-ylneg6cpbf] { color: var(--ink-3); }
.ad-num[b-ylneg6cpbf] { text-align: right; }

/* ── Messages ────────────────────────────────────────── */
.ad-msg[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
    border: 1px solid var(--line);
    background: var(--line-2);
}

.ad-msg.is-bad[b-ylneg6cpbf] { background: var(--neg-soft); color: var(--neg); border-color: rgba(185,28,28,.2); }
.ad-msg.is-pos[b-ylneg6cpbf] { background: var(--pos-soft); color: var(--pos); border-color: rgba(21,128,61,.2); }

/* ── Maintenance row ─────────────────────────────────── */
.ad-maint-row[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    background: var(--line-2, #F5F5F2);
    border: 1px solid var(--line, #E5E5E0);
    border-radius: 10px;
}

.ad-maint-info[b-ylneg6cpbf] {
    flex: 1;
    min-width: 0;
}

.ad-maint-info strong[b-ylneg6cpbf] {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.ad-maint-info p[b-ylneg6cpbf] {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .ad-maint-row[b-ylneg6cpbf] { flex-direction: column; align-items: stretch; }
    .ad-maint-row .ad-btn[b-ylneg6cpbf] { width: 100%; justify-content: center; }
}

/* ── Card head clicável (para secções colapsáveis) ──── */
.ad-card-head-toggle[b-ylneg6cpbf] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background-color 120ms;
}
.ad-card-head-toggle:hover[b-ylneg6cpbf] {
    background: var(--line-2);
}
.ad-card-toggle-meta[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ad-card-chevron[b-ylneg6cpbf] {
    color: var(--ink-3);
    font-size: 12px;
    transition: transform 150ms ease;
}

/* ── Configuração de Planos ───────────────────────────
   Cards lado-a-lado, um por plano, com Pantry destacado. */
.ad-plans-intro[b-ylneg6cpbf] {
    margin: 0 0 16px;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
}
.ad-plans-grid[b-ylneg6cpbf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ad-plan-card[b-ylneg6cpbf] {
    border: 1px solid var(--line);
    border-radius: var(--r-md, 12px);
    background: var(--surface);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ad-plan-card.is-featured[b-ylneg6cpbf] {
    border-color: var(--color-accent, #C8852C);
    background: var(--surface-2);
    /* Subtil glow no canto superior para destacar — funciona bem em
       ambos os modos sem sobrecarregar visualmente. */
    box-shadow: 0 0 0 1px rgba(200, 133, 44, 0.15);
}
.ad-plan-card-head[b-ylneg6cpbf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.ad-plan-card-title[b-ylneg6cpbf] {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}
.ad-plan-card-meta[b-ylneg6cpbf] {
    font-size: 11px;
    color: var(--ink-3);
}
.ad-plan-section[b-ylneg6cpbf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ad-plan-section-title[b-ylneg6cpbf] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-3);
    margin: 0;
}
.ad-plan-section-hint[b-ylneg6cpbf] {
    font-size: 11.5px;
    color: var(--ink-3);
    margin: -4px 0 4px;
}
.ad-plan-field[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ad-plan-field label[b-ylneg6cpbf] {
    font-size: 13px;
    color: var(--ink-2);
    flex: 1;
    min-width: 0;
}
.ad-plan-field input[type="number"][b-ylneg6cpbf] {
    width: 110px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    text-align: right;
    background: var(--surface);
}
.ad-plan-field input[type="number"]:focus[b-ylneg6cpbf] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9, 9, 11, 0.06);
}
.ad-plan-toggle[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}
.ad-plan-toggle input[type="checkbox"][b-ylneg6cpbf] {
    width: 16px;
    height: 16px;
    accent-color: var(--ink);
    cursor: pointer;
}
.ad-plan-save[b-ylneg6cpbf] {
    width: 100%;
    justify-content: center;
}

/* ── Mensagens de suporte ─────────────────────────────── */
.ad-support-list[b-ylneg6cpbf] {
    display: flex;
    flex-direction: column;
}
.ad-support[b-ylneg6cpbf] {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    transition: background 120ms;
}
.ad-support:last-child[b-ylneg6cpbf] { border-bottom: none; }
.ad-support.is-unread[b-ylneg6cpbf] { background: var(--warn-soft); }
.ad-support.is-resolved[b-ylneg6cpbf] { opacity: 0.62; }

.ad-support-head[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background 120ms;
}
.ad-support-head:hover[b-ylneg6cpbf] { background: var(--line-2); }

.ad-support-head-main[b-ylneg6cpbf] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ad-support-subject[b-ylneg6cpbf] {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ad-support-dot[b-ylneg6cpbf] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warn, #92400E);
    flex-shrink: 0;
}
.ad-support-meta[b-ylneg6cpbf] {
    font-size: 11.5px;
    color: var(--ink-3);
}

.ad-support-head-status[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ad-support-tag[b-ylneg6cpbf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--line-2);
    color: var(--ink-3);
}
.ad-support-tag.is-warn[b-ylneg6cpbf] { background: var(--warn-soft, #FEF3C7); color: var(--warn, #92400E); }
.ad-support-tag.is-pos[b-ylneg6cpbf]  { background: var(--pos-soft, #DCFCE7); color: var(--pos, #15803D); }
.ad-support-tag i[b-ylneg6cpbf] { font-size: 9px; }

.ad-support-chevron[b-ylneg6cpbf] {
    color: var(--ink-3);
    font-size: 12px;
}

.ad-support-body[b-ylneg6cpbf] {
    padding: 4px 18px 18px;
    border-top: 1px dashed var(--line);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ad-support-meta-grid[b-ylneg6cpbf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 16px;
    padding: 12px 0 0;
}
.ad-support-meta-grid > div[b-ylneg6cpbf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ad-support-meta-label[b-ylneg6cpbf] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--ink-3);
}
.ad-support-meta-value[b-ylneg6cpbf] {
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
}
a.ad-support-meta-value:hover[b-ylneg6cpbf] {
    text-decoration: underline;
}

.ad-support-pill[b-ylneg6cpbf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.ad-support-pill.is-pos[b-ylneg6cpbf] { background: var(--pos-soft, #DCFCE7); color: var(--pos, #15803D); }
.ad-support-pill.is-bad[b-ylneg6cpbf] { background: var(--neg-soft, #FEE2E2); color: var(--neg, #B91C1C); }

.ad-support-text[b-ylneg6cpbf] {
    background: var(--line-2);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

.ad-support-actions[b-ylneg6cpbf] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════
   Resposta in-app (substitui o antigo mailto:).

   Dois blocos:
   • .ad-support-reply        — painel de composição (textarea + send)
   • .ad-support-reply-shown  — resposta já enviada, read-only
   ══════════════════════════════════════════════ */
.ad-support-reply[b-ylneg6cpbf] {
    margin: 12px 0;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ad-support-reply-head[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
}
.ad-support-reply-head i[b-ylneg6cpbf] { color: var(--ink); }
.ad-support-reply-head strong[b-ylneg6cpbf] { color: var(--ink); }
.ad-support-reply-template[b-ylneg6cpbf] {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--ink-3);
    padding: 2px 8px;
    background: var(--line-2);
    border-radius: 999px;
}

.ad-support-reply-textarea[b-ylneg6cpbf] {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.55;
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    resize: vertical;
    min-height: 120px;
}
.ad-support-reply-textarea:focus[b-ylneg6cpbf] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--ring);
}
.ad-support-reply-textarea:disabled[b-ylneg6cpbf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ad-support-reply-error[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--neg-soft);
    color: var(--neg);
    border-radius: 6px;
    font-size: 13px;
}

.ad-support-reply-foot[b-ylneg6cpbf] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Resposta já enviada — preview read-only abaixo da mensagem original. */
.ad-support-reply-shown[b-ylneg6cpbf] {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--pos-soft, rgba(34,197,94,0.08));
    border: 1px solid var(--pos, rgba(34,197,94,0.25));
    border-left-width: 3px;
    border-radius: 8px;
}

.ad-support-reply-shown-head[b-ylneg6cpbf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pos, #15803D);
    margin-bottom: 8px;
}
.ad-support-reply-shown-when[b-ylneg6cpbf] {
    color: var(--ink-3);
    font-weight: 400;
}

.ad-support-reply-shown-body[b-ylneg6cpbf] {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Linhas clicáveis (drill-down) ─────────────────────
   A linha inteira é clicável; toggles dentro usam
   stopPropagation. Ícone de zoom aparece só em hover. */
.ad-row-clickable[b-ylneg6cpbf] { cursor: pointer; transition: background 120ms; }
.ad-row-clickable:hover[b-ylneg6cpbf] { background: var(--line-2); }
.ad-row-clickable .ad-row-hint[b-ylneg6cpbf] {
    color: var(--ink-3);
    margin-right: 4px;
    font-size: 11px;
    opacity: 0;
    transition: opacity 120ms;
}
.ad-row-clickable:hover .ad-row-hint[b-ylneg6cpbf] { opacity: 1; }
.ad-cell-name[b-ylneg6cpbf] { white-space: nowrap; }

/* ── Modal de detalhe ────────────────────────────────── */
.ad-modal-backdrop[b-ylneg6cpbf] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
.ad-modal[b-ylneg6cpbf] {
    background: var(--surface);
    border-radius: 14px;
    width: 100%;
    max-width: 960px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
    overflow: hidden;
}
.ad-modal-head[b-ylneg6cpbf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.ad-modal-kicker[b-ylneg6cpbf] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: var(--ink-3);
    margin: 0 0 4px;
}
.ad-modal-title[b-ylneg6cpbf] {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.3px;
}
.ad-modal-body[b-ylneg6cpbf] {
    padding: 20px 24px 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Modal: secções de detalhe da família ───────────── */
.ad-fd-summary[b-ylneg6cpbf] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ad-fd-section[b-ylneg6cpbf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ad-fd-section-title[b-ylneg6cpbf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0;
}
.ad-fd-health-grid[b-ylneg6cpbf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.ad-fd-health[b-ylneg6cpbf] {
    background: var(--line-2);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ad-fd-health-label[b-ylneg6cpbf] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    color: var(--ink-3);
}
.ad-fd-health-value[b-ylneg6cpbf] {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.3px;
}
.ad-fd-health-sub[b-ylneg6cpbf] {
    font-size: 11.5px;
    color: var(--ink-3);
}
.ad-fd-health-warn[b-ylneg6cpbf] {
    color: var(--warn, #92400E);
    font-weight: 600;
}
.ad-fd-table[b-ylneg6cpbf] { min-width: 0; }

/* Detalhe da subscrição (modal família) — cartão de pares chave/valor */
.ad-fd-sub[b-ylneg6cpbf] {
    background: var(--line-2);
    border-radius: 10px;
    padding: 2px 14px;
}
.ad-fd-sub-row[b-ylneg6cpbf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
}
.ad-fd-sub-row:last-child[b-ylneg6cpbf] {
    border-bottom: none;
}
.ad-fd-sub-k[b-ylneg6cpbf] {
    color: var(--ink-3);
    white-space: nowrap;
}
.ad-fd-sub-v[b-ylneg6cpbf] {
    color: var(--ink);
    font-weight: 500;
    text-align: right;
}
.ad-fd-sub-v.is-warn[b-ylneg6cpbf] {
    color: var(--warn, #92400E);
    font-weight: 600;
}
.ad-fd-sub-v.mono[b-ylneg6cpbf] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 500;
    word-break: break-all;
    text-align: right;
}

/* Pill de plano na tabela de famílias */
.ad-plan-pill[b-ylneg6cpbf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: var(--line-2);
    color: var(--ink-3);
}
.ad-plan-pill.is-pro[b-ylneg6cpbf] {
    background: var(--color-accent, #C8852C);
    color: var(--on-ink);
}
.ad-plan-pill.is-bad[b-ylneg6cpbf] {
    background: var(--neg-soft, #FEE2E2);
    color: var(--neg, #B91C1C);
}
.ad-plan-pill i[b-ylneg6cpbf] { font-size: 10px; color: inherit; }

/* Acções por membro (botões reset password / forçar logout) */
.ad-fd-actions[b-ylneg6cpbf] {
    white-space: nowrap;
    display: flex;
    gap: 4px;
}
.ad-fd-actions .ad-icon-btn[b-ylneg6cpbf] {
    padding: 4px 8px;
    font-size: 13px;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .ad-hero[b-ylneg6cpbf] { grid-template-columns: repeat(2, 1fr); }
    .ad-table[b-ylneg6cpbf] { min-width: 640px; }
    .ad-support-head[b-ylneg6cpbf] { padding: 10px 14px; }
    .ad-support-body[b-ylneg6cpbf] { padding: 4px 14px 14px; }
    .ad-support-meta[b-ylneg6cpbf] { font-size: 11px; }
    .ad-support-tag[b-ylneg6cpbf] { font-size: 10px; padding: 2px 6px; }

    .ad-modal-backdrop[b-ylneg6cpbf] { padding: 16px 8px; }
    .ad-modal[b-ylneg6cpbf] { max-height: calc(100vh - 32px); }
    .ad-modal-head[b-ylneg6cpbf] { padding: 16px 18px; }
    .ad-modal-title[b-ylneg6cpbf] { font-size: 18px; }
    .ad-modal-body[b-ylneg6cpbf] { padding: 16px 18px 22px; gap: 18px; }
    .ad-fd-table[b-ylneg6cpbf] { min-width: 480px; }

    .ad-plans-grid[b-ylneg6cpbf] { grid-template-columns: 1fr; gap: 12px; }
    .ad-plan-card[b-ylneg6cpbf] { padding: 14px 16px; }

    /* Tabela de scans com scroll horizontal em mobile — preserva
       legibilidade sem espremer colunas. */
    .ad-scans-table[b-ylneg6cpbf] { min-width: 720px; }
    .ad-scans-kpis[b-ylneg6cpbf] { grid-template-columns: 1fr 1fr; }
}

/* ── Análise de Scans IA ───────────────────────────────
   KPIs no topo + tabela por família. Estilo consistente com
   o resto do painel admin (tiles, segmented control, table). */
.ad-scans-period[b-ylneg6cpbf] {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.ad-seg[b-ylneg6cpbf] {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms;
}
.ad-seg:hover[b-ylneg6cpbf] { border-color: var(--ink-3); color: var(--ink); }
.ad-seg.is-active[b-ylneg6cpbf] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.ad-scans-kpis[b-ylneg6cpbf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}
.ad-scans-kpis .ad-tile[b-ylneg6cpbf] {
    border: 1px solid var(--line);
    border-radius: var(--r-md, 12px);
}
.ad-tile-value-sm[b-ylneg6cpbf] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}
.ad-tile-foot[b-ylneg6cpbf] {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
}
.ad-scans-table-wrap[b-ylneg6cpbf] {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md, 12px);
}
.ad-scans-table[b-ylneg6cpbf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ad-scans-table th[b-ylneg6cpbf],
.ad-scans-table td[b-ylneg6cpbf] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}
.ad-scans-table th[b-ylneg6cpbf] {
    font-weight: 600;
    color: var(--ink-2);
    background: var(--line-2, #f8f9fa);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.ad-scans-table tbody tr:last-child td[b-ylneg6cpbf] { border-bottom: none; }
.ad-scans-table tbody tr:hover[b-ylneg6cpbf] { background: var(--line-2, #f8f9fa); }
.ad-scans-table .text-end[b-ylneg6cpbf] { text-align: right; }
.ad-scans-plan[b-ylneg6cpbf] {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--line-2, #f1f3f5);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.ad-scans-plan.is-pantry[b-ylneg6cpbf] {
    background: var(--warn-soft);
    color: var(--color-accent, #C8852C);
}
/* /Components/Pages/AdminClusters.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Admin clusters — alinhado com AdminPriceReports / AdminNotifications.
   Blazor scoped CSS isola cada componente, por isso replicamos as
   bases (.ad-shell, .ad-tile, .ad-card) em vez de herdar de Admin.razor.css.
   ───────────────────────────────────────────────────────── */

.ad-shell[b-5qzkrl27xe] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    color: var(--ink);
}

.ad-shell .num[b-5qzkrl27xe] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.ad-header[b-5qzkrl27xe] { margin-bottom: 0; }
.ad-h1[b-5qzkrl27xe] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
}
.ad-h1-sub[b-5qzkrl27xe] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

.ad-empty[b-5qzkrl27xe] {
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
    padding: 32px 0;
    margin: 0;
}

/* ── Hero stats (5 tiles em desktop, 2 em mobile) ─────── */
.ad-hero[b-5qzkrl27xe] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ad-tile[b-5qzkrl27xe] {
    background: var(--surface);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 90px;
}

.ad-tile-label[b-5qzkrl27xe] {
    font-size: 11px;
    color: var(--ink-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.ad-tile-value[b-5qzkrl27xe] {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.7px;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ad-tile-sub[b-5qzkrl27xe] {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 4px;
    line-height: 1.4;
}

/* ── Cards genéricos (igual a AdminPriceReports) ─────── */
.ad-card[b-5qzkrl27xe] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ad-card-head[b-5qzkrl27xe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.ad-card-title[b-5qzkrl27xe] { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.ad-card-sub[b-5qzkrl27xe] { color: var(--ink-2); font-size: 12.5px; margin: 0; }
.ad-card-body[b-5qzkrl27xe] { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

/* ── Input genérico ──────────────────────────────────── */
.ad-input[b-5qzkrl27xe] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ad-input[b-5qzkrl27xe]::placeholder { color: var(--ink-3); }
.ad-input:hover[b-5qzkrl27xe] { border-color: var(--ink-3); }
.ad-input:focus[b-5qzkrl27xe] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.08);
}

/* ══════════════════════════════════════════════════════════
   EXPLAINER — banner "Como funciona", collapsible
   Estilo igual ao ad-renorm-hero do AdminPriceReports:
   ícone à esquerda, texto no meio, sem botão.
   ══════════════════════════════════════════════════════════ */
.cl-explainer[b-5qzkrl27xe] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.cl-explainer > summary[b-5qzkrl27xe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
}
.cl-explainer > summary[b-5qzkrl27xe]::-webkit-details-marker { display: none; }
.cl-explainer > summary[b-5qzkrl27xe]::marker { content: ''; }
.cl-explainer > summary:hover[b-5qzkrl27xe] { background: var(--line-2); }
.cl-explainer-icon[b-5qzkrl27xe] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--line-2);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-2);
    flex-shrink: 0;
    font-size: 14px;
}
.cl-explainer-title[b-5qzkrl27xe] { flex: 1; font-weight: 600; }
.cl-explainer-toggle[b-5qzkrl27xe] { color: var(--ink-3); font-size: 12px; }

.cl-explainer-body[b-5qzkrl27xe] {
    border-top: 1px solid var(--line);
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cl-step[b-5qzkrl27xe] {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    align-items: flex-start;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.55;
}
.cl-step:last-of-type[b-5qzkrl27xe] { border-bottom: none; }
.cl-step-num[b-5qzkrl27xe] {
    width: 26px; height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ink);
    color: var(--surface);
    font-weight: 700;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}
.cl-step code[b-5qzkrl27xe] {
    background: var(--line-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cl-step ul[b-5qzkrl27xe] { margin: 6px 0 0; padding-left: 20px; }
.cl-step li[b-5qzkrl27xe] { margin-bottom: 2px; }

.cl-callout[b-5qzkrl27xe] {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--line-2);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--ink);
    line-height: 1.55;
}
.cl-callout strong[b-5qzkrl27xe] { color: var(--ink); }
.cl-callout ul[b-5qzkrl27xe] { margin: 8px 0 0; padding-left: 20px; }
.cl-callout li[b-5qzkrl27xe] { margin-bottom: 4px; }

/* ══════════════════════════════════════════════════════════
   WARNINGS / ALERTS — alinhados com a paleta admin
   ══════════════════════════════════════════════════════════ */
.cl-warning[b-5qzkrl27xe] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
}
.cl-warning .bi[b-5qzkrl27xe] { color: #B45309; margin-top: 2px; flex-shrink: 0; }
.cl-warning strong[b-5qzkrl27xe] { color: var(--ink); }

.cl-alert[b-5qzkrl27xe] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.5;
}
.cl-alert-ok[b-5qzkrl27xe] {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.3);
    color: var(--ink);
}
.cl-alert-ok .bi[b-5qzkrl27xe] { color: #16a34a; flex-shrink: 0; margin-top: 2px; }
.cl-alert-error[b-5qzkrl27xe] {
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.3);
    color: var(--ink);
}
.cl-alert-error .bi[b-5qzkrl27xe] { color: #dc2626; flex-shrink: 0; margin-top: 2px; }

/* ══════════════════════════════════════════════════════════
   ACTIONS — botões + hint inline
   Inspirado no .ad-renorm-btn do AdminPriceReports
   ══════════════════════════════════════════════════════════ */
.cl-actions[b-5qzkrl27xe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cl-actions-row[b-5qzkrl27xe] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cl-action[b-5qzkrl27xe] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 240px;
    min-width: 0;
}
.cl-action-hint[b-5qzkrl27xe] {
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.5;
}

.cl-btn[b-5qzkrl27xe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}
.cl-btn:hover:not(:disabled)[b-5qzkrl27xe] { background: var(--line-2); border-color: var(--ink-3); }
.cl-btn:disabled[b-5qzkrl27xe] { opacity: 0.55; cursor: not-allowed; }

.cl-btn-primary[b-5qzkrl27xe] {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}
.cl-btn-primary:hover:not(:disabled)[b-5qzkrl27xe] { background: #18181b; border-color: #18181b; }

.cl-btn-secondary[b-5qzkrl27xe] {
    background: var(--surface);
    color: var(--ink);
}

.cl-spinner[b-5qzkrl27xe] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cl-spin-b-5qzkrl27xe 0.7s linear infinite;
}
@keyframes cl-spin-b-5qzkrl27xe { to { transform: rotate(360deg); } }

/* ── Filtros (search + dropdown na mesma linha) ──────── */
.cl-filters[b-5qzkrl27xe] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.cl-field[b-5qzkrl27xe] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cl-field-label[b-5qzkrl27xe] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cl-search[b-5qzkrl27xe] { flex: 1 1 280px; }
.cl-select[b-5qzkrl27xe] { flex: 0 0 220px; }

/* ══════════════════════════════════════════════════════════
   CLUSTER LIST — rows expandíveis dentro de um card único
   Mais limpo que cards flutuantes individuais (alinha com
   tom monocromático das outras admin pages).
   ══════════════════════════════════════════════════════════ */
.cl-list[b-5qzkrl27xe] {
    display: flex;
    flex-direction: column;
}

.cl-row[b-5qzkrl27xe] {
    border-bottom: 1px solid var(--line);
}
.cl-row:last-child[b-5qzkrl27xe] { border-bottom: none; }
.cl-row.is-expanded[b-5qzkrl27xe] { background: var(--line-2); }

.cl-row-head[b-5qzkrl27xe] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
}
.cl-row-head:hover[b-5qzkrl27xe] { background: var(--line-2); }

.cl-row-marker[b-5qzkrl27xe] {
    width: 3px;
    height: 28px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--line);
}
.cl-row-marker.is-cross[b-5qzkrl27xe] { background: var(--ink); }
.cl-row-marker.is-multi[b-5qzkrl27xe] { background: var(--ink-3); }

.cl-row-main[b-5qzkrl27xe] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-row-title-line[b-5qzkrl27xe] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-row-title[b-5qzkrl27xe] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.cl-row-meta[b-5qzkrl27xe] {
    font-size: 11.5px;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.cl-row-meta strong[b-5qzkrl27xe] { color: var(--ink-2); font-weight: 600; }
.cl-row-meta-sep[b-5qzkrl27xe] { color: var(--ink-3); }

.cl-row-chev[b-5qzkrl27xe] {
    color: var(--ink-3);
    flex-shrink: 0;
    font-size: 13px;
}

/* Badges no row title */
.cl-badge[b-5qzkrl27xe] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
    white-space: nowrap;
}
.cl-badge-singleton[b-5qzkrl27xe] {
    color: var(--ink-3);
    background: var(--surface);
    border: 1px solid var(--line);
}
.cl-badge-multi[b-5qzkrl27xe] {
    color: var(--ink-2);
    background: var(--line-2);
    border: 1px solid var(--line);
}
.cl-badge-cross[b-5qzkrl27xe] {
    color: var(--surface);
    background: var(--ink);
    border: 1px solid var(--ink);
}

/* Body expandido */
.cl-row-body[b-5qzkrl27xe] {
    padding: 4px 20px 16px;
}
.cl-explanation[b-5qzkrl27xe] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.55;
    margin-bottom: 12px;
}
.cl-explanation .bi[b-5qzkrl27xe] { color: var(--ink-3); margin-top: 1px; flex-shrink: 0; }
.cl-explanation strong[b-5qzkrl27xe] { color: var(--ink); font-weight: 600; }
.cl-explanation code[b-5qzkrl27xe] {
    background: var(--line-2);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Tabela dentro do cluster expandido */
.cl-variant-table[b-5qzkrl27xe] {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
    overflow: hidden;
}
.cl-variant-table thead th[b-5qzkrl27xe] {
    text-align: left;
    padding: 8px 12px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-3);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.cl-variant-table tbody td[b-5qzkrl27xe] {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink);
    vertical-align: middle;
    background: var(--surface);
}
.cl-variant-table tbody tr:last-child td[b-5qzkrl27xe] { border-bottom: none; }
.cl-variant-table .num[b-5qzkrl27xe] { text-align: right; font-variant-numeric: tabular-nums; }
.cl-variant-table code[b-5qzkrl27xe] {
    background: var(--line-2);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ink);
}
.cl-dim[b-5qzkrl27xe] { color: var(--ink-3); font-size: 11px; margin-left: 4px; }

/* ── Possíveis duplicados (revisão humana) ───────────── */
.cl-cand-intro[b-5qzkrl27xe] {
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0 0 14px;
}
.cl-cand-intro strong[b-5qzkrl27xe] { color: var(--ink); font-weight: 600; }
.cl-cand-intro em[b-5qzkrl27xe] { font-style: italic; color: var(--ink); }

.cl-cand-list[b-5qzkrl27xe] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cl-cand[b-5qzkrl27xe] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

/* Etiqueta de score — pill com a % de cosine, tintada por confiança */
.cl-cand-score[b-5qzkrl27xe] {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--line);
    color: var(--ink-2);
    background: var(--line-2);
}
.cl-cand-score.is-high[b-5qzkrl27xe] { border-color: rgba(34,197,94,0.35); color: #15803d; background: rgba(34,197,94,0.12); }
.cl-cand-score.is-mid[b-5qzkrl27xe]  { border-color: rgba(245,158,11,0.35); color: #b45309; background: rgba(245,158,11,0.12); }
.cl-cand-score.is-low[b-5qzkrl27xe]  { border-color: var(--line); color: var(--ink-3); background: var(--line-2); }

.cl-cand-pair[b-5qzkrl27xe] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cl-cand-side[b-5qzkrl27xe] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-cand-name[b-5qzkrl27xe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cl-cand-meta[b-5qzkrl27xe] { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cl-cand-arrow[b-5qzkrl27xe] { color: var(--ink-3); font-size: 14px; flex-shrink: 0; }

.cl-cand-actions[b-5qzkrl27xe] { display: flex; gap: 8px; flex-shrink: 0; }
.cl-cand-btn[b-5qzkrl27xe] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--line);
    white-space: nowrap;
    transition: background .12s, border-color .12s;
}
.cl-cand-btn:disabled[b-5qzkrl27xe] { opacity: 0.55; cursor: not-allowed; }
.cl-cand-merge[b-5qzkrl27xe] {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}
.cl-cand-merge:hover:not(:disabled)[b-5qzkrl27xe] { background: #18181b; border-color: #18181b; }
.cl-cand-reject[b-5qzkrl27xe] {
    background: var(--surface);
    color: var(--ink-2);
}
.cl-cand-reject:hover:not(:disabled)[b-5qzkrl27xe] { background: var(--line-2); border-color: var(--ink-3); }

/* ── Pares escondidos (desfazer rejeições) ───────────── */
.cl-rejected[b-5qzkrl27xe] {
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
}
.cl-rejected > summary[b-5qzkrl27xe] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    font-size: 12.5px;
    color: var(--ink-2);
}
.cl-rejected > summary[b-5qzkrl27xe]::-webkit-details-marker { display: none; }
.cl-rejected > summary[b-5qzkrl27xe]::marker { content: ''; }
.cl-rejected > summary:hover[b-5qzkrl27xe] { background: var(--line-2); }
.cl-rejected > summary .bi[b-5qzkrl27xe] { color: var(--ink-3); flex-shrink: 0; }
.cl-rejected-title[b-5qzkrl27xe] { font-weight: 600; color: var(--ink); }
.cl-rejected-hint[b-5qzkrl27xe] { color: var(--ink-3); font-size: 11.5px; margin-left: auto; text-align: right; }

.cl-rejected-list[b-5qzkrl27xe] {
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}
.cl-rejected-row[b-5qzkrl27xe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-2);
}
.cl-rejected-row:last-child[b-5qzkrl27xe] { border-bottom: none; }
.cl-rejected-pair[b-5qzkrl27xe] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cl-rejected-name[b-5qzkrl27xe] {
    font-size: 12.5px;
    color: var(--ink);
    font-weight: 500;
}
.cl-rejected-x[b-5qzkrl27xe] { color: var(--ink-3); font-size: 12px; flex-shrink: 0; }
.cl-rejected-restore[b-5qzkrl27xe] {
    flex-shrink: 0;
    background: var(--surface);
    color: var(--ink-2);
}
.cl-rejected-restore:hover:not(:disabled)[b-5qzkrl27xe] { background: var(--line-2); border-color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════
   FUSÃO MANUAL — toggle no header + bandeja + pick nas rows
   ══════════════════════════════════════════════════════════ */
.cl-head-right[b-5qzkrl27xe] { display: flex; align-items: center; gap: 12px; }

.cl-merge-toggle[b-5qzkrl27xe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.cl-merge-toggle:hover[b-5qzkrl27xe] { background: var(--line-2); border-color: var(--ink-3); }
.cl-merge-toggle.is-on[b-5qzkrl27xe] {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}

.cl-merge-tray[b-5qzkrl27xe] {
    margin-top: 14px;
    padding: 14px;
    border: 1px dashed var(--ink-3);
    border-radius: var(--r-sm);
    background: var(--line-2);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cl-merge-tray-intro[b-5qzkrl27xe] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.55;
}
.cl-merge-tray-intro .bi[b-5qzkrl27xe] { color: var(--ink-2); margin-top: 2px; flex-shrink: 0; }
.cl-merge-tray-intro strong[b-5qzkrl27xe] { color: var(--ink); font-weight: 600; }

.cl-merge-empty[b-5qzkrl27xe] {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-3);
    text-align: center;
    padding: 8px 0;
}

.cl-merge-preview[b-5qzkrl27xe] {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.cl-merge-slot[b-5qzkrl27xe] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
}
.cl-merge-slot.is-target[b-5qzkrl27xe] { border-color: var(--ink); }
.cl-merge-slot.is-source[b-5qzkrl27xe] { opacity: 0.85; }
.cl-merge-slot-label[b-5qzkrl27xe] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cl-merge-slot.is-target .cl-merge-slot-label[b-5qzkrl27xe] { color: var(--ink); }
.cl-merge-slot-name[b-5qzkrl27xe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cl-merge-slot-meta[b-5qzkrl27xe] { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.cl-merge-swap[b-5qzkrl27xe] {
    flex-shrink: 0;
    align-self: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s;
}
.cl-merge-swap:hover[b-5qzkrl27xe] { background: var(--line-2); border-color: var(--ink-3); }

.cl-merge-actions[b-5qzkrl27xe] { display: flex; gap: 8px; }

/* Pick (checkbox) à esquerda de cada row em modo de fusão */
.cl-row-top[b-5qzkrl27xe] { display: flex; align-items: stretch; }
.cl-row-top .cl-row-head[b-5qzkrl27xe] { flex: 1; width: auto; }
.cl-row-pick[b-5qzkrl27xe] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border: none;
    border-right: 1px solid var(--line);
    background: transparent;
    color: var(--ink-3);
    font-size: 16px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.cl-row-pick:hover[b-5qzkrl27xe] { background: var(--line-2); color: var(--ink-2); }
.cl-row-pick.is-checked[b-5qzkrl27xe] { color: var(--ink); }
.cl-row.is-picked[b-5qzkrl27xe] { background: var(--line-2); box-shadow: inset 3px 0 0 var(--ink); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
    .ad-hero[b-5qzkrl27xe] { grid-template-columns: repeat(2, 1fr); }
    .cl-select[b-5qzkrl27xe] { flex-basis: 100%; }
    .cl-search[b-5qzkrl27xe] { flex-basis: 100%; }
}
@media (max-width: 560px) {
    .ad-card-body[b-5qzkrl27xe] { padding: 14px 16px; }
    .cl-row-head[b-5qzkrl27xe] { padding: 12px 14px; }
    .cl-row-body[b-5qzkrl27xe] { padding: 4px 14px 14px; }

    /* Candidato empilha: par em cima, score + acções por baixo */
    .cl-cand[b-5qzkrl27xe] { flex-wrap: wrap; }
    .cl-cand-pair[b-5qzkrl27xe] { flex-basis: 100%; order: 1; }
    .cl-cand-score[b-5qzkrl27xe] { order: 2; align-self: flex-start; }
    .cl-cand-actions[b-5qzkrl27xe] { order: 3; margin-left: auto; }

    /* Header do card empilha o sub + o toggle */
    .cl-head-right[b-5qzkrl27xe] { flex-direction: column; align-items: flex-end; gap: 6px; }

    /* Bandeja de fusão empilha os dois slots, swap roda 90° */
    .cl-merge-preview[b-5qzkrl27xe] { flex-direction: column; }
    .cl-merge-swap[b-5qzkrl27xe] { transform: rotate(90deg); }

    .cl-rejected-hint[b-5qzkrl27xe] { display: none; }
}
/* /Components/Pages/AdminNotifications.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Admin notifications — sophisticated monochrome.
   Auto-contido: declara aqui as classes .ad-* que precisamos
   (Blazor scoped CSS isola cada componente — não herdam de
   Admin.razor.css). Mantém o mesmo look & feel.
   ───────────────────────────────────────────────────────── */

.ad-shell[b-p3tw5aednu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.ad-shell .num[b-p3tw5aednu] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Header ──────────────────────────────────────────── */
.ad-header[b-p3tw5aednu] { margin-bottom: 0; }
.ad-h1[b-p3tw5aednu] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
}
.ad-h1-sub[b-p3tw5aednu] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

.ad-empty[b-p3tw5aednu] {
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
    padding: 32px 0;
    margin: 0;
}

/* ── Card ────────────────────────────────────────────── */
.ad-card[b-p3tw5aednu] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ad-card-head[b-p3tw5aednu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.ad-card-title[b-p3tw5aednu] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.ad-card-sub[b-p3tw5aednu] {
    color: var(--ink-2);
    font-size: 12.5px;
    margin: 4px 0 0;
}

.ad-card-body[b-p3tw5aednu] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Form grid ──────────────────────────────────────────── */
.ad-form-grid[b-p3tw5aednu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.ad-field[b-p3tw5aednu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ad-field-full[b-p3tw5aednu] { grid-column: 1 / -1; }

.ad-field label[b-p3tw5aednu] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ── Input / textarea ───────────────────────────────────── */
.ad-input[b-p3tw5aednu] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ad-input[b-p3tw5aednu]::placeholder { color: var(--ink-3); }
.ad-input:hover[b-p3tw5aednu] { border-color: var(--ink-3); }
.ad-input:focus[b-p3tw5aednu] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.08);
}

.ad-textarea[b-p3tw5aednu] {
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
    line-height: 1.45;
}

/* ── Buttons ────────────────────────────────────────────── */
.ad-form-actions[b-p3tw5aednu] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.ad-btn[b-p3tw5aednu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}

.ad-btn:disabled[b-p3tw5aednu] { opacity: 0.6; cursor: not-allowed; }

.ad-btn-primary[b-p3tw5aednu] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ad-btn-primary:hover:not(:disabled)[b-p3tw5aednu] { background: var(--ink-hover); }

.ad-btn-secondary[b-p3tw5aednu] { background: var(--surface); color: var(--ink); border-color: var(--line); }
.ad-btn-secondary:hover:not(:disabled)[b-p3tw5aednu] { background: var(--line-2); border-color: var(--ink-3); }

/* ── Pills ──────────────────────────────────────────────── */
.ad-pill[b-p3tw5aednu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.ad-pill.is-bad[b-p3tw5aednu] {
    background: var(--neg-soft);
    border-color: rgba(185,28,28,.25);
    color: var(--neg);
}

.ad-pill.is-good[b-p3tw5aednu] {
    background: var(--pos-soft);
    border-color: rgba(21,128,61,.25);
    color: var(--pos);
}

/* ── Hint / feedback ────────────────────────────────────── */
.ad-hint[b-p3tw5aednu] {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ad-hint.is-success[b-p3tw5aednu] {
    color: var(--pos);
}

/* ── Spinner ────────────────────────────────────────────── */
.ad-spinner[b-p3tw5aednu] {
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: an-spin-b-p3tw5aednu 0.6s linear infinite;
    display: inline-block;
}

@keyframes an-spin-b-p3tw5aednu { to { transform: rotate(360deg); } }

/* ── Tables ─────────────────────────────────────────────── */
.ad-table-wrap[b-p3tw5aednu] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.ad-table[b-p3tw5aednu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ad-table thead th[b-p3tw5aednu] {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-3);
    background: var(--line-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.ad-table tbody td[b-p3tw5aednu] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink);
    vertical-align: middle;
}

.ad-table tbody tr:last-child td[b-p3tw5aednu] { border-bottom: none; }
.ad-table tbody tr:hover[b-p3tw5aednu] { background: var(--line-2); }

.ad-muted[b-p3tw5aednu] { color: var(--ink-3); }
.text-end[b-p3tw5aednu] { text-align: right; }

/* ── Responsive ─────────────────────────────────────────── */
/* Canais (push / email) — pílulas que mostram seleccionado/não. */
.ad-channels[b-p3tw5aednu] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.ad-channels-label[b-p3tw5aednu] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 4px;
}
.ad-channel-toggle[b-p3tw5aednu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    user-select: none;
}
.ad-channel-toggle input[b-p3tw5aednu] { display: none; }
.ad-channel-toggle:hover[b-p3tw5aednu] { border-color: var(--ink-3); color: var(--ink); }
.ad-channel-toggle.is-on[b-p3tw5aednu] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.ad-channel-toggle i[b-p3tw5aednu] { font-size: 11px; }

/* Badge de canal na tabela do histórico */
.ad-channel-badge[b-p3tw5aednu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--line-2);
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
}
.ad-channel-badge i[b-p3tw5aednu] { font-size: 10px; }

@media (max-width: 700px) {
    .ad-form-grid[b-p3tw5aednu] { grid-template-columns: 1fr; }
    .ad-form-actions .ad-btn[b-p3tw5aednu] { flex: 1; justify-content: center; }
    .ad-table[b-p3tw5aednu] { min-width: 700px; }
}
/* /Components/Pages/AdminPriceReports.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Admin price reports — replica do CSS de AdminNotifications
   (Blazor scoped CSS isola cada componente — não herdam de
   Admin.razor.css). Mantém o look monocromático coerente.
   ───────────────────────────────────────────────────────── */

.ad-shell[b-47lmpchfyw] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.ad-shell .num[b-47lmpchfyw] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.ad-header[b-47lmpchfyw] { margin-bottom: 0; }
.ad-h1[b-47lmpchfyw] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
}
.ad-h1-sub[b-47lmpchfyw] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

.ad-empty[b-47lmpchfyw] {
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
    padding: 32px 0;
    margin: 0;
}

/* ── Hero stats ──────────────────────────────────────── */
.ad-hero[b-47lmpchfyw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ad-tile[b-47lmpchfyw] {
    background: var(--surface);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 90px;
}

.ad-tile-label[b-47lmpchfyw] { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.ad-tile-value[b-47lmpchfyw] {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.7px;
    color: var(--ink);
    line-height: 1.1;
}

/* ── Card ────────────────────────────────────────────── */
.ad-card[b-47lmpchfyw] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.ad-card-head[b-47lmpchfyw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.ad-card-title[b-47lmpchfyw] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.ad-card-sub[b-47lmpchfyw] {
    color: var(--ink-2);
    font-size: 12.5px;
    margin: 4px 0 0;
}

.ad-card-body[b-47lmpchfyw] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Form ────────────────────────────────────────────── */
.ad-form-grid[b-47lmpchfyw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.ad-field[b-47lmpchfyw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ad-field label[b-47lmpchfyw] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ad-input[b-47lmpchfyw] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ad-input[b-47lmpchfyw]::placeholder { color: var(--ink-3); }
.ad-input:hover[b-47lmpchfyw] { border-color: var(--ink-3); }
.ad-input:focus[b-47lmpchfyw] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.08);
}

/* ── Tables ─────────────────────────────────────────── */
.ad-table-wrap[b-47lmpchfyw] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.ad-table[b-47lmpchfyw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ad-table thead th[b-47lmpchfyw] {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-3);
    background: var(--line-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.ad-table tbody td[b-47lmpchfyw] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--line-2);
    color: var(--ink);
    vertical-align: middle;
}

.ad-table tbody tr:last-child td[b-47lmpchfyw] { border-bottom: none; }
.ad-table tbody tr:hover[b-47lmpchfyw] { background: var(--line-2); }

.ad-muted[b-47lmpchfyw] { color: var(--ink-3); }
.text-end[b-47lmpchfyw] { text-align: right; }

@media (max-width: 700px) {
    .ad-hero[b-47lmpchfyw] { grid-template-columns: 1fr 1fr; }
    .ad-form-grid[b-47lmpchfyw] { grid-template-columns: 1fr; }
    .ad-table[b-47lmpchfyw] { min-width: 700px; }
}

/* ══════════════════════════════════════════════════════════
   RENORMALIZE — manutenção visual mais cuidada
   Hero compacto com ícone + descrição + botão de acção.
   Result detalhado com stat cards + samples table.
   ══════════════════════════════════════════════════════════ */
.ad-renorm-card[b-47lmpchfyw] {
    border: 1px solid var(--line);
}

.ad-renorm-hero[b-47lmpchfyw] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ad-renorm-icon[b-47lmpchfyw] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--ink);
    color: var(--on-ink);
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 22px;
}

.ad-renorm-text[b-47lmpchfyw] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ad-renorm-title[b-47lmpchfyw] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.ad-renorm-sub[b-47lmpchfyw] {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
}
.ad-renorm-sub em[b-47lmpchfyw] {
    font-style: normal;
    font-family: monospace;
    background: var(--line-2);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
}
.ad-renorm-sub strong[b-47lmpchfyw] {
    color: var(--ink);
    font-weight: 600;
}

.ad-renorm-btn[b-47lmpchfyw] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--ink);
    color: var(--on-ink);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    font-family: inherit;
    box-shadow: var(--shadow-1);
}
.ad-renorm-btn:hover:not(:disabled)[b-47lmpchfyw] {
    background: var(--ink-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}
.ad-renorm-btn:active:not(:disabled)[b-47lmpchfyw] {
    transform: translateY(0);
}
.ad-renorm-btn:disabled[b-47lmpchfyw] {
    opacity: 0.6;
    cursor: not-allowed;
}
.ad-renorm-btn i[b-47lmpchfyw] { font-size: 16px; }

.ad-renorm-error[b-47lmpchfyw] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--neg-soft);
    color: var(--neg);
    border-radius: 8px;
    font-size: 13px;
}

/* Resultado depois do renormalize */
.ad-renorm-result[b-47lmpchfyw] {
    margin-top: 18px;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ad-renorm-result.has-changes[b-47lmpchfyw] {
    border-color: var(--pos, rgba(34,197,94,0.4));
    background: var(--pos-soft, rgba(34,197,94,0.06));
}

.ad-renorm-stats[b-47lmpchfyw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.ad-renorm-stat[b-47lmpchfyw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.ad-renorm-stat.is-changed[b-47lmpchfyw] {
    border-color: var(--pos, #16A34A);
    background: var(--pos-soft, rgba(34,197,94,0.10));
}
.ad-renorm-stat-label[b-47lmpchfyw] {
    font-size: 11.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ad-renorm-stat-value[b-47lmpchfyw] {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

/* Samples list */
.ad-renorm-samples[b-47lmpchfyw] {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}
.ad-renorm-samples summary[b-47lmpchfyw] {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    user-select: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.ad-renorm-samples summary[b-47lmpchfyw]::-webkit-details-marker { display: none; }
.ad-renorm-samples summary i[b-47lmpchfyw] {
    transition: transform 150ms ease;
    color: var(--ink-3);
}
.ad-renorm-samples[open] summary i[b-47lmpchfyw] {
    transform: rotate(90deg);
}

.ad-renorm-samples-list[b-47lmpchfyw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}

.ad-renorm-sample[b-47lmpchfyw] {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr 16px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
}

.ad-renorm-sample-field[b-47lmpchfyw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--ink);
}
.ad-renorm-sample-field i[b-47lmpchfyw] {
    color: var(--ink-3);
    font-size: 13px;
}
.ad-renorm-sample-id[b-47lmpchfyw] {
    color: var(--ink-3);
    font-weight: 400;
    font-size: 11px;
}

.ad-renorm-sample-before[b-47lmpchfyw] {
    color: var(--ink-3);
    text-decoration: line-through;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ad-renorm-sample-arrow[b-47lmpchfyw] {
    color: var(--ink-3);
    text-align: center;
    font-weight: 600;
}

.ad-renorm-sample-after[b-47lmpchfyw] {
    color: var(--ink);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.ad-renorm-no-changes[b-47lmpchfyw] {
    margin: 0;
    padding: 12px 14px;
    background: var(--surface);
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ad-renorm-no-changes i[b-47lmpchfyw] { color: var(--pos, #16A34A); }

/* Mobile */
@media (max-width: 700px) {
    .ad-renorm-hero[b-47lmpchfyw] { gap: 12px; }
    .ad-renorm-btn[b-47lmpchfyw] { width: 100%; justify-content: center; }
    .ad-renorm-stats[b-47lmpchfyw] { grid-template-columns: repeat(2, 1fr); }
    .ad-renorm-sample[b-47lmpchfyw] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .ad-renorm-sample-arrow[b-47lmpchfyw] { display: none; }
    .ad-renorm-sample-before[b-47lmpchfyw]::before { content: 'antes: '; color: var(--ink-3); margin-right: 4px; }
    .ad-renorm-sample-after[b-47lmpchfyw]::before { content: 'depois: '; color: var(--ink-2); margin-right: 4px; }
}
/* /Components/Pages/Ajuda.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Ajuda — formulário simples para o utilizador enviar
   feedback, bugs ou sugestões. Estilo coerente com Perfil/
   Familia (monocromático Linear/Vercel).
   ───────────────────────────────────────────────────────── */

.aj-shell[b-t5pn4rud7s] {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.aj-header[b-t5pn4rud7s] { display: flex; flex-direction: column; gap: 6px; }

.aj-h1[b-t5pn4rud7s] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.5px;
}

.aj-h1-sub[b-t5pn4rud7s] {
    margin: 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
}

/* Banners de feedback */
.aj-msg[b-t5pn4rud7s] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: 14px;
    line-height: 1.4;
}
.aj-msg i[b-t5pn4rud7s] { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.aj-msg-pos[b-t5pn4rud7s] {
    background: var(--pos-soft);
    color: var(--pos);
    border: 1px solid color-mix(in srgb, var(--pos) 25%, transparent);
}
.aj-msg-neg[b-t5pn4rud7s] {
    background: var(--neg-soft);
    color: var(--neg);
    border: 1px solid color-mix(in srgb, var(--neg) 25%, transparent);
}

/* Card principal */
.aj-card[b-t5pn4rud7s] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.aj-card-body[b-t5pn4rud7s] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Field */
.aj-field[b-t5pn4rud7s] { display: flex; flex-direction: column; gap: 6px; }

.aj-label[b-t5pn4rud7s] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.aj-input[b-t5pn4rud7s],
.aj-textarea[b-t5pn4rud7s] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    transition: all 120ms ease;
    resize: vertical;
}

.aj-input:hover[b-t5pn4rud7s],
.aj-textarea:hover[b-t5pn4rud7s] {
    border-color: var(--ink-3);
}

.aj-input:focus[b-t5pn4rud7s],
.aj-textarea:focus[b-t5pn4rud7s] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9, 9, 11, .06);
}

.aj-textarea[b-t5pn4rud7s] {
    font-family: inherit;
    line-height: 1.5;
    min-height: 140px;
}

.aj-readonly[b-t5pn4rud7s] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--line-2);
    font-size: 14px;
    color: var(--ink-2);
    width: fit-content;
}
.aj-readonly i[b-t5pn4rud7s] { color: var(--ink-3); }

.aj-hint[b-t5pn4rud7s] {
    margin: 0;
    font-size: 12px;
    color: var(--ink-3);
}

/* Botões */
.aj-actions[b-t5pn4rud7s] {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.aj-btn[b-t5pn4rud7s] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid;
    border-radius: var(--r-md);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
}

.aj-btn-primary[b-t5pn4rud7s] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.aj-btn-primary:hover:not(:disabled)[b-t5pn4rud7s] {
    background: var(--ink-hover);
}
.aj-btn-primary:disabled[b-t5pn4rud7s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.aj-spinner[b-t5pn4rud7s] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: aj-spin-b-t5pn4rud7s 700ms linear infinite;
}

@keyframes aj-spin-b-t5pn4rud7s {
    to { transform: rotate(360deg); }
}

/* Bloco de info no fim */
.aj-info[b-t5pn4rud7s] {
    padding: 16px 18px;
    background: var(--line-2);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
}

.aj-info-title[b-t5pn4rud7s] {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}

.aj-info-text[b-t5pn4rud7s] {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
}

.aj-link[b-t5pn4rud7s] {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink-3);
    transition: border-color 120ms ease;
}
.aj-link:hover[b-t5pn4rud7s] { border-bottom-color: var(--ink); }

/* Mobile */
@media (max-width: 640px) {
    .aj-shell[b-t5pn4rud7s] { padding: 16px 14px 32px; }
    .aj-card-body[b-t5pn4rud7s] { padding: 18px; }
    .aj-h1[b-t5pn4rud7s] { font-size: 22px; }
}
/* /Components/Pages/Catalogo.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Inventário (Catalogo) — sophisticated monochrome
   Tokens vêm de app.css (--ink, --line, --pos, --neg, etc.)
   ───────────────────────────────────────────────────────── */

.iv-shell[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    min-width: 0;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.iv-shell .num[b-nbcf4k8v11] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Header ──────────────────────────────────────────── */
.iv-header[b-nbcf4k8v11] { margin-bottom: 0; }
.iv-h1[b-nbcf4k8v11] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1.2;
}
.iv-h1-sub[b-nbcf4k8v11] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ── Messages ────────────────────────────────────────── */
.iv-msg[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
    border: 1px solid var(--line);
    background: var(--line-2);
    color: var(--ink);
}

.iv-msg.is-pos[b-nbcf4k8v11] { background: var(--pos-soft); color: var(--pos); border-color: rgba(21,128,61,.2); }
.iv-msg.is-bad[b-nbcf4k8v11] { background: var(--neg-soft); color: var(--neg); border-color: rgba(185,28,28,.2); }
.iv-msg span[b-nbcf4k8v11] { flex: 1; }
.iv-msg-close[b-nbcf4k8v11] {
    width: 22px; height: 22px;
    border: none; background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    display: grid; place-items: center;
    font-size: 11px;
}
.iv-msg-close:hover[b-nbcf4k8v11] { opacity: 1; background: rgba(0,0,0,.06); }

/* ── Tabs ────────────────────────────────────────────── */
.iv-tabs[b-nbcf4k8v11] {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: var(--line-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow-x: auto;
}

.iv-tab[b-nbcf4k8v11] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: all 120ms ease;
    white-space: nowrap;
    min-width: max-content;
}

.iv-tab:hover[b-nbcf4k8v11] { color: var(--ink); background: rgba(255,255,255,.6); }

.iv-tab.is-active[b-nbcf4k8v11] {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--shadow-1);
}

.iv-tab i[b-nbcf4k8v11] { font-size: 13px; }

.iv-tab-count[b-nbcf4k8v11] {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,.06);
    color: var(--ink-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.iv-tab.is-active .iv-tab-count[b-nbcf4k8v11] { background: var(--ink); color: var(--on-ink); }

/* ── Split layout (create + manage) ──────────────────── */
.iv-split[b-nbcf4k8v11] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
    align-items: start;
}

/* ── Card ────────────────────────────────────────────── */
.iv-card[b-nbcf4k8v11] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    /* sem overflow:hidden — senão corta popovers absolutos (kebab menu).
       O hover dos rows usa margin negativa controlada que cabe no padding do body. */
}

.iv-card-head[b-nbcf4k8v11] {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.iv-card-title[b-nbcf4k8v11] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.iv-card-count[b-nbcf4k8v11] {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--line-2);
}

.iv-card-body[b-nbcf4k8v11] {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.iv-create .iv-card-body[b-nbcf4k8v11] { gap: 10px; }

.iv-hint[b-nbcf4k8v11] {
    margin: 0;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.5;
}

.iv-empty[b-nbcf4k8v11] {
    margin: 0;
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
    padding: 24px 0;
}

/* ── Form ────────────────────────────────────────────── */
.iv-field[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.iv-field label[b-nbcf4k8v11] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.iv-field-hint[b-nbcf4k8v11] {
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-3);
    font-weight: 400;
    margin-left: 4px;
}

.iv-input[b-nbcf4k8v11] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    color-scheme: light;
}

.iv-input.iv-input-sm[b-nbcf4k8v11] { padding: 6px 10px; font-size: 13px; }

.iv-input[b-nbcf4k8v11]::placeholder { color: var(--ink-3); }
.iv-input:hover[b-nbcf4k8v11] { border-color: var(--ink-3); }
.iv-input:focus[b-nbcf4k8v11] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--ring);
}

select.iv-input[b-nbcf4k8v11] { padding-right: 28px; }

/* Hide spin buttons on number inputs */
.iv-input[type="number"][b-nbcf4k8v11]::-webkit-outer-spin-button,
.iv-input[type="number"][b-nbcf4k8v11]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}
.iv-input[type="number"][b-nbcf4k8v11] { -moz-appearance: textfield; }

/* ── Buttons ─────────────────────────────────────────── */
.iv-btn[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
    text-decoration: none;
}

.iv-btn:disabled[b-nbcf4k8v11] { opacity: 0.6; cursor: not-allowed; }

.iv-btn-sm[b-nbcf4k8v11] { padding: 5px 10px; font-size: 12px; }
.iv-btn-block[b-nbcf4k8v11] { width: 100%; }

.iv-btn-primary[b-nbcf4k8v11] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.iv-btn-primary:hover:not(:disabled)[b-nbcf4k8v11] { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-ink); }

.iv-btn-secondary[b-nbcf4k8v11] { background: var(--surface); color: var(--ink); border-color: var(--line); }
.iv-btn-secondary:hover:not(:disabled)[b-nbcf4k8v11] { background: var(--line-2); border-color: var(--ink-3); }

.iv-btn-danger[b-nbcf4k8v11] { background: var(--neg); color: #fff; border-color: var(--neg); }
.iv-btn-danger:hover:not(:disabled)[b-nbcf4k8v11] { background: #991b1b; border-color: #991b1b; }

/* Variante "accent" — cor brand camel/orange usada em features de IA. Destaque
   visual sem ser primário (preto). Usado no botão "Organizar com IA". */
.iv-btn-accent[b-nbcf4k8v11] {
    background: var(--color-accent, #C8852C);
    color: #fff;
    border-color: var(--color-accent, #C8852C);
    box-shadow: 0 2px 8px rgba(200, 133, 44, 0.18);
}
.iv-btn-accent:hover:not(:disabled)[b-nbcf4k8v11] {
    background: oklch(from var(--color-accent, #C8852C) calc(l - 0.04) c h);
    border-color: oklch(from var(--color-accent, #C8852C) calc(l - 0.04) c h);
    box-shadow: 0 4px 12px rgba(200, 133, 44, 0.28);
}
.iv-btn-accent i[b-nbcf4k8v11] { color: #fff; }

/* ── Icon buttons ────────────────────────────────────── */
.iv-icon-btn[b-nbcf4k8v11] {
    position: relative;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    font-size: 12.5px;
    transition: all 120ms ease;
    padding: 0;
    flex-shrink: 0;
}

.iv-icon-btn:hover:not(:disabled)[b-nbcf4k8v11] {
    border-color: var(--ink);
    color: var(--ink);
}

.iv-icon-btn:disabled[b-nbcf4k8v11] { opacity: 0.4; cursor: not-allowed; }

.iv-icon-btn-sm[b-nbcf4k8v11] { width: 26px; height: 26px; font-size: 11px; }

.iv-icon-btn.is-on[b-nbcf4k8v11] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}

.iv-icon-btn.is-favorite[b-nbcf4k8v11] {
    background: var(--warn-soft);
    color: var(--warn);
    border-color: rgba(245,158,11,.3);
}

.iv-icon-btn-pos[b-nbcf4k8v11] {
    background: var(--pos);
    color: var(--on-ink);
    border-color: var(--pos);
}
.iv-icon-btn-pos:hover:not(:disabled)[b-nbcf4k8v11] {
    background: #166534;
    border-color: #166534;
    color: #fff;
}

.iv-icon-btn-danger:hover:not(:disabled)[b-nbcf4k8v11] {
    border-color: var(--neg);
    color: var(--neg);
    background: var(--neg-soft);
}

/* ── Row actions (novo padrão: toggles + acção primária + overflow) ──
   Substitui o "5 ícones por linha" pelo padrão hierárquico:
     [⭐ toggle] [📦 toggle] [✎ Editar (label)] [⋯ menu]
   Toggles ficam visíveis para reflectir estado; acção primária tem
   label sempre que possível; raras (Aliases, Apagar) entram no menu. */

.iv-act-toggle[b-nbcf4k8v11] {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-3);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    font-size: 13px;
    transition: all 120ms ease;
    padding: 0;
    flex-shrink: 0;
}
.iv-act-toggle:hover:not(:disabled)[b-nbcf4k8v11] { border-color: var(--ink); color: var(--ink); }
.iv-act-toggle:disabled[b-nbcf4k8v11] { opacity: 0.4; cursor: not-allowed; }
.iv-act-toggle.is-on[b-nbcf4k8v11] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.iv-act-toggle.is-favorite[b-nbcf4k8v11] {
    background: var(--warn-soft);
    color: var(--warn);
    border-color: rgba(245,158,11,.3);
}

/* Badge dentro do toggle de categoria — indica "N de M produtos seguidos".
   Posicionado no canto superior-direito do botão. */
.iv-act-toggle[b-nbcf4k8v11] {
    position: relative;
}
.iv-act-toggle-badge[b-nbcf4k8v11] {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 22px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
}

/* Acção primária: pill com ícone + label */
.iv-act-btn[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    transition: all 120ms ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.iv-act-btn:hover:not(:disabled)[b-nbcf4k8v11] {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--surface-hover);
}
.iv-act-btn i[b-nbcf4k8v11] { font-size: 12px; }
.iv-act-btn .iv-act-label[b-nbcf4k8v11] { line-height: 1; }

/* Botão "..." de overflow */
.iv-act-more-wrap[b-nbcf4k8v11] { position: relative; flex-shrink: 0; }
.iv-act-more[b-nbcf4k8v11] {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    font-size: 14px;
    transition: all 120ms ease;
    padding: 0;
    position: relative;
}
.iv-act-more:hover[b-nbcf4k8v11] { border-color: var(--ink); color: var(--ink); }

/* Badge no botão "..." quando há aliases (sinaliza que há conteúdo escondido) */
.iv-act-more-badge[b-nbcf4k8v11] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
}

.iv-act-backdrop[b-nbcf4k8v11] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* Desktop: popover ancorado */
.iv-act-menu[b-nbcf4k8v11] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 260px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: 4px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: iv-menu-in-b-nbcf4k8v11 140ms ease;
}
@keyframes iv-menu-in-b-nbcf4k8v11 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.iv-act-menu-handle[b-nbcf4k8v11] { display: none; }

.iv-act-menu-item[b-nbcf4k8v11] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
    font: inherit;
    width: 100%;
}
.iv-act-menu-item:hover:not(:disabled)[b-nbcf4k8v11] { background: var(--line-2); }
.iv-act-menu-item:disabled[b-nbcf4k8v11] { opacity: 0.5; cursor: not-allowed; }
.iv-act-menu-item i[b-nbcf4k8v11] {
    font-size: 16px;
    color: var(--ink-2);
    margin-top: 2px;
    width: 18px;
    flex-shrink: 0;
}

.iv-act-menu-item-danger[b-nbcf4k8v11] { color: var(--neg); }
.iv-act-menu-item-danger i[b-nbcf4k8v11] { color: var(--neg); }
.iv-act-menu-item-danger:hover:not(:disabled)[b-nbcf4k8v11] { background: var(--neg-soft); }

.iv-act-menu-text[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.iv-act-menu-title[b-nbcf4k8v11] {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.iv-act-menu-count[b-nbcf4k8v11] {
    background: var(--line-2);
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
}
.iv-act-menu-sub[b-nbcf4k8v11] {
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.35;
}

/* Mobile: popover transforma-se em bottom sheet */
@media (max-width: 640px) {
    /* Esconder label do "Editar" para poupar espaço lateral */
    .iv-act-btn .iv-act-label[b-nbcf4k8v11] { display: none; }
    .iv-act-btn[b-nbcf4k8v11] {
        width: 30px;
        padding: 0;
        justify-content: center;
        border-radius: var(--r-sm);
    }

    .iv-act-backdrop[b-nbcf4k8v11] { background: rgba(0,0,0,0.4); z-index: 600; }
    .iv-act-menu[b-nbcf4k8v11] {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: 0;
        border-radius: 18px 18px 0 0;
        padding: 8px 12px calc(20px + env(safe-area-inset-bottom));
        z-index: 700;
        box-shadow: var(--shadow-mobile-nav);
        animation: iv-sheet-in-b-nbcf4k8v11 240ms cubic-bezier(0.32,0.72,0,1);
    }
    @keyframes iv-sheet-in-b-nbcf4k8v11 {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .iv-act-menu-handle[b-nbcf4k8v11] {
        display: block;
        width: 36px;
        height: 4px;
        background: var(--ink-4);
        border-radius: 999px;
        margin: 6px auto 12px;
    }
    .iv-act-menu-item[b-nbcf4k8v11] {
        padding: 14px 12px;
        gap: 14px;
        min-height: 56px;
    }
    .iv-act-menu-item i[b-nbcf4k8v11] { font-size: 18px; width: 22px; }
    .iv-act-menu-title[b-nbcf4k8v11] { font-size: 14.5px; }
    .iv-act-menu-sub[b-nbcf4k8v11] { font-size: 12.5px; }
}

.iv-icon-badge[b-nbcf4k8v11] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center;
    line-height: 1;
}

/* ── Search bar ──────────────────────────────────────── */
.iv-search[b-nbcf4k8v11] {
    position: relative;
    width: 100%;
}

.iv-search-icon[b-nbcf4k8v11] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: 13px;
    pointer-events: none;
}

.iv-search .iv-input[b-nbcf4k8v11] { padding-left: 34px; }

/* ── Segmented control (stock filter) ────────────────── */
.iv-segmented[b-nbcf4k8v11] {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--line-2);
    padding: 2px;
    gap: 2px;
}

.iv-seg[b-nbcf4k8v11] {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.iv-seg:hover[b-nbcf4k8v11] { color: var(--ink); }
.iv-seg.is-active[b-nbcf4k8v11] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}

/* ── Merge bar (selecção múltipla) ─────────────────────
   Bar compacto, 1-2 linhas. O target é auto-escolhido (primeiro
   seleccionado). Para casos avançados (mudar a base), o utilizador
   altera a ordem clicando primeiro no que quer manter. */
.iv-merge-bar[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--line-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.iv-merge-bar-sources[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 240px;
}
.iv-merge-bar-icon[b-nbcf4k8v11] { color: var(--ink-2); font-size: 13px; flex-shrink: 0; }
.iv-merge-bar-count[b-nbcf4k8v11] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    flex-shrink: 0;
}
.iv-merge-bar-chip[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    color: var(--ink-2);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: all 120ms ease;
}
.iv-merge-bar-chip:hover[b-nbcf4k8v11] {
    border-color: var(--ink-3);
    color: var(--ink);
}
.iv-merge-bar-chip.is-active[b-nbcf4k8v11] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
    font-weight: 600;
}

.iv-merge-bar-actions[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.iv-merge-bar-input[b-nbcf4k8v11] {
    width: 200px;
    font-weight: 600;
}

/* ── List ────────────────────────────────────────────── */
.iv-list[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
}

.iv-row[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-2);
    transition: background-color 120ms ease;
}

.iv-row:last-child[b-nbcf4k8v11] { border-bottom: none; }
.iv-row:hover[b-nbcf4k8v11] { background: var(--line-2); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: var(--r-sm); }

.iv-row.is-selected[b-nbcf4k8v11] { background: rgba(9,9,11,.04); }
.iv-row.is-low[b-nbcf4k8v11] { background: var(--neg-soft); }

.iv-row-main[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.iv-check[b-nbcf4k8v11] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--ink);
    cursor: pointer;
}

.iv-row-info[b-nbcf4k8v11] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.iv-row-name[b-nbcf4k8v11] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-row-sub[b-nbcf4k8v11] {
    font-size: 12px;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.iv-row-actions[b-nbcf4k8v11] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.iv-row-edit[b-nbcf4k8v11] {
    flex: 1;
    min-width: 0;
}

.iv-row-edit-grid[b-nbcf4k8v11] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    min-width: 0;
}

/* ── Tags ────────────────────────────────────────────── */
.iv-tag[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
}

.iv-tag.iv-tag-unit[b-nbcf4k8v11] { font-variant: small-caps; letter-spacing: 0.5px; }
.iv-tag.iv-tag-muted[b-nbcf4k8v11] { color: var(--ink-3); font-style: italic; }
.iv-tag.iv-tag-pos[b-nbcf4k8v11] {
    background: var(--pos-soft);
    color: var(--pos);
    border-color: rgba(21,128,61,.2);
}
.iv-tag.iv-tag-warn[b-nbcf4k8v11] {
    background: var(--warn-soft);
    color: var(--warn);
    border-color: rgba(245,158,11,.25);
}
.iv-tag.iv-tag-group[b-nbcf4k8v11] {
    background: rgba(9,9,11,.06);
    color: var(--ink);
    font-weight: 600;
}

/* Tag-as-button: o badge "X variantes" é clicável e expande a linha. */
.iv-tag-clickable[b-nbcf4k8v11] {
    cursor: pointer;
    border: 1px solid var(--line);
    transition: background 120ms ease, border-color 120ms ease;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.iv-tag-clickable:hover[b-nbcf4k8v11] { background: rgba(9,9,11,.10); border-color: var(--line-2); }
.iv-tag-clickable.is-open[b-nbcf4k8v11] { background: var(--brand-soft, var(--line-2)); }
.iv-tag-chevron[b-nbcf4k8v11] {
    font-size: 10px !important;
    color: var(--ink-3);
    margin-left: 2px;
}

/* ── Variantes (expandido) ───────────────────────────── */
.iv-variants-section[b-nbcf4k8v11] {
    padding: 10px 0 4px 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.iv-variants-label[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.iv-variants-label i[b-nbcf4k8v11] { font-size: 13px; }
.iv-variants-label-sub[b-nbcf4k8v11] { color: var(--ink-3); }

.iv-variants-count[b-nbcf4k8v11] {
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.iv-variants-empty[b-nbcf4k8v11] {
    font-size: 12.5px;
    color: var(--ink-3);
    font-style: italic;
}

.iv-variants-grid[b-nbcf4k8v11] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.iv-variant-card[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    min-width: 0;
    transition: border-color 120ms ease;
}
.iv-variant-card:hover[b-nbcf4k8v11] { border-color: var(--ink-3); }

/* Top row: imagem + nome/meta. Nome ocupa toda a linha disponível. */
.iv-variant-top[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.iv-variant-img[b-nbcf4k8v11] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--line-2);
    flex-shrink: 0;
}
.iv-variant-img-fallback[b-nbcf4k8v11] {
    display: grid;
    place-items: center;
    color: var(--ink-3);
    font-size: 18px;
}

.iv-variant-body[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.iv-variant-name[b-nbcf4k8v11] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.35;
    /* Permite quebrar em 2 linhas — names de SKUs costumam ser longos. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.iv-variant-meta[b-nbcf4k8v11] {
    font-size: 11.5px;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Variantes: ações inline ─────────────────────────── */
.iv-variant-actions[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px dashed var(--line-2);
    padding-top: 6px;
}

.iv-variant-act[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink-2);
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    transition: all 120ms ease;
}
.iv-variant-act i[b-nbcf4k8v11] { font-size: 11.5px; }
.iv-variant-act:hover:not(:disabled)[b-nbcf4k8v11] {
    background: var(--line-2);
    border-color: var(--line);
    color: var(--ink);
}
.iv-variant-act:disabled[b-nbcf4k8v11] { opacity: 0.35; cursor: not-allowed; }
.iv-variant-act-danger[b-nbcf4k8v11] { padding: 0 6px; } /* só ícone */
.iv-variant-act-danger:hover:not(:disabled)[b-nbcf4k8v11] {
    background: var(--neg-soft);
    border-color: rgba(220,38,38,.25);
    color: var(--neg);
}

/* ── Modal "Mover variante" ──────────────────────────── */
.iv-modal-sm[b-nbcf4k8v11] { max-width: 480px; }
.iv-modal-empty[b-nbcf4k8v11] {
    margin: 16px 0;
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
}
.iv-move-list[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 360px;
    overflow-y: auto;
    margin-top: 12px;
}
.iv-move-item[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--ink);
    transition: all 120ms ease;
}
.iv-move-item:hover:not(:disabled)[b-nbcf4k8v11] {
    border-color: var(--ink);
    background: var(--line-2);
}
.iv-move-item:disabled[b-nbcf4k8v11] { opacity: 0.5; cursor: not-allowed; }
.iv-move-item-info[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.iv-move-item-name[b-nbcf4k8v11] { font-size: 14px; font-weight: 600; color: var(--ink); }
.iv-move-item-sub[b-nbcf4k8v11] { font-size: 12px; color: var(--ink-3); }
.iv-move-item i[b-nbcf4k8v11] { color: var(--ink-3); flex-shrink: 0; }

.iv-variant-card.is-editing[b-nbcf4k8v11] {
    background: var(--line-2);
    border-color: var(--ink-3);
}

.iv-variant-edit[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.iv-variant-edit-actions[b-nbcf4k8v11] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

/* ── Aliases (na zona expandida, abaixo das variantes) ── */
.iv-aliases[b-nbcf4k8v11] {
    padding: 6px 0 4px 26px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.iv-aliases-list[b-nbcf4k8v11] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.iv-aliases-empty[b-nbcf4k8v11] {
    font-size: 12px;
    color: var(--ink-3);
    font-style: italic;
}

.iv-alias[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    background: var(--line-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink);
}
.iv-alias-text[b-nbcf4k8v11] { font-weight: 500; }
.iv-alias-variant[b-nbcf4k8v11] {
    color: var(--ink-3);
    font-size: 10.5px;
    font-style: italic;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-alias-x[b-nbcf4k8v11] {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 10px;
    transition: all 120ms ease;
    padding: 0;
}

.iv-alias-x:hover[b-nbcf4k8v11] { background: var(--neg-soft); color: var(--neg); }

/* ── Pagination ──────────────────────────────────────── */
.iv-pagination[b-nbcf4k8v11] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-2);
}

.iv-pagination-info[b-nbcf4k8v11] {
    font-size: 12.5px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    text-align: center;
}

/* ── Stock controls ──────────────────────────────────── */
.iv-stock-controls[b-nbcf4k8v11] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.iv-stock-controls .iv-search[b-nbcf4k8v11] { flex: 1; min-width: 200px; }

.iv-section[b-nbcf4k8v11] { display: flex; flex-direction: column; gap: 6px; }
.iv-section + .iv-section[b-nbcf4k8v11] { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }

.iv-section-label[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-2);
    padding-bottom: 4px;
}

.iv-section-count[b-nbcf4k8v11] {
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-3);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Stock card (group) ──────────────────────────────── */
.iv-stock-card[b-nbcf4k8v11] {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    margin-bottom: 6px;
    overflow: hidden;
}

.iv-stock-card.is-low[b-nbcf4k8v11] { border-color: rgba(185,28,28,.2); background: linear-gradient(90deg, var(--neg-soft), #fff); }
.iv-stock-card.is-empty[b-nbcf4k8v11] { border-style: dashed; opacity: 0.85; }

.iv-stock-card-head[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}

.iv-stock-card-head:hover[b-nbcf4k8v11] { background: var(--line-2); }

.iv-stock-toggle[b-nbcf4k8v11] {
    color: var(--ink-3);
    font-size: 11px;
    flex-shrink: 0;
}

.iv-stock-info[b-nbcf4k8v11] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.iv-stock-name[b-nbcf4k8v11] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-stock-meta[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.iv-stock-right[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.iv-stock-qty[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 13px;
    color: var(--ink);
    margin-right: 4px;
}

.iv-stock-qty.is-low[b-nbcf4k8v11] { color: var(--neg); }
.iv-stock-qty strong[b-nbcf4k8v11] { font-size: 15px; font-weight: 700; }
.iv-stock-unit[b-nbcf4k8v11] { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.4px; }

.iv-stock-card-body[b-nbcf4k8v11] {
    border-top: 1px solid var(--line-2);
    padding: 8px 12px;
    background: var(--line-2);
}

.iv-stock-empty[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--ink-3);
    text-align: center;
}

.iv-stock-empty i[b-nbcf4k8v11] { font-size: 22px; opacity: 0.5; }
.iv-stock-empty span[b-nbcf4k8v11] { font-size: 13px; }

.iv-variant[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-bottom: 4px;
}

.iv-variant:last-child[b-nbcf4k8v11] { margin-bottom: 0; }

.iv-variant-name[b-nbcf4k8v11] {
    flex: 1;
    font-size: 13px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-variant-qty[b-nbcf4k8v11] {
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 500;
    flex-shrink: 0;
}

/* ── Modal ───────────────────────────────────────────── */
.iv-modal-backdrop[b-nbcf4k8v11] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15,23,42,.32);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding: 20px;
    animation: iv-fade-b-nbcf4k8v11 150ms ease;
}

@keyframes iv-fade-b-nbcf4k8v11 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.iv-modal[b-nbcf4k8v11] {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    animation: iv-pop-b-nbcf4k8v11 180ms cubic-bezier(.2,.8,.2,1);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}

.iv-modal.iv-modal-lg[b-nbcf4k8v11] { max-width: 640px; }

@keyframes iv-pop-b-nbcf4k8v11 {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.iv-modal-head[b-nbcf4k8v11] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.iv-modal-kicker[b-nbcf4k8v11] {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-3);
}

.iv-modal-title[b-nbcf4k8v11] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--ink);
}

.iv-modal-body[b-nbcf4k8v11] {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.iv-modal-foot[b-nbcf4k8v11] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: var(--line-2);
}

.iv-foot-info[b-nbcf4k8v11] {
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 500;
    margin-right: auto;
}

/* Product checklist (in modal) */
.iv-product-checklist[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.iv-checkitem[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 120ms ease;
}

.iv-checkitem:hover[b-nbcf4k8v11] { background: var(--line-2); }
.iv-checkitem.is-checked[b-nbcf4k8v11] {
    background: rgba(9,9,11,.04);
    border-color: var(--ink-3);
}

.iv-checkitem-name[b-nbcf4k8v11] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-checkitem-cat[b-nbcf4k8v11] {
    font-size: 12px;
    color: var(--ink-3);
}

/* ── Spinner ─────────────────────────────────────────── */
.iv-spinner[b-nbcf4k8v11] {
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: iv-spin-b-nbcf4k8v11 0.6s linear infinite;
    display: inline-block;
}

.iv-spinner-dark[b-nbcf4k8v11] { border-color: var(--ink-3); border-top-color: transparent; width: 14px; height: 14px; border-width: 2px; }

@keyframes iv-spin-b-nbcf4k8v11 { to { transform: rotate(360deg); } }

/* ── Import result ───────────────────────────────────── */
.iv-file-wrap[b-nbcf4k8v11] {
    padding: 12px;
    background: var(--line-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
}

.iv-loading[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-2);
}

.iv-import-result[b-nbcf4k8v11] {
    background: var(--line-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
}

.iv-import-grid[b-nbcf4k8v11] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.iv-import-stat[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.iv-import-stat span[b-nbcf4k8v11] {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.iv-import-stat strong[b-nbcf4k8v11] {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.4px;
}

.iv-import-errors[b-nbcf4k8v11] {
    margin: 12px 0 0;
    padding: 8px 12px 8px 28px;
    background: var(--neg-soft);
    border: 1px solid rgba(185,28,28,.2);
    border-radius: var(--r-sm);
    color: var(--neg);
    font-size: 12.5px;
}

.iv-import-errors li[b-nbcf4k8v11] { margin-bottom: 4px; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .iv-split[b-nbcf4k8v11] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .iv-shell[b-nbcf4k8v11] { gap: 16px; }
    .iv-tabs[b-nbcf4k8v11] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px;
    }
    .iv-tab[b-nbcf4k8v11] { flex: 0 0 auto; padding: 6px 12px; font-size: 12.5px; }
    .iv-card-head[b-nbcf4k8v11] { padding: 12px 14px; }
    .iv-card-body[b-nbcf4k8v11] { padding: 14px; }

    .iv-row-main[b-nbcf4k8v11] { flex-wrap: wrap; }
    .iv-row-actions[b-nbcf4k8v11] { flex-wrap: wrap; }
    .iv-row-edit-grid[b-nbcf4k8v11] { grid-template-columns: 1fr; }

    .iv-stock-controls[b-nbcf4k8v11] { flex-direction: column; align-items: stretch; }
    .iv-segmented[b-nbcf4k8v11] { width: 100%; }
    .iv-seg[b-nbcf4k8v11] { flex: 1; justify-content: center; }

    .iv-stock-card-head[b-nbcf4k8v11] { flex-wrap: wrap; }
    .iv-stock-right[b-nbcf4k8v11] { width: 100%; justify-content: flex-end; }

    .iv-modal-head[b-nbcf4k8v11], .iv-modal-body[b-nbcf4k8v11], .iv-modal-foot[b-nbcf4k8v11] { padding-left: 16px; padding-right: 16px; }

    .iv-merge[b-nbcf4k8v11] { flex-direction: column; align-items: stretch; }
    .iv-merge .iv-input[b-nbcf4k8v11] { width: 100%; }
}

/* ── Organizar catálogo (modal) ─────────────────────────
   Mostra propostas de merge feitas pela IA. Cada caixa é
   uma proposta com checkbox para aceitar/rejeitar. */
.iv-organize-list[b-nbcf4k8v11] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.iv-organize-card[b-nbcf4k8v11] {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.iv-organize-head[b-nbcf4k8v11] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.iv-organize-head-body[b-nbcf4k8v11] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.iv-organize-check[b-nbcf4k8v11] {
    margin-top: 6px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.iv-organize-title[b-nbcf4k8v11] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.iv-organize-title i[b-nbcf4k8v11] { color: var(--ink-2); font-size: 13px; }
.iv-organize-verb[b-nbcf4k8v11] { color: var(--ink-2); }

/* Input do nome destino — proeminente, é o que o utilizador edita. */
.iv-organize-target-input[b-nbcf4k8v11] {
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.iv-organize-target-input:hover:not(:disabled)[b-nbcf4k8v11] { border-color: var(--ink-3); }
.iv-organize-target-input:focus[b-nbcf4k8v11] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}
.iv-organize-target-input:disabled[b-nbcf4k8v11] {
    opacity: 0.5;
    cursor: not-allowed;
}

.iv-organize-reset[b-nbcf4k8v11] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: 999px;
    color: var(--ink-3);
    font-size: 11.5px;
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    transition: all 120ms ease;
}
.iv-organize-reset:hover[b-nbcf4k8v11] { border-color: var(--ink-2); color: var(--ink-2); border-style: solid; }
.iv-organize-reset i[b-nbcf4k8v11] { font-size: 10px; }

.iv-organize-card.is-rejected[b-nbcf4k8v11] {
    opacity: 0.55;
    background: var(--line-2);
}
.iv-organize-count[b-nbcf4k8v11] {
    font-size: 11px;
    font-weight: 500;
    background: var(--line-2);
    color: var(--ink-3);
    padding: 2px 8px;
    border-radius: 999px;
}
/* Banner de duplicados detectados via cluster — aparece no topo do catálogo
   quando há conceitos da família a partilhar cluster (provavelmente o mesmo
   SKU físico). Dismissable in-memory. */
.iv-dup-banner[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 14px;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.10);
    border: 1px solid rgba(168, 85, 247, 0.30);
}
.iv-dup-banner-icon[b-nbcf4k8v11] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.18);
    color: rgb(168, 85, 247);
    font-size: 16px;
}
.iv-dup-banner-text[b-nbcf4k8v11] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.iv-dup-banner-text strong[b-nbcf4k8v11] { font-size: 13.5px; color: var(--ink); }
.iv-dup-banner-sub[b-nbcf4k8v11] { font-size: 12px; color: var(--ink-2); }
.iv-dup-banner-actions[b-nbcf4k8v11] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .iv-dup-banner[b-nbcf4k8v11] { flex-wrap: wrap; }
    .iv-dup-banner-text[b-nbcf4k8v11] { flex-basis: 100%; }
}

/* Chip de similaridade — segunda opinião objectiva (embeddings).
   Cor codifica confiança: alta=verde, média=amarela, baixa=vermelho. */
.iv-organize-sim[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}
.iv-organize-sim.is-high[b-nbcf4k8v11] {
    background: rgba(16, 185, 129, 0.12);
    color: rgb(5, 150, 105);
    border-color: rgba(16, 185, 129, 0.30);
}
.iv-organize-sim.is-mid[b-nbcf4k8v11] {
    background: rgba(234, 179, 8, 0.12);
    color: rgb(180, 124, 8);
    border-color: rgba(234, 179, 8, 0.30);
}
.iv-organize-sim.is-low[b-nbcf4k8v11] {
    background: rgba(239, 68, 68, 0.12);
    color: rgb(185, 28, 28);
    border-color: rgba(239, 68, 68, 0.30);
}
.iv-organize-reasoning[b-nbcf4k8v11] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.4;
}
.iv-organize-sources[b-nbcf4k8v11] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 28px;
}
.iv-organize-source[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    color: var(--ink);
}
.iv-organize-source small[b-nbcf4k8v11] {
    color: var(--ink-3);
    font-size: 10.5px;
}

/* ── Excel import — checkbox "organizar com IA" ─────────── */
.iv-import-toggle[b-nbcf4k8v11] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    margin-bottom: 8px;
}
.iv-import-toggle input[type="checkbox"][b-nbcf4k8v11] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.iv-import-toggle span[b-nbcf4k8v11] {
    flex: 1;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
}
.iv-import-toggle small[b-nbcf4k8v11] {
    display: block;
    margin-top: 2px;
    color: var(--ink-3);
    font-size: 11.5px;
}

/* Wrap para acção + hint ficarem alinhados horizontalmente — usado no
   header da secção "Produtos" (botão Organizar com IA + HelpHint). */
.iv-action-with-hint[b-nbcf4k8v11] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* /Components/Pages/Comparador.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Comparador — sophisticated monochrome
   ───────────────────────────────────────────────────────── */

.cmp-shell[b-w2rbrynizs] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.cmp-shell .num[b-w2rbrynizs] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Header ──────────────────────────────────────────── */
.cmp-header[b-w2rbrynizs] { margin-bottom: 0; }
.cmp-h1[b-w2rbrynizs] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1.2;
}
.cmp-h1-sub[b-w2rbrynizs] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

.cmp-back[b-w2rbrynizs] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    margin-bottom: 4px;
}

.cmp-back:hover[b-w2rbrynizs] { border-color: var(--ink); color: var(--ink); }
.cmp-back i[b-w2rbrynizs] { font-size: 12px; }

/* ── Camera card ─────────────────────────────────────── */
.cmp-camera[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: var(--surface);
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: all 150ms ease;
}

.cmp-camera:hover[b-w2rbrynizs] {
    border-color: var(--ink);
    background: var(--line-2);
}

.cmp-camera.is-loading[b-w2rbrynizs] {
    cursor: wait;
    border-style: solid;
    border-color: var(--ink);
}

.cmp-camera-icon[b-w2rbrynizs] {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    background: var(--ink);
    color: var(--on-ink);
    display: grid;
    place-items: center;
    font-size: 22px;
    flex-shrink: 0;
}

.cmp-camera-text[b-w2rbrynizs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cmp-camera-text strong[b-w2rbrynizs] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.cmp-camera-text small[b-w2rbrynizs] {
    font-size: 12.5px;
    color: var(--ink-2);
}

.cmp-camera-arrow[b-w2rbrynizs] {
    color: var(--ink-3);
    font-size: 16px;
    transition: transform 150ms ease;
}

.cmp-camera:hover .cmp-camera-arrow[b-w2rbrynizs] { transform: translateX(2px); color: var(--ink); }

.cmp-spinner[b-w2rbrynizs] {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cmp-spin-b-w2rbrynizs 0.6s linear infinite;
    display: inline-block;
}

.cmp-spinner-lg[b-w2rbrynizs] { width: 22px; height: 22px; border-width: 2.5px; color: #fff; }

@keyframes cmp-spin-b-w2rbrynizs { to { transform: rotate(360deg); } }

/* ── Divider ─────────────────────────────────────────── */
.cmp-divider[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-3);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.cmp-divider[b-w2rbrynizs]::before,
.cmp-divider[b-w2rbrynizs]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ── Search ──────────────────────────────────────────── */
.cmp-search-wrap[b-w2rbrynizs] {
    position: relative;
}

.cmp-search-icon[b-w2rbrynizs] {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: 14px;
    pointer-events: none;
}

.cmp-search[b-w2rbrynizs] {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cmp-search[b-w2rbrynizs]::placeholder { color: var(--ink-3); }

.cmp-search:hover[b-w2rbrynizs] { border-color: var(--ink-3); }
.cmp-search:focus[b-w2rbrynizs] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.08);
}

/* ── Search results ──────────────────────────────────── */
.cmp-results[b-w2rbrynizs] {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
}

.cmp-result[b-w2rbrynizs] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 12px 14px;
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line-2);
    transition: background-color 120ms ease;
}

.cmp-results li:last-child .cmp-result[b-w2rbrynizs] { border-bottom: none; }
.cmp-result:hover[b-w2rbrynizs] { background: var(--line-2); }
.cmp-result > i:first-child[b-w2rbrynizs] { color: var(--ink-3); font-size: 13px; flex-shrink: 0; }
.cmp-result-name[b-w2rbrynizs] { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-result-cat[b-w2rbrynizs] { color: var(--ink-3); font-size: 12px; flex-shrink: 0; }
.cmp-result-arrow[b-w2rbrynizs] { color: var(--ink-3); font-size: 12px; transition: all 150ms ease; }
.cmp-result:hover .cmp-result-arrow[b-w2rbrynizs] { transform: translateX(2px); color: var(--ink); }

/* ── Empty / msg ─────────────────────────────────────── */
.cmp-empty-search[b-w2rbrynizs] {
    padding: 32px 24px;
    text-align: center;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.cmp-empty-search i[b-w2rbrynizs] { font-size: 28px; color: var(--ink-3); margin-bottom: 8px; display: block; }
.cmp-empty-search p[b-w2rbrynizs] { margin: 0 0 12px; font-size: 14px; color: var(--ink); }
.cmp-empty-search small[b-w2rbrynizs] { font-size: 12.5px; color: var(--ink-3); }

/* ── Community CTA (botão "Pesquisar na comunidade") ─── */
.cmp-community-cta[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px dashed var(--line, #E5E5E0);
    border-radius: var(--r-md, 10px);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    font-size: 13.5px;
    color: var(--ink);
}

.cmp-community-cta:hover:not(:disabled)[b-w2rbrynizs] {
    background: rgba(21, 128, 61, 0.04);
    border-color: var(--pos, #15803D);
    border-style: solid;
}

.cmp-community-cta:disabled[b-w2rbrynizs] { opacity: 0.6; cursor: not-allowed; }

.cmp-community-cta > i:first-child[b-w2rbrynizs] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(21, 128, 61, 0.12);
    color: var(--pos, #15803D);
    font-size: 14px;
    flex-shrink: 0;
}

.cmp-community-cta > span[b-w2rbrynizs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cmp-community-cta strong[b-w2rbrynizs] {
    color: var(--ink);
    font-weight: 600;
}

.cmp-community-cta small[b-w2rbrynizs] {
    font-size: 11.5px;
    color: var(--ink-3);
    font-weight: 400;
}

.cmp-community-cta > i:last-child[b-w2rbrynizs] {
    color: var(--ink-3);
    flex-shrink: 0;
}

/* ── Community search results ─────────────────────────── */
.cmp-community-card[b-w2rbrynizs] {
    background: linear-gradient(180deg, rgba(21,128,61,.04), #fff);
    border: 1px solid rgba(21,128,61,.18);
}

.cmp-community-card .cmp-card-title i[b-w2rbrynizs] {
    color: var(--pos, #15803D);
}

.cmp-community-stores[b-w2rbrynizs] {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cmp-community-meta[b-w2rbrynizs] {
    font-size: 11.5px;
    color: var(--ink-3);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Confidence pill — verde alta (≥5), amarelo média (2-4), cinza baixa (1) */
.cmp-confidence-pill[b-w2rbrynizs] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

.cmp-confidence-pill.is-high[b-w2rbrynizs] {
    background: var(--pos-soft);
    color: var(--pos);
}

.cmp-confidence-pill.is-medium[b-w2rbrynizs] {
    background: rgba(245, 158, 11, 0.15);
    color: #B45309;
}

.cmp-confidence-pill.is-low[b-w2rbrynizs] {
    background: var(--line-2);
    color: var(--ink-3);
}

/* Linha a indicar lojas filtradas por amostra insuficiente */
.cmp-community-skipped[b-w2rbrynizs] {
    margin: 0 16px 8px;
    padding: 10px 12px;
    background: var(--line-2, #F5F5F2);
    border: 1px dashed var(--line, #E5E5E0);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--ink-2);
    line-height: 1.5;
}

.cmp-community-skipped i[b-w2rbrynizs] {
    color: var(--ink-3);
    margin-right: 4px;
}

.cmp-community-skipped strong[b-w2rbrynizs] {
    color: var(--ink-2);
    font-weight: 600;
}

.cmp-community-price-label[b-w2rbrynizs] {
    display: block;
    font-size: 10.5px;
    color: var(--ink-3);
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: -2px;
}

.cmp-community-disclaimer[b-w2rbrynizs] {
    margin: 8px 16px 16px;
    padding: 10px 12px;
    background: var(--line-2, #F5F5F2);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.5;
    font-style: italic;
}

.cmp-empty-msg[b-w2rbrynizs] {
    margin: 0;
    padding: 16px;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.cmp-icon-btn[b-w2rbrynizs] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.cmp-icon-btn:hover[b-w2rbrynizs] {
    background: var(--line-2);
    color: var(--ink);
}

.cmp-msg[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
    border: 1px solid var(--line);
    background: var(--line-2);
}

.cmp-msg.is-bad[b-w2rbrynizs] {
    background: var(--neg-soft);
    color: var(--neg);
    border-color: rgba(185,28,28,.2);
}

.cmp-msg i[b-w2rbrynizs] { font-size: 14px; }

/* ── Hero stats (results view) ───────────────────────── */
.cmp-hero[b-w2rbrynizs] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.cmp-tile[b-w2rbrynizs] {
    background: var(--surface);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 100px;
}

.cmp-tile-label[b-w2rbrynizs] {
    font-size: 11.5px;
    color: var(--ink-2);
    font-weight: 500;
}

.cmp-tile-value[b-w2rbrynizs] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1.1;
}

.cmp-tile-primary .cmp-tile-value[b-w2rbrynizs] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.9px;
    color: var(--pos);
}

.cmp-tile-foot[b-w2rbrynizs] {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cmp-tile-foot i[b-w2rbrynizs] { font-size: 11px; }

/* ── Card primitive ──────────────────────────────────── */
.cmp-card[b-w2rbrynizs] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.cmp-card-head[b-w2rbrynizs] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.cmp-card-title[b-w2rbrynizs] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cmp-card-title i[b-w2rbrynizs] { color: var(--ink-2); font-size: 14px; }

.cmp-card-sub[b-w2rbrynizs] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--ink-2);
}

.cmp-card-body[b-w2rbrynizs] {
    padding: 16px 20px 18px;
}

/* ── Price checker ───────────────────────────────────── */
.cmp-checker[b-w2rbrynizs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cmp-checker-input[b-w2rbrynizs] {
    position: relative;
    display: flex;
    align-items: center;
}

.cmp-input[b-w2rbrynizs] {
    width: 100%;
    padding: 12px 36px 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.cmp-input[b-w2rbrynizs]::placeholder { color: var(--ink-3); }
.cmp-input:hover[b-w2rbrynizs] { border-color: var(--ink-3); }
.cmp-input:focus[b-w2rbrynizs] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

.cmp-input[b-w2rbrynizs]::-webkit-outer-spin-button,
.cmp-input[b-w2rbrynizs]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}

.cmp-checker-currency[b-w2rbrynizs] {
    position: absolute;
    right: 14px;
    color: var(--ink-3);
    font-size: 16px;
    font-weight: 600;
    pointer-events: none;
}

.cmp-verdict[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid var(--line);
    background: var(--line-2);
    color: var(--ink);
}

.cmp-verdict i[b-w2rbrynizs] { font-size: 16px; flex-shrink: 0; }

.cmp-verdict-good[b-w2rbrynizs] { background: var(--pos-soft); color: var(--pos); border-color: rgba(21,128,61,.25); }
.cmp-verdict-ok[b-w2rbrynizs] { background: var(--pos-soft); color: var(--pos); border-color: rgba(21,128,61,.18); }
.cmp-verdict-warn[b-w2rbrynizs] { background: var(--warn-soft); color: var(--warn); border-color: rgba(245,158,11,.25); }
.cmp-verdict-bad[b-w2rbrynizs] { background: var(--neg-soft); color: var(--neg); border-color: rgba(185,28,28,.25); }
.cmp-verdict-neutral[b-w2rbrynizs] { background: var(--line-2); color: var(--ink-2); }

/* ── History ─────────────────────────────────────────── */
.cmp-history[b-w2rbrynizs] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmp-entry[b-w2rbrynizs] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-2);
    transition: background-color 120ms ease;
}

.cmp-entry:hover[b-w2rbrynizs] { background: var(--line-2); }
.cmp-entry:last-child[b-w2rbrynizs] { border-bottom: none; }

.cmp-entry-meta[b-w2rbrynizs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cmp-entry-date[b-w2rbrynizs] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.cmp-entry-store[b-w2rbrynizs] {
    font-size: 12px;
    color: var(--ink-3);
}

.cmp-entry-price-wrap[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cmp-entry-price[b-w2rbrynizs] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.3px;
}

.cmp-entry.is-min .cmp-entry-price[b-w2rbrynizs] { color: var(--pos); }
.cmp-entry.is-max .cmp-entry-price[b-w2rbrynizs] { color: var(--neg); }

.cmp-tag[b-w2rbrynizs] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cmp-tag-pos[b-w2rbrynizs] { background: var(--pos-soft); color: var(--pos); border: 1px solid rgba(21,128,61,.2); }
.cmp-tag-neg[b-w2rbrynizs] { background: var(--neg-soft); color: var(--neg); border: 1px solid rgba(185,28,28,.2); }

.cmp-bar-track[b-w2rbrynizs] {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--line-2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}

.cmp-bar-fill[b-w2rbrynizs] {
    height: 100%;
    background: var(--ink-3);
    border-radius: 2px;
    transition: width 200ms ease;
}

.cmp-bar-fill.is-min[b-w2rbrynizs] { background: var(--pos); }
.cmp-bar-fill.is-max[b-w2rbrynizs] { background: var(--neg); }

/* ── Empty card ──────────────────────────────────────── */
.cmp-empty-card[b-w2rbrynizs] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cmp-empty-icon[b-w2rbrynizs] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--line-2);
    color: var(--ink-3);
    display: grid;
    place-items: center;
    font-size: 22px;
    margin-bottom: 8px;
}

.cmp-empty-title[b-w2rbrynizs] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.cmp-empty-sub[b-w2rbrynizs] {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ink-2);
}

.cmp-btn[b-w2rbrynizs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    text-decoration: none;
}

.cmp-btn-primary[b-w2rbrynizs] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cmp-btn-primary:hover[b-w2rbrynizs] { background: var(--ink-hover); color: var(--on-ink); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 700px) {
    .cmp-shell[b-w2rbrynizs] { gap: 14px; }
    .cmp-camera[b-w2rbrynizs] { flex-direction: column; text-align: center; padding: 20px; gap: 10px; }
    .cmp-camera-arrow[b-w2rbrynizs] { display: none; }
    .cmp-hero[b-w2rbrynizs] { grid-template-columns: 1fr 1fr; }
    .cmp-tile-primary[b-w2rbrynizs] { grid-column: 1 / -1; }
    .cmp-tile[b-w2rbrynizs] { padding: 14px 16px; }
    .cmp-tile-value[b-w2rbrynizs] { font-size: 19px; }
    .cmp-tile-primary .cmp-tile-value[b-w2rbrynizs] { font-size: 24px; }
}

@media (max-width: 420px) {
    .cmp-hero[b-w2rbrynizs] { grid-template-columns: 1fr; }
    .cmp-tile-primary[b-w2rbrynizs] { grid-column: auto; }
}

/* Lista de lojas com 1 report apenas — sinais directionais, sem fiabilidade.
   Visualmente subdued (opacidade reduzida + borda dashed) para o utilizador
   distinguir à primeira vista que não é a mesma qualidade de informação
   que as lojas com sample suficiente (.cmp-community-stores). */
.cmp-community-stores-weak[b-w2rbrynizs] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    opacity: 0.85;
}
.cmp-entry.is-weak[b-w2rbrynizs] {
    opacity: 0.75;
}
.cmp-entry.is-weak .cmp-entry-price[b-w2rbrynizs] {
    color: var(--ink-2);
}
.cmp-entry.is-weak .cmp-bar-track[b-w2rbrynizs] {
    display: none;
}

.cmp-fraca-only[b-w2rbrynizs] {
    background: var(--warn-soft);
    border-bottom: 1px solid var(--line);
}
.cmp-fraca-only .cmp-empty-msg[b-w2rbrynizs] {
    color: var(--ink);
}
.cmp-fraca-only i[b-w2rbrynizs] { color: var(--warn); margin-right: 4px; }

/* ─────────────────────────────────────────────────────────
   Variants strip — mostra a que variantes específicas se
   referem os preços listados. Ajuda a desambiguar quando
   o conceito tem múltiplas variantes (ex: "Vinho Tinto" →
   "Bocage 1L" / "Periquita 750ml").
   ───────────────────────────────────────────────────────── */
.cmp-variants[b-w2rbrynizs] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cmp-variants-head[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cmp-variants-head i[b-w2rbrynizs] { color: var(--ink-3); font-size: 13px; }

.cmp-variants-list[b-w2rbrynizs] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cmp-variant-chip[b-w2rbrynizs] {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    background: var(--line-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cmp-variant-chip.is-unused[b-w2rbrynizs] { opacity: 0.55; }

.cmp-variant-name[b-w2rbrynizs] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cmp-variant-meta[b-w2rbrynizs] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.3;
}

.cmp-variant-brand[b-w2rbrynizs] {
    color: var(--ink-2);
    font-weight: 500;
}

.cmp-variant-format[b-w2rbrynizs] {
    color: var(--ink-3);
}

.cmp-variant-count[b-w2rbrynizs] {
    margin-left: auto;
    color: var(--ink-2);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.cmp-variant-count i[b-w2rbrynizs] { font-size: 10px; }
.cmp-variant-empty[b-w2rbrynizs] {
    margin-left: auto;
    color: var(--ink-3);
    font-style: italic;
}

@media (max-width: 420px) {
    .cmp-variant-chip[b-w2rbrynizs] { flex: 1 1 100%; }
}

/* ─────────────────────────────────────────────────────────
   Variant tag inline em cada entry do histórico — só aparece
   quando há > 1 variante com compras (caso contrário seria
   redundante).
   ───────────────────────────────────────────────────────── */
.cmp-entry-variant[b-w2rbrynizs] {
    font-size: 11.5px;
    color: var(--ink-2);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmp-entry-variant i[b-w2rbrynizs] { font-size: 10px; color: var(--ink-3); }

/* ─────────────────────────────────────────────────────────
   Auto-load comunidade — estados loading / empty / opt-in
   na vista de detalhe de produto.
   ───────────────────────────────────────────────────────── */
.cmp-community-loading[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    color: var(--ink-2);
    font-size: 13px;
}

.cmp-community-empty[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--line-2);
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    color: var(--ink-2);
    font-size: 12.5px;
}
.cmp-community-empty i[b-w2rbrynizs] { color: var(--ink-3); font-size: 14px; }
.cmp-community-empty strong[b-w2rbrynizs] { color: var(--ink); font-weight: 600; }

.cmp-community-optin[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(21,128,61,.04), var(--surface));
    border: 1px solid rgba(21,128,61,.18);
    border-radius: var(--r-md);
}
.cmp-community-optin > i[b-w2rbrynizs] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(21,128,61,.12);
    color: var(--pos, #15803D);
    font-size: 14px;
    flex-shrink: 0;
}
.cmp-community-optin-text[b-w2rbrynizs] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cmp-community-optin-text strong[b-w2rbrynizs] { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.cmp-community-optin-text small[b-w2rbrynizs] { font-size: 11.5px; color: var(--ink-3); }

.cmp-btn-secondary[b-w2rbrynizs] {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line-strong, var(--line));
}
.cmp-btn-secondary:hover[b-w2rbrynizs] {
    background: var(--line-2);
    border-color: var(--ink-3);
}

@media (max-width: 420px) {
    .cmp-community-optin[b-w2rbrynizs] { flex-direction: column; align-items: stretch; text-align: left; gap: 10px; }
    .cmp-community-optin > i[b-w2rbrynizs] { align-self: flex-start; }
}

/* ─────────────────────────────────────────────────────────
   Per-variant card — cada variante do conceito tem o seu
   próprio "mini-comparador" com hero + comunidade + histórico
   próprios. Garante comparação justa SKU vs SKU.
   ───────────────────────────────────────────────────────── */
.cmp-vcard[b-w2rbrynizs] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cmp-vcard-head[b-w2rbrynizs] {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--line-2);
    background: var(--line-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cmp-vcard-title[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cmp-vcard-title i[b-w2rbrynizs] {
    color: var(--ink-3);
    font-size: 13px;
    flex-shrink: 0;
}

.cmp-vcard-title h2[b-w2rbrynizs] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.cmp-vcard-meta[b-w2rbrynizs] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11.5px;
    color: var(--ink-3);
}

.cmp-vcard-meta > span[b-w2rbrynizs] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.cmp-vcard-meta .cmp-vcard-count[b-w2rbrynizs] {
    margin-left: auto;
    color: var(--ink-2);
    font-weight: 500;
}

.cmp-vcard-meta .cmp-vcard-count i[b-w2rbrynizs] { font-size: 10px; }

/* Hero da variante: tiles mais compactos que o concept-level */
.cmp-hero-variant[b-w2rbrynizs] {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--line-2);
}

.cmp-hero-variant .cmp-tile[b-w2rbrynizs] { padding: 12px 14px; min-height: 78px; }
.cmp-hero-variant .cmp-tile-value[b-w2rbrynizs] { font-size: 17px; }
.cmp-hero-variant .cmp-tile-primary .cmp-tile-value[b-w2rbrynizs] { font-size: 21px; }

@media (max-width: 700px) {
    .cmp-hero-variant[b-w2rbrynizs] { grid-template-columns: 1fr 1fr; }
    .cmp-hero-variant .cmp-tile-primary[b-w2rbrynizs] { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
    .cmp-hero-variant[b-w2rbrynizs] { grid-template-columns: 1fr 1fr; }
    .cmp-hero-variant .cmp-tile-primary[b-w2rbrynizs] { grid-column: 1 / -1; }
    .cmp-hero-variant .cmp-tile-value[b-w2rbrynizs] { font-size: 15px; }
    .cmp-hero-variant .cmp-tile-primary .cmp-tile-value[b-w2rbrynizs] { font-size: 19px; }
}

/* Comunidade dentro do vcard: bordas em raio só nos cantos internos */
.cmp-vcard[b-w2rbrynizs]  .cmp-card.cmp-community-card {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--line-2);
    background: linear-gradient(180deg, rgba(21,128,61,.04), var(--surface));
}

.cmp-vcard .cmp-community-empty[b-w2rbrynizs] {
    margin: 12px 14px;
}

.cmp-vcard-history[b-w2rbrynizs] {
    border-top: none;
}

.cmp-vcard-history-head[b-w2rbrynizs] {
    padding: 12px 18px 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ink-3);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cmp-vcard-history-head i[b-w2rbrynizs] { font-size: 11px; }

/* ─────────────────────────────────────────────────────────
   Identification banner — aparece quando uma foto foi
   identificada via Gemini Vision. Mostra os campos
   estruturados (nome, marca, formato, sabor) e nível de
   confiança. Cor borda varia consoante confidence.
   ───────────────────────────────────────────────────────── */
.cmp-identified[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-3);
    border-radius: var(--r-md);
    animation: cmp-identified-in-b-w2rbrynizs 200ms ease-out;
}

.cmp-identified.is-conf-high[b-w2rbrynizs] { border-left-color: var(--pos, #15803D); }
.cmp-identified.is-conf-medium[b-w2rbrynizs] { border-left-color: var(--warn, #B45309); }
.cmp-identified.is-conf-low[b-w2rbrynizs] { border-left-color: var(--ink-3); }

@keyframes cmp-identified-in-b-w2rbrynizs {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.cmp-identified-icon[b-w2rbrynizs] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 14px;
    flex-shrink: 0;
}

.cmp-identified-body[b-w2rbrynizs] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cmp-identified-title[b-w2rbrynizs] {
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.3;
}
.cmp-identified-title strong[b-w2rbrynizs] {
    color: var(--ink);
    font-weight: 600;
}

.cmp-identified-meta[b-w2rbrynizs] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 11.5px;
    color: var(--ink-3);
}
.cmp-identified-meta > span[b-w2rbrynizs] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.cmp-identified-meta i[b-w2rbrynizs] { font-size: 10px; }

.cmp-identified-conf[b-w2rbrynizs] {
    margin-left: auto;
    font-weight: 500;
}
.cmp-identified.is-conf-high .cmp-identified-conf[b-w2rbrynizs] { color: var(--pos, #15803D); }
.cmp-identified.is-conf-medium .cmp-identified-conf[b-w2rbrynizs] { color: var(--warn, #B45309); }

@media (max-width: 420px) {
    .cmp-identified[b-w2rbrynizs] { flex-wrap: wrap; }
    .cmp-identified-meta[b-w2rbrynizs] { gap: 4px 8px; }
    .cmp-identified-conf[b-w2rbrynizs] { margin-left: 0; width: 100%; margin-top: 2px; }
}

/* ── Header da resposta cluster-aware ────────────────
   Quando "Pesquisar 'X' na comunidade" devolve múltiplos
   clusters (SKUs distintos), mostra um cabeçalho que
   explica o contexto antes da lista de cards. */
.cmp-cluster-header[b-w2rbrynizs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.cmp-cluster-title[b-w2rbrynizs] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cmp-cluster-title i[b-w2rbrynizs] { color: var(--accent); }
.cmp-cluster-sub[b-w2rbrynizs] {
    font-size: 12.5px;
    color: var(--ink-2);
    margin: 4px 0 0 0;
}

/* ══════════════════════════════════════════════════════════════
   Search hero — protagonista quando a feature de foto está
   desactivada. Input maior, padding mais respirado, focus state
   destacado. Acompanhado por chips de exemplos clicáveis logo
   abaixo (cmp-search-examples) para convidar à acção sem precisar
   do user pensar "o que escrevo aqui?".
   ══════════════════════════════════════════════════════════════ */
.cmp-search-wrap.cmp-search-wrap-hero[b-w2rbrynizs] {
    margin-top: 8px;
    padding: 6px 18px 6px 48px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.cmp-search-wrap.cmp-search-wrap-hero:focus-within[b-w2rbrynizs] {
    border-color: var(--ink);
    box-shadow: 0 0 0 4px rgba(9, 9, 11, 0.06);
}
.cmp-search-wrap.cmp-search-wrap-hero .cmp-search-icon[b-w2rbrynizs] {
    left: 18px;
    font-size: 18px;
}
.cmp-search-wrap.cmp-search-wrap-hero .cmp-search[b-w2rbrynizs] {
    /* O wrapper já tem border + background + focus state via :focus-within.
       O input fica transparente para evitar duplo retângulo
       (border do wrapper + border default do input + outline do browser). */
    font-size: 16px;
    padding: 16px 0;
    line-height: 1.4;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.cmp-search-wrap.cmp-search-wrap-hero .cmp-search:focus[b-w2rbrynizs] {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Chips de exemplos sugeridos — aparecem quando o campo está vazio,
   somem assim que o user começa a escrever. Acção: tap preenche e
   dispara a pesquisa. */
.cmp-search-examples[b-w2rbrynizs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0 4px;
}
.cmp-search-examples-label[b-w2rbrynizs] {
    font-size: 11.5px;
    color: var(--ink-3);
    font-weight: 500;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cmp-search-example-chip[b-w2rbrynizs] {
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 140ms ease;
}
.cmp-search-example-chip:hover[b-w2rbrynizs] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .cmp-search-wrap.cmp-search-wrap-hero .cmp-search[b-w2rbrynizs] { font-size: 15px; padding: 14px 0; }
    .cmp-search-examples-label[b-w2rbrynizs] { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   "Onde podes poupar" — estado vazio do Comparador
   Reaproveita SavingsSignal data. Lista de até 5 produtos onde o
   user paga acima da mediana. Click row → abre histórico.
   ══════════════════════════════════════════════════════════════ */
.cmp-savings[b-w2rbrynizs] {
    margin-top: 28px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.cmp-savings-head[b-w2rbrynizs] {
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-2);
}

.cmp-savings-eyebrow[b-w2rbrynizs] {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--pos);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
}

.cmp-savings-title[b-w2rbrynizs] {
    margin: 0;
    font-size: 22px;
    font-weight: 300;
    color: var(--ink);
    letter-spacing: -0.4px;
    line-height: 1.15;
}

.cmp-savings-sub[b-w2rbrynizs] {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 580px;
}

.cmp-savings-list[b-w2rbrynizs] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cmp-savings-row[b-w2rbrynizs] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 8px;
    border-bottom: 1px solid var(--line-2);
    cursor: pointer;
    transition: background 140ms ease, padding 140ms ease;
    border-radius: 8px;
}
.cmp-savings-row:last-child[b-w2rbrynizs] { border-bottom: none; }
.cmp-savings-row:hover[b-w2rbrynizs] {
    background: var(--line-2);
    padding-left: 14px;
}

.cmp-savings-row-info[b-w2rbrynizs] { flex: 1; min-width: 0; }
.cmp-savings-row-name[b-w2rbrynizs] {
    font-size: 14px;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmp-savings-row-meta[b-w2rbrynizs] {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.5;
}
.cmp-savings-row-meta strong[b-w2rbrynizs] { color: var(--ink-2); font-weight: 600; }

.cmp-savings-row-saving[b-w2rbrynizs] {
    text-align: right;
    flex-shrink: 0;
}
.cmp-savings-row-saving-amount[b-w2rbrynizs] {
    font-size: 15px;
    font-weight: 700;
    color: var(--pos);
    letter-spacing: -0.2px;
    font-variant-numeric: tabular-nums;
}
.cmp-savings-row-saving-pct[b-w2rbrynizs] {
    font-size: 11px;
    color: var(--pos);
    margin-top: 2px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.cmp-savings-row-chev[b-w2rbrynizs] {
    color: var(--ink-3);
    font-size: 14px;
    transition: color 140ms ease, transform 140ms ease;
}
.cmp-savings-row:hover .cmp-savings-row-chev[b-w2rbrynizs] {
    color: var(--ink);
    transform: translateX(2px);
}

@media (max-width: 480px) {
    .cmp-savings[b-w2rbrynizs] { padding: 18px 16px; }
    .cmp-savings-title[b-w2rbrynizs] { font-size: 20px; }
    .cmp-savings-row-meta[b-w2rbrynizs] { font-size: 11.5px; }
}
/* /Components/Pages/Compras.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Nova Compra — sophisticated monochrome
   Tokens vêm de app.css (--ink, --line, --pos, --neg, etc.)
   ───────────────────────────────────────────────────────── */

.nc-shell[b-jfsp9i96ia] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    min-width: 0;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.nc-shell .num[b-jfsp9i96ia] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Messages ────────────────────────────────────────── */
.nc-msg[b-jfsp9i96ia] {
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    border: 1px solid var(--line);
    background: var(--line-2);
    color: var(--ink);
}

.nc-msg.is-pos[b-jfsp9i96ia] {
    background: var(--pos-soft);
    color: var(--pos);
    border-color: rgba(21, 128, 61, .2);
}

.nc-msg.is-bad[b-jfsp9i96ia] {
    background: var(--neg-soft);
    color: var(--neg);
    border-color: rgba(185, 28, 28, .2);
}

/* ── Header ──────────────────────────────────────────── */
.nc-header[b-jfsp9i96ia] { margin-bottom: 0; }

.nc-h1[b-jfsp9i96ia] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1.2;
}

.nc-h1-sub[b-jfsp9i96ia] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ── Meta strip ──────────────────────────────────────── */
.nc-meta[b-jfsp9i96ia] {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    align-items: end;
}

.nc-meta-field[b-jfsp9i96ia] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.nc-meta-label[b-jfsp9i96ia] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0;
    text-transform: none;
}

.nc-store-row[b-jfsp9i96ia] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.nc-meta-empty[b-jfsp9i96ia] {
    font-size: 13px;
    color: var(--ink-3);
}

.nc-chip[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}

.nc-chip:hover[b-jfsp9i96ia] { border-color: var(--ink-3); color: var(--ink); }

.nc-chip.is-active[b-jfsp9i96ia] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}

.nc-meta-input[b-jfsp9i96ia] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color-scheme: light;
}

.nc-meta-input:focus[b-jfsp9i96ia] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--ring);
}

/* Detected store (when AI found a name not in registered supermarkets) */
.nc-meta-detected[b-jfsp9i96ia] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--warn-soft);
    border: 1px solid rgba(245, 158, 11, .25);
    border-radius: var(--r-sm);
}

.nc-meta-detected > i[b-jfsp9i96ia] {
    color: var(--warn);
    font-size: 13px;
    flex-shrink: 0;
}

.nc-meta-detected-input[b-jfsp9i96ia] {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.nc-meta-detected-input:focus[b-jfsp9i96ia] {
    outline: none;
}

.nc-meta-detected-hint[b-jfsp9i96ia] {
    font-size: 11.5px;
    color: var(--warn);
    font-weight: 500;
    flex-shrink: 0;
}

/* Data row com botão "Hoje" — surge quando a data não é hoje
   (provavelmente OCR adivinhou). Permite reset rápido. */
.nc-date-row[b-jfsp9i96ia] {
    display: flex;
    gap: 6px;
    align-items: center;
}
.nc-date-row .nc-meta-input[b-jfsp9i96ia] { flex: 1; min-width: 0; }

.nc-date-today[b-jfsp9i96ia] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}
.nc-date-today:hover[b-jfsp9i96ia] {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--line-2);
}
.nc-date-today i[b-jfsp9i96ia] { font-size: 11px; }

.nc-date-warn[b-jfsp9i96ia] {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--warn);
    font-weight: 500;
}
.nc-date-warn i[b-jfsp9i96ia] { font-size: 11px; }

/* ── Method tabs ─────────────────────────────────────── */
.nc-methods[b-jfsp9i96ia] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Stack vertical para Excel + Manual à direita */
.nc-method-secondary-stack[b-jfsp9i96ia] {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    background: var(--line);
}

.nc-method[b-jfsp9i96ia] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: none;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease;
    position: relative;
}

/* Foto do talão — card grande, ênfase visual */
.nc-method-primary[b-jfsp9i96ia] {
    padding: 28px 24px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    min-height: 140px;
}

.nc-method-primary .nc-method-icon[b-jfsp9i96ia] {
    font-size: 32px;
    color: var(--ink);
}

.nc-method-primary .nc-method-text strong[b-jfsp9i96ia] {
    font-size: 18px;
    line-height: 1.2;
}

.nc-method-primary .nc-method-text small[b-jfsp9i96ia] {
    font-size: 13px;
}

/* Excel + Manual — ficam mais compactos */
.nc-method-secondary[b-jfsp9i96ia] {
    padding: 12px 14px;
    min-height: 0;
}

.nc-method-secondary .nc-method-icon[b-jfsp9i96ia] {
    font-size: 16px;
}

.nc-method-secondary .nc-method-text strong[b-jfsp9i96ia] {
    font-size: 13px;
}

.nc-method-secondary .nc-method-text small[b-jfsp9i96ia] {
    font-size: 11.5px;
}

.nc-method:hover:not(:disabled)[b-jfsp9i96ia] { background: var(--line-2); }

/* Estado disabled — quando família atinge limite de produtos do plano.
   Aspecto: opacity reduzida + cursor not-allowed + sem hover. Mantém o
   conteúdo legível para o utilizador perceber a feature, mas claramente
   inactivo. Aliás reforça a ideia "tens isto, mas precisas de upgrade". */
.nc-method:disabled[b-jfsp9i96ia],
.nc-method[disabled][b-jfsp9i96ia] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.nc-method:disabled .nc-method-icon[b-jfsp9i96ia],
.nc-method[disabled] .nc-method-icon[b-jfsp9i96ia] { color: var(--ink-3); }

/* Estado activo — sem inversão de cor nem moldura grande.
   Apenas um indicador subtil: surface levemente mais quente + ícone destacado.
   !important para garantir vitória contra qualquer estilo legacy do bundle. */
.nc-method.is-active[b-jfsp9i96ia] {
    background: var(--surface) !important;
    color: var(--ink) !important;
}

.nc-method.is-active[b-jfsp9i96ia]::after {
    content: none;
}

.nc-method-icon[b-jfsp9i96ia] {
    font-size: 18px;
    color: var(--ink-2);
    flex-shrink: 0;
}

.nc-method.is-active .nc-method-icon[b-jfsp9i96ia] { color: var(--ink); }

.nc-method-text[b-jfsp9i96ia] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nc-method-text strong[b-jfsp9i96ia] {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nc-method-text small[b-jfsp9i96ia] {
    font-size: 12px;
    color: var(--ink-3);
}

.nc-method.is-active .nc-method-text small[b-jfsp9i96ia] {
    /* Texto secundário no método activo — surface não invertido, mantém legibilidade nos dois temas. */
    color: var(--ink-2);
}

.nc-ai-pill[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 4px;
}

.nc-method.is-active .nc-ai-pill[b-jfsp9i96ia] {
    background: var(--ink);
    color: var(--on-ink);
    box-shadow: 0 0 0 1px var(--ink-2);
}

/* ── Loading state ───────────────────────────────────── */
.nc-loading[b-jfsp9i96ia] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.nc-spinner[b-jfsp9i96ia] {
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--line);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: nc-spin-b-jfsp9i96ia 0.7s linear infinite;
    margin-bottom: 4px;
}

@keyframes nc-spin-b-jfsp9i96ia { to { transform: rotate(360deg); } }

.nc-loading-title[b-jfsp9i96ia] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.nc-loading-sub[b-jfsp9i96ia] {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
}

.nc-progress[b-jfsp9i96ia] {
    width: 100%;
    max-width: 280px;
    height: 3px;
    background: var(--line-2);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.nc-progress-bar[b-jfsp9i96ia] {
    height: 100%;
    width: 50%;
    background: var(--ink);
    border-radius: 999px;
    animation: nc-progress-b-jfsp9i96ia 1.4s ease-in-out infinite;
}

@keyframes nc-progress-b-jfsp9i96ia {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ── Import layout (dropzone + tips) ─────────────────── */
.nc-import-layout[b-jfsp9i96ia] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start;
}

.nc-dropzone[b-jfsp9i96ia] {
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-lg);
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.nc-dropzone:hover[b-jfsp9i96ia] {
    border-color: var(--ink);
    background: var(--line-2);
}

.nc-dropzone-icon[b-jfsp9i96ia] {
    width: 56px;
    height: 56px;
    border-radius: var(--r-lg);
    background: var(--ink);
    color: var(--on-ink);
    display: grid;
    place-items: center;
    font-size: 22px;
    margin-bottom: 4px;
}

.nc-dropzone-title[b-jfsp9i96ia] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.3px;
}

.nc-dropzone-text[b-jfsp9i96ia] {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
    max-width: 460px;
    line-height: 1.55;
}

.nc-dropzone-format[b-jfsp9i96ia] {
    font-size: 12px;
    color: var(--ink-3);
    margin: 4px 0 0;
}

.nc-dropzone-format code[b-jfsp9i96ia] {
    background: var(--line-2);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11.5px;
    color: var(--ink);
}

.nc-dropzone-btns[b-jfsp9i96ia] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

.nc-features[b-jfsp9i96ia] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-3);
}

.nc-features span[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nc-features i[b-jfsp9i96ia] {
    font-size: 12px;
    color: var(--ink-2);
}

.nc-warnings[b-jfsp9i96ia] {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--warn);
    text-align: left;
    width: 100%;
}

.nc-detected[b-jfsp9i96ia] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--line-2);
    border-radius: var(--r-sm);
    width: 100%;
    max-width: 360px;
}

.nc-detected i[b-jfsp9i96ia] { color: var(--ink-2); font-size: 13px; }

.nc-detected-input[b-jfsp9i96ia] {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    color: var(--ink);
}

.nc-tips[b-jfsp9i96ia] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nc-tips-label[b-jfsp9i96ia] {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-2);
}

.nc-tips-list[b-jfsp9i96ia] {
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.45;
}

.nc-tips-text[b-jfsp9i96ia] {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
}

/* ── Manual mode ─────────────────────────────────────── */
.nc-manual[b-jfsp9i96ia] { display: flex; flex-direction: column; gap: 12px; }

.nc-manual-caption[b-jfsp9i96ia] {
    margin: 0;
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.nc-product-grid[b-jfsp9i96ia] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.nc-product[b-jfsp9i96ia] {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.nc-product:hover[b-jfsp9i96ia] {
    border-color: var(--ink);
    box-shadow: var(--shadow-2);
}

.nc-product-main[b-jfsp9i96ia] {
    width: 100%;
    background: transparent;
    border: none;
    padding: 12px 36px 12px 14px;
    text-align: left;
    cursor: pointer;
    color: var(--ink);
}

.nc-product-name[b-jfsp9i96ia] {
    margin: 0 0 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nc-product-meta[b-jfsp9i96ia] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
}

.nc-product-cat[b-jfsp9i96ia] {
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

.nc-product-unit[b-jfsp9i96ia] {
    padding: 1px 6px;
    background: var(--line-2);
    color: var(--ink-2);
    border-radius: 4px;
    font-weight: 500;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.nc-product-inspect[b-jfsp9i96ia] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 11px;
    transition: all 120ms ease;
    padding: 0;
}

.nc-product-inspect:hover[b-jfsp9i96ia] {
    border-color: var(--ink);
    color: var(--ink);
}

.nc-empty[b-jfsp9i96ia] {
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
    padding: 24px 0;
    margin: 0;
    border-top: 1px dashed var(--line);
}

.nc-pagination[b-jfsp9i96ia] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 13px;
}

.nc-pag-btn[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 120ms ease;
}

.nc-pag-btn:hover:not(:disabled)[b-jfsp9i96ia] {
    border-color: var(--ink);
}

.nc-pag-btn:disabled[b-jfsp9i96ia] {
    opacity: 0.4;
    cursor: not-allowed;
}

.nc-pag-info[b-jfsp9i96ia] {
    font-size: 12.5px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* ── Buttons (shared) ────────────────────────────────── */
.nc-btn[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
    text-decoration: none;
}

.nc-btn:disabled[b-jfsp9i96ia] { opacity: 0.6; cursor: not-allowed; }

.nc-btn-primary[b-jfsp9i96ia] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}

.nc-btn-primary:hover:not(:disabled)[b-jfsp9i96ia] {
    background: var(--ink-hover);
    border-color: var(--ink-hover);
    color: var(--on-ink);
}

.nc-btn-secondary[b-jfsp9i96ia] {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

.nc-btn-secondary:hover:not(:disabled)[b-jfsp9i96ia] {
    background: var(--line-2);
    border-color: var(--ink-3);
}

/* ── AI strip (when items extracted) ─────────────────── */
.nc-ai-strip[b-jfsp9i96ia] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(90deg, var(--warn-soft), var(--surface));
    border: 1px solid rgba(245, 158, 11, .25);
    border-radius: var(--r-lg);
}

.nc-ai-icon[b-jfsp9i96ia] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--warn);
    color: var(--on-ink);
    display: grid;
    place-items: center;
    font-size: 13px;
    flex-shrink: 0;
}

.nc-ai-text[b-jfsp9i96ia] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    color: var(--ink);
    min-width: 0;
}

.nc-ai-title[b-jfsp9i96ia] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nc-ai-title strong[b-jfsp9i96ia] { font-weight: 600; color: var(--ink); }

.nc-ai-warn[b-jfsp9i96ia] {
    color: var(--warn);
    font-weight: 600;
    font-size: 11.5px;
    padding: 1px 8px;
    background: rgba(245, 158, 11, .12);
    border-radius: 999px;
}

.nc-ai-meta[b-jfsp9i96ia] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--ink-2);
    font-size: 12px;
}

.nc-ai-meta-item[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nc-ai-meta-item i[b-jfsp9i96ia] {
    font-size: 11px;
    color: var(--ink-3);
}

.nc-ai-meta-sep[b-jfsp9i96ia] {
    color: var(--ink-4);
}

.nc-ai-meta-hint[b-jfsp9i96ia] {
    color: var(--ink-3);
    font-style: italic;
}

.nc-link-btn[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: all 120ms ease;
    flex-shrink: 0;
}

.nc-link-btn:hover[b-jfsp9i96ia] {
    background: var(--surface-hover);
    color: var(--ink);
    border-color: var(--line);
}

/* ── Cart toolbar ────────────────────────────────────── */
.cart-toolbar[b-jfsp9i96ia] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* Bulk toggle: marcar/desmarcar todos do stock. Estilo discreto até hover. */
.btn-bulk-stock[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}
.btn-bulk-stock i[b-jfsp9i96ia] { font-size: 12px; color: var(--ink-3); }

.btn-bulk-stock:hover[b-jfsp9i96ia] {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--line-2);
}
.btn-bulk-stock:hover i[b-jfsp9i96ia] { color: var(--ink); }

.btn-bulk-stock.is-on[b-jfsp9i96ia] { border-color: var(--ink-2); color: var(--ink); }
.btn-bulk-stock.is-on i[b-jfsp9i96ia] { color: var(--ink); }

.btn-bulk-stock.is-mixed[b-jfsp9i96ia] {
    border-style: dashed;
}

.btn-add-line[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 120ms ease;
}

.btn-add-line:hover[b-jfsp9i96ia] {
    border-color: var(--ink);
    color: var(--ink);
    border-style: solid;
    background: var(--line-2);
}

/* ════════════════════════════════════════════════════════
   CART — table-style, monochromatic (mockup v3)
   ════════════════════════════════════════════════════════ */

/* Kill ALL number input spinners inside cart */
.cart-list input[type="number"][b-jfsp9i96ia],
.cart-list input[type="number"]:hover[b-jfsp9i96ia],
.cart-list input[type="number"]:focus[b-jfsp9i96ia] {
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.cart-list input[type="number"][b-jfsp9i96ia]::-webkit-outer-spin-button,
.cart-list input[type="number"][b-jfsp9i96ia]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.cart-list[b-jfsp9i96ia] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    /* overflow: visible para permitir que o dropdown do menu
       3-pontinhos saia da última linha sem ser cortado.
       Os cantos são arredondados via .cart-list-head e .cart-row:last-child. */
    overflow: visible;
}

/* Arredondar cantos das primeiras/últimas linhas para manter o look pill */
.cart-list-head[b-jfsp9i96ia] {
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
}
.cart-list .cart-row:last-child[b-jfsp9i96ia] {
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
    /* SEM overflow:hidden — o background segue automaticamente o border-radius
       e o overflow visível é necessário para o menu 3-pontinhos sair fora. */
}

/* Column header (desktop only) */
.cart-list-head[b-jfsp9i96ia],
.cart-row-grid[b-jfsp9i96ia] {
    display: grid;
    grid-template-columns:
        100px                   /* status (pills empilhadas: Existe/Novo + Stock) */
        minmax(0, 2.2fr)        /* product (categoria movida para o menu 3-pontinhos) */
        104px                   /* qty */
        minmax(110px, 0.7fr)    /* unit price */
        minmax(80px, auto)      /* subtotal */
        32px                    /* menu (3-pontinhos) */
        32px;                   /* delete (X) */
    gap: 12px;
    align-items: center;
}

.cart-list-head[b-jfsp9i96ia] {
    padding: 11px 18px;
    background: var(--line-2);
    border-bottom: 1px solid var(--line);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-3);
}
.cart-head-num[b-jfsp9i96ia] { text-align: right; }

/* ── Row ───────────────────────────────────────────── */
.cart-row[b-jfsp9i96ia] {
    position: relative;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
    transition: background-color 120ms ease;
}
.cart-row:last-child[b-jfsp9i96ia] { border-bottom: none; }
.cart-row:hover[b-jfsp9i96ia] { background: var(--surface-hover); }
.cart-row.is-linked[b-jfsp9i96ia] { background: rgba(9,9,11,.018); }
.cart-row.is-linked:hover[b-jfsp9i96ia] { background: var(--line-2); }
.cart-row.has-suggestion[b-jfsp9i96ia] { background: var(--warn-soft); }

/* Product cell */
.cart-row-product[b-jfsp9i96ia] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cart-row-icons[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-3);
    flex-shrink: 0;
}
.cart-row-icons i[b-jfsp9i96ia] { font-size: 12px; line-height: 1; }

/* Link ao catálogo — bronze/accent do sistema, com leve pill
   para destacar (informação importante: produto reconhecido). */
.cart-row-link[b-jfsp9i96ia] {
    color: var(--color-accent);
    font-size: 13px !important;
    background: oklch(0.72 0.18 55 / .12);
    padding: 3px;
    border-radius: 5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cart-row-stock[b-jfsp9i96ia] { color: var(--ink-3); }

/* Legacy (no longer used in markup) */
.cart-row-flag[b-jfsp9i96ia] { display: none; }

.cart-name-wrap[b-jfsp9i96ia] {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-name-input[b-jfsp9i96ia] {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.1px;
    transition: all 120ms ease;
}
.cart-name-input:hover[b-jfsp9i96ia] { background: rgba(9,9,11,.04); }
.cart-name-input:focus[b-jfsp9i96ia] {
    outline: none;
    background: var(--surface);
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

/* Category select — ghost with custom chevron */
.cart-row-cat[b-jfsp9i96ia] {
    width: 100%;
    padding: 5px 28px 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--ink-2);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
    transition: all 120ms ease;
    color-scheme: light;
}
.cart-row-cat:hover[b-jfsp9i96ia] {
    background-color: rgba(9,9,11,.04);
    color: var(--ink);
}
.cart-row-cat:focus[b-jfsp9i96ia] {
    outline: none;
    background-color: var(--surface);
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--ring);
    color: var(--ink);
}

/* Cell wrappers (transparent flex containers) */
.cart-row-cell[b-jfsp9i96ia] {
    display: flex;
    align-items: center;
    min-width: 0;
}
/* Em desktop, todas as células numéricas alinhadas à direita
   para combinar com os headers (cart-head-num: text-align right). */
.cart-row-cell--qty[b-jfsp9i96ia]   { justify-content: flex-end; }
.cart-row-cell--price[b-jfsp9i96ia] { justify-content: flex-end; }
.cart-row-cell--sub[b-jfsp9i96ia]   { justify-content: flex-end; }

/* Hide labels (desktop) — visible only on mobile */
.cart-num-label[b-jfsp9i96ia] { display: none; }

/* Subtotal */
.cart-subtotal-val[b-jfsp9i96ia] {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
    text-align: right;
}

/* Linha do subtotal — empilha valor + badge do desconto/discount-add por baixo.
   Razão: o discount é total da linha (não por unidade), por isso fica
   contextualmente junto do subtotal, não junto do preço unitário. */
.cart-subtotal-row[b-jfsp9i96ia] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}

/* ── Stepper ───────────────────────────────────────── */
.cart-stepper[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface);
    height: 28px;
}
.cart-stepper:hover[b-jfsp9i96ia] { border-color: var(--ink-3); }
.cart-stepper:focus-within[b-jfsp9i96ia] {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}
.cart-stepper-btn[b-jfsp9i96ia] {
    width: 26px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: all 120ms ease;
}
.cart-stepper-btn:hover[b-jfsp9i96ia] {
    background: var(--line-2);
    color: var(--ink);
}
.cart-stepper-input[b-jfsp9i96ia] {
    width: 38px;
    border: none;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: center;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    color: var(--ink);
    padding: 0;
}
.cart-stepper-input:focus[b-jfsp9i96ia] { outline: none; background: var(--line-2); }

/* ── Price cell ────────────────────────────────────── */
.cart-row-price-row[b-jfsp9i96ia] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px 8px;
    width: 100%;
    min-width: 0;
}

.cart-num-input[b-jfsp9i96ia],
.cart-row-price-input[b-jfsp9i96ia] {
    width: 78px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
    transition: all 120ms ease;
}
.cart-num-input:hover[b-jfsp9i96ia],
.cart-row-price-input:hover[b-jfsp9i96ia] { background: rgba(9,9,11,.04); }
.cart-num-input:focus[b-jfsp9i96ia],
.cart-row-price-input:focus[b-jfsp9i96ia] {
    outline: none;
    background: var(--surface);
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

/* Hint (price delta) — minimal inline text */
.cart-price-hint[b-jfsp9i96ia] {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
    color: var(--pos);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.cart-price-hint.is-up[b-jfsp9i96ia] { color: var(--neg); }
.cart-price-hint i[b-jfsp9i96ia] { font-size: 9px; opacity: 0.7; }

/* Discount badge — same minimal text style */
.cart-discount-badge[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: transparent;
    border: 1px dashed transparent;
    border-radius: var(--r-sm);
    font-size: 11px;
    color: var(--pos);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 120ms ease, background 120ms ease;
}
.cart-discount-badge:hover[b-jfsp9i96ia] {
    border-color: var(--pos);
    background: var(--pos-soft);
}
.cart-discount-badge i[b-jfsp9i96ia] { font-size: 10px; opacity: 0.7; }

/* Botão "+ desconto" — afordable quando não há desconto.
   Subtle (cinza), só destaca em hover. */
.cart-discount-add[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    font-size: 10.5px;
    color: var(--ink-3);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    text-transform: lowercase;
    transition: all 120ms ease;
}
.cart-discount-add:hover[b-jfsp9i96ia] {
    border-color: var(--ink-2);
    color: var(--ink);
    background: var(--line-2);
    border-style: solid;
}
.cart-discount-add i[b-jfsp9i96ia] { font-size: 10px; }

/* Input inline para editar o desconto. Compacto, alinhado com o estilo
   monetário (tabular-nums). Auto-save no onblur. */
.cart-discount-edit[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    background: var(--surface);
    border: 1px solid var(--pos);
    border-radius: var(--r-sm);
    color: var(--pos);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cart-discount-edit-prefix[b-jfsp9i96ia],
.cart-discount-edit-suffix[b-jfsp9i96ia] { color: var(--pos); }
.cart-discount-input[b-jfsp9i96ia] {
    width: 50px;
    padding: 2px 0;
    border: none;
    background: transparent;
    color: var(--pos);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.cart-discount-input:focus[b-jfsp9i96ia] { outline: none; }
.cart-discount-input[b-jfsp9i96ia]::-webkit-outer-spin-button,
.cart-discount-input[b-jfsp9i96ia]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* ── Validade do lote (cabaz) ──────────────────────────
   Mesmo padrão do desconto: pílula clicável quando set,
   "+ validade" quando vazio, date input em modo edição. */
.cart-expiry-badge[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: transparent;
    border: 1px dashed transparent;
    border-radius: var(--r-sm);
    font-size: 11px;
    color: var(--ink-2);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.cart-expiry-badge:hover[b-jfsp9i96ia] {
    border-color: var(--ink-2);
    background: var(--line-2);
    color: var(--ink);
}
.cart-expiry-badge i[b-jfsp9i96ia] { font-size: 10px; opacity: 0.75; }

.cart-expiry-add[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    font-size: 10.5px;
    color: var(--ink-3);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    text-transform: lowercase;
    transition: all 120ms ease;
}
.cart-expiry-add:hover[b-jfsp9i96ia] {
    border-color: var(--ink-2);
    color: var(--ink);
    background: var(--line-2);
    border-style: solid;
}
.cart-expiry-add i[b-jfsp9i96ia] { font-size: 10px; }

.cart-expiry-edit[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px 0 6px;
    background: var(--surface);
    border: 1px solid var(--ink-2);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 11px;
    font-weight: 600;
}
.cart-expiry-edit > i[b-jfsp9i96ia] { font-size: 10px; opacity: 0.75; }
.cart-expiry-input[b-jfsp9i96ia] {
    padding: 2px 0;
    border: none;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color-scheme: light dark;
    min-width: 110px;
}
.cart-expiry-input:focus[b-jfsp9i96ia] { outline: none; }

.cart-expiry-clear[b-jfsp9i96ia] {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms ease, color 120ms ease;
}
.cart-expiry-clear:hover[b-jfsp9i96ia] {
    background: var(--neg-soft);
    color: var(--neg);
}
.cart-expiry-clear i[b-jfsp9i96ia] { font-size: 11px; }

/* ── Row menu (3-dot) ──────────────────────────────── */
/* ── Coluna de status (1ª coluna) ───────────────────
   Pills com texto explícito (em vez de só ícones).
   - "Existe" / "Novo" — informativo
   - "Stock" / "Sem stock" — clicável, toggle */
.cart-row-status[b-jfsp9i96ia] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.cart-status-pill[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--line-2);
    color: var(--ink-3);
    border: none;
    white-space: nowrap;
    transition: all 120ms ease;
    line-height: 1.4;
}
.cart-status-pill i[b-jfsp9i96ia] { font-size: 10px; line-height: 1; }

/* Linked: existe no catálogo (verde subtil — positivo, é confirmação) */
.cart-status-pill.cart-status-linked[b-jfsp9i96ia] {
    background: var(--pos-soft, #DCFCE7);
    color: var(--pos, #15803D);
}

/* Novo: produto será criado (laranja/accent — chama atenção) */
.cart-status-pill.cart-status-new[b-jfsp9i96ia] {
    background: oklch(0.72 0.18 55 / .12);
    color: var(--color-accent, #C8852C);
}

/* Sugestão: matcher acha que é igual a um produto existente, mas pede
   confirmação. Amarelo = "atenção, decide". Distinto do verde (Existe)
   e do laranja (Novo) — é o estado intermédio, pendente de acção. */
.cart-status-pill.cart-status-suggestion[b-jfsp9i96ia] {
    background: var(--warn-soft, rgba(202, 138, 4, 0.15));
    color: var(--warn, #92400E);
    border: 1px solid rgba(202, 138, 4, 0.25);
}

/* Stock: clicável (button) */
button.cart-status-pill.cart-status-stock[b-jfsp9i96ia] {
    cursor: pointer;
}
button.cart-status-pill.cart-status-stock:hover[b-jfsp9i96ia] {
    background: var(--line);
}
button.cart-status-pill.cart-status-stock.is-on[b-jfsp9i96ia] {
    background: var(--ink);
    color: var(--on-ink);
}
button.cart-status-pill.cart-status-stock.is-on:hover[b-jfsp9i96ia] {
    background: var(--ink-hover);
}

.cart-row-menu[b-jfsp9i96ia],
.cart-row-delete[b-jfsp9i96ia] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-icon-btn[b-jfsp9i96ia] {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--ink-3);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 14px;
    padding: 0;
    opacity: 0;
    transition: all 120ms ease;
}
.cart-row:hover .cart-icon-btn[b-jfsp9i96ia] { opacity: 1; }
.cart-icon-btn:hover[b-jfsp9i96ia] {
    background: rgba(9,9,11,.06);
    color: var(--ink);
    opacity: 1;
}

/* Botão "danger" — para X de apagar. Aparece sempre visível em mobile,
   só em hover em desktop. Hover destaca a vermelho subtil. */
.cart-icon-btn-danger:hover[b-jfsp9i96ia] {
    background: var(--neg-soft, #FEE2E2);
    color: var(--neg, #B91C1C);
}

.cart-menu[b-jfsp9i96ia] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: 4px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Secção dentro do menu (categoria editável) */
.cart-menu-section[b-jfsp9i96ia] {
    padding: 8px 10px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cart-menu-label[b-jfsp9i96ia] {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-3);
}
.cart-menu-cat[b-jfsp9i96ia] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.cart-menu-cat:focus[b-jfsp9i96ia] {
    outline: none;
    border-color: var(--ink-3);
}
.cart-menu-cat-input[b-jfsp9i96ia] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
}
.cart-menu-cat-input:focus[b-jfsp9i96ia] {
    outline: none;
    border-color: var(--ink-3);
}

/* Chip "sem categoria" inline (em baixo do nome) */
.cart-row-no-cat[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 2px 8px;
    background: var(--warn-soft, #FFF4E5);
    color: var(--warn-strong, #B45309);
    font-size: 11px;
    font-weight: 500;
    border-radius: 99px;
    width: fit-content;
}
.cart-row-no-cat i[b-jfsp9i96ia] { font-size: 11px; }

/* Nas últimas 2 linhas, abrir o menu PARA CIMA — caso contrário,
   o overflow:hidden do .cart-list corta-o. */
.cart-row:nth-last-child(-n+2) .cart-menu[b-jfsp9i96ia] {
    top: auto;
    bottom: calc(100% + 4px);
    box-shadow: 0 -8px 24px var(--shadow-3);
}
.cart-menu button[b-jfsp9i96ia] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 12.5px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.cart-menu button:hover[b-jfsp9i96ia] { background: var(--line-2); }
.cart-menu button i[b-jfsp9i96ia] { width: 14px; flex-shrink: 0; color: var(--ink-3); }

.cart-menu-danger[b-jfsp9i96ia] { color: var(--neg) !important; }
.cart-menu-danger:hover[b-jfsp9i96ia] { background: var(--neg-soft) !important; }
.cart-menu-danger i[b-jfsp9i96ia] { color: var(--neg) !important; }

.cart-menu-sep[b-jfsp9i96ia] {
    height: 1px;
    background: var(--line);
    margin: 3px 4px;
}

/* ── Suggestions dropdown (autocomplete) ───────────── */
.cart-suggestions[b-jfsp9i96ia] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-3);
    z-index: 20;
    max-height: 220px;
    overflow-y: auto;
}
.cart-suggestion-item[b-jfsp9i96ia] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cart-suggestion-item:hover[b-jfsp9i96ia] { background: var(--line-2); }
.cart-suggestion-name[b-jfsp9i96ia] { font-weight: 500; color: var(--ink); }
.cart-suggestion-hint[b-jfsp9i96ia] { color: var(--ink-3); font-size: 12px; margin-left: auto; }

/* ── Match suggestion (yellow strip below row) ─────── */
.match-suggestion[b-jfsp9i96ia] {
    margin-top: 10px;
    margin-left: 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(245, 158, 11, .14);
    border: 1px solid rgba(245, 158, 11, .3);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--ink);
    max-width: calc(100% - 26px);
    overflow: hidden;
}
.match-suggestion i[b-jfsp9i96ia] { color: var(--warn); font-size: 13px; flex-shrink: 0; }
.match-suggestion span:not(.actions)[b-jfsp9i96ia] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suggestion-yes[b-jfsp9i96ia], .suggestion-no[b-jfsp9i96ia] {
    padding: 3px 10px;
    border-radius: 4px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease;
}
.suggestion-yes[b-jfsp9i96ia] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.suggestion-yes:hover[b-jfsp9i96ia] { background: var(--ink-hover); }
.suggestion-no[b-jfsp9i96ia] {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--line);
}
.suggestion-no:hover[b-jfsp9i96ia] { background: var(--surface); color: var(--ink); border-color: var(--ink-3); }

/* Banner de proposta de categoria — variante do match-suggestion */
.category-suggestion .suggestion-map-select[b-jfsp9i96ia] {
    padding: 3px 8px;
    border-radius: 4px;
    font: inherit;
    font-size: 11.5px;
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--line);
    cursor: pointer;
    max-width: 180px;
}
.category-suggestion .suggestion-map-select:hover[b-jfsp9i96ia] {
    border-color: var(--ink-3);
    color: var(--ink);
}
.category-suggestion .suggestion-map-select:focus[b-jfsp9i96ia] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

/* ── New category inline input (when chosen "Nova categoria…") ── */
.cart-row-newcat[b-jfsp9i96ia] {
    display: block;
    width: calc(100% - 16px);
    margin-top: 8px;
    margin-left: 8px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--line-2);
    font: inherit;
    font-size: 12.5px;
    color: var(--ink);
}
.cart-row-newcat:focus[b-jfsp9i96ia] {
    outline: none;
    background: var(--surface);
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

/* ── Transaction discount (saldo, cartão, cupão) ───── */
.cart-tx-discount-row[b-jfsp9i96ia] {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--ok-soft, rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-left: 3px solid var(--ok, #22c55e);
    border-radius: var(--r-md);
}
.cart-tx-discount-label[b-jfsp9i96ia] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
}
.cart-tx-discount-label i[b-jfsp9i96ia] { color: var(--ok, #22c55e); font-size: 16px; flex-shrink: 0; }
.cart-tx-discount-label span[b-jfsp9i96ia] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-tx-discount-amount[b-jfsp9i96ia] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ok, #22c55e);
    flex-shrink: 0;
}
.cart-tx-discount-remove[b-jfsp9i96ia] {
    background: transparent;
    border: none;
    color: var(--ink-2);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-tx-discount-remove:hover[b-jfsp9i96ia] { background: rgba(0, 0, 0, 0.05); color: var(--ink); }

/* ── Reconciliação total: talão vs carrinho ────────── */
.cart-reconcile-warn[b-jfsp9i96ia] {
    margin-top: 4px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--warn-soft);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-md);
}
.cart-reconcile-warn > i[b-jfsp9i96ia] {
    color: var(--warn);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.cart-reconcile-text[b-jfsp9i96ia] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cart-reconcile-text strong[b-jfsp9i96ia] { color: var(--ink); font-weight: 600; }
.cart-reconcile-text small[b-jfsp9i96ia] { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }

/* ── Cart footer ─────────────────────────────────────── */
.cart-footer[b-jfsp9i96ia] {
    margin-top: 4px;
    padding: 18px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cart-total[b-jfsp9i96ia] { display: flex; flex-direction: column; gap: 2px; }

.cart-total-label[b-jfsp9i96ia] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-2);
}

.cart-total-value[b-jfsp9i96ia] {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.8px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cart-footer-actions[b-jfsp9i96ia] {
    display: flex;
    gap: 8px;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */

/* Tablet & Mobile — stacked layout (≤1024px)
   Abandonamos CSS Grid por flexbox + flex-wrap. O markup tem 5 irmãos
   directos no .cart-row-grid (product, qty, price, sub, menu). Em mobile
   organizamo-los em 2 linhas:
     Linha 1: product (flex-basis ~100%-40px) + menu (32px)
     Linha 2: qty + price + sub (cada flex:1)
*/
@media (max-width: 1024px) {
    .nc-meta[b-jfsp9i96ia] { grid-template-columns: 1fr; }
    .nc-meta-field-date[b-jfsp9i96ia] { max-width: 100%; }
    .nc-methods[b-jfsp9i96ia] { grid-template-columns: 1fr; }
    .nc-method-secondary-stack[b-jfsp9i96ia] { grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
    .nc-method-primary[b-jfsp9i96ia] { padding: 20px 16px; min-height: 0; }
    .nc-import-layout[b-jfsp9i96ia] { grid-template-columns: 1fr; }
    .nc-product-grid[b-jfsp9i96ia] { grid-template-columns: repeat(3, 1fr); }

    .nc-ai-strip[b-jfsp9i96ia] { flex-wrap: wrap; gap: 10px; }
    .nc-ai-text[b-jfsp9i96ia] { width: 100%; }

    /* Esconder cabeçalho de colunas em stacked */
    .cart-list-head[b-jfsp9i96ia] { display: none; }

    /* Cart row vira flex-wrap. */
    .cart-row[b-jfsp9i96ia] { padding: 14px; }
    .cart-row-grid[b-jfsp9i96ia] {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    /* Layout em 3 linhas para mobile:
       Linha 1: pills de status + menu + delete (cabeçalho da row)
       Linha 2: nome do produto (largura completa)
       Linha 3: qty / preço / subtotal */

    /* Linha 1 — pills horizontais à esquerda, menu/delete à direita */
    .cart-row-status[b-jfsp9i96ia] {
        order: 0;
        flex: 1 1 auto;          /* cresce para ocupar espaço — empurra menu/delete para a direita */
        flex-direction: row;     /* pills lado-a-lado em mobile */
        flex-wrap: wrap;         /* pills empilham se não couberem */
        gap: 6px;
        align-self: center;
    }

    /* Linha 2 — nome ocupa linha inteira */
    .cart-row-product[b-jfsp9i96ia] {
        order: 3;                /* depois do menu/delete (que estão em order 2) */
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 100%;          /* força wrap — vai para linha própria */
        min-width: 0;
    }
    .cart-name-wrap[b-jfsp9i96ia] { flex: 1; min-width: 0; }
    .cart-name-input[b-jfsp9i96ia] {
        padding: 6px 8px;
        font-size: 14px;
        background: transparent;
        width: 100%;
    }

    /* Menu e Delete na mesma linha que os pills (linha 1) */
    .cart-row-menu[b-jfsp9i96ia] {
        order: 1;
        flex: 0 0 32px;
        align-self: center;
    }
    .cart-row-delete[b-jfsp9i96ia] {
        order: 2;
        flex: 0 0 32px;
        align-self: center;
    }
    /* Em mobile, botão X sempre visível (não há hover) */
    .cart-row-delete .cart-icon-btn[b-jfsp9i96ia],
    .cart-row-menu .cart-icon-btn[b-jfsp9i96ia] { opacity: 1; }

    /* Linha 3 — qty / price / sub partilham igualmente (1/3 cada) */
    .cart-row-cell[b-jfsp9i96ia] {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        min-width: 0;
        align-items: stretch;
    }
    .cart-row-cell--qty[b-jfsp9i96ia]   { order: 4; align-items: flex-start; }
    .cart-row-cell--price[b-jfsp9i96ia] { order: 5; align-items: center; }
    .cart-row-cell--sub[b-jfsp9i96ia]   { order: 6; align-items: flex-end; }

    /* Labels visíveis em stacked */
    .cart-num-label[b-jfsp9i96ia] {
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--ink-3);
        margin-bottom: 4px;
    }

    /* Stepper bigger for touch */
    .cart-stepper[b-jfsp9i96ia] { height: 32px; width: max-content; }
    .cart-stepper-btn[b-jfsp9i96ia] { width: 30px; }
    .cart-stepper-input[b-jfsp9i96ia] { width: 40px; font-size: 14px; }

    /* Price input visible border on mobile */
    .cart-row-price-row[b-jfsp9i96ia] {
        flex-wrap: wrap;
        gap: 4px;
    }
    .cart-num-input[b-jfsp9i96ia],
    .cart-row-price-input[b-jfsp9i96ia] {
        width: 78px;
        border-color: var(--line);
        background: var(--surface);
        height: 32px;
        padding: 6px 10px;
    }
    .cart-num-input:hover[b-jfsp9i96ia],
    .cart-row-price-input:hover[b-jfsp9i96ia] {
        background: var(--surface);
        border-color: var(--ink-3);
    }
    .cart-price-hint[b-jfsp9i96ia] { width: 100%; text-align: right; justify-content: flex-end; }

    .cart-subtotal-val[b-jfsp9i96ia] { font-size: 16px; }

    /* Menu always visible on mobile */
    .cart-row-menu[b-jfsp9i96ia] { grid-area: menu; align-self: start; }
    .cart-icon-btn[b-jfsp9i96ia] {
        opacity: 1;
        width: 32px; height: 32px;
        background: var(--line-2);
    }

    /* Match suggestion full width */
    .match-suggestion[b-jfsp9i96ia] {
        margin-left: 0;
        max-width: 100%;
        width: 100%;
        flex-wrap: wrap;
    }

    /* Footer */
    .cart-footer[b-jfsp9i96ia] {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px 18px;
    }
    .cart-total-value[b-jfsp9i96ia] { font-size: 22px; }
    .cart-footer-actions[b-jfsp9i96ia] { display: flex; }
    .cart-footer-actions .nc-btn[b-jfsp9i96ia] { flex: 1; justify-content: center; }
}

/* Very small (≤420px): subtotal salta para linha própria — fica mais legível */
@media (max-width: 420px) {
    .nc-product-grid[b-jfsp9i96ia] { grid-template-columns: 1fr; }

    /* Subtotal ocupa linha inteira (forçar wrap) */
    .cart-row-cell--sub[b-jfsp9i96ia] {
        flex-basis: 100%;
        align-items: flex-end;
        padding-top: 6px;
        border-top: 1px solid var(--line-2);
    }
    /* Qty e price partilham linha 2 (50/50) */
    .cart-row-cell--qty[b-jfsp9i96ia],
    .cart-row-cell--price[b-jfsp9i96ia] {
        flex-basis: calc(50% - 5px);
    }
    .cart-row-cell--price[b-jfsp9i96ia] { align-items: flex-end; }

    .cart-stepper[b-jfsp9i96ia] { width: 100%; }
    .cart-stepper-input[b-jfsp9i96ia] { flex: 1; }
}
/* /Components/Pages/Familia.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Familia — sophisticated monochrome
   Tokens vêm de app.css (--ink, --line, --pos, --neg, etc.)
   ───────────────────────────────────────────────────────── */

.fm-shell[b-q4c8r3aiir] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

/* ── Header ──────────────────────────────────────────── */
.fm-header[b-q4c8r3aiir] { margin-bottom: 4px; }
.fm-h1[b-q4c8r3aiir] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1.2;
}
.fm-h1-sub[b-q4c8r3aiir] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ── Card ────────────────────────────────────────────── */
.fm-card[b-q4c8r3aiir] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.fm-card-head[b-q4c8r3aiir] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.fm-card-title[b-q4c8r3aiir] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.2px;
}

.fm-card-sub[b-q4c8r3aiir] {
    margin: 4px 0 0;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.45;
    max-width: 520px;
}

.fm-card-count[b-q4c8r3aiir] {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
    flex-shrink: 0;
}

.fm-card-body[b-q4c8r3aiir] {
    padding: 18px 20px 20px;
}

.fm-card-actions[b-q4c8r3aiir] {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Toggle (comunidade de preços e similares) */
.fm-toggle[b-q4c8r3aiir] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px 14px;
    background: var(--line-2);
    border-radius: var(--r-md);
    font-size: 14px;
    color: var(--ink);
    user-select: none;
    transition: background-color 120ms ease;
}
.fm-toggle:hover[b-q4c8r3aiir] { background: var(--line); }
.fm-toggle input[type="checkbox"][b-q4c8r3aiir] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--ink);
}

.fm-toggle-hint[b-q4c8r3aiir] {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.4;
}

/* ── Compact card (toggle/inputs inline com info à esquerda) ── */
.fm-card-compact[b-q4c8r3aiir] {
    padding: 14px 18px;
}
.fm-compact-row[b-q4c8r3aiir] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.fm-compact-info[b-q4c8r3aiir] { flex: 1; min-width: 220px; }
.fm-compact-info .fm-card-title[b-q4c8r3aiir] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fm-compact-info .fm-card-title i[b-q4c8r3aiir] { color: var(--ink-2); font-size: 14px; }
.fm-card-sub-inline[b-q4c8r3aiir] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
    max-width: 480px;
}
.fm-compact-control[b-q4c8r3aiir] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.fm-compact-fields[b-q4c8r3aiir] {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.fm-compact-field[b-q4c8r3aiir] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fm-compact-field label[b-q4c8r3aiir] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.fm-input-mini[b-q4c8r3aiir] { width: 64px; padding: 6px 8px; font-size: 13px; }
.fm-btn-sm[b-q4c8r3aiir] {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-end;
}
.fm-btn-sm i[b-q4c8r3aiir] { font-size: 13px; }

/* Switch (iOS-style) — substitui o checkbox grande nos cards compactos */
.fm-switch[b-q4c8r3aiir] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 12.5px;
    color: var(--ink-2);
}
.fm-switch input[type="checkbox"][b-q4c8r3aiir] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.fm-switch-track[b-q4c8r3aiir] {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--line);
    border-radius: 999px;
    transition: background 150ms ease;
    flex-shrink: 0;
}
.fm-switch-thumb[b-q4c8r3aiir] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--surface);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    transition: transform 150ms ease, background 150ms ease;
}
.fm-switch input:checked ~ .fm-switch-track[b-q4c8r3aiir] { background: var(--ink); }
.fm-switch input:checked ~ .fm-switch-track .fm-switch-thumb[b-q4c8r3aiir] {
    transform: translateX(16px);
    background: var(--on-ink);
}
.fm-switch-label[b-q4c8r3aiir] {
    font-weight: 500;
    color: var(--ink);
    min-width: 70px;
}
.fm-backfill-text[b-q4c8r3aiir] { flex: 1; min-width: 200px; }
.fm-backfill-text strong[b-q4c8r3aiir] {
    font-size: 13.5px;
    color: var(--ink);
    display: block;
    margin-bottom: 3px;
}
.fm-backfill-text p[b-q4c8r3aiir] {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.4;
}

/* ── Form ────────────────────────────────────────────── */
.fm-field[b-q4c8r3aiir] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fm-field label[b-q4c8r3aiir] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
}

.fm-input[b-q4c8r3aiir] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    -moz-appearance: textfield;
}

.fm-input[b-q4c8r3aiir]::placeholder { color: var(--ink-3); }
.fm-input:hover[b-q4c8r3aiir] { border-color: var(--ink-3); }
.fm-input:focus[b-q4c8r3aiir] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.08);
}

.fm-input[b-q4c8r3aiir]::-webkit-outer-spin-button,
.fm-input[b-q4c8r3aiir]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Inline rename */
.fm-rename[b-q4c8r3aiir] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.fm-rename .fm-input[b-q4c8r3aiir] { flex: 1; min-width: 0; }

/* Min stock 3-column grid */
.fm-min-grid[b-q4c8r3aiir] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

/* ── Invite code ─────────────────────────────────────── */
.fm-invite[b-q4c8r3aiir] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--line-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
}

.fm-invite-code[b-q4c8r3aiir] {
    font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--ink);
    user-select: all;
    background: transparent;
    padding: 0;
}

/* ── Members ─────────────────────────────────────────── */
.fm-members[b-q4c8r3aiir] {
    padding: 4px 8px 8px;
}

.fm-member[b-q4c8r3aiir] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--r-sm);
    transition: background-color 120ms ease;
}

.fm-member:hover[b-q4c8r3aiir] { background: var(--line-2); }

.fm-member-avatar[b-q4c8r3aiir] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ink-2);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.fm-member.is-me .fm-member-avatar[b-q4c8r3aiir] {
    background: var(--ink);
}

.fm-member-info[b-q4c8r3aiir] { flex: 1; min-width: 0; }
.fm-member-name[b-q4c8r3aiir] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-member-email[b-q4c8r3aiir] {
    font-size: 12.5px;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-member-tag[b-q4c8r3aiir] {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────── */
.fm-btn[b-q4c8r3aiir] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}

.fm-btn:disabled[b-q4c8r3aiir] { opacity: 0.6; cursor: not-allowed; }

.fm-btn-primary[b-q4c8r3aiir] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.fm-btn-primary:hover:not(:disabled)[b-q4c8r3aiir] {
    background: var(--ink-hover);
    border-color: var(--ink-hover);
}

/* ── Spinner ─────────────────────────────────────────── */
.fm-spinner[b-q4c8r3aiir] {
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: fm-spin-b-q4c8r3aiir 0.6s linear infinite;
    display: inline-block;
}

@keyframes fm-spin-b-q4c8r3aiir { to { transform: rotate(360deg); } }

/* ── Messages ────────────────────────────────────────── */
.fm-msg[b-q4c8r3aiir] {
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    background: var(--line-2);
    color: var(--ink);
}

.fm-msg.is-pos[b-q4c8r3aiir] {
    background: var(--pos-soft);
    color: var(--pos);
    border-color: rgba(21,128,61,.2);
}

.fm-msg.is-bad[b-q4c8r3aiir] {
    background: var(--neg-soft);
    color: var(--neg);
    border-color: rgba(185,28,28,.2);
}

.fm-empty[b-q4c8r3aiir] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 0;
    padding: 24px 0;
    text-align: center;
}

/* ── Plan badge no header do card "Subscrição" ──────── */
.fm-plan-badge[b-q4c8r3aiir] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--line-2);
    color: var(--ink-3);
    flex-shrink: 0;
    align-self: flex-start;
}
.fm-plan-badge.is-pro[b-q4c8r3aiir] {
    background: var(--color-accent, #C8852C);
    color: #fff;
}
.fm-plan-badge i[b-q4c8r3aiir] { font-size: 11px; color: inherit; }

/* ── Painel de detalhes da subscrição activa ───────── */
/* Antes: background hardcoded a #FBFAF7 (cream) — ilegível em dark mode
   porque ficava cream-on-cream com o texto var(--ink). Agora usamos o
   token --surface que adapta automaticamente entre temas (white em light,
   navy em dark). */
.fm-sub-panel[b-q4c8r3aiir] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md, 12px);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.fm-sub-row[b-q4c8r3aiir] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-size: 13.5px;
}
.fm-sub-row + .fm-sub-row[b-q4c8r3aiir] {
    padding-top: 10px;
    border-top: 1px solid var(--line-2);
}
.fm-sub-label[b-q4c8r3aiir] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    color: var(--ink-3);
    flex-shrink: 0;
}
.fm-sub-value[b-q4c8r3aiir] {
    color: var(--ink);
    text-align: right;
    line-height: 1.4;
}
.fm-sub-row.is-warn .fm-sub-value[b-q4c8r3aiir] {
    color: var(--warn, #92400E);
}
.fm-sub-row.is-bad .fm-sub-value[b-q4c8r3aiir] {
    color: var(--neg, #B91C1C);
}

@media (max-width: 600px) {
    .fm-sub-row[b-q4c8r3aiir] {
        flex-direction: column;
        gap: 4px;
    }
    .fm-sub-value[b-q4c8r3aiir] { text-align: left; }
}

/* ── Subscrição (Stripe) ───────────────────────────────
   Cards lado a lado para Mensal / Anual, com o anual
   destacado. */
.fm-plans[b-q4c8r3aiir] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.fm-plan[b-q4c8r3aiir] {
    position: relative;
    padding: 18px 18px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md, 12px);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fm-plan-featured[b-q4c8r3aiir] {
    border-color: var(--ink);
    background: var(--surface-2);
}
.fm-plan-badge[b-q4c8r3aiir] {
    position: absolute;
    top: -10px;
    right: 14px;
    padding: 3px 10px;
    background: var(--ink);
    color: var(--on-ink);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 999px;
}
.fm-plan-head[b-q4c8r3aiir] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fm-plan-name[b-q4c8r3aiir] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ink-3);
    font-weight: 600;
}
.fm-plan-price[b-q4c8r3aiir] {
    font-size: 14px;
    color: var(--ink-2);
}
.fm-plan-price strong[b-q4c8r3aiir] {
    font-size: 28px;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.8px;
    margin-right: 2px;
}
.fm-plan-trial[b-q4c8r3aiir] {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.4;
}
.fm-plan .fm-btn[b-q4c8r3aiir] {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

.fm-card-hint[b-q4c8r3aiir] {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.4;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 700px) {
    .fm-shell[b-q4c8r3aiir] { gap: 16px; }
    .fm-card-head[b-q4c8r3aiir] { padding: 14px 16px; flex-wrap: wrap; }
    .fm-card-body[b-q4c8r3aiir] { padding: 14px 16px 16px; }
    .fm-min-grid[b-q4c8r3aiir] { grid-template-columns: 1fr; gap: 12px; }
    .fm-rename[b-q4c8r3aiir] { flex-direction: column; }
    .fm-rename .fm-btn[b-q4c8r3aiir] { width: 100%; justify-content: center; }
    .fm-invite-code[b-q4c8r3aiir] { font-size: 20px; letter-spacing: 3px; }
    .fm-card-actions[b-q4c8r3aiir] { flex-direction: column-reverse; }
    .fm-card-actions .fm-btn[b-q4c8r3aiir] { width: 100%; justify-content: center; }
    .fm-plans[b-q4c8r3aiir] { grid-template-columns: 1fr; gap: 12px; }
}
/* /Components/Pages/GerirCategorias.razor.rz.scp.css */
.page-header[b-4wyxc23mkl] {
    margin-bottom: 1.5rem;
}

.page-header h1[b-4wyxc23mkl] {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    margin: 0;
    color: var(--color-primary);
}

.merge-bar[b-4wyxc23mkl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.merge-bar-label[b-4wyxc23mkl] {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.merge-select[b-4wyxc23mkl] {
    width: auto;
    min-width: 160px;
}

.category-list[b-4wyxc23mkl] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.category-row[b-4wyxc23mkl] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.category-row.selected[b-4wyxc23mkl] {
    border-color: #1B2A4A;
    background-color: #eff2f8;
}

.category-main[b-4wyxc23mkl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
}

.category-checkbox[b-4wyxc23mkl] {
    flex-shrink: 0;
    cursor: pointer;
}

.category-name[b-4wyxc23mkl] {
    font-weight: 500;
    flex: 1;
}

.edit-input[b-4wyxc23mkl] {
    flex: 1;
    max-width: 300px;
}

.icon-btn[b-4wyxc23mkl] {
    padding: 0.2rem 0.45rem;
    line-height: 1;
}

.aliases-toggle[b-4wyxc23mkl] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.alias-count[b-4wyxc23mkl] {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.aliases-panel[b-4wyxc23mkl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem 0.7rem 2.6rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.no-aliases[b-4wyxc23mkl] {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-style: italic;
}

.alias-tag[b-4wyxc23mkl] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--line-2);
    color: #1B2A4A;
    border-radius: 20px;
    padding: 0.2rem 0.5rem 0.2rem 0.75rem;
    font-size: 0.85rem;
}

.alias-remove[b-4wyxc23mkl] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-muted);
    line-height: 1;
    display: flex;
    align-items: center;
}

.alias-remove:hover[b-4wyxc23mkl] { color: #dc2626; }

.loading-text[b-4wyxc23mkl],
.empty-text[b-4wyxc23mkl] {
    color: var(--color-muted);
    margin-top: 1rem;
}
/* /Components/Pages/HistoricoCompras.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Histórico de compras — sophisticated monochrome
   Tokens vêm de app.css (--ink, --line, --pos, --neg, etc.)
   ───────────────────────────────────────────────────────── */

.hc-shell[b-v8lx44gbdu] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    min-width: 0;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.hc-shell .num[b-v8lx44gbdu] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Header ──────────────────────────────────────────── */
.hc-header[b-v8lx44gbdu] { margin-bottom: 4px; }
.hc-h1[b-v8lx44gbdu] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1.2;
}
.hc-h1-sub[b-v8lx44gbdu] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ── Hero stats ──────────────────────────────────────── */
.hc-hero[b-v8lx44gbdu] {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.hc-tile[b-v8lx44gbdu] {
    background: var(--surface);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 100px;
}

.hc-tile-label[b-v8lx44gbdu] {
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 500;
}

.hc-tile-value[b-v8lx44gbdu] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--ink);
}

.hc-tile-value-sm[b-v8lx44gbdu] {
    font-size: 16px;
    letter-spacing: -0.2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-tile-primary .hc-tile-value[b-v8lx44gbdu] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.9px;
}

.hc-tile-foot[b-v8lx44gbdu] {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
}

/* ── Filters ─────────────────────────────────────────── */
.hc-filters[b-v8lx44gbdu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px 14px;
}

.hc-search-wrap[b-v8lx44gbdu] {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.hc-search-icon[b-v8lx44gbdu] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: 13px;
    pointer-events: none;
}

.hc-search[b-v8lx44gbdu] {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--line-2);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.hc-search[b-v8lx44gbdu]::placeholder { color: var(--ink-3); }
.hc-search:hover[b-v8lx44gbdu] { border-color: var(--ink-3); background: var(--surface); }
.hc-search:focus[b-v8lx44gbdu] {
    outline: none;
    border-color: var(--ink);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

/* Segmented control (period) */
.hc-segmented[b-v8lx44gbdu] {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--line-2);
    overflow: hidden;
    padding: 2px;
    gap: 2px;
}

.hc-seg[b-v8lx44gbdu] {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.hc-seg:hover[b-v8lx44gbdu] { color: var(--ink); }

.hc-seg.is-active[b-v8lx44gbdu] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}

/* Date range */
.hc-date-range[b-v8lx44gbdu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hc-date[b-v8lx44gbdu] {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    color-scheme: light;
}

.hc-date:focus[b-v8lx44gbdu] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

.hc-date-sep[b-v8lx44gbdu] {
    color: var(--ink-3);
    font-size: 13px;
}

.hc-reset[b-v8lx44gbdu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 120ms ease;
}

.hc-reset:hover[b-v8lx44gbdu] {
    color: var(--neg);
    border-color: rgba(185,28,28,.25);
}

.hc-reset i[b-v8lx44gbdu] { font-size: 11px; }

/* Store pills */
.hc-store-pills[b-v8lx44gbdu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hc-pill[b-v8lx44gbdu] {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}

.hc-pill:hover[b-v8lx44gbdu] {
    border-color: var(--ink-3);
    color: var(--ink);
}

.hc-pill.is-active[b-v8lx44gbdu] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}

/* ── List ────────────────────────────────────────────── */
.hc-list[b-v8lx44gbdu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hc-row[b-v8lx44gbdu] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.hc-row:hover[b-v8lx44gbdu] { border-color: var(--ink-3); }
.hc-row.is-expanded[b-v8lx44gbdu] { border-color: var(--ink-3); box-shadow: 0 4px 12px rgba(15,23,42,.05); }

.hc-row-head[b-v8lx44gbdu] {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto auto 16px;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
}

.hc-row-head:focus-visible[b-v8lx44gbdu] {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
}

.hc-row-date[b-v8lx44gbdu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.hc-row-date .d-day[b-v8lx44gbdu] {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.5px;
}

.hc-row-date .d-month[b-v8lx44gbdu] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: lowercase;
    margin-top: 2px;
    letter-spacing: 0.4px;
}

.hc-row-info[b-v8lx44gbdu] { min-width: 0; }
.hc-row-store[b-v8lx44gbdu] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hc-row-meta[b-v8lx44gbdu] {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.hc-row-meta .sep[b-v8lx44gbdu] { color: var(--ink-4); }

.hc-row-author[b-v8lx44gbdu] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
    color: var(--ink-2);
}
.hc-row-author i[b-v8lx44gbdu] { font-size: 11px; }

.hc-row-total[b-v8lx44gbdu] {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.hc-row-actions[b-v8lx44gbdu] {
    display: flex;
    gap: 4px;
}

.hc-row-caret[b-v8lx44gbdu] {
    color: var(--ink-3);
    font-size: 12px;
    transition: transform 150ms ease;
}

.hc-row.is-expanded .hc-row-caret[b-v8lx44gbdu] { color: var(--ink); }

/* Icon button (action) */
.hc-icon-btn[b-v8lx44gbdu] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    font-size: 12px;
    transition: all 120ms ease;
    padding: 0;
}

.hc-icon-btn:hover[b-v8lx44gbdu] {
    border-color: var(--ink);
    color: var(--ink);
}

.hc-icon-btn.hc-icon-btn-danger:hover[b-v8lx44gbdu] {
    border-color: var(--neg);
    color: var(--neg);
    background: var(--neg-soft);
}

.hc-icon-btn-sm[b-v8lx44gbdu] { width: 24px; height: 24px; font-size: 11px; }

/* Expanded body */
.hc-row-body[b-v8lx44gbdu] {
    padding: 0 18px 18px;
    border-top: 1px solid var(--line-2);
}

/* Linha de poupança no topo do body expandido */
.hc-savings[b-v8lx44gbdu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--pos-soft);
    border: 1px solid rgba(21,128,61,.18);
    border-radius: var(--r-sm);
    color: var(--pos);
    font-size: 13px;
}
.hc-savings i[b-v8lx44gbdu] { font-size: 12px; }
.hc-savings strong[b-v8lx44gbdu] { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Badge de desconto inline ao lado do nome do item */
.hc-discount-badge[b-v8lx44gbdu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 7px;
    background: var(--pos-soft);
    color: var(--pos);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    white-space: nowrap;
}
.hc-discount-badge i[b-v8lx44gbdu] { font-size: 9px; }

/* Badge de validade inline ao lado do nome do item */
.hc-exp-badge[b-v8lx44gbdu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 7px;
    background: var(--line-2);
    color: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    white-space: nowrap;
}
.hc-exp-badge i[b-v8lx44gbdu] { font-size: 9px; }

.hc-exp-badge.is-urgent[b-v8lx44gbdu] {
    background: rgba(217,119,6,.10);
    color: #b45309;
    border-color: rgba(217,119,6,.25);
}

.hc-exp-badge.is-expired[b-v8lx44gbdu] {
    background: var(--neg-soft);
    color: var(--neg);
    border-color: rgba(185,28,28,.25);
}

.hc-items[b-v8lx44gbdu] {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}

.hc-items-head[b-v8lx44gbdu],
.hc-item[b-v8lx44gbdu] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 70px 90px 100px 60px;
    gap: 12px;
    align-items: center;
    padding: 10px 8px;
}

.hc-items-head[b-v8lx44gbdu] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
}

.hc-item[b-v8lx44gbdu] {
    border-bottom: 1px solid var(--line-2);
    font-size: 13px;
}

.hc-item:last-child[b-v8lx44gbdu] { border-bottom: none; }

.hc-item-name[b-v8lx44gbdu] {
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-tag[b-v8lx44gbdu] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 500;
}

.hc-muted[b-v8lx44gbdu] { color: var(--ink-3); }
.hc-strong[b-v8lx44gbdu] { font-weight: 600; color: var(--ink); }
.text-end[b-v8lx44gbdu] { text-align: right; }

.hc-item-actions[b-v8lx44gbdu] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

/* ── Empty / loading ─────────────────────────────────── */
.hc-empty[b-v8lx44gbdu] {
    text-align: center;
    color: var(--ink-2);
    font-size: 13px;
    margin: 0;
    padding: 32px 0;
}

.hc-empty-card[b-v8lx44gbdu] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.hc-empty-icon[b-v8lx44gbdu] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--line-2);
    color: var(--ink-3);
    display: grid;
    place-items: center;
    font-size: 22px;
    margin-bottom: 8px;
}

.hc-empty-title[b-v8lx44gbdu] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.hc-empty-sub[b-v8lx44gbdu] {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ink-2);
    max-width: 360px;
}

/* ── Buttons ─────────────────────────────────────────── */
.hc-btn[b-v8lx44gbdu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
    text-decoration: none;
}

.hc-btn:disabled[b-v8lx44gbdu] { opacity: 0.6; cursor: not-allowed; }

.hc-btn-primary[b-v8lx44gbdu] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.hc-btn-primary:hover:not(:disabled)[b-v8lx44gbdu] { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-ink); }

.hc-btn-secondary[b-v8lx44gbdu] { background: var(--surface); color: var(--ink); border-color: var(--line); }
.hc-btn-secondary:hover:not(:disabled)[b-v8lx44gbdu] { background: var(--line-2); border-color: var(--ink-3); }

.hc-btn-danger[b-v8lx44gbdu] { background: var(--neg); color: #fff; border-color: var(--neg); }
.hc-btn-danger:hover:not(:disabled)[b-v8lx44gbdu] { background: #991b1b; border-color: #991b1b; }

/* ── Modals ──────────────────────────────────────────── */
.hc-modal-backdrop[b-v8lx44gbdu] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15,23,42,.32);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding: 20px;
    animation: hc-fade-in-b-v8lx44gbdu 150ms ease;
}

@keyframes hc-fade-in-b-v8lx44gbdu {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hc-modal[b-v8lx44gbdu] {
    width: 100%;
    max-width: 540px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(15,23,42,.18);
    overflow: hidden;
    animation: hc-pop-in-b-v8lx44gbdu 180ms cubic-bezier(.2,.8,.2,1);
}

@keyframes hc-pop-in-b-v8lx44gbdu {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.hc-modal-head[b-v8lx44gbdu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--line);
}

.hc-modal-kicker[b-v8lx44gbdu] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-3);
    margin: 0 0 4px;
}

.hc-modal-kicker-danger[b-v8lx44gbdu] { color: var(--neg); }

.hc-modal-head h2[b-v8lx44gbdu] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--ink);
}

.hc-modal-copy[b-v8lx44gbdu] {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
}

.hc-modal-danger[b-v8lx44gbdu] { border-color: rgba(185,28,28,.18); }
.hc-modal-danger .hc-modal-head[b-v8lx44gbdu] { border-bottom-color: rgba(185,28,28,.12); }

.hc-modal-body[b-v8lx44gbdu] {
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hc-modal-foot[b-v8lx44gbdu] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line);
    background: var(--line-2);
}

/* Modal fields */
.hc-field[b-v8lx44gbdu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hc-field label[b-v8lx44gbdu] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.hc-input[b-v8lx44gbdu] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    color-scheme: light;
    -moz-appearance: textfield;
}

.hc-input[b-v8lx44gbdu]::-webkit-outer-spin-button,
.hc-input[b-v8lx44gbdu]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hc-input[b-v8lx44gbdu]::placeholder { color: var(--ink-3); }
.hc-input:hover[b-v8lx44gbdu] { border-color: var(--ink-3); }
.hc-input:focus[b-v8lx44gbdu] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.08);
}

.hc-field-grid[b-v8lx44gbdu] { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.hc-field-grid-3[b-v8lx44gbdu] { grid-template-columns: 1fr 1fr 1fr; }
.hc-field-grid-4[b-v8lx44gbdu] { grid-template-columns: 1fr 1fr 1fr 1fr; }

.hc-field-suggest[b-v8lx44gbdu] { position: relative; }

.hc-suggest-list[b-v8lx44gbdu] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 20px rgba(15,23,42,.1);
    z-index: 10;
    max-height: 220px;
    overflow-y: auto;
}

.hc-suggest-item[b-v8lx44gbdu] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hc-suggest-item:hover[b-v8lx44gbdu] { background: var(--line-2); }
.hc-suggest-name[b-v8lx44gbdu] { font-weight: 500; color: var(--ink); }
.hc-suggest-hint[b-v8lx44gbdu] { color: var(--ink-3); font-size: 12px; margin-left: auto; }

.hc-hint[b-v8lx44gbdu] {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--warn);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Subtotal row in modal */
.hc-subtotal-row[b-v8lx44gbdu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--line-2);
    border-radius: var(--r-sm);
    font-size: 13.5px;
}

.hc-subtotal-label[b-v8lx44gbdu] {
    font-weight: 500;
    color: var(--ink-2);
}

/* Summary block (delete confirmations) */
.hc-summary[b-v8lx44gbdu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px;
    background: var(--line-2);
    border-radius: var(--r-sm);
}

.hc-summary > div[b-v8lx44gbdu] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-summary-label[b-v8lx44gbdu] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ink-3);
}
.hc-summary strong[b-v8lx44gbdu] {
    font-size: 13.5px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Spinner */
.hc-spinner[b-v8lx44gbdu] {
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: hc-spin-b-v8lx44gbdu 0.6s linear infinite;
    display: inline-block;
}

@keyframes hc-spin-b-v8lx44gbdu { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .hc-hero[b-v8lx44gbdu] { grid-template-columns: 1fr 1fr; }
    .hc-items-head[b-v8lx44gbdu], .hc-item[b-v8lx44gbdu] {
        grid-template-columns: minmax(0, 2fr) 60px 80px 90px 50px;
    }
    .hc-items-head span:nth-child(2)[b-v8lx44gbdu],
    .hc-item .hc-item-cat[b-v8lx44gbdu] { display: none; }
}

@media (max-width: 700px) {
    .hc-shell[b-v8lx44gbdu] { gap: 16px; }
    .hc-hero[b-v8lx44gbdu] { grid-template-columns: 1fr; }
    .hc-tile[b-v8lx44gbdu] { padding: 14px 16px; min-height: 80px; }
    .hc-tile-value[b-v8lx44gbdu] { font-size: 18px; }
    .hc-tile-primary .hc-tile-value[b-v8lx44gbdu] { font-size: 22px; }
    .hc-filters[b-v8lx44gbdu] { padding: 10px 12px; }
    .hc-segmented[b-v8lx44gbdu], .hc-date-range[b-v8lx44gbdu] { width: 100%; }
    .hc-search-wrap[b-v8lx44gbdu] { width: 100%; }

    .hc-row-head[b-v8lx44gbdu] {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "date info  total"
            "date info  caret"
            "act  act   act";
        row-gap: 6px;
    }
    .hc-row-date[b-v8lx44gbdu]    { grid-area: date; }
    .hc-row-info[b-v8lx44gbdu]    { grid-area: info; }
    .hc-row-total[b-v8lx44gbdu]   { grid-area: total; }
    .hc-row-caret[b-v8lx44gbdu]   { grid-area: caret; justify-self: end; }
    .hc-row-actions[b-v8lx44gbdu] { grid-area: act; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--line-2); margin-top: 6px; }

    .hc-items-head[b-v8lx44gbdu] { display: none; }
    .hc-item[b-v8lx44gbdu] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name   sub"
            "qty    actions";
        row-gap: 4px;
        padding: 12px 8px;
    }
    .hc-item-name[b-v8lx44gbdu] { grid-area: name; }
    .hc-item .hc-item-cat[b-v8lx44gbdu] { display: none; }
    .hc-item-actions[b-v8lx44gbdu] { grid-area: actions; }
    .hc-item > .num:nth-child(3)[b-v8lx44gbdu],
    .hc-item > .num:nth-child(4)[b-v8lx44gbdu] { display: none; }
    .hc-item > .num:nth-child(5)[b-v8lx44gbdu] {
        grid-area: sub;
        text-align: right;
        font-weight: 700;
    }

    .hc-modal[b-v8lx44gbdu] { max-width: 100%; }
    .hc-field-grid[b-v8lx44gbdu], .hc-field-grid-3[b-v8lx44gbdu], .hc-field-grid-4[b-v8lx44gbdu] { grid-template-columns: 1fr; }
    .hc-summary[b-v8lx44gbdu] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Home / Dashboard — sophisticated monochrome design
   Local design tokens (overlay over global app.css)
   ───────────────────────────────────────────────────────── */

.hs-shell[b-a7kei4pda1] {
    /* Tokens come from global app.css — see :root --ink, --line, etc. */
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    min-width: 0;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.hs-shell .num[b-a7kei4pda1] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Header ───────────────────────────────────────────── */
.hs-header[b-a7kei4pda1] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.hs-h1[b-a7kei4pda1] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
}

.hs-h1-sub[b-a7kei4pda1] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

.hs-period[b-a7kei4pda1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 120ms ease;
}

.hs-period:hover[b-a7kei4pda1] { border-color: var(--ink-3); }
.hs-period i[b-a7kei4pda1]    { font-size: 12px; color: var(--ink-3); }

/* ── Hero metric tiles ────────────────────────────────── */
.hs-hero[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

/* Modo simples (família sem TracksStock): 3 tiles em vez de 4 */
.hs-hero.is-simple[b-a7kei4pda1] {
    grid-template-columns: 1.2fr 1fr 1fr;
}

.hs-tile[b-a7kei4pda1] {
    background: var(--surface);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 124px;
    position: relative;
}

.hs-tile-label[b-a7kei4pda1] {
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 500;
}

.hs-tile-value[b-a7kei4pda1] {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.7px;
    line-height: 1.1;
    color: var(--ink);
}

.hs-tile-primary .hs-tile-value[b-a7kei4pda1] {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -1.2px;
}

.hs-tile-foot[b-a7kei4pda1] {
    font-size: 12px;
    color: var(--ink-3);
}

.hs-tile-delta[b-a7kei4pda1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
}

.hs-tile-delta .is-pos[b-a7kei4pda1] { color: var(--pos); }
.hs-tile-delta .is-neg[b-a7kei4pda1] { color: var(--neg); }
.hs-tile-delta-sub[b-a7kei4pda1]     { color: var(--ink-2); font-weight: 400; }

/* ── Quick actions ────────────────────────────────────── */
.hs-actions[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.hs-action[b-a7kei4pda1] {
    background: var(--surface);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
    transition: background-color 120ms ease;
    position: relative;
}

.hs-action:hover[b-a7kei4pda1] { background: var(--surface-hover); color: var(--ink); }

.hs-action-lead[b-a7kei4pda1] {
    font-size: 16px;
    color: var(--ink-2);
    width: 16px;
}

.hs-action-text[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hs-action-text strong[b-a7kei4pda1] {
    font-weight: 500;
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-action-text small[b-a7kei4pda1] {
    color: var(--ink-3);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-action-trail[b-a7kei4pda1] {
    margin-left: auto;
    color: var(--ink-3);
    font-size: 12px;
    transition: transform 120ms ease, color 120ms ease;
}

.hs-action:hover .hs-action-trail[b-a7kei4pda1] {
    transform: translateX(2px);
    color: var(--ink);
}

/* ── Main grid ────────────────────────────────────────── */
.hs-grid[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    min-width: 0;
}

.hs-col[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* ── Card primitive ───────────────────────────────────── */
.hs-card[b-a7kei4pda1] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.hs-card-head[b-a7kei4pda1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.hs-card-title[b-a7kei4pda1] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.1px;
}

/* Subtítulo opcional debaixo do título do card — explica o que está dentro
   sem precisar de tooltip ou ajuda. */
.hs-card-sub[b-a7kei4pda1] {
    margin: 2px 0 0;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ink-3);
    line-height: 1.35;
}

.hs-card-count[b-a7kei4pda1] {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
}

.hs-link[b-a7kei4pda1] {
    font-size: 12px;
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.hs-link:hover[b-a7kei4pda1] { color: var(--ink); }
.hs-link i[b-a7kei4pda1] { font-size: 10px; }

.hs-card-body[b-a7kei4pda1] {
    padding: 8px 20px 16px;
}

.hs-empty[b-a7kei4pda1] {
    margin: 0;
    text-align: left;
    color: var(--ink-3);
    font-size: 13px;
    padding: 6px 0;
}

/* ── Tabular row (low stock, expiring) ────────────────── */
.hs-rows[b-a7kei4pda1] {
    padding: 4px 20px 12px;
}

.hs-row[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-2);
}

.hs-row:last-child[b-a7kei4pda1] { border-bottom: none; }

.hs-dot[b-a7kei4pda1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-4);
    margin: 0 auto;
}

.hs-dot.is-bad[b-a7kei4pda1]  { background: var(--neg); }
.hs-dot.is-warn[b-a7kei4pda1] { background: var(--warn); }

.hs-row-label[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hs-row-label strong[b-a7kei4pda1] {
    font-weight: 500;
    font-size: 13.5px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-row-label small[b-a7kei4pda1] {
    color: var(--ink-3);
    font-size: 12px;
}

.hs-row-stat[b-a7kei4pda1] {
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 500;
    white-space: nowrap;
}

.hs-row-stat.is-bad[b-a7kei4pda1]  { color: var(--neg); }
.hs-row-stat.is-warn[b-a7kei4pda1] { color: var(--warn); }

.hs-row-btn[b-a7kei4pda1] {
    width: 26px;
    height: 26px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
    color: var(--ink-2);
    display: grid;
    place-items: center;
    font-size: 12px;
    transition: all 120ms ease;
    padding: 0;
}

.hs-row-btn:hover[b-a7kei4pda1] {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--surface);
}

/* ── Chart card ───────────────────────────────────────── */
.hs-chart-stats[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
}

.hs-chart-stat[b-a7kei4pda1] {
    background: var(--surface);
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hs-chart-stat .k[b-a7kei4pda1] {
    font-size: 11px;
    color: var(--ink-2);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-chart-stat .v[b-a7kei4pda1] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-chart-frame[b-a7kei4pda1] {
    padding: 12px 20px 8px;
    background: var(--surface);
}

.hs-chart-svg[b-a7kei4pda1] {
    display: block;
    width: 100%;
    height: clamp(160px, 22vw, 220px);
}

/* ── Alerts ───────────────────────────────────────────── */
.hs-alerts[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
}

.hs-alert[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-2);
    font-size: 13.5px;
    color: var(--ink);
    text-decoration: none;
    transition: background 120ms ease;
}

.hs-alert:last-child[b-a7kei4pda1] { border-bottom: none; }

/* Versão link — adiciona seta de "ir para" e hover. */
.hs-alert-link[b-a7kei4pda1] {
    grid-template-columns: 16px 1fr auto;
    cursor: pointer;
}
.hs-alert-link:hover[b-a7kei4pda1] {
    background: var(--line-2);
    color: var(--ink);
}
.hs-alert-trail[b-a7kei4pda1] {
    color: var(--ink-3);
    font-size: 13px;
    transition: transform 150ms ease, color 150ms ease;
}
.hs-alert-link:hover .hs-alert-trail[b-a7kei4pda1] {
    color: var(--ink);
    transform: translateX(2px);
}

.hs-alert-bar[b-a7kei4pda1] {
    width: 4px;
    height: 28px;
    border-radius: 4px;
    background: var(--warn);
}

.hs-alert.is-bad  .hs-alert-bar[b-a7kei4pda1] { background: var(--neg); }
.hs-alert.is-warn .hs-alert-bar[b-a7kei4pda1] { background: var(--warn); }

.hs-alert-body[b-a7kei4pda1] { line-height: 1.45; }
.hs-alert-body b[b-a7kei4pda1] { font-weight: 600; }

/* ── Savings ──────────────────────────────────────────── */
.hs-saves[b-a7kei4pda1] {
    padding: 4px 20px 12px;
}

.hs-save[b-a7kei4pda1] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line-2);
}

.hs-save:last-child[b-a7kei4pda1] { border-bottom: none; }

/* O link envolve toda a info — clicável vai para /comparador?productId=X. */
.hs-save-link[b-a7kei4pda1] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: inherit;
    transition: background 120ms ease;
    min-width: 0;
}
.hs-save-link:hover[b-a7kei4pda1] { background: var(--line-2); }
.hs-save-link:hover .hs-save-name[b-a7kei4pda1] { color: var(--ink); }

/* Botão "+ adicionar à lista" — separado do link para não conflituar clicks. */
.hs-save-action[b-a7kei4pda1] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    align-self: center;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    cursor: pointer;
    transition: all 120ms ease;
}
.hs-save-action:hover[b-a7kei4pda1] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.hs-save-action i[b-a7kei4pda1] { font-size: 14px; }

/* Badge "comunidade" — quando o melhor preço veio de outra família. */
.hs-save-badge[b-a7kei4pda1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 7px;
    background: var(--line-2);
    color: var(--ink-2);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-transform: lowercase;
}
.hs-save-badge i[b-a7kei4pda1] { font-size: 10px; }

.hs-save-info[b-a7kei4pda1] { min-width: 0; }

.hs-save-name[b-a7kei4pda1] {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-save-stores[b-a7kei4pda1] {
    font-size: 12px;
    color: var(--ink-2);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-save-stores .strike[b-a7kei4pda1] { text-decoration: line-through; color: var(--ink-3); }
.hs-save-stores b[b-a7kei4pda1]       { color: var(--ink); font-weight: 600; }

.hs-save-amount[b-a7kei4pda1] {
    text-align: right;
    flex-shrink: 0;
}

.hs-save-amount .v[b-a7kei4pda1] {
    font-size: 14px;
    font-weight: 600;
    color: var(--pos);
}

.hs-save-amount .p[b-a7kei4pda1] {
    font-size: 11.5px;
    color: var(--ink-2);
}

/* ── Categorias ───────────────────────────────────────── */
.hs-cats[b-a7kei4pda1] {
    padding: 8px 20px 14px;
}

.hs-cat[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-2);
}

.hs-cat:last-child[b-a7kei4pda1] { border-bottom: none; }

.hs-cat-meta[b-a7kei4pda1] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}

.hs-cat-amount[b-a7kei4pda1] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
}

.hs-cat-track[b-a7kei4pda1] {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--line-2);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.hs-cat-fill[b-a7kei4pda1] {
    height: 100%;
    background: var(--ink);
    border-radius: 2px;
}

/* ── Movers ───────────────────────────────────────────── */
.hs-movers[b-a7kei4pda1] {
    padding: 4px 20px 12px;
}

.hs-mover[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-2);
    font-size: 13px;
}

.hs-mover:last-child[b-a7kei4pda1] { border-bottom: none; }

.hs-mover-name[b-a7kei4pda1] {
    font-weight: 500;
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-mover-prices[b-a7kei4pda1] {
    color: var(--ink-2);
    font-size: 12px;
    white-space: nowrap;
}

.hs-mover-prices .arrow[b-a7kei4pda1] { color: var(--ink-4); margin: 0 4px; }
.hs-mover-prices b[b-a7kei4pda1]      { color: var(--ink); font-weight: 600; }

.hs-mover-pct[b-a7kei4pda1] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neg);
    white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1100px) {
    .hs-hero[b-a7kei4pda1]    { grid-template-columns: 1fr 1fr; }
    .hs-actions[b-a7kei4pda1] { grid-template-columns: 1fr 1fr; }
    .hs-grid[b-a7kei4pda1]    { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .hs-shell[b-a7kei4pda1]        { gap: 20px; }
    .hs-h1[b-a7kei4pda1]           { font-size: 19px; }
    .hs-tile[b-a7kei4pda1]         { padding: 16px 18px; min-height: 100px; }
    .hs-tile-value[b-a7kei4pda1]   { font-size: 22px; }
    .hs-tile-primary .hs-tile-value[b-a7kei4pda1] { font-size: 28px; letter-spacing: -.8px; }
    .hs-actions[b-a7kei4pda1]      { grid-template-columns: 1fr; }
    .hs-card-head[b-a7kei4pda1]    { padding: 14px 16px; }
    .hs-rows[b-a7kei4pda1],
    .hs-saves[b-a7kei4pda1],
    .hs-cats[b-a7kei4pda1],
    .hs-movers[b-a7kei4pda1]       { padding-left: 16px; padding-right: 16px; }
    .hs-chart-stat[b-a7kei4pda1]   { padding: 12px 16px; }
    .hs-chart-stat .v[b-a7kei4pda1] { font-size: 15px; }
    .hs-chart-frame[b-a7kei4pda1]  { padding: 10px 14px; }
    .hs-save[b-a7kei4pda1]         { grid-template-columns: 1fr; }
    .hs-save-amount[b-a7kei4pda1]  { text-align: left; }
}

@media (max-width: 480px) {
    .hs-hero[b-a7kei4pda1] { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD NOVO — refactor "sinais" 2026-05
   Mobile-first: tudo desenhado para 360-420px primeiro, desktop é variação.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── EMPTY HERO: para users sem compras ─────────────────────────
   Aparece quando o user nunca registou um talão. Pinta um caminho
   óbvio (um único CTA grande) em vez de mostrar tiles vazios. */
.hs-empty-hero[b-a7kei4pda1] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    /* Subtle accent à esquerda — sinaliza "primeiro passo" sem gritar. */
    border-left: 3px solid var(--ink);
}

.hs-empty-hero-icon[b-a7kei4pda1] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--line-2);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 6px;
}

.hs-empty-hero-title[b-a7kei4pda1] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1.2;
}

.hs-empty-hero-sub[b-a7kei4pda1] {
    margin: 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 460px;
}

.hs-empty-hero-cta[b-a7kei4pda1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 22px;
    background: var(--ink);
    color: var(--on-ink);
    border-radius: 999px;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    transition: background 120ms ease, transform 120ms ease;
}
.hs-empty-hero-cta:hover[b-a7kei4pda1] {
    background: var(--ink-hover);
    color: var(--on-ink);
    text-decoration: none;
    transform: translateY(-1px);
}
.hs-empty-hero-arrow[b-a7kei4pda1] {
    transition: transform 120ms ease;
}
.hs-empty-hero-cta:hover .hs-empty-hero-arrow[b-a7kei4pda1] {
    transform: translateX(3px);
}

.hs-empty-hero-foot[b-a7kei4pda1] {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.45;
}
.hs-empty-hero-foot a[b-a7kei4pda1] {
    color: var(--ink-2);
    text-decoration: underline;
}
.hs-empty-hero-foot a:hover[b-a7kei4pda1] {
    color: var(--ink);
}

/* ── HERO: projecção do mês ─────────────────────────────────────── */
/* V1 do redesign — "Acalmar mantendo personalidade".
   Antes: border âmbar 35% + linear gradient cheio (parecia alerta).
   Agora: border neutra como os outros cards + radial-gradient TÊNUE
   no canto superior direito (~4% opacity) para dar o "ar de card
   principal" sem gritar. A única cor que destoa é o "+X% acima"
   em dourado (.hs-hero-trend.is-warn) — esse mantém-se. */
.hs-hero-card[b-a7kei4pda1] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    /* isolation cria stacking context — assim o ::before z-index:-1
       fica atrás do conteúdo do card mas não desce abaixo do próprio
       card (não "vaza" para o background da página). */
    isolation: isolate;
}
.hs-hero-card.is-warn[b-a7kei4pda1] {
    /* SEM mudança no border ou background — ficam neutros como o card default.
       O sinal de "vais acima do mês passado" vive APENAS na frase
       "+X% acima do mês passado" pintada em .hs-hero-trend.is-warn. */
}
/* Glow radial dourado muito subtil — só aparece no estado is-warn.
   Pseudo-elemento absoluto no canto superior direito; pointer-events
   none para não interferir com clicks. Funciona em light e dark porque
   a cor é translúcida e adapta-se ao surface por baixo. */
.hs-hero-card.is-warn[b-a7kei4pda1]::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.05) 0%, transparent 65%);
    pointer-events: none;
    /* z-index negativo dentro do stacking context do .hs-hero-card
       (criado por isolation: isolate) — fica por trás do conteúdo
       mas não vaza para o background da página. */
    z-index: -1;
}
/* Em dark mode o glow fica ligeiramente mais visível (background é mais
   contrastante) — sobe a opacity para 6% para manter a mesma presença. */
[data-theme="dark"] .hs-hero-card.is-warn[b-a7kei4pda1]::before {
    background: radial-gradient(circle, rgba(245, 198, 106, 0.06) 0%, transparent 65%);
}
/* Sem variante "is-good" no hero — utilizador prefere neutralidade quando vai bem. */
.hs-hero-skeleton[b-a7kei4pda1] {
    color: var(--ink-3);
    font-size: 13px;
    padding: 8px 0;
}
.hs-hero-headline[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hs-hero-label[b-a7kei4pda1] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.hs-hero-value[b-a7kei4pda1] {
    font-size: 36px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -1.2px;
    line-height: 1;
}
.hs-hero-narrative[b-a7kei4pda1] {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2);
}
.hs-hero-narrative strong[b-a7kei4pda1] { color: var(--ink); font-weight: 600; }
.hs-hero-trend[b-a7kei4pda1] { font-weight: 600; color: var(--ink); }
.hs-hero-trend.is-warn[b-a7kei4pda1] { color: var(--warn); }

/* ── REPOR AGORA ────────────────────────────────────────────────── */
.hs-replenish-summary[b-a7kei4pda1] {
    display: grid;
    /* 3 colunas iguais — evita reflow chato com auto-fit. */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 12px 14px 6px;
}
.hs-replenish-stat[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--line-2);
    min-width: 0; /* permite shrink dentro do grid */
}
/* Severity comunica-se pelo NÚMERO colorido + accent line, não pelo fundo
   inteiro. Mais sóbrio, ar mais profissional. */
.hs-replenish-stat[b-a7kei4pda1] {
    border-left: 3px solid var(--ink-3);
}
.hs-replenish-stat.is-bad[b-a7kei4pda1]  { border-left-color: var(--neg); }
.hs-replenish-stat.is-warn[b-a7kei4pda1] { border-left-color: var(--warn); }
.hs-replenish-stat-cost[b-a7kei4pda1]    { border-left-color: var(--ink-3); }

.hs-replenish-stat.is-bad  .hs-replenish-stat-num[b-a7kei4pda1] { color: var(--neg); }
.hs-replenish-stat.is-warn .hs-replenish-stat-num[b-a7kei4pda1] { color: var(--warn); }

.hs-replenish-stat-num[b-a7kei4pda1] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--ink);
    /* Impede que "~12.23 €" parta a meio (entre número e símbolo).
       O FormatMoney devolve "X.XX €" com espaço — sem isto, o flex
       column dá wrap no espaço e fica feio em cards estreitos. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hs-replenish-stat-label[b-a7kei4pda1] {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ink-3);
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-replenish-items[b-a7kei4pda1] {
    padding: 8px 18px 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hs-replenish-chip[b-a7kei4pda1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    max-width: 100%;
}
.hs-replenish-chip .hs-replenish-name[b-a7kei4pda1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.hs-replenish-chip i[b-a7kei4pda1] { font-size: 12px; color: var(--ink-3); }
.hs-replenish-dot[b-a7kei4pda1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hs-replenish-chip.is-zero .hs-replenish-dot[b-a7kei4pda1] { background: var(--neg); }
.hs-replenish-chip.is-low  .hs-replenish-dot[b-a7kei4pda1] { background: var(--warn); }
.hs-replenish-chip:hover[b-a7kei4pda1] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.hs-replenish-chip:hover i[b-a7kei4pda1] { color: var(--on-ink); }

/* ── ESTA SEMANA ────────────────────────────────────────────────── */
.hs-week-list[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
}
.hs-week-row[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
    text-decoration: none;
    color: var(--ink);
    transition: background 120ms ease;
}
.hs-week-row:last-child[b-a7kei4pda1] { border-bottom: none; }
.hs-week-row:hover[b-a7kei4pda1] { background: var(--line-2); color: var(--ink); }
.hs-week-icon[b-a7kei4pda1] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 16px;
}
.hs-week-row.is-bad  .hs-week-icon[b-a7kei4pda1] { background: var(--neg-soft); color: var(--neg); }
.hs-week-row.is-warn .hs-week-icon[b-a7kei4pda1] { background: var(--warn-soft); color: var(--warn); }
.hs-week-row.is-info .hs-week-icon[b-a7kei4pda1] { background: var(--pos-soft); color: var(--pos); }
.hs-week-text[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.hs-week-text strong[b-a7kei4pda1] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.hs-week-text small[b-a7kei4pda1] {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.35;
}
.hs-week-trail[b-a7kei4pda1] {
    color: var(--ink-3);
    font-size: 14px;
    transition: transform 150ms ease;
}
.hs-week-row:hover .hs-week-trail[b-a7kei4pda1] { transform: translateX(2px); color: var(--ink); }

/* ── SINAIS DE POUPANÇA ─────────────────────────────────────────── */
.hs-signal-list[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
}
.hs-signal[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
    text-decoration: none;
    color: var(--ink);
    transition: background 120ms ease;
}
.hs-signal:last-child[b-a7kei4pda1] { border-bottom: none; }
.hs-signal:hover[b-a7kei4pda1] { background: var(--line-2); color: var(--ink); }
.hs-signal-head[b-a7kei4pda1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.hs-signal-name[b-a7kei4pda1] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.hs-signal-confidence[b-a7kei4pda1] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.hs-signal-conf-dot[b-a7kei4pda1] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--line);
}
.hs-signal-conf-dot.is-on[b-a7kei4pda1] { background: var(--ink); }

/* Badge da janela usada pelo cascade (7d / 14d / 30d) — comunica frescura
   dos dados sem competir visualmente com o nome do produto. */
.hs-signal-window[b-a7kei4pda1] {
    margin-top: 4px;
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
}

.hs-signal-body[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 12.5px;
}
.hs-signal-yours[b-a7kei4pda1],
.hs-signal-market[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hs-signal-label[b-a7kei4pda1] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.hs-signal-yours .num[b-a7kei4pda1] { color: var(--warn); font-weight: 600; }
.hs-signal-market .num[b-a7kei4pda1] { color: var(--ink); font-weight: 600; }
.hs-signal-yours small[b-a7kei4pda1],
.hs-signal-market small[b-a7kei4pda1] { color: var(--ink-3); font-size: 11px; }

.hs-signal-suggest[b-a7kei4pda1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--line-2);
    font-size: 12px;
    color: var(--ink-2);
}
.hs-signal-suggest i[b-a7kei4pda1] { color: var(--pos); }
.hs-signal-suggest strong[b-a7kei4pda1] { color: var(--ink); font-weight: 600; }

/* ── RESPONSIVE / DESKTOP TWEAKS ───────────────────────────────── */
@media (min-width: 720px) {
    .hs-hero-card[b-a7kei4pda1] {
        padding: 28px 28px 24px;
    }
    .hs-hero-value[b-a7kei4pda1] {
        font-size: 44px;
    }
    /* Em desktop o card pode crescer — gap maior, padding maior, num maior */
    .hs-replenish-summary[b-a7kei4pda1] {
        gap: 10px;
        padding: 16px 22px 10px;
    }
    .hs-replenish-stat[b-a7kei4pda1] { padding: 10px 12px; }
    .hs-replenish-stat-num[b-a7kei4pda1] { font-size: 22px; }
    .hs-replenish-stat-label[b-a7kei4pda1] { font-size: 11px; }

    .hs-week-row[b-a7kei4pda1] { padding: 14px 22px; }
    .hs-signal[b-a7kei4pda1] { padding: 16px 22px; }
}

@media (max-width: 420px) {
    .hs-hero-card[b-a7kei4pda1] { padding: 18px 14px; }
    .hs-hero-value[b-a7kei4pda1] { font-size: 30px; }
    .hs-hero-narrative[b-a7kei4pda1] { font-size: 13px; }

    /* Mobile médio — mais apertado que o default mas legível */
    .hs-replenish-summary[b-a7kei4pda1] {
        gap: 6px;
        padding: 10px 12px 4px;
    }
    .hs-replenish-stat[b-a7kei4pda1] { padding: 6px 8px; }
    .hs-replenish-stat-num[b-a7kei4pda1] { font-size: 16px; }
    .hs-replenish-stat-label[b-a7kei4pda1] { font-size: 10px; }

    .hs-replenish-items[b-a7kei4pda1] { padding: 6px 14px 14px; }
    .hs-replenish-chip .hs-replenish-name[b-a7kei4pda1] { max-width: 130px; }
    .hs-week-row[b-a7kei4pda1] { padding: 12px 14px; gap: 10px; }
    .hs-week-icon[b-a7kei4pda1] { width: 32px; height: 32px; font-size: 14px; }
    .hs-signal[b-a7kei4pda1] { padding: 12px 14px; }
    .hs-signal-body[b-a7kei4pda1] { grid-template-columns: 1fr; gap: 6px; }
}

/* Telemóvel muito estreito — encolhe mais para apanhar Galaxy/iPhone Mini */
@media (max-width: 360px) {
    .hs-replenish-stat[b-a7kei4pda1] { padding: 5px 6px; }
    .hs-replenish-stat-num[b-a7kei4pda1] { font-size: 14.5px; }
    .hs-replenish-stat-label[b-a7kei4pda1] { font-size: 9.5px; }
}

/* ── Comunidade Pantry — strip "live" compacto ─────────────
   Discreto mas presente. Dot verde pulsa para sinalizar "real-time". */
.hs-live-strip[b-a7kei4pda1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin: 8px 0 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--ink-2);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hs-live-strip[b-a7kei4pda1]::-webkit-scrollbar { display: none; }

.hs-live-strip strong[b-a7kei4pda1] {
    color: var(--ink);
    font-weight: 600;
}

.hs-live-label[b-a7kei4pda1] {
    font-weight: 600;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 10.5px;
}

.hs-live-sep[b-a7kei4pda1] {
    color: var(--ink-3);
    opacity: 0.6;
}

.hs-live-stat[b-a7kei4pda1] { flex-shrink: 0; }

/* Dot verde pulsante — anima 2s loop infinito.
   - Núcleo sólido sempre visível
   - Halo expande e fade-out a cada pulse
   - Replica padrão "live indicator" do Vercel/Stripe/etc. */
.hs-live-dot[b-a7kei4pda1] {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}
.hs-live-dot[b-a7kei4pda1]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.35);
    animation: hs-live-pulse-b-a7kei4pda1 2s ease-out infinite;
}

@keyframes hs-live-pulse-b-a7kei4pda1 {
    0%   { transform: scale(0.6); opacity: 0.7; }
    70%  { transform: scale(1.8); opacity: 0;   }
    100% { transform: scale(0.6); opacity: 0;   }
}

/* Respeita preferência de reduzir motion (acessibilidade). */
@media (prefers-reduced-motion: reduce) {
    .hs-live-dot[b-a7kei4pda1]::after { animation: none; }
}

@media (max-width: 600px) {
    .hs-live-strip[b-a7kei4pda1] { font-size: 11.5px; padding: 7px 12px; gap: 6px; }
    .hs-live-label[b-a7kei4pda1] { font-size: 9.5px; letter-spacing: 0.4px; }
    .hs-live-dot[b-a7kei4pda1] { width: 7px; height: 7px; }
}

/* ══════════════════════════════════════════════════════════════
   ANALYTICS DO FIM DO DASHBOARD — Top produtos + Gastos por categoria
   Grid 2-col em desktop, stack em mobile. Mockup base: pantry-resumo-analytics.html
   ══════════════════════════════════════════════════════════════ */
.hs-analytics-grid[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.hs-analytics-card[b-a7kei4pda1] {
    padding: 22px 24px;
}

.hs-card-sub[b-a7kei4pda1] {
    font-size: 11.5px;
    color: var(--ink-3);
    margin: 2px 0 0;
}

/* ── Top produtos ─────────────────────────────────────────────── */
.hs-top-prod-list[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
}

.hs-top-prod-row[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 18px 1fr 60px auto;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-2);
}
.hs-top-prod-row:first-child[b-a7kei4pda1] { padding-top: 4px; }
.hs-top-prod-row:last-child[b-a7kei4pda1] { border-bottom: none; padding-bottom: 4px; }

.hs-rank[b-a7kei4pda1] {
    font-size: 11px;
    color: var(--ink-3);
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.hs-rank.is-top[b-a7kei4pda1] { color: var(--warn); font-weight: 600; }

.hs-prod-main[b-a7kei4pda1] { min-width: 0; }
.hs-prod-name[b-a7kei4pda1] {
    font-size: 13.5px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    font-weight: 500;
}
.hs-prod-meta[b-a7kei4pda1] {
    font-size: 10.5px;
    color: var(--ink-3);
    display: flex;
    gap: 8px;
    align-items: center;
}
.hs-prod-count[b-a7kei4pda1] {
    background: var(--line-2);
    padding: 1px 7px;
    border-radius: 100px;
    color: var(--ink-2);
    font-weight: 500;
}
.hs-prod-cat[b-a7kei4pda1] { color: var(--ink-3); }

.hs-prod-bar-wrap[b-a7kei4pda1] {
    height: 3px;
    background: var(--line-2);
    border-radius: 100px;
    overflow: hidden;
}
.hs-prod-bar[b-a7kei4pda1] {
    height: 100%;
    border-radius: 100px;
    opacity: 0.7;
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hs-prod-value[b-a7kei4pda1] {
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
    text-align: right;
    min-width: 56px;
}

.hs-analytics-foot[b-a7kei4pda1] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11.5px;
    color: var(--ink-3);
}
.hs-analytics-foot .num[b-a7kei4pda1] {
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
}

/* ── Gastos por categoria ─────────────────────────────────────── */
.hs-cat-total[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-2);
}
.hs-cat-total-label[b-a7kei4pda1] {
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--ink-3);
    text-transform: uppercase;
    font-weight: 500;
}
.hs-cat-total-value[b-a7kei4pda1] {
    font-size: 28px;
    font-weight: 300;
    color: var(--ink);
    letter-spacing: -0.6px;
    line-height: 1;
}
.hs-cat-total-sub[b-a7kei4pda1] {
    font-size: 11.5px;
    color: var(--ink-3);
}

.hs-stacked-bar[b-a7kei4pda1] {
    height: 8px;
    border-radius: 100px;
    overflow: hidden;
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    background: var(--line-2);
}
.hs-stacked-seg[b-a7kei4pda1] {
    height: 100%;
    border-radius: 100px;
    transition: opacity 140ms ease;
}
.hs-stacked-seg:hover[b-a7kei4pda1] { opacity: 0.75; }

.hs-cat-list[b-a7kei4pda1] {
    display: flex;
    flex-direction: column;
}

.hs-cat-row[b-a7kei4pda1] {
    display: grid;
    grid-template-columns: 10px 1fr auto 40px 70px;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-2);
}
.hs-cat-row:first-child[b-a7kei4pda1] { padding-top: 4px; }
.hs-cat-row:last-child[b-a7kei4pda1] { border-bottom: none; padding-bottom: 4px; }

.hs-cat-dot[b-a7kei4pda1] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hs-cat-name[b-a7kei4pda1] {
    font-size: 13px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hs-cat-pct[b-a7kei4pda1] {
    font-size: 11px;
    color: var(--ink-3);
    text-align: right;
    font-weight: 500;
}
.hs-cat-value[b-a7kei4pda1] {
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
    text-align: right;
}

.hs-delta-badge[b-a7kei4pda1] {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.hs-delta-badge.is-up[b-a7kei4pda1] { color: var(--neg); background: var(--neg-soft); }
.hs-delta-badge.is-down[b-a7kei4pda1] { color: var(--pos); background: var(--pos-soft); }
.hs-delta-badge.is-neutral[b-a7kei4pda1] { color: var(--ink-3); background: var(--line-2); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hs-analytics-grid[b-a7kei4pda1] {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .hs-analytics-card[b-a7kei4pda1] { padding: 18px 16px; }
    .hs-cat-total-value[b-a7kei4pda1] { font-size: 24px; }
    .hs-cat-row[b-a7kei4pda1] {
        grid-template-columns: 10px 1fr auto 60px;
    }
    .hs-cat-row .hs-cat-pct[b-a7kei4pda1] { display: none; }
    .hs-top-prod-row[b-a7kei4pda1] {
        grid-template-columns: 16px 1fr auto;
    }
    .hs-top-prod-row .hs-prod-bar-wrap[b-a7kei4pda1] { display: none; }
}

/* ── Header editorial dos cards analytics ────────────────────────
   Substitui o padrão antigo (ícone bootstrap + título 13px + link
   à direita) pelo padrão eyebrow + título Light 300, alinhado com
   o resto da brand. Sem ícone (parecia emoji), sem link "Ver todos"
   (não levava a lado útil). */
.hs-analytics-head[b-a7kei4pda1] {
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-2);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hs-analytics-eyebrow[b-a7kei4pda1] {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--ink-3);
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8px;
}

.hs-analytics-title[b-a7kei4pda1] {
    margin: 0;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: -0.4px;
    color: var(--ink);
    line-height: 1.15;
}

.hs-analytics-sub[b-a7kei4pda1] {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--ink-3);
    letter-spacing: 0.2px;
}

@media (max-width: 480px) {
    .hs-analytics-head[b-a7kei4pda1] { margin-bottom: 18px; padding-bottom: 14px; }
    .hs-analytics-title[b-a7kei4pda1] { font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════
   DONUT CHART NO HEADER DA "GASTOS POR CATEGORIA"
   Variante .has-donut do header analytics: layout horizontal com
   text à esquerda + donut SVG à direita, ocupando o espaço branco.
   ══════════════════════════════════════════════════════════════ */

.hs-analytics-head.has-donut[b-a7kei4pda1] {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.hs-analytics-head-text[b-a7kei4pda1] {
    min-width: 0;
    flex: 1;
}

.hs-donut[b-a7kei4pda1] {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}

.hs-donut-svg[b-a7kei4pda1] {
    width: 100%;
    height: 100%;
    display: block;
    /* Cada segmento ganha um leve hover suave para indicar interactividade
       (via title tooltip nativo do SVG, sem JS). */
}
.hs-donut-svg circle[b-a7kei4pda1] {
    transition: stroke-width 160ms ease, opacity 160ms ease;
}
.hs-donut-svg g circle:hover[b-a7kei4pda1] {
    stroke-width: 12;
}

.hs-donut-center[b-a7kei4pda1] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.hs-donut-num[b-a7kei4pda1] {
    font-size: 22px;
    font-weight: 300;
    color: var(--ink);
    letter-spacing: -0.6px;
}

.hs-donut-label[b-a7kei4pda1] {
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Em mobile o donut empilha por baixo do texto para não comprimir
   demasiado a área de texto. */
@media (max-width: 480px) {
    .hs-analytics-head.has-donut[b-a7kei4pda1] {
        flex-direction: row;
        align-items: center;
    }
    .hs-donut[b-a7kei4pda1] {
        width: 78px;
        height: 78px;
    }
    .hs-donut-num[b-a7kei4pda1] { font-size: 18px; }
}
/* /Components/Pages/ListaCompras.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Lista de compras — sophisticated monochrome
   ───────────────────────────────────────────────────────── */

.lc-shell[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    min-width: 0;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.lc-shell .num[b-5ontrnx9hr] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Header ──────────────────────────────────────────── */
/* Brand refresh — eyebrow uppercase pequeno acima + título Light 300
   maior (32px desktop / 26px mobile) + sub. Padrão editorial alinhado
   com a brand das guidelines (Helvetica Neue Light 300). */
.lc-header[b-5ontrnx9hr] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-top: 4px;
}

.lc-h1-eyebrow[b-5ontrnx9hr] {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--ink-3);
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 10px;
}

.lc-h1[b-5ontrnx9hr] {
    margin: 0;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: -0.6px;
    color: var(--ink);
    line-height: 1.1;
}

.lc-h1-sub[b-5ontrnx9hr] {
    color: var(--ink-2);
    font-size: 13.5px;
    margin: 8px 0 0;
    line-height: 1.5;
    max-width: 580px;
}

@media (max-width: 720px) {
    .lc-h1[b-5ontrnx9hr] { font-size: 26px; letter-spacing: -0.4px; }
    .lc-h1-eyebrow[b-5ontrnx9hr] { margin-bottom: 8px; }
    .lc-header[b-5ontrnx9hr] { flex-direction: column; align-items: stretch; gap: 14px; }
    .lc-header-actions[b-5ontrnx9hr] { justify-content: flex-start; }
}

/* ── Card ────────────────────────────────────────────── */
.lc-card[b-5ontrnx9hr] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.lc-card-head[b-5ontrnx9hr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.lc-card-window[b-5ontrnx9hr] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lc-card-title[b-5ontrnx9hr] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.2px;
}

.lc-card-body[b-5ontrnx9hr] {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Add input card ──────────────────────────────────── */
/* Brand refresh — card de adicionar mais respirado e editorial.
   Padding generoso, input maior (16px font + 12px vertical), ícone de
   busca destacado, transições mais subtis. */
.lc-add[b-5ontrnx9hr] { padding: 22px 24px; position: relative; }

.lc-add-row[b-5ontrnx9hr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lc-add-input-wrap[b-5ontrnx9hr] {
    flex: 1;
    position: relative;
    min-width: 0;
}

.lc-add-icon[b-5ontrnx9hr] {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: 15px;
    pointer-events: none;
    transition: color 140ms ease;
}

.lc-add-input[b-5ontrnx9hr] {
    width: 100%;
    padding: 13px 14px 13px 42px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--line-2);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.lc-add-input[b-5ontrnx9hr]::placeholder { color: var(--ink-3); }
.lc-add-input:hover[b-5ontrnx9hr] {
    border-color: var(--ink-3);
    background: var(--surface);
}
.lc-add-input:hover + .lc-add-icon[b-5ontrnx9hr],
.lc-add-input-wrap:hover .lc-add-icon[b-5ontrnx9hr] { color: var(--ink-2); }
.lc-add-input:focus[b-5ontrnx9hr] {
    outline: none;
    border-color: var(--ink);
    background: var(--surface);
    box-shadow: 0 0 0 4px rgba(9,9,11,.06);
}
.lc-add-input:focus + .lc-add-icon[b-5ontrnx9hr],
.lc-add-input-wrap:focus-within .lc-add-icon[b-5ontrnx9hr] { color: var(--ink); }

.lc-suggestions[b-5ontrnx9hr] {
    list-style: none;
    margin: 6px 0 0;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: 0 8px 20px rgba(15,23,42,.08);
    max-height: 280px;
    overflow-y: auto;
}

.lc-suggestion[b-5ontrnx9hr] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.lc-suggestion:hover[b-5ontrnx9hr] { background: var(--line-2); }
.lc-suggestion i[b-5ontrnx9hr] { color: var(--ink-3); font-size: 13px; }
.lc-suggestion-name[b-5ontrnx9hr] { font-weight: 500; flex: 1; }
.lc-suggestion-hint[b-5ontrnx9hr] { color: var(--ink-3); font-size: 11.5px; }
.lc-suggestion.is-free[b-5ontrnx9hr] { border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 10px; }
.lc-suggestion.is-free .lc-suggestion-name[b-5ontrnx9hr] { color: var(--ink-2); }

/* ── Favorites ───────────────────────────────────────── */
.lc-favs[b-5ontrnx9hr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px dashed var(--line);
}

.lc-favs-icon[b-5ontrnx9hr] {
    color: var(--warn);
    font-size: 14px;
    margin-right: 4px;
}

.lc-fav-chip[b-5ontrnx9hr] {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}

.lc-fav-chip:hover[b-5ontrnx9hr] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}

/* ── Sugestões de stock baixo / esgotado ─────────────── */
.lc-suggestion-row[b-5ontrnx9hr] {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px dashed var(--line);
}
.lc-suggestion-row-label[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.lc-suggestion-row-label i[b-5ontrnx9hr] {
    color: var(--warn);
    font-size: 13px;
}

.lc-stock-chips[b-5ontrnx9hr] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lc-stock-chip[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}

.lc-stock-chip-dot[b-5ontrnx9hr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lc-stock-chip.is-zero .lc-stock-chip-dot[b-5ontrnx9hr] { background: var(--neg); }
.lc-stock-chip.is-low  .lc-stock-chip-dot[b-5ontrnx9hr] { background: var(--warn); }

.lc-stock-chip.is-zero[b-5ontrnx9hr] {
    border-color: rgba(220, 38, 38, 0.25);
    background: var(--neg-soft);
    color: var(--neg);
}
.lc-stock-chip.is-low[b-5ontrnx9hr] {
    border-color: rgba(245, 158, 11, 0.25);
    background: var(--warn-soft);
    color: var(--warn);
}
.lc-stock-chip:hover[b-5ontrnx9hr] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.lc-stock-chip.is-zero:hover[b-5ontrnx9hr] { background: var(--neg); color: #fff; border-color: var(--neg); }
.lc-stock-chip.is-zero:hover .lc-stock-chip-dot[b-5ontrnx9hr] { background: #fff; }
.lc-stock-chip.is-low:hover[b-5ontrnx9hr]  { background: var(--warn); color: #fff; border-color: var(--warn); }
.lc-stock-chip.is-low:hover  .lc-stock-chip-dot[b-5ontrnx9hr] { background: #fff; }

/* ── Buttons ─────────────────────────────────────────── */
.lc-btn[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}

.lc-btn:disabled[b-5ontrnx9hr] { opacity: 0.5; cursor: not-allowed; }

.lc-btn-primary[b-5ontrnx9hr] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.lc-btn-primary:hover:not(:disabled)[b-5ontrnx9hr] { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-ink); }

.lc-btn-secondary[b-5ontrnx9hr] { background: var(--surface); color: var(--ink); border-color: var(--line); }
.lc-btn-secondary:hover:not(:disabled)[b-5ontrnx9hr] { background: var(--line-2); border-color: var(--ink-3); }

.lc-btn-danger[b-5ontrnx9hr] { background: var(--surface); color: var(--neg); border-color: rgba(185,28,28,.25); }
.lc-btn-danger:hover:not(:disabled)[b-5ontrnx9hr] { background: var(--neg); color: #fff; border-color: var(--neg); }

/* ── Help button + tip panel ─────────────────────────── */
.lc-header-actions[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lc-help-btn[b-5ontrnx9hr] {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line, #E5E5E0);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.lc-help-btn:hover[b-5ontrnx9hr] {
    background: var(--line-2, #F5F5F2);
    border-color: var(--ink-3);
    color: var(--ink);
}

.lc-help-btn i[b-5ontrnx9hr] {
    font-size: 16px;
}

.lc-help-tip[b-5ontrnx9hr] {
    position: relative;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line, #E5E5E0);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    animation: lc-fade-in-b-5ontrnx9hr 0.25s ease;
}

.lc-help-tip-close[b-5ontrnx9hr] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: background 0.15s ease;
}

.lc-help-tip-close:hover[b-5ontrnx9hr] {
    background: var(--line-2, #F5F5F2);
    color: var(--ink);
}

.lc-help-tip-title[b-5ontrnx9hr] {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.lc-help-tip-sub[b-5ontrnx9hr] {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--ink-2);
}

.lc-help-tip-rows[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.lc-help-tip-row[b-5ontrnx9hr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--line-2, #F5F5F2);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.lc-help-tip-row > i[b-5ontrnx9hr] {
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

.lc-help-tip-row.is-good > i[b-5ontrnx9hr] { color: var(--pos, #15803D); }
.lc-help-tip-row.is-bad > i[b-5ontrnx9hr] { color: var(--neg, #B91C1C); }

.lc-help-tip-row > div[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-help-tip-row strong[b-5ontrnx9hr] {
    color: var(--ink);
    font-weight: 600;
    font-size: 13px;
}

.lc-help-tip-row span[b-5ontrnx9hr] {
    color: var(--ink-2);
    font-size: 12px;
}

.lc-help-tip-hint[b-5ontrnx9hr] {
    margin: 0;
    padding: 10px 12px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink);
    line-height: 1.4;
}

.lc-help-tip-hint strong[b-5ontrnx9hr] {
    color: var(--ink);
    font-weight: 600;
}

/* ── Compare hint (when list has fewer than 2 items) ──── */
.lc-compare-hint[b-5ontrnx9hr] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--line-2, #F5F5F2);
    border: 1px dashed var(--line, #E5E5E0);
    border-radius: 12px;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
}

.lc-compare-hint > i[b-5ontrnx9hr] {
    font-size: 18px;
    color: var(--ink);
    margin-top: 1px;
    flex-shrink: 0;
}

.lc-compare-hint > div[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-compare-hint strong[b-5ontrnx9hr] {
    color: var(--ink);
    font-weight: 600;
}

/* ── Comparison: stores ──────────────────────────────── */
.lc-loading[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-2);
    font-size: 13px;
    padding: 12px 0;
}

.lc-spinner[b-5ontrnx9hr] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ink-3);
    border-top-color: transparent;
    border-radius: 50%;
    animation: lc-spin-b-5ontrnx9hr 0.6s linear infinite;
    display: inline-block;
}

@keyframes lc-spin-b-5ontrnx9hr { to { transform: rotate(360deg); } }

/* Bloco de recomendação — sóbrio, tipográfico, sem emojis nem cores fortes */
/* Top do bloco de comparação: "A tua lista (N produtos) | Recomendação: X" */
.lc-comparison-top[b-5ontrnx9hr] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.lc-comparison-eyebrow[b-5ontrnx9hr],
.lc-comparison-reco-label[b-5ontrnx9hr] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-3);
    font-weight: 600;
}
.lc-comparison-reco-label[b-5ontrnx9hr] { text-align: right; }
.lc-comparison-title[b-5ontrnx9hr] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-top: 4px;
    color: var(--ink);
}
.lc-comparison-reco-val[b-5ontrnx9hr] {
    font-size: 22px;
    font-weight: 700;
    color: var(--pos);
    text-align: right;
    letter-spacing: -0.5px;
    margin-top: 4px;
}
.lc-comparison-empty-reco[b-5ontrnx9hr] {
    font-size: 14px;
    color: var(--ink-3);
    font-style: italic;
    text-align: right;
    margin-top: 4px;
}

/* Quando não há comparação real (lojas com cobertura disjunta), reco fica neutra */
.lc-comparison-reco-neutral[b-5ontrnx9hr] {
    color: var(--ink-2) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Hint quando lojas cobrem produtos diferentes — não há "vencedor" */
.lc-disjoint-hint[b-5ontrnx9hr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--ink);
    line-height: 1.5;
}
.lc-disjoint-hint i[b-5ontrnx9hr] {
    color: var(--warn, #B45309);
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}
.lc-disjoint-hint strong[b-5ontrnx9hr] { color: var(--ink); font-weight: 600; }

/* Hint quando há items free-text que matcharam múltiplos clusters — explica
   ao user porque o total é mostrado como intervalo, não valor exacto. */
.lc-ambiguity-hint[b-5ontrnx9hr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.20);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--ink);
    line-height: 1.5;
}
.lc-ambiguity-hint i[b-5ontrnx9hr] {
    color: #2563EB;
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}
.lc-ambiguity-hint strong[b-5ontrnx9hr] { color: var(--ink); font-weight: 600; }

/* Lista vertical de lojas (substitui grid antigo) */
.lc-stores[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lc-store[b-5ontrnx9hr] {
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 120ms ease;
}

.lc-store:hover[b-5ontrnx9hr] { border-color: var(--ink-3); }

.lc-store.is-winner[b-5ontrnx9hr] {
    border-color: var(--pos);
    background: linear-gradient(180deg, var(--pos-soft), #fff);
}

.lc-store.is-partial[b-5ontrnx9hr] { opacity: 0.85; border-style: dashed; }

/* Head: ícone + nome/subtítulo à esquerda, tag/diff à direita */
.lc-store-head[b-5ontrnx9hr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.lc-store-name-wrap[b-5ontrnx9hr] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.lc-store-icon[b-5ontrnx9hr] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--line-2);
    color: var(--ink-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.lc-store-icon i[b-5ontrnx9hr] { font-size: 14px; }
.lc-store.is-winner .lc-store-icon[b-5ontrnx9hr] { background: var(--pos); color: #fff; }

.lc-store-info[b-5ontrnx9hr] { display: flex; flex-direction: column; min-width: 0; }

.lc-store-name[b-5ontrnx9hr] {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.2;
}

.lc-store-subtitle[b-5ontrnx9hr] {
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
    margin-top: 1px;
}
.lc-store.is-winner .lc-store-subtitle[b-5ontrnx9hr] { color: var(--pos); font-weight: 600; }

/* Wrapper do bloco de preço à direita do nome da loja — alinha o valor (ou
   range) com a label "estimativa" / "intervalo estimado" em baixo. */
.lc-store-price-wrap[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    text-align: right;
    gap: 1px;
}

.lc-store-price[b-5ontrnx9hr] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.15;
}

/* Separador "–" entre min e max num range. Ligeiramente esbatido para o olho
   focar nos números, não no traço. */
.lc-store-price-sep[b-5ontrnx9hr] {
    color: var(--ink-3);
    font-weight: 400;
    margin: 0 2px;
}

/* Label discreta por baixo do valor (ou range) — diz se é estimativa exacta
   ou intervalo aproximado. */
.lc-store-price-label[b-5ontrnx9hr] {
    font-size: 10px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}

.lc-store.is-winner .lc-store-price[b-5ontrnx9hr] { color: var(--pos); }
.lc-store.is-winner .lc-store-price-sep[b-5ontrnx9hr] { color: var(--pos); opacity: 0.7; }

/* Tag/sinal à direita do nome da loja em vez de preço em €.
   Ex: "Mais barato" / "~12% mais caro" / "Dados insuficientes" */
.lc-store-signal[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Linha de transparência de dados — discreta, só texto */
.lc-data-source[b-5ontrnx9hr] {
    margin: 0 0 14px;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
}
.lc-data-source strong[b-5ontrnx9hr] { color: var(--ink-2); font-weight: 600; }

.lc-store-datapoints[b-5ontrnx9hr] {
    color: var(--ink-3);
    font-size: 11px;
    cursor: help;
}

/* Toggle "Ver detalhes" — pequeno, discreto, em cada card de loja */
.lc-store-toggle[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: var(--ink-3);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 120ms ease;
}
.lc-store-toggle:hover[b-5ontrnx9hr] {
    background: var(--line-2);
    color: var(--ink-2);
}

/* Painel expandido com detalhes — items, produtos, preços */
.lc-store-details[b-5ontrnx9hr] {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--line-2);
    border-radius: var(--r-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lc-detail[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.lc-detail:last-child[b-5ontrnx9hr] { border-bottom: none; padding-bottom: 0; }

.lc-detail-head[b-5ontrnx9hr] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.lc-detail-name[b-5ontrnx9hr] {
    font-weight: 600;
    color: var(--ink);
    font-size: 13px;
}
.lc-detail-avg[b-5ontrnx9hr] {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.lc-detail-meta[b-5ontrnx9hr] {
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.4;
}
.lc-detail-meta strong[b-5ontrnx9hr] {
    color: var(--ink-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.lc-detail-products[b-5ontrnx9hr] {
    color: var(--ink-3);
}

/* Preço típico no detalhe — destaque ligeiro */
.lc-detail-price[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lc-detail-price strong[b-5ontrnx9hr] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.lc-detail-price-sub[b-5ontrnx9hr] {
    font-size: 10.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}

.lc-detail-count[b-5ontrnx9hr] {
    font-size: 11.5px;
    color: var(--ink-3);
    font-style: italic;
}

.lc-detail-warn[b-5ontrnx9hr] {
    margin-top: 4px;
    padding: 6px 10px;
    background: var(--warn-soft);
    color: var(--warn);
    border-radius: 4px;
    font-size: 11.5px;
    line-height: 1.4;
}

/* Detalhe com spread enorme — visualmente sinaliza que NÃO é uma média
   significativa. Apresenta o range em vez de um valor único. */
.lc-detail.is-ambiguous .lc-detail-name[b-5ontrnx9hr] { color: var(--ink-2); }

.lc-detail-price-range[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lc-detail-price-range strong[b-5ontrnx9hr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.lc-detail-price-sep[b-5ontrnx9hr] {
    color: var(--ink-3);
    font-weight: 400;
}

.lc-detail-spread-warn[b-5ontrnx9hr] {
    margin-top: 4px;
    padding: 6px 10px;
    background: var(--warn-soft);
    color: var(--warn);
    border-radius: 4px;
    font-size: 11.5px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.lc-detail-spread-warn i[b-5ontrnx9hr] {
    flex-shrink: 0;
    margin-top: 1px;
}

.lc-store-meta[b-5ontrnx9hr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--ink-3);
}

/* Quando o meta tem badges (MAIS BARATO, N aprox.), dá-lhes empurrão para a
   direita — info de cobertura à esquerda, badges à direita. Útil no desktop;
   no mobile dão wrap normal. */
.lc-store-meta .lc-tag[b-5ontrnx9hr] { margin-left: auto; }
.lc-store-meta .lc-tag + .lc-tag[b-5ontrnx9hr] { margin-left: 0; }

.lc-store-cov[b-5ontrnx9hr] { font-weight: 500; }

.lc-tag[b-5ontrnx9hr] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--line-2);
    color: var(--ink-2);
    border: 1px solid var(--line);
}

.lc-tag.lc-tag-pos[b-5ontrnx9hr] { background: var(--pos-soft); color: var(--pos); border-color: rgba(21,128,61,.2); }
.lc-tag.lc-tag-neg[b-5ontrnx9hr] { background: var(--neg-soft); color: var(--neg); border-color: rgba(185,28,28,.2); }
.lc-tag.lc-tag-warn[b-5ontrnx9hr] { background: var(--warn-soft); color: var(--warn); border-color: rgba(245,158,11,.25); }

/* ── Market signal — loading state com skeletons + mensagem rotativa ── */
.lc-signal-loading[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lc-signal-loading-msg[b-5ontrnx9hr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.lc-signal-loading-dot[b-5ontrnx9hr] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
    animation: lc-pulse-b-5ontrnx9hr 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.lc-signal-loading-text[b-5ontrnx9hr] {
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
    transition: opacity 0.3s ease;
    animation: lc-fade-in-b-5ontrnx9hr 0.4s ease;
}

.lc-signal-loading-hint[b-5ontrnx9hr] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    font-style: italic;
}

.lc-skeleton[b-5ontrnx9hr] {
    background: linear-gradient(
        90deg,
        var(--line-2, #F5F5F2) 0%,
        var(--line, #E5E5E0) 50%,
        var(--line-2, #F5F5F2) 100%
    );
    background-size: 200% 100%;
    animation: lc-shimmer-b-5ontrnx9hr 1.6s ease-in-out infinite;
    border-radius: 12px;
}

.lc-skeleton-store[b-5ontrnx9hr] {
    height: 64px;
}

@keyframes lc-shimmer-b-5ontrnx9hr {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes lc-pulse-b-5ontrnx9hr {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

@keyframes lc-fade-in-b-5ontrnx9hr {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Market signal panel (Gemini grounding) ─────────────── */
.lc-tag-soft[b-5ontrnx9hr] {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--line-2, #F5F5F2);
    color: var(--ink-2);
    border: 1px solid var(--line, #E5E5E0);
    vertical-align: middle;
}

.lc-signal-items[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--line-2, #F5F5F2);
    border: 1px solid var(--line, #E5E5E0);
    border-radius: 10px;
}

.lc-signal-items-title[b-5ontrnx9hr] {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.lc-signal-item[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-top: 1px solid var(--line, #E5E5E0);
}

.lc-signal-item:first-of-type[b-5ontrnx9hr] { border-top: 0; padding-top: 2px; }

.lc-signal-item-name[b-5ontrnx9hr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.lc-signal-item-analysis[b-5ontrnx9hr] {
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.4;
}

.lc-verdict[b-5ontrnx9hr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
}

.lc-verdict > i[b-5ontrnx9hr] {
    font-size: 16px;
    color: var(--warn, #B45309);
    margin-top: 1px;
    flex-shrink: 0;
}

/* ── Details panel — disponibilidade por produto/loja ─── */
.lc-details-toggle[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--line, #E5E5E0);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    transition: background 0.15s ease, border-color 0.15s ease;
    align-self: flex-start;
}

.lc-details-toggle:hover[b-5ontrnx9hr] {
    background: var(--line-2, #F5F5F2);
    border-color: var(--ink-3);
    color: var(--ink);
}

.lc-details-toggle i[b-5ontrnx9hr] {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.lc-details-count[b-5ontrnx9hr] {
    margin-left: 4px;
    padding: 2px 7px;
    background: var(--line-2, #F5F5F2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-3);
}

.lc-details-panel[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px;
    padding: 14px 16px;
    background: var(--line-2, #F5F5F2);
    border: 1px solid var(--line, #E5E5E0);
    border-radius: 10px;
    animation: lc-fade-in-b-5ontrnx9hr 0.25s ease;
}

.lc-detail-block[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line, #E5E5E0);
}

.lc-detail-block:last-child[b-5ontrnx9hr] {
    border-bottom: 0;
    padding-bottom: 0;
}

.lc-detail-block-name[b-5ontrnx9hr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.lc-detail-block-rows[b-5ontrnx9hr] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lc-detail-row[b-5ontrnx9hr] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 12.5px;
}

.lc-detail-icon[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 14px;
    flex-shrink: 0;
}

.lc-detail-ok .lc-detail-icon[b-5ontrnx9hr] { color: var(--pos, #15803D); }
.lc-detail-missing .lc-detail-icon[b-5ontrnx9hr] { color: var(--neg, #B91C1C); }
.lc-detail-unknown .lc-detail-icon[b-5ontrnx9hr] { color: var(--ink-3); }

.lc-detail-store[b-5ontrnx9hr] {
    color: var(--ink);
    font-weight: 500;
}

.lc-detail-missing .lc-detail-store[b-5ontrnx9hr] {
    color: var(--ink-2);
}

.lc-detail-price[b-5ontrnx9hr] {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
}

.lc-detail-missing .lc-detail-price[b-5ontrnx9hr] {
    color: var(--neg, #B91C1C);
    font-weight: 500;
    font-style: italic;
}

.lc-detail-unknown .lc-detail-price[b-5ontrnx9hr] {
    color: var(--ink-3);
    font-style: italic;
}

.lc-detail-source[b-5ontrnx9hr] {
    font-size: 11px;
    color: var(--ink-3);
    font-style: italic;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .lc-detail-row[b-5ontrnx9hr] {
        grid-template-columns: auto 1fr auto;
        column-gap: 8px;
    }
    .lc-detail-source[b-5ontrnx9hr] {
        grid-column: 2 / -1;
        margin-top: -2px;
        font-size: 10.5px;
    }
}

.lc-store-missing[b-5ontrnx9hr] {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    font-size: 11.5px;
    color: var(--ink-2);
    display: flex;
    gap: 5px;
}

.lc-store-missing i[b-5ontrnx9hr] { color: var(--warn); flex-shrink: 0; margin-top: 2px; font-size: 11px; }

.lc-note[b-5ontrnx9hr] {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 11.5px;
    line-height: 1.5;
}

.lc-empty[b-5ontrnx9hr] {
    margin: 0;
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
    padding: 16px 0;
}

/* ── Items grouped by category ───────────────────────── */
.lc-group[b-5ontrnx9hr] { display: flex; flex-direction: column; gap: 8px; }

.lc-group-label[b-5ontrnx9hr] {
    margin: 0 0 0 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lc-group-count[b-5ontrnx9hr] {
    font-size: 10.5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-3);
    font-weight: 600;
}

.lc-group-card[b-5ontrnx9hr] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.lc-item[b-5ontrnx9hr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-2);
    transition: background-color 120ms ease;
}

.lc-item:last-child[b-5ontrnx9hr] { border-bottom: none; }
.lc-item:hover[b-5ontrnx9hr] { background: var(--line-2); }

.lc-item.is-checked[b-5ontrnx9hr] { background: var(--line-2); }
.lc-item.is-checked .lc-item-name[b-5ontrnx9hr] {
    text-decoration: line-through;
    color: var(--ink-3);
}

.lc-item-check[b-5ontrnx9hr] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    min-width: 0;
}

.lc-checkbox[b-5ontrnx9hr] {
    width: 18px;
    height: 18px;
    accent-color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
}

.lc-item-name[b-5ontrnx9hr] {
    font-size: 14px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 150ms ease;
}

.lc-item-actions[b-5ontrnx9hr] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Stepper */
.lc-stepper[b-5ontrnx9hr] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
    height: 30px;
}

.lc-stepper:focus-within[b-5ontrnx9hr] {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

.lc-stepper-btn[b-5ontrnx9hr] {
    width: 28px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 120ms ease;
    padding: 0;
}

.lc-stepper-btn:hover[b-5ontrnx9hr] { background: var(--line-2); color: var(--ink); }

.lc-stepper-input[b-5ontrnx9hr] {
    width: 40px;
    border: none;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: center;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    color: var(--ink);
    padding: 0;
    -moz-appearance: textfield;
}

.lc-stepper-input[b-5ontrnx9hr]::-webkit-outer-spin-button,
.lc-stepper-input[b-5ontrnx9hr]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
}

.lc-stepper-input:focus[b-5ontrnx9hr] { outline: none; background: var(--line-2); }

/* Icon buttons */
.lc-icon-btn[b-5ontrnx9hr] {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    font-size: 12.5px;
    transition: all 120ms ease;
    padding: 0;
    flex-shrink: 0;
}

.lc-icon-btn:hover[b-5ontrnx9hr] { border-color: var(--ink); color: var(--ink); }

.lc-icon-btn-danger:hover[b-5ontrnx9hr] {
    border-color: var(--neg);
    color: var(--neg);
    background: var(--neg-soft);
}

/* ── Empty state ─────────────────────────────────────── */
.lc-empty-card[b-5ontrnx9hr] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.lc-empty-icon[b-5ontrnx9hr] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--line-2);
    color: var(--ink-3);
    display: grid;
    place-items: center;
    font-size: 22px;
    margin-bottom: 8px;
}

.lc-empty-title[b-5ontrnx9hr] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.lc-empty-sub[b-5ontrnx9hr] {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
    max-width: 360px;
}

/* ── Footer ──────────────────────────────────────────── */
.lc-footer[b-5ontrnx9hr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    margin-top: 4px;
    flex-wrap: wrap;
}

.lc-footer-info[b-5ontrnx9hr] {
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 500;
}

.lc-footer-actions[b-5ontrnx9hr] {
    display: flex;
    gap: 6px;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 700px) {
    .lc-shell[b-5ontrnx9hr] { gap: 14px; }
    .lc-header[b-5ontrnx9hr] { flex-direction: column; align-items: stretch; }
    .lc-header .lc-btn[b-5ontrnx9hr] { width: 100%; }

    .lc-card-head[b-5ontrnx9hr] { flex-direction: column; align-items: stretch; }

    .lc-stores[b-5ontrnx9hr] { grid-template-columns: 1fr; }

    .lc-add-row[b-5ontrnx9hr] { flex-direction: column; align-items: stretch; }
    .lc-add-row .lc-btn[b-5ontrnx9hr] { width: 100%; }

    .lc-item[b-5ontrnx9hr] {
        flex-wrap: wrap;
        gap: 8px;
    }
    .lc-item-actions[b-5ontrnx9hr] { margin-left: auto; }

    .lc-footer[b-5ontrnx9hr] { flex-direction: column; align-items: stretch; }
    .lc-footer-actions[b-5ontrnx9hr] { display: flex; }
    .lc-footer-actions .lc-btn[b-5ontrnx9hr] { flex: 1; }
}

/* Phone — quando o range é longo (ex. "5,68 € – 20,18 €") + nome longo,
   o lc-store-head em flex fica apertado. Permitimos quebrar para 2 linhas
   e encolhemos ligeiramente os tipos. */
@media (max-width: 480px) {
    .lc-store-head[b-5ontrnx9hr] {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .lc-store-price-wrap[b-5ontrnx9hr] {
        align-items: flex-start;
        text-align: left;
        width: 100%;
        padding-left: 42px; /* alinha visualmente com o nome (icon 32px + gap 10px) */
    }
    .lc-store-price[b-5ontrnx9hr] { font-size: 14px; }
    .lc-store-price-label[b-5ontrnx9hr] { font-size: 9.5px; }

    /* Comparison-top: stack vertical em vez de side-by-side */
    .lc-comparison-top[b-5ontrnx9hr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Meta com badges: badges vão para nova linha, deixam de ter margin-left
       auto (que em wrap fica feio) */
    .lc-store-meta .lc-tag[b-5ontrnx9hr] { margin-left: 0; }

    /* Hints — padding mais apertado, ícone menor */
    .lc-ambiguity-hint[b-5ontrnx9hr], .lc-disjoint-hint[b-5ontrnx9hr] {
        padding: 10px 12px;
        font-size: 12px;
    }
    .lc-ambiguity-hint i[b-5ontrnx9hr], .lc-disjoint-hint i[b-5ontrnx9hr] { font-size: 14px; }
}

/* V2: mode switcher Planear/Comprar foi removido — a barra de progresso
   chega como sinal de feedback, sem precisar de bifurcar a UI em dois modos.
   As regras .is-shop-mode também foram removidas (escondiam features úteis
   como favoritos, sugestões e Comparar lojas). */

/* ══════════════════════════════════════════════════════════════
   V2 — BARRA DE PROGRESSO STICKY (modo Comprar)
   Aparece logo abaixo do mode switcher quando em "comprar".
   Enche-se de verde à medida que marcas items. Pequena celebração
   ("Carrinho completo") quando chegas a 100%.
   ══════════════════════════════════════════════════════════════ */
.lc-shop-progress[b-5ontrnx9hr] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    /* Backdrop blur subtil para quando o user fizer scroll e ela ficar
       "agarrada" no topo, criar separação visual com o conteúdo. */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lc-shop-progress-text[b-5ontrnx9hr] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

.lc-shop-progress-count[b-5ontrnx9hr] {
    font-size: 14px;
    color: var(--ink);
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.lc-shop-progress-count strong[b-5ontrnx9hr] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
}
.lc-shop-progress-sep[b-5ontrnx9hr] { color: var(--ink-3); }
.lc-shop-progress-label[b-5ontrnx9hr] {
    color: var(--ink-2);
    font-size: 12.5px;
    margin-left: 4px;
}

.lc-shop-progress-pct[b-5ontrnx9hr] {
    font-size: 22px;
    font-weight: 600;
    color: var(--pos);
    letter-spacing: -0.5px;
}

.lc-shop-progress-bar[b-5ontrnx9hr] {
    height: 8px;
    background: var(--line-2);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}
.lc-shop-progress-fill[b-5ontrnx9hr] {
    height: 100%;
    background: linear-gradient(90deg, var(--pos) 0%, color-mix(in srgb, var(--pos) 70%, transparent) 100%);
    border-radius: 100px;
    transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lc-shop-progress.is-complete .lc-shop-progress-fill[b-5ontrnx9hr] {
    /* Quando completo, o gradient pulsa subtilmente para celebrar. */
    background: var(--pos);
    box-shadow: 0 0 12px color-mix(in srgb, var(--pos) 40%, transparent);
}

.lc-shop-progress-done[b-5ontrnx9hr] {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--ink);
    text-align: center;
    line-height: 1.4;
}
.lc-shop-progress-done .serif[b-5ontrnx9hr] {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--pos);
    font-size: 16px;
}

/* Regras .is-shop-mode foram removidas — toggle Planear/Comprar
   já não existe. Os items mantêm a sua densidade original e features
   de planeamento (favoritos, sugestões, Comparar lojas) ficam sempre
   acessíveis. */

@media (max-width: 720px) {
    .lc-shop-progress[b-5ontrnx9hr] { padding: 14px 16px; }
    .lc-shop-progress-count strong[b-5ontrnx9hr] { font-size: 20px; }
    .lc-shop-progress-pct[b-5ontrnx9hr] { font-size: 20px; }
}
/* /Components/Pages/Perfil.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Perfil — sophisticated monochrome
   Tokens vêm de app.css (--ink, --line, --pos, --neg, etc.)
   ───────────────────────────────────────────────────────── */

/* ── Toggle row (preferências on/off) ──────────────────── */
.pf-toggle-row[b-wjqeezq8ar] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--line-2);
    margin-top: 4px;
}

.pf-toggle-text[b-wjqeezq8ar] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pf-toggle-title[b-wjqeezq8ar] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.pf-toggle-sub[b-wjqeezq8ar] {
    font-size: 12px;
    color: var(--ink-2);
    line-height: 1.4;
}

/* iOS-style switch */
.pf-switch[b-wjqeezq8ar] {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

.pf-switch input[b-wjqeezq8ar] {
    opacity: 0;
    width: 0;
    height: 0;
}

.pf-switch-slider[b-wjqeezq8ar] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--line);
    border-radius: 999px;
    transition: background 160ms ease;
}

.pf-switch-slider[b-wjqeezq8ar]::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background: var(--surface);
    border-radius: 50%;
    transition: transform 160ms ease, background 160ms ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.pf-switch input:checked + .pf-switch-slider[b-wjqeezq8ar] {
    background: var(--ink);
}

.pf-switch input:checked + .pf-switch-slider[b-wjqeezq8ar]::before {
    transform: translateX(18px);
    background: var(--on-ink);
}

.pf-switch input:disabled + .pf-switch-slider[b-wjqeezq8ar] {
    opacity: 0.5;
    cursor: wait;
}

.pf-shell[b-wjqeezq8ar] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

/* ── Header ──────────────────────────────────────────── */
.pf-header[b-wjqeezq8ar] { margin-bottom: 4px; }
.pf-h1[b-wjqeezq8ar] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--ink);
    line-height: 1.2;
}
.pf-h1-sub[b-wjqeezq8ar] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ── Hero ────────────────────────────────────────────── */
.pf-hero[b-wjqeezq8ar] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.pf-avatar[b-wjqeezq8ar] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-ink);
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
    /* Borda subtil para suavizar o contraste em dark mode (cream sobre navy
       fica algo agressivo). Em light mode a borda quase não se vê. */
    box-shadow: 0 0 0 1px var(--line);
}

.pf-hero-info[b-wjqeezq8ar] { min-width: 0; }
.pf-hero-name[b-wjqeezq8ar] {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.pf-hero-meta[b-wjqeezq8ar] {
    margin-top: 2px;
    font-size: 13px;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pf-hero-sep[b-wjqeezq8ar] { color: var(--ink-3); }

/* ── Card ────────────────────────────────────────────── */
.pf-card[b-wjqeezq8ar] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.pf-card-head[b-wjqeezq8ar] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.pf-card-head:last-child[b-wjqeezq8ar] { border-bottom: none; }

.pf-card-title[b-wjqeezq8ar] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.2px;
}

.pf-card-sub[b-wjqeezq8ar] {
    margin: 4px 0 0;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.45;
    max-width: 480px;
}

.pf-card-body[b-wjqeezq8ar] {
    padding: 18px 20px 20px;
}

.pf-card-subhead[b-wjqeezq8ar] {
    margin: 4px 0 14px;
}

.pf-subtitle[b-wjqeezq8ar] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.pf-divider[b-wjqeezq8ar] {
    border: none;
    border-top: 1px solid var(--line-2);
    margin: 22px 0 18px;
}

.pf-card-actions[b-wjqeezq8ar] {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.pf-card-danger[b-wjqeezq8ar] { border-color: rgba(185,28,28,.18); }
.pf-card-danger .pf-card-head[b-wjqeezq8ar] { border-bottom-color: rgba(185,28,28,.12); }

/* ── Form ────────────────────────────────────────────── */
.pf-form-grid[b-wjqeezq8ar] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pf-field[b-wjqeezq8ar] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pf-field label[b-wjqeezq8ar] {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
}

.pf-input[b-wjqeezq8ar] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.pf-input[b-wjqeezq8ar]::placeholder { color: var(--ink-3); }

.pf-input:hover[b-wjqeezq8ar] { border-color: var(--ink-3); }

.pf-input:focus[b-wjqeezq8ar] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--ring);
}

/* ── Buttons ─────────────────────────────────────────── */
.pf-btn[b-wjqeezq8ar] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}

.pf-btn:disabled[b-wjqeezq8ar] { opacity: 0.6; cursor: not-allowed; }

.pf-btn-primary[b-wjqeezq8ar] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.pf-btn-primary:hover:not(:disabled)[b-wjqeezq8ar] {
    background: var(--ink-hover);
    border-color: var(--ink-hover);
}

.pf-btn-secondary[b-wjqeezq8ar] {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}
.pf-btn-secondary:hover:not(:disabled)[b-wjqeezq8ar] {
    background: var(--line-2);
    border-color: var(--ink-3);
}

.pf-btn-danger[b-wjqeezq8ar] {
    background: var(--surface);
    color: var(--neg);
    border-color: rgba(185,28,28,.25);
}
.pf-btn-danger:hover:not(:disabled)[b-wjqeezq8ar] {
    background: var(--neg);
    color: #fff;
    border-color: var(--neg);
}

/* ── Spinner ─────────────────────────────────────────── */
.pf-spinner[b-wjqeezq8ar] {
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pf-spin-b-wjqeezq8ar 0.6s linear infinite;
    display: inline-block;
}

@keyframes pf-spin-b-wjqeezq8ar { to { transform: rotate(360deg); } }

/* ── Messages ────────────────────────────────────────── */
.pf-msg[b-wjqeezq8ar] {
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    background: var(--line-2);
    color: var(--ink);
}

.pf-msg.is-pos[b-wjqeezq8ar] {
    background: var(--pos-soft);
    color: var(--pos);
    border-color: rgba(21,128,61,.2);
}

.pf-msg.is-bad[b-wjqeezq8ar] {
    background: var(--neg-soft);
    color: var(--neg);
    border-color: rgba(185,28,28,.2);
}

.pf-empty[b-wjqeezq8ar] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 0;
    padding: 24px 0;
    text-align: center;
}

/* ── Tema (claro/escuro/sistema) — segmented control discreto ── */
.pf-theme-grid[b-wjqeezq8ar] {
    display: inline-flex;
    align-items: stretch;
    padding: 3px;
    background: var(--line-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    gap: 2px;
}
.pf-theme-opt[b-wjqeezq8ar] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.pf-theme-opt i[b-wjqeezq8ar] { font-size: 13px; color: var(--ink-2); }
.pf-theme-opt:hover[b-wjqeezq8ar] { color: var(--ink); }
.pf-theme-opt:hover i[b-wjqeezq8ar] { color: var(--ink); }
.pf-theme-opt.is-active[b-wjqeezq8ar] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}
.pf-theme-opt.is-active i[b-wjqeezq8ar] { color: var(--ink); }

@media (max-width: 480px) {
    .pf-theme-grid[b-wjqeezq8ar] { display: flex; width: 100%; }
    .pf-theme-opt[b-wjqeezq8ar] { flex: 1; justify-content: center; padding: 7px 8px; }
}

/* ── Uso de scans (contador no /perfil) ─────────────────── */
.pf-usage-pill[b-wjqeezq8ar] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background: var(--line-2, #f8f9fa);
    color: var(--ink);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    border: 1px solid var(--line);
}
.pf-usage-pill.is-bad[b-wjqeezq8ar] {
    background: var(--neg-soft, #fee2e2);
    color: var(--neg, #b91c1c);
    border-color: rgba(185,28,28,.2);
}
.pf-usage-sep[b-wjqeezq8ar] {
    color: var(--ink-3);
    margin: 0 1px;
}
.pf-progress[b-wjqeezq8ar] {
    height: 8px;
    background: var(--line-2, #f1f3f5);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 14px;
}
.pf-progress-bar[b-wjqeezq8ar] {
    height: 100%;
    background: var(--ink);
    transition: width 240ms ease;
    border-radius: inherit;
}
.pf-progress-bar.is-bad[b-wjqeezq8ar] {
    background: var(--neg, #b91c1c);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 700px) {
    .pf-shell[b-wjqeezq8ar] { gap: 16px; }
    .pf-hero[b-wjqeezq8ar] { padding: 16px 18px; }
    .pf-avatar[b-wjqeezq8ar] { width: 48px; height: 48px; font-size: 18px; }
    .pf-hero-name[b-wjqeezq8ar] { font-size: 16px; }
    .pf-card-head[b-wjqeezq8ar] { padding: 14px 16px; flex-wrap: wrap; }
    .pf-card-body[b-wjqeezq8ar] { padding: 14px 16px 16px; }
    .pf-form-grid[b-wjqeezq8ar] { grid-template-columns: 1fr; gap: 12px; }
    .pf-card-actions[b-wjqeezq8ar] { flex-direction: column-reverse; }
    .pf-btn[b-wjqeezq8ar] { width: 100%; justify-content: center; }
}
/* /Components/Pages/Precos.razor.rz.scp.css */
/* ═════════════════════════════════════════════════════════════
   Preços da Comunidade — v2
   Mobile-first, moderno. Hero deals + sort chips + rows ricos.
   ═════════════════════════════════════════════════════════════ */

.cp-shell[b-d3xd597ad4] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.cp-shell .num[b-d3xd597ad4] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Header ────────────────────────────────────────── */
.cp-header[b-d3xd597ad4] { margin-bottom: 0; }
.cp-h1[b-d3xd597ad4] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.cp-h1-sub[b-d3xd597ad4] {
    color: var(--ink-2);
    font-size: 13px;
    margin: 4px 0 0;
}

/* ── Teaser banner ─────────────────────────────────── */
.cp-teaser-banner[b-d3xd597ad4] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent, #2563EB);
    border-radius: 12px;
    align-items: flex-start;
}
.cp-teaser-banner i[b-d3xd597ad4] { font-size: 18px; color: var(--accent, #2563EB); flex-shrink: 0; margin-top: 2px; }
.cp-teaser-text[b-d3xd597ad4] { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.55; }
.cp-teaser-text strong[b-d3xd597ad4] { color: var(--ink); font-weight: 600; }
.cp-teaser-text span[b-d3xd597ad4] { color: var(--ink-2); }
.cp-teaser-text a[b-d3xd597ad4] { color: var(--ink); font-weight: 600; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   DEALS STRIP — hero horizontal scrollable de maiores descidas
   ══════════════════════════════════════════════════════════ */
.cp-deals[b-d3xd597ad4] {
    margin: 4px 0 0;
}
.cp-deals-head[b-d3xd597ad4] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.cp-deals-title[b-d3xd597ad4] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cp-deals-title i[b-d3xd597ad4] { color: #DC2626; }
.cp-deals-sub[b-d3xd597ad4] {
    font-size: 12px;
    color: var(--ink-3);
}

.cp-deals-strip[b-d3xd597ad4] {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: thin;
}
.cp-deals-strip[b-d3xd597ad4]::-webkit-scrollbar { height: 4px; }
.cp-deals-strip[b-d3xd597ad4]::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

.cp-deal-card[b-d3xd597ad4] {
    flex: 0 0 200px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    position: relative;
    overflow: hidden;
}
.cp-deal-card:hover[b-d3xd597ad4] {
    border-color: var(--ink-3);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}
.cp-deal-card[b-d3xd597ad4]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #DC2626, #F97316);
}

.cp-deal-trend[b-d3xd597ad4] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px;
    background: rgba(220, 38, 38, 0.10);
    color: #DC2626;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    line-height: 1;
}
.cp-deal-trend i[b-d3xd597ad4] { font-size: 15px; margin-left: -3px; }

.cp-deal-name[b-d3xd597ad4] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

.cp-deal-bottom[b-d3xd597ad4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    gap: 8px;
}
.cp-deal-price[b-d3xd597ad4] {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
}
.cp-deal-store[b-d3xd597ad4] {
    font-size: 11.5px;
    color: var(--ink-3);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 90px;
    text-align: right;
}

/* ── Insight line (substitui stats strip) ──────────────── */
.cp-insight[b-d3xd597ad4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.4;
}
.cp-insight i[b-d3xd597ad4] { color: var(--ink); font-size: 15px; flex-shrink: 0; }
.cp-insight strong[b-d3xd597ad4] { color: var(--ink); font-weight: 600; }
.cp-insight-fresh[b-d3xd597ad4] { color: var(--ink-3); }

/* ── Top stores chips ──────────────────────────────────── */
.cp-top-stores[b-d3xd597ad4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cp-top-stores-label[b-d3xd597ad4] {
    font-size: 12px;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cp-top-stores-label i[b-d3xd597ad4] { color: var(--ink); }
.cp-top-stores-list[b-d3xd597ad4] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cp-store-chip[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}
.cp-store-chip:hover[b-d3xd597ad4] { border-color: var(--ink-3); color: var(--ink); }
.cp-store-chip.is-on[b-d3xd597ad4] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.cp-store-chip-count[b-d3xd597ad4] {
    font-size: 11px;
    opacity: 0.75;
}

/* ── Filtros (search + store + período) ────────────────── */
.cp-filters[b-d3xd597ad4] {
    display: grid;
    grid-template-columns: 1fr 200px auto;
    gap: 8px;
    align-items: center;
}
.cp-search-wrap[b-d3xd597ad4] { position: relative; }
.cp-search-icon[b-d3xd597ad4] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: 14px;
    pointer-events: none;
}
.cp-search[b-d3xd597ad4],
.cp-input[b-d3xd597ad4] {
    width: 100%;
    padding: 10px 12px 10px 36px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
}
.cp-input[b-d3xd597ad4] { padding-left: 12px; }
.cp-search:focus[b-d3xd597ad4],
.cp-input:focus[b-d3xd597ad4] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px var(--ring);
}

.cp-period[b-d3xd597ad4] {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 3px;
    gap: 0;
}
.cp-period-btn[b-d3xd597ad4] {
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 7px;
    transition: all 120ms ease;
}
.cp-period-btn:hover[b-d3xd597ad4] { color: var(--ink); }
.cp-period-btn.is-on[b-d3xd597ad4] {
    background: var(--ink);
    color: var(--on-ink);
}

/* ── Chips de categoria (navegação) ────────────────────── */
.cp-categories[b-d3xd597ad4] {
    margin: 4px 0 0;
}
.cp-categories-strip[b-d3xd597ad4] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.cp-categories-strip[b-d3xd597ad4]::-webkit-scrollbar { height: 0; }

.cp-category-chip[b-d3xd597ad4] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
    text-transform: capitalize;
    scroll-snap-align: start;
}
.cp-category-chip:hover[b-d3xd597ad4] {
    border-color: var(--ink-3);
    color: var(--ink);
}
.cp-category-chip i[b-d3xd597ad4] { font-size: 13px; }
.cp-category-chip.is-on[b-d3xd597ad4] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
    font-weight: 600;
}

.cp-category-count[b-d3xd597ad4] {
    font-size: 11px;
    opacity: 0.7;
    padding: 1px 6px;
    background: var(--line-2);
    border-radius: 999px;
}
.cp-category-chip.is-on .cp-category-count[b-d3xd597ad4] {
    background: rgba(255, 255, 255, 0.15);
    color: var(--on-ink);
    opacity: 0.9;
}

/* ── Botão "Adicionar à lista" — CTA destacada no body ─── */
.cp-add-to-list[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    margin-bottom: 12px;
    background: var(--ink);
    color: var(--on-ink);
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    font-family: inherit;
    align-self: flex-start;
    box-shadow: var(--shadow-1);
}
.cp-add-to-list:hover:not(:disabled)[b-d3xd597ad4] {
    background: var(--ink-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}
.cp-add-to-list:active:not(:disabled)[b-d3xd597ad4] {
    transform: translateY(0);
}
.cp-add-to-list:disabled[b-d3xd597ad4] {
    cursor: default;
}
.cp-add-to-list i[b-d3xd597ad4] { font-size: 14px; }

.cp-add-to-list.is-added[b-d3xd597ad4] {
    background: var(--pos, #16A34A);
    opacity: 0.95;
    cursor: default;
}

@media (max-width: 640px) {
    /* Mobile: CTA full-width para ser maior alvo táctil */
    .cp-add-to-list[b-d3xd597ad4] {
        width: 100%;
        justify-content: center;
        padding: 11px 14px;
        font-size: 14px;
    }
}

/* ── Sort chips ────────────────────────────────────────── */
.cp-sort[b-d3xd597ad4] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.cp-sort-label[b-d3xd597ad4] {
    font-size: 12px;
    color: var(--ink-3);
    flex-shrink: 0;
}
.cp-sort-chips[b-d3xd597ad4] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
}
.cp-sort-chips[b-d3xd597ad4]::-webkit-scrollbar { height: 0; }
.cp-sort-chip[b-d3xd597ad4] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}
.cp-sort-chip:hover[b-d3xd597ad4] { border-color: var(--ink-3); color: var(--ink); }
.cp-sort-chip i[b-d3xd597ad4] { font-size: 13px; }
.cp-sort-chip.is-on[b-d3xd597ad4] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}

/* ══════════════════════════════════════════════════════════
   PRODUCT LIST (cada linha = um produto agregado)
   ══════════════════════════════════════════════════════════ */
.cp-products[b-d3xd597ad4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-product[b-d3xd597ad4] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cp-product:hover[b-d3xd597ad4] { border-color: var(--ink-3); }
.cp-product.is-expanded[b-d3xd597ad4] {
    border-color: var(--ink);
    box-shadow: var(--shadow-2);
}

.cp-product-head[b-d3xd597ad4] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.cp-product-main[b-d3xd597ad4] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cp-product-title[b-d3xd597ad4] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cp-product-sub[b-d3xd597ad4] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cp-store-badge[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: var(--line-2);
    border-radius: 6px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 500;
}
.cp-store-badge i[b-d3xd597ad4] { font-size: 11px; }

.cp-savings-chip[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--pos-soft, rgba(34,197,94,0.12));
    color: var(--pos, #16A34A);
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 6px;
    line-height: 1.4;
}

.cp-product-meta[b-d3xd597ad4] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--ink-3);
    flex-wrap: wrap;
}
.cp-meta-dot[b-d3xd597ad4] {
    width: 4px;
    height: 4px;
    background: var(--ink-3);
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}
.cp-meta-sep[b-d3xd597ad4] {
    opacity: 0.6;
}

/* ── Confidence indicator (●●●) ───────────────────────────
   Comunica honestamente a fiabilidade do cluster. Cores
   semânticas: verde alta, amber média, cinza baixa. */
.cp-confidence[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: help;
}
.cp-confidence-high[b-d3xd597ad4] {
    background: var(--pos-soft, rgba(34,197,94,0.12));
    color: var(--pos, #16A34A);
}
.cp-confidence-medium[b-d3xd597ad4] {
    background: rgba(245, 158, 11, 0.12);
    color: #D97706;
}
.cp-confidence-low[b-d3xd597ad4] {
    background: var(--line-2);
    color: var(--ink-3);
}
.cp-confidence-label[b-d3xd597ad4] {
    /* Em mobile escondemos o label ("alta"/"média"/"baixa") para
       poupar espaço — os dots já comunicam o tier. */
}
@media (max-width: 640px) {
    .cp-confidence-label[b-d3xd597ad4] { display: none; }
    .cp-confidence[b-d3xd597ad4] { font-size: 10px; padding: 1px 4px; }
}

.cp-product-right[b-d3xd597ad4] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cp-trend[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
}
.cp-trend i[b-d3xd597ad4] { font-size: 14px; margin-left: -2px; }
.cp-trend.is-down[b-d3xd597ad4] {
    background: var(--pos-soft, rgba(34,197,94,0.12));
    color: var(--pos, #16A34A);
}
.cp-trend.is-up[b-d3xd597ad4] {
    background: rgba(220, 38, 38, 0.12);
    color: #DC2626;
}

.cp-price-value[b-d3xd597ad4] {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.cp-chev[b-d3xd597ad4] {
    color: var(--ink-3);
    font-size: 16px;
    transition: transform 200ms ease;
}
.cp-product.is-expanded .cp-chev[b-d3xd597ad4] { transform: rotate(0); }

/* ── Body expandido (breakdown por loja) ───────────────── */
.cp-product-body[b-d3xd597ad4] {
    padding: 0 16px 14px;
    animation: cpFadeIn-b-d3xd597ad4 200ms ease;
}
@keyframes cpFadeIn-b-d3xd597ad4 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cp-body-head[b-d3xd597ad4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 12px;
    border-top: 1px solid var(--line);
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.cp-body-head-spread[b-d3xd597ad4] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.cp-body-head-spread strong[b-d3xd597ad4] { color: var(--ink); }

/* Chip especial para o caso "todas as lojas têm o mesmo preço".
   Em vez de mostrar "variação 0.00€" (silly), mostramos uma indicação
   neutra com ícone de igual. */
.cp-body-head-tie[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-3);
}
.cp-body-head-tie i[b-d3xd597ad4] { font-size: 13px; }

.cp-stores-grid[b-d3xd597ad4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Store row redesign (com data + unidade) ──────────────
   Layout em 2 linhas: head (nome + data) e body (preço + stats).
   Permite mais informação sem ficar entulhado. */
.cp-store-row[b-d3xd597ad4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.cp-store-row.is-cheapest[b-d3xd597ad4] {
    background: var(--pos-soft, rgba(34,197,94,0.06));
    border-color: var(--pos, rgba(34,197,94,0.30));
}

.cp-store-row-head[b-d3xd597ad4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.cp-store-name[b-d3xd597ad4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    min-width: 0;
    flex: 1;
}
.cp-store-name-text[b-d3xd597ad4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-best-badge[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: var(--pos, #16A34A);
    color: white;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.cp-best-badge i[b-d3xd597ad4] { font-size: 9px; }

.cp-store-date[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--line-2);
    border-radius: 999px;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}
.cp-store-date i[b-d3xd597ad4] { font-size: 10.5px; }

.cp-store-row-body[b-d3xd597ad4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.cp-store-price-block[b-d3xd597ad4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-store-min[b-d3xd597ad4] {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}

/* Quando há promo activa (min < típico), realçamos o min em verde para
   reforçar a noção de "desconto". O verde alinha com o resto dos badges
   positivos (poupanças no dashboard). */
.cp-store-min.is-promo[b-d3xd597ad4] {
    color: rgb(5, 150, 105);
}

/* Preço típico riscado — referência "sem promoção". Pequeno, faded,
   discreto. Não compete com o min destacado. */
.cp-store-typical-strike[b-d3xd597ad4] {
    font-size: 12.5px;
    color: var(--ink-3);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(156, 163, 175, 0.6);
    margin-right: 4px;
    align-self: center;
}

/* Badge de subida — vermelho, contrapartida do verde. Aparece quando o
   preço actual (last seen) está acima do menor já visto na janela. UX
   honesta: "já viste mais barato, hoje está pior". */
.cp-store-rose[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11.5px;
    font-weight: 700;
    color: rgb(185, 28, 28);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.30);
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 4px;
}

/* Badge de poupança em % — verde, apela à decisão "boa altura para comprar".
   Mostra-se ao lado do min quando há promoção activa. */
.cp-store-savings[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11.5px;
    font-weight: 700;
    color: rgb(5, 150, 105);
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.30);
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 4px;
}

.cp-store-delta[b-d3xd597ad4] {
    color: #DC2626;
    font-size: 11.5px;
    font-weight: 600;
}

.cp-store-secondary[b-d3xd597ad4] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
}
.cp-store-avg-chip[b-d3xd597ad4],
.cp-store-count-chip[b-d3xd597ad4] {
    font-size: 11.5px;
    color: var(--ink-3);
    padding: 3px 8px;
    background: var(--line-2);
    border-radius: 999px;
}
.cp-store-avg-chip strong[b-d3xd597ad4] { color: var(--ink-2); font-weight: 600; }

/* Sufixo de unidade — mais pequeno e cinza, integrado ao preço */
.cp-unit-suffix[b-d3xd597ad4] {
    font-size: 0.7em;
    color: var(--ink-3);
    font-weight: 500;
    margin-left: 1px;
}

/* ── Breakdown por unidade ────────────────────────────────
   Quando a loja vende o mesmo produto em formatos diferentes
   (ex: banana ao kg E à unidade), separa visualmente cada
   formato com o seu próprio preço. Evita misturar €/kg com
   €/un que são incomparáveis. */
.cp-by-unit[b-d3xd597ad4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--surface-2);
    border-left: 2px solid var(--accent-soft);
    border-radius: 6px;
}
.cp-by-unit-row[b-d3xd597ad4] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-2);
}
.cp-by-unit-label[b-d3xd597ad4] { color: var(--ink-3); font-weight: 500; min-width: 70px; }
.cp-by-unit-price[b-d3xd597ad4] { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-by-unit-count[b-d3xd597ad4] { color: var(--ink-3); font-size: 11px; margin-left: auto; }

/* ── Reports individuais (transparência) ──────────────────
   Toggle button + lista de observações brutas por loja.
   Cada linha mostra o nome RAW escrito no talão + preço + data.
   Permite ao utilizador perceber se "Leite Condensado 1.45€"
   era lata 397g ou 1kg, marca X ou Y. */
.cp-reports-toggle[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 8px;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: 6px;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    align-self: flex-start;
}
.cp-reports-toggle:hover[b-d3xd597ad4] {
    border-color: var(--ink-3);
    color: var(--ink-2);
    background: var(--surface);
}
.cp-reports-toggle i[b-d3xd597ad4] { font-size: 12px; }
.cp-reports-toggle-count[b-d3xd597ad4] {
    color: var(--ink-3);
    font-weight: 400;
}

.cp-reports-list[b-d3xd597ad4] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px dashed var(--line);
    padding-top: 8px;
}

.cp-report-item[b-d3xd597ad4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
}

.cp-report-name[b-d3xd597ad4] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-2);
    font-style: italic;
}

.cp-report-meta[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cp-report-price[b-d3xd597ad4] {
    font-weight: 600;
    color: var(--ink);
}

.cp-report-date[b-d3xd597ad4] {
    color: var(--ink-3);
    font-size: 11px;
}

@media (max-width: 640px) {
    /* Em mobile o nome do report pode ficar mais comprido —
       deixa wrap em 2 linhas em vez de truncar com ellipsis. */
    .cp-report-item[b-d3xd597ad4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .cp-report-name[b-d3xd597ad4] {
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
    }
    .cp-report-meta[b-d3xd597ad4] {
        width: 100%;
        justify-content: space-between;
    }
}

/* ══════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════ */
.cp-empty-state[b-d3xd597ad4] {
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.cp-empty-icon[b-d3xd597ad4] {
    width: 56px;
    height: 56px;
    background: var(--line-2);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    font-size: 22px;
    margin-bottom: 4px;
}
.cp-empty-title[b-d3xd597ad4] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.cp-empty-sub[b-d3xd597ad4] {
    margin: 0;
    font-size: 13px;
    color: var(--ink-3);
    max-width: 320px;
    line-height: 1.5;
}
.cp-empty-actions[b-d3xd597ad4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 14px;
}
.cp-empty-btn[b-d3xd597ad4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}
.cp-empty-btn:hover[b-d3xd597ad4] {
    border-color: var(--ink);
    background: var(--surface-hover);
}

/* ══════════════════════════════════════════════════════════
   MOBILE (≤ 640px)
   Filtros empilhados, store stats compactos, deal cards mais
   estreitos, sort chips com scroll horizontal.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .cp-h1[b-d3xd597ad4] { font-size: 19px; }
    .cp-h1-sub[b-d3xd597ad4] { font-size: 12px; }

    /* Deals strip: cards um pouco mais estreitos para caber 2 */
    .cp-deal-card[b-d3xd597ad4] { flex: 0 0 170px; padding: 12px; }
    .cp-deal-name[b-d3xd597ad4] { font-size: 13px; min-height: 34px; }
    .cp-deal-price[b-d3xd597ad4] { font-size: 16px; }

    .cp-insight[b-d3xd597ad4] { font-size: 12.5px; padding: 10px 12px; }
    .cp-insight-fresh[b-d3xd597ad4] { display: block; margin-top: 2px; }

    /* Filtros: 1 coluna empilhada */
    .cp-filters[b-d3xd597ad4] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .cp-filter-store[b-d3xd597ad4] { grid-column: 1 / -1; }
    .cp-period[b-d3xd597ad4] {
        justify-self: flex-start;
        align-self: flex-start;
    }

    /* Product head: padding um pouco menor */
    .cp-product-head[b-d3xd597ad4] { padding: 12px 14px; gap: 10px; }
    .cp-product-title[b-d3xd597ad4] { font-size: 14px; }
    .cp-price-value[b-d3xd597ad4] { font-size: 16px; }

    .cp-product-meta[b-d3xd597ad4] { font-size: 11px; }

    /* Store row em mobile: ajustes finos. O layout 2-linhas já funciona bem
       em mobile graças ao flex-wrap. Só esconder o chip de média se não
       houver espaço. */
    .cp-store-row[b-d3xd597ad4] { padding: 10px 12px; gap: 6px; }
    .cp-store-min[b-d3xd597ad4] { font-size: 17px; }
    /* Em ecrãs muito pequenos a chip média é menos crítica que a contagem
       e a data — esconder se não couber. */
    .cp-store-avg-chip[b-d3xd597ad4] { display: none; }

    .cp-product-body[b-d3xd597ad4] { padding: 0 14px 12px; }

    /* Sort chips: scroll horizontal sem scrollbar visível */
    .cp-sort[b-d3xd597ad4] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .cp-sort-chips[b-d3xd597ad4] { padding-left: 0; padding-right: 0; }
}
/* /Components/Pages/Stock.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Stock — sophisticated monochrome
   ───────────────────────────────────────────────────────── */

.st-shell[b-cn9ioo1uko] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    min-width: 0;
    color: var(--ink);
    font-feature-settings: 'cv11', 'ss01';
}

.st-shell .num[b-cn9ioo1uko] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── Header ──────────────────────────────────────────── */
.st-header[b-cn9ioo1uko] {
    margin-bottom: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Link discreto para o Catálogo a partir da Despensa.
   Catálogo foi removido do menu principal — este link garante que
   ainda é descobrível para quem precisa de gerir produtos. */
.st-header-link[b-cn9ioo1uko] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all 120ms ease;
    flex-shrink: 0;
}
.st-header-link:hover[b-cn9ioo1uko] {
    border-color: var(--ink-3);
    color: var(--ink);
    background: var(--line-2);
}
.st-header-link i[b-cn9ioo1uko] { font-size: 13px; }

/* Brand refresh — eyebrow uppercase + título Helvetica Light 300 maior
   alinhado com o padrão editorial das brand guidelines. */
.st-h1-eyebrow[b-cn9ioo1uko] {
    display: block;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--ink-3);
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 10px;
}

.st-h1[b-cn9ioo1uko] {
    margin: 0;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: -0.6px;
    color: var(--ink);
    line-height: 1.1;
}

.st-h1-sub[b-cn9ioo1uko] {
    color: var(--ink-2);
    font-size: 13.5px;
    margin: 8px 0 0;
    line-height: 1.5;
    max-width: 580px;
}

@media (max-width: 720px) {
    .st-h1[b-cn9ioo1uko] { font-size: 26px; letter-spacing: -0.4px; }
    .st-h1-eyebrow[b-cn9ioo1uko] { margin-bottom: 8px; }
}

/* ── Controls bar ────────────────────────────────────── */
.st-controls[b-cn9ioo1uko] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 10px 12px;
}

.st-controls-row[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Toggle conceito vs variante. Pequeno, à direita da search. */
.st-view-toggle[b-cn9ioo1uko] {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--line-2);
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
}

.st-view-btn[b-cn9ioo1uko] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 120ms ease;
    white-space: nowrap;
}
.st-view-btn:hover[b-cn9ioo1uko] { color: var(--ink); }
.st-view-btn.is-active[b-cn9ioo1uko] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(9,9,11,.06);
}
.st-view-btn i[b-cn9ioo1uko] { font-size: 12px; }

.st-search[b-cn9ioo1uko] {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.st-search-icon[b-cn9ioo1uko] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: 13px;
    pointer-events: none;
}

.st-search-input[b-cn9ioo1uko] {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--line-2);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: all 120ms ease;
}

.st-search-input[b-cn9ioo1uko]::placeholder { color: var(--ink-3); }
.st-search-input:hover[b-cn9ioo1uko] { border-color: var(--ink-3); background: var(--surface); }
.st-search-input:focus[b-cn9ioo1uko] {
    outline: none;
    border-color: var(--ink);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

/* Segmented filter */
.st-segmented[b-cn9ioo1uko] {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--line-2);
    padding: 2px;
    gap: 2px;
    flex-wrap: wrap;
}

.st-seg[b-cn9ioo1uko] {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.st-seg:hover[b-cn9ioo1uko] { color: var(--ink); }
.st-seg.is-active[b-cn9ioo1uko] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}

.st-seg-count[b-cn9ioo1uko] {
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.06);
    font-weight: 700;
}

.st-seg.is-active .st-seg-count[b-cn9ioo1uko] { background: var(--ink); color: var(--on-ink); }

/* Category chips */
.st-cats[b-cn9ioo1uko] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.st-cat[b-cn9ioo1uko] {
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
}

.st-cat:hover[b-cn9ioo1uko] { border-color: var(--ink-3); color: var(--ink); }
.st-cat.is-active[b-cn9ioo1uko] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* ── Section ─────────────────────────────────────────── */
.st-section[b-cn9ioo1uko] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.st-section-head[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

.st-section-title[b-cn9ioo1uko] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.1px;
}

.st-section-title i[b-cn9ioo1uko] { font-size: 13px; color: var(--ink-2); }

.st-section-count[b-cn9ioo1uko] {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-3);
    font-weight: 600;
}

.st-section-label[b-cn9ioo1uko] {
    margin: 8px 4px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Stock groups (collapsible cards) ────────────────── */
.st-groups[b-cn9ioo1uko] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-group[b-cn9ioo1uko] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.st-group:hover[b-cn9ioo1uko] { border-color: var(--ink-3); }
.st-group.is-low[b-cn9ioo1uko] { background: linear-gradient(90deg, var(--neg-soft), #fff); border-color: rgba(185,28,28,.2); }

.st-group-head[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
}

.st-group-toggle[b-cn9ioo1uko] {
    color: var(--ink-3);
    font-size: 12px;
    flex-shrink: 0;
}

.st-group-info[b-cn9ioo1uko] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.st-group-name[b-cn9ioo1uko] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-group-meta[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-3);
}

.st-tag[b-cn9ioo1uko] {
    display: inline-flex;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 500;
}

.st-tag.st-tag-warn[b-cn9ioo1uko] { background: var(--warn-soft); color: var(--warn); }

.st-group-right[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.st-status[b-cn9ioo1uko] {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.st-status-low[b-cn9ioo1uko] { background: var(--neg-soft); color: var(--neg); border-color: rgba(185,28,28,.2); }
.st-status-zero[b-cn9ioo1uko] { background: var(--neg); color: #fff; }
.st-status-expiring[b-cn9ioo1uko] { background: var(--warn-soft); color: var(--warn); border-color: rgba(245,158,11,.25); }
.st-status-ok[b-cn9ioo1uko] { background: var(--pos-soft); color: var(--pos); border-color: rgba(21,128,61,.18); }

.st-qty[b-cn9ioo1uko] {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 13px;
    color: var(--ink);
}

.st-qty.is-low[b-cn9ioo1uko] { color: var(--neg); }
.st-qty strong[b-cn9ioo1uko] { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
.st-unit[b-cn9ioo1uko] { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.4px; }

.st-variants[b-cn9ioo1uko] {
    border-top: 1px solid var(--line-2);
    padding: 8px 12px;
    background: var(--line-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-variant[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 13px;
}

.st-variant-name[b-cn9ioo1uko] { color: var(--ink); font-weight: 500; }
.st-variant-qty[b-cn9ioo1uko] { color: var(--ink-2); font-size: 12.5px; }

/* ── Standalone product cards ────────────────────────── */
.st-cat-group[b-cn9ioo1uko] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-cat-label[b-cn9ioo1uko] {
    margin: 0 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.st-cat-count[b-cn9ioo1uko] {
    font-size: 10.5px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--line-2);
    color: var(--ink-3);
    font-weight: 600;
}

.st-products[b-cn9ioo1uko] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    /* sem overflow:hidden — senão corta o popover do kebab (position:absolute) */
}

/* Brand refresh — cards de produto mais respirados e editoriais.
   Padding mais generoso, faixa lateral de status mais grossa e
   suave, tipografia de nome maior. Hover state mais discreto. */
.st-product[b-cn9ioo1uko] {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--line-2);
    transition: background-color 140ms ease;
    position: relative;
}

.st-product:last-child[b-cn9ioo1uko] { border-bottom: none; }

/* Status edge — faixa lateral à esquerda. Agora 4px (em vez de 3) para
   ficar mais editorial, com gradient subtil que se desvanece para baixo,
   tipo "highlighter de margem". Mantém o ruído baixo: rows OK ficam limpas. */
.st-product-low[b-cn9ioo1uko]      { box-shadow: inset 4px 0 0 var(--warn); }
.st-product-zero[b-cn9ioo1uko]     { box-shadow: inset 4px 0 0 var(--neg); }
.st-product-expiring[b-cn9ioo1uko] { box-shadow: inset 4px 0 0 var(--warn); }

/* Row clicável (concept-mode com variantes faz toggle de expand). */
.st-product-row[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background-color 140ms ease;
}
.st-product-row:hover[b-cn9ioo1uko] { background: var(--line-2); }

.st-product-info[b-cn9ioo1uko] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-product-name-row[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.st-product-chev[b-cn9ioo1uko] {
    font-size: 13px;
    color: var(--ink-3);
    flex-shrink: 0;
    transition: transform 160ms ease, color 140ms ease;
}
.st-product-row:hover .st-product-chev[b-cn9ioo1uko] { color: var(--ink-2); }

.st-product-name[b-cn9ioo1uko] {
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.st-fav-icon[b-cn9ioo1uko] {
    color: var(--warn);
    font-size: 11px;
}

.st-product-meta[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.st-meta-pill[b-cn9ioo1uko] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    background: var(--line-2);
    color: var(--ink-2);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
}
.st-meta-pill i[b-cn9ioo1uko] { font-size: 11px; }
.st-meta-pill-muted[b-cn9ioo1uko] {
    background: transparent;
    color: var(--ink-3);
    font-style: italic;
}

/* QTY grande — visualmente o que mais salta à vista quando estás no super.
   28-32px, peso forte, número primeiro, unidade pequena por baixo. */
.st-qty-big[b-cn9ioo1uko] {
    flex-shrink: 0;
    min-width: 76px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    color: var(--ink);
}
.st-qty-big .num[b-cn9ioo1uko] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -1px;
}
.st-qty-unit[b-cn9ioo1uko] {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.st-qty-low      .num[b-cn9ioo1uko] { color: var(--warn); }
.st-qty-zero     .num[b-cn9ioo1uko] { color: var(--neg); }
.st-qty-expiring .num[b-cn9ioo1uko] { color: var(--warn); }

.st-stat-sep[b-cn9ioo1uko] { color: var(--ink-4); }

/* Stock progress bar */
.st-bar[b-cn9ioo1uko] {
    width: 100%;
    height: 4px;
    background: var(--line-2);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}

.st-bar-fill[b-cn9ioo1uko] {
    height: 100%;
    background: var(--ink-3);
    border-radius: 999px;
    transition: width 200ms ease;
}

.st-bar-fill-ok[b-cn9ioo1uko]       { background: var(--pos); }
.st-bar-fill-low[b-cn9ioo1uko]      { background: var(--warn); }
.st-bar-fill-zero[b-cn9ioo1uko]     { background: var(--neg); }
.st-bar-fill-expiring[b-cn9ioo1uko] { background: var(--warn); }

.st-product-actions[b-cn9ioo1uko] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

/* ── Action buttons (pill style com label) ──────────────
   Substitui os antigos .st-icon-btn quadrados de 30x30 por pills
   com ícone + texto. Mais discoverable para utilizador novo,
   mantém densidade aceitável em desktop. */
.st-act-btn[b-cn9ioo1uko] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    transition: all 120ms ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.st-act-btn:hover[b-cn9ioo1uko] {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--surface-hover);
}
.st-act-btn i[b-cn9ioo1uko] { font-size: 13px; }
.st-act-btn .st-act-label[b-cn9ioo1uko] { line-height: 1; }

/* Estado "is-on" — usado quando o produto já está na lista de compras */
.st-act-btn.is-on[b-cn9ioo1uko] {
    background: var(--pos-soft);
    border-color: var(--pos);
    color: var(--pos);
}
.st-act-btn.is-on:hover[b-cn9ioo1uko] {
    background: var(--pos-soft);
    border-color: var(--pos);
    color: var(--pos);
    opacity: 0.85;
}

/* Botão "Dar baixa" — tom vermelho suave para sinalizar acção destrutiva
   (estás a tirar do stock). Diferente do botão genérico para não confundir
   com "Editar" ou outras acções neutras. */
.st-act-btn.st-act-btn-consume[b-cn9ioo1uko] {
    color: var(--neg);
    border-color: rgba(185,28,28,.25);
    background: var(--neg-soft);
}
.st-act-btn.st-act-btn-consume:hover[b-cn9ioo1uko] {
    color: #fff;
    background: var(--neg);
    border-color: var(--neg);
}
.st-act-btn.st-act-btn-consume i[b-cn9ioo1uko] { opacity: 0.95; }

/* Botão "..." sem label (overflow menu trigger) */
.st-act-btn.st-act-more[b-cn9ioo1uko] {
    width: 32px;
    padding: 0;
    justify-content: center;
}
.st-act-btn.st-act-more i[b-cn9ioo1uko] { font-size: 16px; }

/* ── Overflow menu (popover desktop / sheet mobile) ─────── */
.st-act-more-wrap[b-cn9ioo1uko] {
    position: relative;
    flex-shrink: 0;
}

.st-act-backdrop[b-cn9ioo1uko] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* Desktop: popover ancorado ao botão */
.st-act-menu[b-cn9ioo1uko] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-3);
    padding: 4px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: st-menu-in-b-cn9ioo1uko 140ms ease;
}
@keyframes st-menu-in-b-cn9ioo1uko {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Handle visual — só aparece em mobile quando vira sheet inferior */
.st-act-menu-handle[b-cn9ioo1uko] { display: none; }

.st-act-menu-item[b-cn9ioo1uko] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
    font: inherit;
}
.st-act-menu-item:hover[b-cn9ioo1uko] { background: var(--line-2); }
.st-act-menu-item i[b-cn9ioo1uko] {
    font-size: 16px;
    color: var(--ink-2);
    margin-top: 2px;
    width: 18px;
    flex-shrink: 0;
}
.st-act-menu-text[b-cn9ioo1uko] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.st-act-menu-title[b-cn9ioo1uko] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
.st-act-menu-sub[b-cn9ioo1uko] {
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.35;
}

/* ── Mobile: o popover transforma-se em bottom sheet ─────── */
@media (max-width: 640px) {
    .st-product-actions[b-cn9ioo1uko] {
        gap: 4px;
    }

    /* Esconder labels dos botões pill — fica só ícone em pílula compacta */
    .st-act-btn .st-act-label[b-cn9ioo1uko] { display: none; }
    .st-act-btn[b-cn9ioo1uko] {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .st-act-btn i[b-cn9ioo1uko] { font-size: 15px; }
    .st-act-btn.st-act-more[b-cn9ioo1uko] { width: 36px; height: 36px; }
    .st-act-btn.st-act-more i[b-cn9ioo1uko] { font-size: 18px; }

    /* Popover transforma-se em bottom sheet — full-width fixed na base */
    .st-act-backdrop[b-cn9ioo1uko] {
        background: rgba(0,0,0,0.4);
        z-index: 600;
    }
    .st-act-menu[b-cn9ioo1uko] {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: 0;
        border-radius: 18px 18px 0 0;
        padding: 8px 12px calc(20px + env(safe-area-inset-bottom));
        z-index: 700;
        box-shadow: var(--shadow-mobile-nav);
        animation: st-sheet-in-b-cn9ioo1uko 240ms cubic-bezier(0.32,0.72,0,1);
    }
    @keyframes st-sheet-in-b-cn9ioo1uko {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Mostrar handle (a "alça" que indica drag) — visualmente afirma sheet */
    .st-act-menu-handle[b-cn9ioo1uko] {
        display: block;
        width: 36px;
        height: 4px;
        background: var(--ink-4);
        border-radius: 999px;
        margin: 6px auto 12px;
    }

    /* Items maiores em mobile — touch targets confortáveis */
    .st-act-menu-item[b-cn9ioo1uko] {
        padding: 14px 12px;
        gap: 14px;
        min-height: 56px;
    }
    .st-act-menu-item i[b-cn9ioo1uko] { font-size: 18px; width: 22px; }
    .st-act-menu-title[b-cn9ioo1uko] { font-size: 14.5px; }
    .st-act-menu-sub[b-cn9ioo1uko] { font-size: 12.5px; }
}

/* ── Legacy: mantém .st-icon-btn para outros sítios (modais, etc) ──
   Os modais do consume e expand ainda usam estes — não tocar. */
.st-icon-btn[b-cn9ioo1uko] {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    font-size: 13px;
    transition: all 120ms ease;
    padding: 0;
    flex-shrink: 0;
}
.st-icon-btn:hover[b-cn9ioo1uko] { border-color: var(--ink); color: var(--ink); }
.st-icon-btn.is-on[b-cn9ioo1uko] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.st-icon-btn.is-added[b-cn9ioo1uko] {
    background: var(--pos);
    color: #fff;
    border-color: var(--pos);
}

/* ── Empty states ────────────────────────────────────── */
.st-empty[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    color: var(--ink-3);
    font-size: 13px;
}

.st-empty i[b-cn9ioo1uko] { font-size: 16px; }

.st-empty-card[b-cn9ioo1uko] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 48px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.st-empty-icon[b-cn9ioo1uko] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--line-2);
    color: var(--ink-3);
    display: grid;
    place-items: center;
    font-size: 22px;
    margin-bottom: 8px;
}

.st-empty-title[b-cn9ioo1uko] { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.st-empty-sub[b-cn9ioo1uko] { margin: 0; font-size: 13px; color: var(--ink-2); max-width: 360px; }

/* ── Modal ───────────────────────────────────────────── */
.st-modal-backdrop[b-cn9ioo1uko] {
    position: fixed;
    inset: 0;
    /* Tem de ser maior que .mobile-nav (z-index 500) para o modal ficar
       por cima da navegação inferior em mobile. Caso contrário a barra
       Resumo/Lista/Despensa cobre o footer com os botões Cancelar/Guardar. */
    z-index: 1000;
    background: rgba(15,23,42,.32);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding: 20px;
    animation: st-fade-b-cn9ioo1uko 150ms ease;
}

@keyframes st-fade-b-cn9ioo1uko { from { opacity: 0; } to { opacity: 1; } }

.st-modal[b-cn9ioo1uko] {
    width: 100%;
    max-width: 520px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(15,23,42,.18);
    overflow: hidden;
    animation: st-pop-b-cn9ioo1uko 180ms cubic-bezier(.2,.8,.2,1);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}

@keyframes st-pop-b-cn9ioo1uko {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.st-modal-head[b-cn9ioo1uko] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.st-modal-kicker[b-cn9ioo1uko] {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-3);
}

.st-modal-title[b-cn9ioo1uko] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--ink);
}

.st-modal-body[b-cn9ioo1uko] {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    /* min-height: 0 é OBRIGATÓRIO num flex item com overflow para que ele
       encolha abaixo do tamanho do conteúdo. Sem isto, mesmo com max-height
       no parent, o body cresce até caber tudo e empurra o footer para fora
       do viewport (era o bug "Guardar não aparece em mobile"). */
    min-height: 0;
    flex: 1 1 auto;
}

.st-modal-foot[b-cn9ioo1uko] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: var(--line-2);
    /* Não encolhe — é a área accionável do modal e tem de ficar sempre
       visível mesmo com 10 variantes no body. */
    flex-shrink: 0;
}

/* Consume row in modal */
.st-consume-row[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--line-2);
    border-radius: var(--r-sm);
}

.st-consume-info[b-cn9ioo1uko] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-consume-name[b-cn9ioo1uko] { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.st-consume-stock[b-cn9ioo1uko] { font-size: 12px; color: var(--ink-3); }

.st-consume-input-wrap[b-cn9ioo1uko] {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    flex-shrink: 0;
}

/* ─── Stepper +/- (modal Dar baixa) ──────────────────────────
   Substitui o input numérico para tornar o tap-to-1 trivial:
   click no [+] = +1 (Un) ou +0.1 (Kg/L). Display central mostra
   o valor actual. Touch targets >= 40px para não falhar no mobile. */
.st-stepper[b-cn9ioo1uko] {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    flex-shrink: 0;
    height: 36px;
}

.st-stepper-btn[b-cn9ioo1uko] {
    width: 36px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 120ms ease, color 120ms ease;
    padding: 0;
}

.st-stepper-btn:hover:not(:disabled)[b-cn9ioo1uko] {
    background: var(--line-2);
}

.st-stepper-btn:active:not(:disabled)[b-cn9ioo1uko] {
    background: var(--line);
}

.st-stepper-btn:disabled[b-cn9ioo1uko] {
    color: var(--ink-4);
    cursor: not-allowed;
    opacity: 0.5;
}

.st-stepper-btn-primary[b-cn9ioo1uko] {
    background: var(--ink);
    color: var(--on-ink);
}
.st-stepper-btn-primary:hover:not(:disabled)[b-cn9ioo1uko] {
    background: var(--ink-hover);
}


.st-stepper-value[b-cn9ioo1uko] {
    min-width: 60px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    background: var(--line-2);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    user-select: none;
}

.st-stepper-value.is-active[b-cn9ioo1uko] {
    color: var(--ink);
}

.st-stepper-unit[b-cn9ioo1uko] {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.st-consume-input-wrap:focus-within[b-cn9ioo1uko] {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

.st-consume-input[b-cn9ioo1uko] {
    width: 70px;
    padding: 7px 10px;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
    -moz-appearance: textfield;
}

.st-consume-input[b-cn9ioo1uko]::-webkit-outer-spin-button,
.st-consume-input[b-cn9ioo1uko]::-webkit-inner-spin-button {
    -webkit-appearance: none !important; appearance: none !important; margin: 0 !important;
}

.st-consume-input:focus[b-cn9ioo1uko] { outline: none; }

.st-consume-unit[b-cn9ioo1uko] {
    padding: 0 12px 0 4px;
    color: var(--ink-3);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.st-modal-grid[b-cn9ioo1uko] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Form fields */
.st-field[b-cn9ioo1uko] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-field label[b-cn9ioo1uko] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.st-field-hint[b-cn9ioo1uko] {
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-3);
    font-weight: 400;
}

.st-input[b-cn9ioo1uko] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
    color-scheme: light;
}

.st-input:hover[b-cn9ioo1uko] { border-color: var(--ink-3); }
.st-input:focus[b-cn9ioo1uko] {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.06);
}

/* Buttons */
.st-btn[b-cn9ioo1uko] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}

.st-btn:disabled[b-cn9ioo1uko] { opacity: 0.6; cursor: not-allowed; }

.st-btn-primary[b-cn9ioo1uko] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.st-btn-primary:hover:not(:disabled)[b-cn9ioo1uko] { background: var(--ink-hover); }

.st-btn-secondary[b-cn9ioo1uko] { background: var(--surface); color: var(--ink); border-color: var(--line); }
.st-btn-secondary:hover:not(:disabled)[b-cn9ioo1uko] { background: var(--line-2); border-color: var(--ink-3); }

/* Spinner */
.st-spinner[b-cn9ioo1uko] {
    width: 12px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: st-spin-b-cn9ioo1uko 0.6s linear infinite;
    display: inline-block;
}

@keyframes st-spin-b-cn9ioo1uko { to { transform: rotate(360deg); } }

/* Messages */
.st-msg[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
    border: 1px solid var(--line);
    background: var(--line-2);
}

.st-msg.is-bad[b-cn9ioo1uko] { background: var(--neg-soft); color: var(--neg); border-color: rgba(185,28,28,.2); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .st-controls[b-cn9ioo1uko] { flex-direction: column; align-items: stretch; gap: 8px; }

    /* Filtros de estado em swipe horizontal (Tudo / Favoritos / Stock baixo /
       A expirar / Esgotados). Em mobile não ficam empilhados em 2 linhas —
       o user faz swipe para o lado para ver os outros. Mais espaço para
       os produtos aparecerem above the fold. */
    .st-segmented[b-cn9ioo1uko] {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        /* Esconde scrollbar nativa para ficar mais limpo. */
        scrollbar-width: none;
    }
    .st-segmented[b-cn9ioo1uko]::-webkit-scrollbar { display: none; }
    .st-seg[b-cn9ioo1uko] {
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* Categorias: igual — swipe horizontal em vez de wrap em N linhas.
       Em famílias com 10+ categorias isto poupa metade da altura. */
    .st-cats[b-cn9ioo1uko] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        /* Padding lateral pequeno para o primeiro chip não ficar colado à
           edge e o último ter algum breathing room ao fazer scroll-end. */
        padding-bottom: 2px;
    }
    .st-cats[b-cn9ioo1uko]::-webkit-scrollbar { display: none; }
    .st-cat[b-cn9ioo1uko] {
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .st-group-head[b-cn9ioo1uko] { flex-wrap: wrap; }
    .st-group-right[b-cn9ioo1uko] { width: 100%; justify-content: flex-end; }

    .st-modal-grid[b-cn9ioo1uko] { grid-template-columns: 1fr; }
    .st-modal-head[b-cn9ioo1uko], .st-modal-body[b-cn9ioo1uko], .st-modal-foot[b-cn9ioo1uko] { padding-left: 16px; padding-right: 16px; }
}

/* Em telemóveis estreitos (≤ 420px, S24 Ultra é ~360px) o nome dos produtos
   ficava cortado porque QTY+actions ocupavam demasiado. Compacta:
   - QTY mais pequeno (24px em vez de 28)
   - Esconder labels dos botões "Baixa" e "À lista" — ficam só ícones
   - Reduz padding lateral da row
   - Nome do produto pode quebrar em 2 linhas (não trunca) */
@media (max-width: 420px) {
    .st-product-row[b-cn9ioo1uko] { padding: 10px 12px; gap: 8px; align-items: flex-start; }
    .st-qty-big[b-cn9ioo1uko] { min-width: 52px; align-self: center; }
    .st-qty-big .num[b-cn9ioo1uko] { font-size: 22px; letter-spacing: -0.5px; }
    .st-qty-unit[b-cn9ioo1uko] { font-size: 10px; }
    .st-act-label[b-cn9ioo1uko] { display: none; }            /* Texto esconde, fica só o ícone */
    .st-act-btn[b-cn9ioo1uko] { padding: 0; width: 34px; justify-content: center; }
    .st-act-btn i[b-cn9ioo1uko] { font-size: 14px; }
    .st-product-actions[b-cn9ioo1uko] { gap: 3px; align-self: center; }
    .st-product-meta[b-cn9ioo1uko] { gap: 4px; }
    /* Nome pode quebrar em até 2 linhas em vez de truncar — eliminamos o
       text-overflow:ellipsis + white-space:nowrap definidos no estilo base. */
    .st-product-name[b-cn9ioo1uko] {
        font-size: 13.5px;
        line-height: 1.25;
        white-space: normal;
        text-overflow: clip;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-word;
    }
}

/* Telemóveis muito estreitos (≤ 360px, modelos pequenos) — afina ainda mais. */
@media (max-width: 360px) {
    .st-product-row[b-cn9ioo1uko] { padding: 9px 10px; gap: 6px; }
    .st-qty-big[b-cn9ioo1uko] { min-width: 44px; }
    .st-qty-big .num[b-cn9ioo1uko] { font-size: 20px; }
    .st-act-btn[b-cn9ioo1uko] { width: 30px; height: 30px; }
    .st-act-btn i[b-cn9ioo1uko] { font-size: 13px; }
    .st-product-name[b-cn9ioo1uko] { font-size: 13px; }
}

/* ── Status badge clicável (abre modal de Validades) ────────── */
.st-status-clickable[b-cn9ioo1uko] {
    cursor: pointer;
    border: none;
    font: inherit;
    transition: transform 100ms ease, box-shadow 100ms ease;
}
.st-status-clickable:hover[b-cn9ioo1uko] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.st-status-clickable:active[b-cn9ioo1uko] {
    transform: translateY(0);
}

/* ── Pill de validade — sempre visível quando lote tem data ──
   Substituiu o botão "Validades". Cor neutra por defeito; vermelha
   quando urgente (≤ 7 dias). Click → abre modal para editar. */
.st-exp-pill[b-cn9ioo1uko] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 120ms ease;
}
.st-exp-pill i[b-cn9ioo1uko] { font-size: 10px; opacity: 0.8; }
.st-exp-pill:hover[b-cn9ioo1uko] {
    background: var(--line-2);
    border-color: var(--ink-3);
    color: var(--ink);
}
.st-exp-pill.is-urgent[b-cn9ioo1uko] {
    background: var(--neg-soft, rgba(185,28,28,0.08));
    border-color: rgba(185,28,28,0.25);
    color: var(--neg, #B91C1C);
    font-weight: 600;
}
.st-exp-pill.is-urgent:hover[b-cn9ioo1uko] {
    background: rgba(185,28,28,0.15);
    border-color: var(--neg, #B91C1C);
}

/* ── Botão discreto "Validades" para items SEM data ainda ──── */
.st-status-edit[b-cn9ioo1uko] {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--ink-3);
    font-size: 10.5px;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 120ms ease;
}
.st-status-edit:hover[b-cn9ioo1uko] {
    border-color: var(--ink-2);
    color: var(--ink);
    border-style: solid;
}
.st-status-edit i[b-cn9ioo1uko] { font-size: 10px; }

/* ── Modal Validades — secções por variante ─────────────────── */
.st-lots-section-title[b-cn9ioo1uko] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 16px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.st-lots-section-title:first-child[b-cn9ioo1uko] { margin-top: 0; }

/* ── Cada lote (linha) dentro do modal ──────────────────────── */
.st-lot-row[b-cn9ioo1uko] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-2);
}
.st-lot-row:last-child[b-cn9ioo1uko] {
    border-bottom: none;
}
.st-lot-info[b-cn9ioo1uko] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.st-lot-meta[b-cn9ioo1uko] {
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.3;
}
.st-lot-qty[b-cn9ioo1uko] {
    font-size: 11.5px;
    color: var(--ink-3);
    font-weight: 500;
}
.st-lot-input-wrap[b-cn9ioo1uko] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    min-width: 150px;
}
.st-lot-label[b-cn9ioo1uko] {
    font-size: 10.5px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}

/* Mobile: empilha vertical em vez de side-by-side */
@media (max-width: 600px) {
    .st-lot-row[b-cn9ioo1uko] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .st-lot-input-wrap[b-cn9ioo1uko] {
        min-width: 0;
    }

    /* Modal Dar baixa em mobile: garantir que o footer (Cancelar/Guardar)
       nunca é cortado. O backdrop tinha padding 20px que reduz o espaço
       útil — em mobile pequeno isso somado às 3-4 variantes do modal
       fazia o conteúdo overflow para baixo da janela. */
    .st-modal-backdrop[b-cn9ioo1uko] {
        padding: 12px;
        align-items: flex-end;
    }
    .st-modal[b-cn9ioo1uko] {
        max-height: calc(100vh - 24px);
    }
    .st-modal-body[b-cn9ioo1uko] {
        padding: 14px 16px;
    }
    .st-modal-foot[b-cn9ioo1uko] {
        padding: 12px 16px;
        position: sticky;
        bottom: 0;
    }

    /* Stepper: empilhar info do produto + controlos em vez de side-by-side
       em ecrãs muito estreitos. Targets de toque ainda confortáveis (38px)
       sem ocupar tanto espaço vertical. */
    .st-consume-row[b-cn9ioo1uko] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px;
    }
    .st-stepper[b-cn9ioo1uko] {
        align-self: stretch;
        height: 38px;
    }
    .st-stepper-btn[b-cn9ioo1uko] {
        width: auto;
        flex: 1;
    }
    .st-stepper-value[b-cn9ioo1uko] {
        flex: 1;
        font-size: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════
   V2 — DESPENSA EM 3 ZONAS POR URGÊNCIA
   Inspirado no mockup pantry-nivel-2 — "estado da casa, não inventário"
   ══════════════════════════════════════════════════════════════ */

/* ── Zona 1: URGENTE — cards 4-col com glow vermelho ─────────── */
.st-urgent-strip[b-cn9ioo1uko] {
    background: linear-gradient(135deg, var(--neg-soft) 0%, transparent 70%);
    border: 1px solid color-mix(in srgb, var(--neg) 18%, transparent);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.st-urgent-head[b-cn9ioo1uko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 12px;
    flex-wrap: wrap;
}

.st-urgent-title[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--neg);
}
.st-urgent-title i[b-cn9ioo1uko] { font-size: 14px; }

.st-urgent-cta[b-cn9ioo1uko] {
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--ink-2);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    transition: background 140ms ease, color 140ms ease;
}
.st-urgent-cta:hover[b-cn9ioo1uko] { background: var(--surface-hover); color: var(--ink); }
.st-urgent-cta i[b-cn9ioo1uko] { font-size: 11px; }

.st-urgent-grid[b-cn9ioo1uko] {
    display: grid;
    /* auto-fit + minmax: 1 ou 2 cards ocupam a largura disponível em vez
       de ficarem soltos numa grelha de 4. Com 3+ cards comporta-se como
       multi-col. minmax 240px garante que cada card mantém ≥240px de
       largura — abaixo disso colapsa para menos colunas. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.st-urgent-card[b-cn9ioo1uko] {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--neg) 25%, transparent);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.st-urgent-card.is-warn[b-cn9ioo1uko] {
    border-color: color-mix(in srgb, var(--warn) 25%, transparent);
}

.st-urgent-card-icon[b-cn9ioo1uko] {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: var(--neg-soft);
    color: var(--neg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.st-urgent-card.is-warn .st-urgent-card-icon[b-cn9ioo1uko] {
    background: var(--warn-soft);
    color: var(--warn);
}
.st-urgent-card-icon i[b-cn9ioo1uko] { font-size: 16px; }

.st-urgent-card-name[b-cn9ioo1uko] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-urgent-card-state[b-cn9ioo1uko] {
    font-size: 11px;
    color: var(--ink-2);
}
.st-urgent-tag-red[b-cn9ioo1uko] { color: var(--neg); font-weight: 600; }
.st-urgent-tag-amber[b-cn9ioo1uko] { color: var(--warn); font-weight: 600; }

.st-urgent-card-foot[b-cn9ioo1uko] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 6px;
}

.st-urgent-mini-btn[b-cn9ioo1uko] {
    flex: 1;
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 5px;
    background: var(--line-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.st-urgent-mini-btn:hover[b-cn9ioo1uko] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.st-urgent-mini-btn.is-on[b-cn9ioo1uko] {
    background: var(--pos-soft);
    color: var(--pos);
    border-color: color-mix(in srgb, var(--pos) 30%, transparent);
}
.st-urgent-mini-btn i[b-cn9ioo1uko] { font-size: 11px; }

/* ── Zona 2: ESTA SEMANA — lista média ────────────────────────── */
.st-week-strip[b-cn9ioo1uko] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    margin-bottom: 14px;
}

.st-week-head[b-cn9ioo1uko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.st-week-title[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--warn);
}
.st-week-title i[b-cn9ioo1uko] { font-size: 14px; }

.st-week-list[b-cn9ioo1uko] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.st-week-row[b-cn9ioo1uko] {
    display: grid;
    grid-template-columns: 1fr 80px auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--line-2);
    transition: background 140ms ease;
}
.st-week-row:hover[b-cn9ioo1uko] { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); }

.st-week-row-info[b-cn9ioo1uko] { min-width: 0; }
.st-week-row-name[b-cn9ioo1uko] {
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-week-row-meta[b-cn9ioo1uko] {
    font-size: 10.5px;
    color: var(--ink-3);
    display: flex;
    gap: 8px;
    margin-top: 3px;
}
.st-week-row-meta .when[b-cn9ioo1uko] { color: var(--warn); font-weight: 500; }

.st-week-row-qty[b-cn9ioo1uko] {
    text-align: right;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
}
.st-week-row-qty .num[b-cn9ioo1uko] {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}
.st-week-row-qty .unit[b-cn9ioo1uko] {
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.st-week-row-actions[b-cn9ioo1uko] {
    display: flex;
    gap: 4px;
}
.st-week-action[b-cn9ioo1uko] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.st-week-action:hover[b-cn9ioo1uko] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.st-week-action.is-on[b-cn9ioo1uko] { background: var(--pos-soft); color: var(--pos); border-color: color-mix(in srgb, var(--pos) 30%, transparent); }
.st-week-action i[b-cn9ioo1uko] { font-size: 13px; }

/* ── Zona 3: RESTO — grid compacto + chips ────────────────────── */
.st-rest-strip[b-cn9ioo1uko] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 24px;
}

.st-rest-head[b-cn9ioo1uko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 16px;
    flex-wrap: wrap;
}

.st-rest-title[b-cn9ioo1uko] { font-size: 13.5px; font-weight: 500; color: var(--ink); margin: 0; }
.st-rest-sub[b-cn9ioo1uko] { font-size: 11.5px; color: var(--ink-3); margin: 3px 0 0; }

.st-rest-search[b-cn9ioo1uko] {
    background: var(--line-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 220px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.st-rest-search:focus-within[b-cn9ioo1uko] {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(9,9,11,.05);
}
.st-rest-search > i[b-cn9ioo1uko] { font-size: 12px; color: var(--ink-3); }
.st-rest-search-input[b-cn9ioo1uko] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    color: var(--ink);
    min-width: 0;
}
.st-rest-search-input[b-cn9ioo1uko]::placeholder { color: var(--ink-3); }

/* Botão de limpar — só visível quando há texto. type="text" no input (não
   "search") garante que o native picker do browser não adiciona o seu próprio
   X, evitando duplicação. */
.st-rest-search-clear[b-cn9ioo1uko] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    font-size: 14px;
    transition: color 140ms ease;
}
.st-rest-search-clear:hover[b-cn9ioo1uko] { color: var(--ink); }

/* Empty state DENTRO do RESTO strip — quando search activa mas 0 matches
   nesta zona. Mensagem subtil com botão-link para limpar a pesquisa. */
.st-rest-empty[b-cn9ioo1uko] {
    padding: 24px 8px;
    text-align: center;
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.5;
}

.st-rest-chips[b-cn9ioo1uko] {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.st-rest-chip[b-cn9ioo1uko] {
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 11.5px;
    background: var(--line-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
    cursor: pointer;
    font-family: inherit;
    transition: all 140ms ease;
}
.st-rest-chip:hover[b-cn9ioo1uko] { color: var(--ink); border-color: var(--ink-3); }
.st-rest-chip.is-active[b-cn9ioo1uko] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.st-rest-chip .badge[b-cn9ioo1uko] {
    margin-left: 6px;
    font-size: 10px;
    color: var(--ink-3);
    font-weight: 500;
}
.st-rest-chip.is-active .badge[b-cn9ioo1uko] { color: color-mix(in srgb, var(--on-ink) 65%, transparent); }

.st-compact-grid[b-cn9ioo1uko] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.st-compact-row[b-cn9ioo1uko] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 7px;
    background: var(--line-2);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 140ms ease, border-color 140ms ease;
}
.st-compact-row:hover[b-cn9ioo1uko] {
    background: color-mix(in srgb, var(--ink) 6%, var(--surface));
    border-color: var(--line);
}

.st-compact-row-name[b-cn9ioo1uko] {
    font-size: 12.5px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-compact-row:hover .st-compact-row-name[b-cn9ioo1uko] { color: var(--ink); }

.st-compact-row-qty[b-cn9ioo1uko] {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
}
.st-compact-row-qty .un[b-cn9ioo1uko] {
    font-size: 9.5px;
    color: var(--ink-3);
    margin-left: 1px;
}

/* ── Responsive — colapsa colunas em mobile ───────────────────── */
/* Auto-fit no urgent-grid trata da responsividade sozinho. Só precisamos
   ajustar o compact-grid e o week-row em tamanhos pequenos. */
@media (max-width: 768px) {
    .st-compact-grid[b-cn9ioo1uko] { grid-template-columns: repeat(2, 1fr); }
    .st-week-row[b-cn9ioo1uko] { grid-template-columns: 1fr auto; }
    .st-week-row-qty[b-cn9ioo1uko] { grid-column: 2; }
    .st-week-row-actions[b-cn9ioo1uko] { grid-column: 1 / -1; justify-content: flex-end; }
    .st-rest-search[b-cn9ioo1uko] { width: 100%; }
}
@media (max-width: 480px) {
    .st-compact-grid[b-cn9ioo1uko] { grid-template-columns: 1fr; }
    .st-urgent-strip[b-cn9ioo1uko], .st-week-strip[b-cn9ioo1uko], .st-rest-strip[b-cn9ioo1uko] { padding: 18px 16px; }
}

/* ── Estado "tudo em ordem" — quando despensa não tem urgentes nem week ── */
.st-all-clear[b-cn9ioo1uko] {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, var(--pos-soft) 0%, transparent 80%);
    border: 1px solid color-mix(in srgb, var(--pos) 18%, transparent);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    margin-bottom: 14px;
}
.st-all-clear-icon[b-cn9ioo1uko] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pos) 14%, transparent);
    color: var(--pos);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.st-all-clear-icon i[b-cn9ioo1uko] { font-size: 22px; }
.st-all-clear-body[b-cn9ioo1uko] { min-width: 0; }
.st-all-clear-title[b-cn9ioo1uko] {
    margin: 0;
    font-size: 22px;
    font-weight: 300;
    color: var(--ink);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.st-all-clear-title .serif[b-cn9ioo1uko] {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.4px;
}
.st-all-clear-sub[b-cn9ioo1uko] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
}

@media (max-width: 480px) {
    .st-all-clear[b-cn9ioo1uko] { padding: 18px 16px; gap: 14px; }
    .st-all-clear-icon[b-cn9ioo1uko] { width: 36px; height: 36px; }
    .st-all-clear-icon i[b-cn9ioo1uko] { font-size: 18px; }
    .st-all-clear-title[b-cn9ioo1uko] { font-size: 20px; }
    .st-all-clear-title .serif[b-cn9ioo1uko] { font-size: 22px; }
}

/* (bloco .st-global-search* removido — search voltou para dentro da
   RESTO strip. O fix do bug original é o RESTO renderizar sempre que
   searchTerm está activa, mantendo a search input acessível.) */

/* Link "limpa a pesquisa" no empty state — botão-link inline. */
.st-empty-clear[b-cn9ioo1uko] {
    background: none;
    border: none;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
    font: inherit;
    font-size: inherit;
    padding: 0;
}
.st-empty-clear:hover[b-cn9ioo1uko] { color: var(--ink-hover); }

/* ══════════════════════════════════════════════════════════════
   URGENT CARD — estado "Na lista"
   Quando o produto esgotado já foi adicionado à lista de compras,
   o card mantém-se visível (informação factual: continua esgotado)
   mas ganha:
     • Badge verde "✓ Na lista" no canto superior direito
     • Border verde subtil (em vez do vermelho urgência)
     • Outline ring verde no hover
   Sinal: "problema reconhecido — quando comprares, sai do urgente".
   ══════════════════════════════════════════════════════════════ */
.st-urgent-card[b-cn9ioo1uko] {
    position: relative; /* para o badge absoluto */
}

.st-urgent-card.is-on-list[b-cn9ioo1uko] {
    border-color: color-mix(in srgb, var(--pos) 30%, transparent);
}

.st-urgent-on-list-badge[b-cn9ioo1uko] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 100px;
    background: var(--pos-soft);
    color: var(--pos);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--pos) 30%, transparent);
    /* Não interfere com clicks no card (caso seja clicável no futuro). */
    pointer-events: none;
}
.st-urgent-on-list-badge i[b-cn9ioo1uko] { font-size: 10px; }
/* /Components/ProductFilterBar.razor.rz.scp.css */
.scan-bar[b-eat7krcru7] {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(220px, 1fr);
    gap: 0.75rem;
    padding: 0.8rem;
    background: var(--surface);
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    margin-bottom: 0.6rem;
}

.scan-bar label[b-eat7krcru7] {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-primary);
}

@media (max-width: 680px) {
    .scan-bar[b-eat7krcru7] { grid-template-columns: 1fr; }
}
/* /Components/ProductInsightsModal.razor.rz.scp.css */
.insights-overlay[b-vrjlnuwso2] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(27, 42, 74, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.insights-modal[b-vrjlnuwso2] {
    width: min(980px, 100%);
    max-height: 92vh;
    overflow: auto;
    background: var(--surface);
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 46px rgba(27, 42, 74, 0.2);
    padding: 1rem;
    display: grid;
    gap: 1rem;
}

.insights-header[b-vrjlnuwso2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.insights-header h2[b-vrjlnuwso2] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
}

.insights-header p[b-vrjlnuwso2] {
    margin: 0.25rem 0 0;
    color: var(--color-muted);
}

.insights-stats[b-vrjlnuwso2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.7rem;
}

.insights-stats article[b-vrjlnuwso2] {
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    padding: 0.65rem;
    background: var(--color-bg);
    display: grid;
    gap: 0.15rem;
}

.insights-stats .label[b-vrjlnuwso2] {
    font-size: 0.82rem;
    color: var(--color-muted);
}

.insights-stats strong[b-vrjlnuwso2] {
    color: var(--color-primary);
    font-size: 1rem;
}

.insights-chart-shell[b-vrjlnuwso2],
.insights-table-shell[b-vrjlnuwso2] {
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    background: var(--surface);
    padding: 0.8rem;
}

.insights-chart-shell h3[b-vrjlnuwso2],
.insights-table-shell h3[b-vrjlnuwso2] {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    color: var(--color-primary);
}

.price-chart[b-vrjlnuwso2] {
    width: 100%;
    height: 280px;
    display: block;
}

.axis[b-vrjlnuwso2] {
    stroke: var(--color-muted);
    stroke-width: 1;
}

.grid[b-vrjlnuwso2] {
    stroke: var(--color-border);
    stroke-width: 1;
}

.price-line[b-vrjlnuwso2] {
    fill: none;
    stroke: #1B2A4A;
    stroke-width: 2.5;
}

.price-dot[b-vrjlnuwso2] { fill: #1B2A4A; }

.axis-label[b-vrjlnuwso2] {
    font-size: 11px;
    fill: var(--color-muted);
    text-anchor: end;
    dominant-baseline: middle;
}

.qty-warning[b-vrjlnuwso2] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 0.75rem;
    padding: 0.6rem 0.85rem;
    color: #92400e;
    font-size: 0.88rem;
    line-height: 1.4;
}

.qty-warning i[b-vrjlnuwso2] {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.table-scroll[b-vrjlnuwso2] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.total-col[b-vrjlnuwso2] {
    font-weight: 600;
    color: var(--color-primary);
}

.row-actions[b-vrjlnuwso2] {
    white-space: nowrap;
    display: flex;
    gap: 0.3rem;
}

.edit-input[b-vrjlnuwso2] {
    width: 6rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.88rem;
}

.editing-row[b-vrjlnuwso2] { background: var(--color-bg); }

.empty[b-vrjlnuwso2] {
    margin: 0;
    color: var(--color-muted);
}

/* ── Mobile cards (historico) ─────────────────────────── */

.history-cards[b-vrjlnuwso2] { display: none; }

.history-card[b-vrjlnuwso2] {
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.7rem 0.8rem;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.editing-card[b-vrjlnuwso2] { background: #f8fafc; }

.history-card-header[b-vrjlnuwso2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.history-date[b-vrjlnuwso2] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-primary);
}

.history-card-body[b-vrjlnuwso2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem 1rem;
}

.history-field[b-vrjlnuwso2] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.history-field-wide[b-vrjlnuwso2] { grid-column: span 2; }

.field-label[b-vrjlnuwso2] {
    font-size: 0.7rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.field-value[b-vrjlnuwso2] {
    font-size: 0.9rem;
    color: var(--color-text);
}

.total-val[b-vrjlnuwso2] {
    font-weight: 600;
    color: var(--color-primary);
}

@media (max-width: 640px) {
    .insights-overlay[b-vrjlnuwso2] { padding: 0; align-items: flex-end; }

    .insights-modal[b-vrjlnuwso2] {
        width: 100%;
        max-height: 92dvh;
        border-radius: 1rem 1rem 0 0;
        padding: 0.85rem;
    }

    .insights-header h2[b-vrjlnuwso2] { font-size: 1.05rem; }
    .insights-stats[b-vrjlnuwso2] { grid-template-columns: repeat(2, 1fr); }
    .price-chart[b-vrjlnuwso2] { height: 180px; }

    .desktop-table[b-vrjlnuwso2] { display: none; }
    .history-cards[b-vrjlnuwso2] { display: flex; flex-direction: column; gap: 0.4rem; }
}

/* ── Consumption history ─────────────────────────────────────── */
.consumption-list[b-vrjlnuwso2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.consumption-row[b-vrjlnuwso2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
}

.consumption-row:last-child[b-vrjlnuwso2] { border-bottom: none; }

.consumption-date-block[b-vrjlnuwso2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 2rem;
    flex-shrink: 0;
}

.consumption-day[b-vrjlnuwso2] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.consumption-month[b-vrjlnuwso2] {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-muted);
    letter-spacing: 0.05em;
}

.consumption-info[b-vrjlnuwso2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.consumption-time[b-vrjlnuwso2] {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.consumption-notes[b-vrjlnuwso2] {
    font-size: 0.82rem;
    color: var(--color-text);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.consumption-qty[b-vrjlnuwso2] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #b91c1c;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-undo-consumption[b-vrjlnuwso2] {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.4rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.btn-undo-consumption:hover[b-vrjlnuwso2] {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}
/* /Components/Shared/CommunityPriceCard.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Community price card — extraída do Comparador.razor.
   Mantém os estilos junto do componente para Blazor scoped
   CSS aplicar correctamente.
   ───────────────────────────────────────────────────────── */

.cmp-card[b-v49z1ho6qj] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.cmp-card-head[b-v49z1ho6qj] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cmp-card-head > div[b-v49z1ho6qj] { flex: 1; min-width: 0; }

.cmp-card-title[b-v49z1ho6qj] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cmp-card-title i[b-v49z1ho6qj] { color: var(--ink-2); font-size: 14px; }

.cmp-card-sub[b-v49z1ho6qj] {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--ink-2);
}

.cmp-card-body[b-v49z1ho6qj] {
    padding: 16px 20px 18px;
}

.cmp-icon-btn[b-v49z1ho6qj] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.cmp-icon-btn:hover[b-v49z1ho6qj] {
    background: var(--line-2);
    color: var(--ink);
}

/* ── Community card variant ─────────────────────────── */
.cmp-community-card[b-v49z1ho6qj] {
    background: linear-gradient(180deg, rgba(21,128,61,.04), var(--surface));
    border: 1px solid rgba(21,128,61,.18);
}

.cmp-community-card .cmp-card-title i[b-v49z1ho6qj] {
    color: var(--pos, #15803D);
}

.cmp-community-stores[b-v49z1ho6qj] {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cmp-community-meta[b-v49z1ho6qj] {
    font-size: 11.5px;
    color: var(--ink-3);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Confidence pill — verde alta (≥5), amarelo média (2-4), cinza baixa (1) */
.cmp-confidence-pill[b-v49z1ho6qj] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

.cmp-confidence-pill.is-high[b-v49z1ho6qj] {
    background: var(--pos-soft);
    color: var(--pos);
}

.cmp-confidence-pill.is-medium[b-v49z1ho6qj] {
    background: rgba(245, 158, 11, 0.15);
    color: #B45309;
}

.cmp-confidence-pill.is-low[b-v49z1ho6qj] {
    background: var(--line-2);
    color: var(--ink-3);
}

.cmp-community-price-label[b-v49z1ho6qj] {
    display: block;
    font-size: 10.5px;
    color: var(--ink-3);
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: -2px;
}

.cmp-community-disclaimer[b-v49z1ho6qj] {
    margin: 8px 16px 16px;
    padding: 10px 12px;
    background: var(--line-2, #F5F5F2);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--ink-3);
    line-height: 1.5;
    font-style: italic;
}

.cmp-empty-msg[b-v49z1ho6qj] {
    margin: 0;
    padding: 16px;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* ── Entry rows ─────────────────────────────────────── */
.cmp-entry[b-v49z1ho6qj] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-2);
    transition: background-color 120ms ease;
}

.cmp-entry:hover[b-v49z1ho6qj] { background: var(--line-2); }
.cmp-entry:last-child[b-v49z1ho6qj] { border-bottom: none; }

.cmp-entry-meta[b-v49z1ho6qj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cmp-entry-store[b-v49z1ho6qj] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cmp-entry-store i[b-v49z1ho6qj] { color: var(--ink-3); font-size: 12px; }

.cmp-entry-price-wrap[b-v49z1ho6qj] {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.cmp-entry-price[b-v49z1ho6qj] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

.cmp-entry.is-min .cmp-entry-price[b-v49z1ho6qj] { color: var(--pos); }
.cmp-entry.is-max .cmp-entry-price[b-v49z1ho6qj] { color: var(--neg); }

.cmp-tag[b-v49z1ho6qj] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cmp-tag-pos[b-v49z1ho6qj] { background: var(--pos-soft); color: var(--pos); border: 1px solid rgba(21,128,61,.2); }

.cmp-bar-track[b-v49z1ho6qj] {
    grid-column: 1 / -1;
    height: 3px;
    background: var(--line-2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}

.cmp-bar-fill[b-v49z1ho6qj] {
    height: 100%;
    background: var(--ink-3);
    border-radius: 2px;
    transition: width 200ms ease;
}

.cmp-bar-fill.is-min[b-v49z1ho6qj] { background: var(--pos); }
.cmp-bar-fill.is-max[b-v49z1ho6qj] { background: var(--neg); }

/* ── Lojas com 1 report — sinais directionais ──────── */
.cmp-community-stores-weak[b-v49z1ho6qj] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    opacity: 0.85;
}
.cmp-entry.is-weak[b-v49z1ho6qj] {
    opacity: 0.75;
}
.cmp-entry.is-weak .cmp-entry-price[b-v49z1ho6qj] {
    color: var(--ink-2);
}
.cmp-entry.is-weak .cmp-bar-track[b-v49z1ho6qj] {
    display: none;
}

.cmp-fraca-only[b-v49z1ho6qj] {
    background: var(--warn-soft);
    border-bottom: 1px solid var(--line);
}
.cmp-fraca-only .cmp-empty-msg[b-v49z1ho6qj] {
    color: var(--ink);
}
.cmp-fraca-only i[b-v49z1ho6qj] { color: var(--warn); margin-right: 4px; }

/* ── Spread warning + samples (transparência) ─────────
   Quando max/min ≥ 3×, a mediana é estatisticamente válida
   mas semanticamente inútil (pesquisa misturou SKUs diferentes).
   Avisamos o user explicitamente e abrimos os samples por defeito. */
.cmp-spread-warn[b-v49z1ho6qj] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: var(--warn-soft);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-md);
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
}
.cmp-spread-warn i[b-v49z1ho6qj] { color: var(--warn); flex-shrink: 0; margin-top: 2px; }

.cmp-samples-toggle[b-v49z1ho6qj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 0;
    background: transparent;
    border: none;
    color: var(--ink-2);
    font-size: 12px;
    cursor: pointer;
}
.cmp-samples-toggle:hover[b-v49z1ho6qj] { color: var(--ink); }
.cmp-samples-toggle i[b-v49z1ho6qj] { font-size: 11px; }
.cmp-samples-count[b-v49z1ho6qj] { color: var(--ink-3); font-size: 11px; }

.cmp-samples-list[b-v49z1ho6qj] {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 8px 10px;
    background: var(--surface-2);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cmp-sample[b-v49z1ho6qj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
}
.cmp-sample-name[b-v49z1ho6qj] {
    color: var(--ink);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmp-sample-meta[b-v49z1ho6qj] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
}
.cmp-sample-price[b-v49z1ho6qj] { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-sample-date[b-v49z1ho6qj] { color: var(--ink-3); font-size: 11px; }

/* Chip de "última observação" ao lado do nome da loja. Comunica
   quão fresco é o preço — preço típico de hoje vale mais que de
   há 5 dias com promo passada. */
.cmp-store-date[b-v49z1ho6qj] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    padding: 2px 6px;
    background: var(--surface-2);
    border-radius: 999px;
    font-size: 10.5px;
    color: var(--ink-3);
    font-weight: 500;
    vertical-align: middle;
}
.cmp-store-date i[b-v49z1ho6qj] { font-size: 9px; }
/* /Components/Shared/PushOptInBanner.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────
   Push opt-in banner — soft, monocromático, dismissível.
   Design propositadamente discreto para não rivalizar com
   o conteúdo do dashboard. Hover destaca o CTA.
   ───────────────────────────────────────────────────────── */

.pob-banner[b-adfcf9rgba] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    color: var(--ink);
    /* Subtle accent à esquerda — sinaliza "novo" sem gritar. */
    border-left: 3px solid var(--ink);
}

.pob-icon[b-adfcf9rgba] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--line-2);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}

.pob-content[b-adfcf9rgba] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pob-title[b-adfcf9rgba] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.1px;
}

.pob-desc[b-adfcf9rgba] {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-2);
    line-height: 1.4;
}

.pob-actions[b-adfcf9rgba] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.pob-btn[b-adfcf9rgba] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
}

.pob-btn:disabled[b-adfcf9rgba] { opacity: 0.6; cursor: not-allowed; }

.pob-btn-primary[b-adfcf9rgba] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink);
}
.pob-btn-primary:hover:not(:disabled)[b-adfcf9rgba] {
    background: var(--ink-hover);
}
.pob-btn-primary i[b-adfcf9rgba] { font-size: 11px; }

.pob-btn-secondary[b-adfcf9rgba] {
    background: transparent;
    color: var(--ink-2);
    border-color: transparent;
}
.pob-btn-secondary:hover:not(:disabled)[b-adfcf9rgba] {
    color: var(--ink);
    background: var(--line-2);
}

.pob-spinner[b-adfcf9rgba] {
    width: 11px;
    height: 11px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pob-spin-b-adfcf9rgba 0.6s linear infinite;
    display: inline-block;
}

@keyframes pob-spin-b-adfcf9rgba { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .pob-banner[b-adfcf9rgba] {
        flex-wrap: wrap;
        gap: 10px;
    }
    .pob-content[b-adfcf9rgba] { flex-basis: calc(100% - 50px); }
    .pob-actions[b-adfcf9rgba] {
        width: 100%;
        justify-content: flex-end;
    }
}