/* /Components/Layout/AuthLayout.razor.rz.scp.css */
/* Same rule as MainLayout.razor.css's own #blazor-error-ui — Blazor's CSS
   isolation scopes that one to elements MainLayout itself renders, so it
   never reached this layout's own copy of the same markup, leaving the
   banner visible (and reading as "An unhandled error has occurred") on
   every single load instead of only when an error actually happens. */
#blazor-error-ui[b-1qw11c533m] {
    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-1qw11c533m] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ofkn5cnwrp] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-ofkn5cnwrp] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content[b-ofkn5cnwrp] {
    flex: 1;
    padding-top: 0;
}

#blazor-error-ui[b-ofkn5cnwrp] {
    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-ofkn5cnwrp] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.site-nav[b-1eeaiuw6cf] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--color-white-rgb), 0.7);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}

.site-nav.is-scrolled[b-1eeaiuw6cf] {
    box-shadow: 0 8px 24px rgba(var(--shadow-color-nav-rgb), 0.08);
}

.nav-inner[b-1eeaiuw6cf] {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.5rem;
    /* Extra right padding reserves room for .nav-end, which is pinned to
       .site-nav's own true right edge (see below) rather than to this
       max-width column's edge — on viewports narrower than max-width+this
       padding, that column's edge and .nav-end would otherwise land in the
       same place and the nav-links CTA could run underneath the avatar. */
    padding-right: 4.5rem;
    transition: padding 0.35s var(--ease);
}

.site-nav.is-scrolled .nav-inner[b-1eeaiuw6cf] {
    padding: 0.45rem 4.5rem 0.45rem 1.5rem;
}

.nav-brand[b-1eeaiuw6cf] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text) !important;
    text-decoration: none;
    transition: font-size 0.35s var(--ease);
}

.site-nav.is-scrolled .nav-brand[b-1eeaiuw6cf] {
    font-size: 0.92rem;
}

.brand-mark[b-1eeaiuw6cf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    background: var(--gradient-brand);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 800;
    transition: width 0.35s var(--ease), height 0.35s var(--ease);
}

.site-nav.is-scrolled .brand-mark[b-1eeaiuw6cf] {
    width: 1.7rem;
    height: 1.7rem;
}

.nav-links[b-1eeaiuw6cf] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

/* Deliberately NOT inside .nav-inner (see NavMenu.razor) — .nav-inner is
   capped at max-width and centered, so on any viewport wider than that it
   sits well short of the actual page edge. Positioning against .site-nav
   itself (full-bleed, no max-width) instead pins the hamburger/avatar to
   the page's true right edge, which is what "mais a direita" actually
   means, rather than to the edge of that centered column. */
.nav-end[b-1eeaiuw6cf] {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-links a[b-1eeaiuw6cf] {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    transition: color 0.2s ease;
}

.nav-links a:not(.nav-cta)[b-1eeaiuw6cf]::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--gradient-brand);
    transition: width 0.25s var(--ease);
}

.nav-links a:not(.nav-cta):hover[b-1eeaiuw6cf] {
    color: var(--color-text);
}

.nav-links a:not(.nav-cta):hover[b-1eeaiuw6cf]::after {
    width: 100%;
}

.nav-links a.nav-cta[b-1eeaiuw6cf] {
    color: var(--color-white);
}

.nav-cta[b-1eeaiuw6cf] {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    transition: padding 0.35s var(--ease), font-size 0.35s var(--ease);
}

.site-nav.is-scrolled .nav-cta[b-1eeaiuw6cf] {
    padding: 0.4rem 0.95rem;
    font-size: 0.88rem;
}

.menu-toggle[b-1eeaiuw6cf] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    background: transparent;
    cursor: pointer;
}

.menu-toggle span[b-1eeaiuw6cf] {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s ease;
}

.menu-toggle.is-open span:nth-child(1)[b-1eeaiuw6cf] {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2)[b-1eeaiuw6cf] {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3)[b-1eeaiuw6cf] {
    transform: translateY(-7px) rotate(-45deg);
}

/* Collapsed nav variant: hamburger-only at every screen size. Applied
   only on the request-flow form pages (/solicitar/site, /solicitar/projeto)
   where the nav should stay free of distracting links; every other page
   keeps the normal horizontal nav and only collapses on narrow viewports
   below. */
.site-nav.nav-collapsed .menu-toggle[b-1eeaiuw6cf] {
    display: flex;
}

.site-nav.nav-collapsed .nav-links[b-1eeaiuw6cf] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(var(--color-white-rgb), 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease);
}

.site-nav.nav-collapsed .nav-links.is-open[b-1eeaiuw6cf] {
    max-height: 22rem;
}

.site-nav.nav-collapsed .nav-links a[b-1eeaiuw6cf] {
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--color-border);
}

.site-nav.nav-collapsed .nav-links a:first-child[b-1eeaiuw6cf] {
    border-top: none;
}

.site-nav.nav-collapsed .nav-links a:not(.nav-cta)[b-1eeaiuw6cf]::after {
    display: none;
}

.site-nav.nav-collapsed .nav-cta[b-1eeaiuw6cf] {
    margin: 1rem 1.5rem;
    text-align: center;
    border-top: none !important;
}

@media (max-width: 860px) {
    .menu-toggle[b-1eeaiuw6cf] {
        display: flex;
    }

    .nav-links[b-1eeaiuw6cf] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(var(--color-white-rgb), 0.98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s var(--ease);
    }

    .nav-links.is-open[b-1eeaiuw6cf] {
        max-height: 22rem;
    }

    .nav-links a[b-1eeaiuw6cf] {
        padding: 0.9rem 1.5rem;
        border-top: 1px solid var(--color-border);
    }

    .nav-links a:not(.nav-cta)[b-1eeaiuw6cf]::after {
        display: none;
    }

    .nav-cta[b-1eeaiuw6cf] {
        margin: 1rem 1.5rem;
        text-align: center;
        border-top: none !important;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-eerxxz9us4],
.components-reconnect-repeated-attempt-visible[b-eerxxz9us4],
.components-reconnect-failed-visible[b-eerxxz9us4],
.components-pause-visible[b-eerxxz9us4],
.components-resume-failed-visible[b-eerxxz9us4],
.components-rejoining-animation[b-eerxxz9us4] {
    display: none;
}

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


#components-reconnect-modal[b-eerxxz9us4] {
    background-color: white;
    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-eerxxz9us4 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-eerxxz9us4] {
    border: 0;
    background-color: var(--color-primary);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-eerxxz9us4] {
        background-color: var(--color-primary-dark);
    }

    #components-reconnect-modal button:active[b-eerxxz9us4] {
        background-color: var(--color-primary);
    }

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

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

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

@keyframes components-rejoining-animation-b-eerxxz9us4 {
    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/SimpleFooter.razor.rz.scp.css */
.simple-footer[b-2jisxanu21] {
    background: var(--color-ink);
    color: rgba(var(--color-white-rgb),0.65);
    padding: 2.5rem 1.5rem;
    margin-top: auto;
    border-radius: 1.75rem 1.75rem 0 0;
}

.simple-footer-inner[b-2jisxanu21] {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
}

.simple-footer-brand[b-2jisxanu21] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
}

.simple-footer .brand-mark[b-2jisxanu21] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--gradient-brand);
    font-size: 0.8rem;
    color: var(--color-white);
}

.simple-footer a[b-2jisxanu21] {
    color: rgba(var(--color-white-rgb),0.75);
    text-decoration: none;
}

.simple-footer a:hover[b-2jisxanu21] {
    color: var(--color-white);
    text-decoration: underline;
}
/* /Components/Layout/UserProfileBar.razor.rz.scp.css */
.profile-widget[b-c9ja9yef53] {
    position: relative;
}

/* <summary> comes with a browser-drawn disclosure triangle (::marker in
   Firefox, ::-webkit-details-marker in Chrome/Safari/Edge) — hidden on both
   since the avatar circle itself is the only trigger affordance wanted
   here. */
.profile-widget-trigger[b-c9ja9yef53] {
    display: flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.profile-widget-trigger[b-c9ja9yef53]::marker,
.profile-widget-trigger[b-c9ja9yef53]::-webkit-details-marker {
    display: none;
}

.profile-widget-avatar[b-c9ja9yef53] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Hidden by default (not display:none — that would also skip the
   opacity/transform transition) and revealed two ways: a mouse hover peek
   via :hover, and a persistent open via the <details> element's own [open]
   state (native click-to-toggle, also what makes this reachable by
   keyboard and usable on touch devices that have no real "hover"). */
.profile-widget-panel[b-c9ja9yef53] {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 15rem;
    padding: 0.9rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.profile-widget:hover .profile-widget-panel[b-c9ja9yef53],
.profile-widget[open] .profile-widget-panel[b-c9ja9yef53] {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.profile-widget-name[b-c9ja9yef53] {
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: break-word;
}

.profile-widget-email[b-c9ja9yef53] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    overflow-wrap: break-word;
}

.profile-widget-logout-form[b-c9ja9yef53] {
    margin: 0.35rem 0 0;
}

.profile-widget-logout-form .btn[b-c9ja9yef53] {
    width: 100%;
}
/* /Components/Pages/Gestao.razor.rz.scp.css */
.gestao-shell[b-spgkbjeeem] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 4rem);
}

.gestao-header[b-spgkbjeeem] {
    max-width: 1140px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vh, 3.5rem) 1.5rem 1rem;
    width: 100%;
}

.gestao-header h1[b-spgkbjeeem] {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 0.4rem 0 0.6rem;
}

.gestao-stats[b-spgkbjeeem] {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    padding: 1.5rem 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.stat-tile[b-spgkbjeeem] {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-tile-value[b-spgkbjeeem] {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.8rem;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-tile-label[b-spgkbjeeem] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.gestao-chart[b-spgkbjeeem] {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    padding: 2.5rem 1.5rem 0;
}

.gestao-chart h2[b-spgkbjeeem],
.gestao-orders h2[b-spgkbjeeem] {
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.chart[b-spgkbjeeem] {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    height: 220px;
    padding: 1rem 1rem 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.chart-col[b-spgkbjeeem] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: 0.4rem;
}

.chart-bars[b-spgkbjeeem] {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 150px;
    width: 100%;
    justify-content: center;
}

.chart-bar[b-spgkbjeeem] {
    width: 1.1rem;
    height: var(--bar-h, 0%);
    min-height: 2px;
    border-radius: 0.3rem 0.3rem 0 0;
    transition: height 0.4s var(--ease);
}

.chart-bar-site[b-spgkbjeeem] {
    background: var(--gradient-brand);
}

.chart-bar-projeto[b-spgkbjeeem] {
    background: var(--gradient-ink-accent);
}

.chart-total[b-spgkbjeeem] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text);
}

.chart-label[b-spgkbjeeem] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-transform: capitalize;
}

.chart-legend[b-spgkbjeeem] {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.legend-dot[b-spgkbjeeem] {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.4rem;
}

.legend-dot-site[b-spgkbjeeem] {
    background: var(--gradient-brand);
}

.legend-dot-projeto[b-spgkbjeeem] {
    background: var(--gradient-ink-accent);
}

.gestao-orders[b-spgkbjeeem] {
    max-width: 1140px;
    margin: 0 auto;
    width: 100%;
    padding: 3rem 1.5rem 4rem;
    flex: 1;
}

.empty-state[b-spgkbjeeem] {
    color: var(--color-text-muted);
    background: var(--color-white);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem;
    text-align: center;
}

.orders-table-wrap[b-spgkbjeeem] {
    overflow-x: auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.orders-table[b-spgkbjeeem] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.orders-table th[b-spgkbjeeem] {
    text-align: left;
    padding: 0.85rem 1rem;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.orders-table td[b-spgkbjeeem] {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--color-border);
    vertical-align: top;
}

.type-badge[b-spgkbjeeem] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.type-site[b-spgkbjeeem] {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary-dark);
}

.type-projeto[b-spgkbjeeem] {
    background: rgba(var(--color-ink-rgb), 0.08);
    color: var(--color-ink);
}

.contact-cell[b-spgkbjeeem] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 10rem;
}

.contact-cell span[b-spgkbjeeem] {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.meeting-cell[b-spgkbjeeem] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 9rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.contact-cell-empty[b-spgkbjeeem] {
    color: var(--color-text-muted);
}

.details-cell[b-spgkbjeeem] {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--color-text-muted);
}

@media (max-width: 860px) {
    .gestao-stats[b-spgkbjeeem] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Split panel — a branded left side plus the actual form on the right —
   is what actually makes good use of a wide desktop viewport; a single
   centered card (the old design, reusing SolicitarSite/SolicitarProjeto's
   .request-form-section) either had to sit awkwardly narrow in a sea of
   empty space or, missing that page's own max-width override entirely
   (Blazor's CSS isolation means Solicitar*.razor.css's rules never reached
   this page), stretched edge to edge instead. Below the breakpoint the
   brand panel disappears entirely and the form becomes the whole page —
   the standard, well-understood mobile login shape. */
/* Fixed to exactly the viewport height (not just a minimum) on desktop, on
   purpose: "Criar conta" has twice the fields "Entrar" does (name + confirm
   password on top of e-mail + password), so its content is often taller
   than the screen. With only a min-height, that extra height had nowhere
   to go but into the grid row itself — which stretches *every* column in
   it (grid items default to stretching to the row's height), so the whole
   page grew a scrollbar and the brand panel's own content (logo top, copy
   middle, copyright bottom via justify-content: space-between) visibly
   slid down to fill the newly-taller row along with it, even though
   nothing about the brand panel itself had changed. Locking the row to
   100vh and giving each panel its own overflow-y instead means only the
   panel whose content is actually too tall ever scrolls — the other one
   simply can't grow past the viewport no matter what its sibling is
   doing. */
.auth-page[b-pucfonodx0] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    height: 100vh;
}

.auth-brand-panel[b-pucfonodx0] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    height: 100%;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: var(--gradient-brand);
    color: var(--color-white);
    overflow: hidden;
}

.auth-brand-panel .request-decor[b-pucfonodx0] {
    /* Same shapes/mechanism as the wizard pages' own .request-decor
       (app.css) — just layered over a dark gradient here instead of a
       light page background, so the shape colors passed in are lighter. */
    z-index: 0;
}

.auth-brand[b-pucfonodx0],
.auth-mobile-brand[b-pucfonodx0] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: inherit;
    text-decoration: none;
}

.auth-brand .brand-mark[b-pucfonodx0],
.auth-mobile-brand .brand-mark[b-pucfonodx0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 800;
}

.auth-brand-copy[b-pucfonodx0] {
    position: relative;
    z-index: 1;
    max-width: 26rem;
}

.auth-brand-copy h2[b-pucfonodx0] {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.3;
    margin-bottom: 1rem;
}

.auth-brand-copy p[b-pucfonodx0] {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
}

.auth-brand-foot[b-pucfonodx0] {
    position: relative;
    z-index: 1;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.auth-form-panel[b-pucfonodx0] {
    display: flex;
    /* "safe center" instead of plain "center": a plain centered flex item
       taller than its container gets clipped at the *top* in most browsers
       (the centering offset goes negative and overflow crops it there
       first) — "safe" falls back to start-alignment once content no
       longer fits, so a tall "Criar conta" scrolls from its own top edge
       instead of hiding the first field or two above the fold. */
    align-items: safe center;
    justify-content: center;
    height: 100%;
    overflow-y: auto;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    background: var(--color-bg-alt);
}

.auth-form-card[b-pucfonodx0] {
    width: 100%;
    max-width: 24rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.25rem, 4vw, 1.75rem);
}

/* Only shown once the brand panel itself disappears below the breakpoint —
   without some brand mark here, a visitor landing straight on /login on a
   phone would have no idea whose product this is. */
.auth-mobile-brand[b-pucfonodx0] {
    display: none;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.auth-form-card .eyebrow[b-pucfonodx0] {
    margin-bottom: 0.5rem;
}

.auth-form-card h1[b-pucfonodx0] {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.4vw, 1.7rem);
    margin-bottom: 0.6rem;
}

.auth-form-card .section-subtitle[b-pucfonodx0] {
    margin-bottom: 1rem;
}

/* Tighter vertical rhythm than the site-wide .form-group default (1.5rem,
   app.css) — that spacing is meant for a handful of fields spread down a
   long scrolling wizard page, not four fields meant to fit a single
   compact card without needing to scroll at all whenever it can be
   avoided ("Entrar", only two fields, should basically never need to). */
.auth-form .form-group[b-pucfonodx0] {
    margin-bottom: 0.85rem;
}

/* Pure client-side toggle (site.js's initAuthTabs) — both the "signin" and
   "signup" panels always exist in this same static-SSR response, switching
   which one is hidden needs no round trip to the server at all. Only the
   panel matching the ?mode= the page was actually requested with starts
   visible (Login.razor's own `hidden="@(Mode != ...)"`) so there's no
   flash-of-wrong-panel before the script runs. firebase-auth.js also sets
   .auth-tabs' own [hidden] once someone reaches the "verify" panel — the
   :not([hidden]) here matters for that specifically: a plain `.auth-tabs {
   display: flex }` has the same specificity as the browser's built-in
   `[hidden] { display: none }` rule, and author CSS always wins that tie
   regardless of which one is written second, so [hidden] alone would
   silently do nothing without this. .auth-panel needs no such guard since
   it has no display rule of its own to conflict with. */
.auth-tabs:not([hidden])[b-pucfonodx0] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.3rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
}

.auth-tab[b-pucfonodx0] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.55rem 0.75rem;
    border-radius: calc(var(--radius-md) - 0.2rem);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.auth-tab.is-active[b-pucfonodx0] {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-soft);
}

/* Success/neutral counterpart to .field-error — "e-mail reenviado",
   "link de redefinição enviado"... anything confirming an action worked
   rather than flagging one that didn't. Empty by default (Login.razor
   renders it with no text) and only ever shown by firebase-auth.js setting
   both its text and [hidden], so there's never an empty colored box
   flashing before script runs. */
.auth-info[b-pucfonodx0] {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(var(--color-primary-rgb), 0.1);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-primary-dark);
}

.auth-form .btn[b-pucfonodx0] {
    width: 100%;
    margin-top: 0.5rem;
}

.auth-forgot-link[b-pucfonodx0] {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-decoration: none;
}

.auth-forgot-link:hover[b-pucfonodx0] {
    color: var(--color-primary);
}

/* The verify panel's two actions ("Já verifiquei" / "Reenviar e-mail")
   aren't a <form> — nothing here submits anything, they're both just
   buttons calling firebase-auth.js directly — so they get their own small
   stacked-button wrapper instead of reusing .auth-form's. */
.auth-verify-actions[b-pucfonodx0] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.auth-verify-actions .btn[b-pucfonodx0] {
    width: 100%;
}

.auth-back-link[b-pucfonodx0] {
    display: inline-block;
    margin-top: 1rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    text-decoration: none;
}

.auth-back-link:hover[b-pucfonodx0] {
    color: var(--color-primary);
}

@media (max-width: 960px) {
    .auth-page[b-pucfonodx0] {
        display: block;
        height: auto;
        min-height: 100vh;
    }

    .auth-brand-panel[b-pucfonodx0] {
        display: none;
    }

    .auth-mobile-brand[b-pucfonodx0] {
        display: flex;
    }

    .auth-form-panel[b-pucfonodx0] {
        height: auto;
        overflow-y: visible;
        padding: 2rem 1.25rem;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found-shell[b-ubph1ave9a] {
    min-height: calc(100vh - 4rem);
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.not-found-hero[b-ubph1ave9a] {
    max-width: 34rem;
    margin: 0 auto;
    text-align: center;
}

.not-found-code[b-ubph1ave9a] {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(4rem, 14vw, 7rem);
    line-height: 1;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

.not-found-hero h1[b-ubph1ave9a] {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.25;
    margin: 0 0 1rem;
}

.not-found-hero .lead[b-ubph1ave9a] {
    color: var(--color-text-muted);
    margin: 0 0 2rem;
}

.not-found-hero .hero-actions[b-ubph1ave9a] {
    justify-content: center;
}
/* /Components/Pages/SolicitarProjeto.razor.rz.scp.css */
/* .request-shell, .request-decor/.decor-shape and the shared form
   primitives (.request-form, .form-group, .form-row, .field-hint, ...)
   now live in app.css — this page-specific file only has the bits
   unique to SolicitarProjeto (SolicitarSite reuses the shared shell but
   has its own wizard-specific markup instead of a success screen). */
.request-form-section[b-k2lgio3eee] {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vh, 4.5rem) 1.5rem 4rem;
    width: 100%;
}

.request-success[b-k2lgio3eee] {
    position: relative;
    z-index: 1;
    max-width: 32rem;
    margin: auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.success-icon[b-k2lgio3eee] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--color-success-rgb), 0.16), rgba(var(--color-accent-rgb), 0.14));
    color: var(--color-success);
    margin-bottom: 1.5rem;
}

.success-icon svg[b-k2lgio3eee] {
    width: 2.2rem;
    height: 2.2rem;
}

.request-success h1[b-k2lgio3eee] {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    margin-bottom: 0.85rem;
}

.request-success p[b-k2lgio3eee] {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.success-actions[b-k2lgio3eee] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
/* /Components/Pages/SolicitarSite.razor.rz.scp.css */
.wizard-section[b-v9ydx1qvnd] {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vh, 4.5rem) 1.5rem 4rem;
    width: 100%;
    transition: max-width 0.3s var(--ease);
}

/* The "Criando" step's editor+preview columns need more width than the
   simple single-column forms in the other steps. */
.wizard-section.is-wide[b-v9ydx1qvnd] {
    max-width: 1180px;
}

/* Shrinks the title/step-indicator header while any of the 3 "Criando"
   sub-steps (Logo/Cores/Layouts) are showing — those are already compact,
   focused screens, so the big marketing-style header above them (sized for
   step 1's longer form) just eats space without adding anything a returning
   user still needs. Scoped to .wizard-section instead of touching
   .section-head/.wizard-steps directly, since those are shared, sitewide
   classes (app.css) used well beyond this page. */
.wizard-section.is-criando .section-head[b-v9ydx1qvnd] {
    max-width: 100%;
    margin-bottom: 1.25rem;
}

.wizard-section.is-criando .section-head h1[b-v9ydx1qvnd] {
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
}

.wizard-section.is-criando .section-head .section-subtitle[b-v9ydx1qvnd] {
    display: none;
}

.wizard-section.is-criando .wizard-steps[b-v9ydx1qvnd] {
    margin-bottom: 1.25rem;
}

.wizard-section.is-criando .wizard-step-marker[b-v9ydx1qvnd] {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.75rem;
}

.wizard-section.is-criando .wizard-step-label[b-v9ydx1qvnd] {
    display: none;
}

.wizard-section.is-criando .wizard-steps-line-track[b-v9ydx1qvnd],
.wizard-section.is-criando .wizard-steps-line-fill[b-v9ydx1qvnd] {
    /* Half of the shrunk 1.8rem marker, keeping the line centered on it —
       same relationship as the default 1.25rem-for-a-2.5rem-marker above. */
    top: 0.9rem;
}

.wizard-steps[b-v9ydx1qvnd] {
    position: relative;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
}

/* Endpoints sit at 12.5%/87.5% — the horizontal center of the first and
   last of 4 equal-width flex items (100% / 4 / 2) — so the line meets the
   marker circles' centers exactly instead of a guessed percentage. */
.wizard-steps-line-track[b-v9ydx1qvnd],
.wizard-steps-line-fill[b-v9ydx1qvnd] {
    position: absolute;
    top: 1.25rem;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    transform-origin: left center;
}

.wizard-steps-line-track[b-v9ydx1qvnd] {
    background: var(--color-border);
}

.wizard-steps-line-fill[b-v9ydx1qvnd] {
    background: var(--gradient-brand);
    transform: scaleX(0);
    transition: transform 0.4s var(--ease);
}

.wizard-step[b-v9ydx1qvnd] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    text-align: center;
}

.wizard-step-marker[b-v9ydx1qvnd] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.wizard-step.is-active .wizard-step-marker[b-v9ydx1qvnd] {
    background: var(--gradient-brand);
    border-color: transparent;
    color: var(--color-white);
    box-shadow: 0 8px 18px rgba(var(--color-primary-rgb), 0.3);
}

.wizard-step.is-done .wizard-step-marker[b-v9ydx1qvnd] {
    background: var(--color-primary);
    border-color: transparent;
    color: var(--color-white);
}

.wizard-step-label[b-v9ydx1qvnd] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.wizard-step.is-active .wizard-step-label[b-v9ydx1qvnd],
.wizard-step.is-done .wizard-step-label[b-v9ydx1qvnd] {
    color: var(--color-text);
}

.wizard-panel[b-v9ydx1qvnd] {
    margin-top: 0.5rem;
}

/* Each step/sub-step (Contexto, Logo, Cores, Layouts, the placeholder...)
   is a different branch of the same @if/else-if chain in SolicitarSite.razor
   — switching which one is active always mounts a genuinely new element
   (Blazor doesn't diff across separate branches), so a plain mount
   animation here replays on every step change for free, without needing any
   @key trickery. Doesn't replay on incidental re-renders *within* a step
   (a field changing, a card opening) since those patch the existing element
   instead of remounting it. */
@keyframes wizard-step-enter-b-v9ydx1qvnd {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard-panel > *[b-v9ydx1qvnd] {
    animation: wizard-step-enter-b-v9ydx1qvnd 0.45s var(--ease);
}

.wizard-placeholder[b-v9ydx1qvnd] {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: clamp(2.5rem, 6vw, 4rem) 2rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.wizard-placeholder-icon[b-v9ydx1qvnd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary-dark);
    margin-bottom: 1.25rem;
}

.wizard-placeholder-icon svg[b-v9ydx1qvnd] {
    width: 1.8rem;
    height: 1.8rem;
}

.wizard-placeholder h2[b-v9ydx1qvnd] {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.wizard-placeholder p[b-v9ydx1qvnd] {
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 32rem;
    margin: 0 auto 1.75rem;
}

.wizard-actions[b-v9ydx1qvnd] {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

@media (max-width: 640px) {
    .wizard-step-label[b-v9ydx1qvnd] {
        display: none;
    }
}

/* ---------- "Criando" — Logo / Cores sub-steps ----------
   One focused thing per screen instead of the whole builder at once — a
   card, same shape as e.g. the login form card, instead of the wide, dense
   multi-column layout the "Layouts" sub-step below still uses. Wide rather
   than narrow on purpose — gives the content room to breathe instead of
   the card growing tall and cramped. */
.criando-compact[b-v9ydx1qvnd] {
    max-width: 40rem;
    margin: 0 auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.75rem, 4vw, 2.5rem);
    text-align: center;
}

.criando-compact .section-head[b-v9ydx1qvnd] {
    margin-bottom: 1.5rem;
}

/* ---------- "Criando" — Layouts sub-step (simplified macro view) ----------
   Deliberately just structure — a layout's name, the items it's made of,
   and a way to remove/add either — not the full per-item content editor
   (FlexibleLayoutEditor) the old single-page builder showed inline for
   everything at once. */
.layout-overview-grid[b-v9ydx1qvnd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.layout-card[b-v9ydx1qvnd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.layout-card:hover[b-v9ydx1qvnd] {
    border-color: rgba(var(--color-primary-rgb), 0.35);
    box-shadow: 0 14px 28px rgba(var(--shadow-color-rgb), 0.1);
    transform: translateY(-2px);
}

.layout-card-header[b-v9ydx1qvnd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.layout-card-name[b-v9ydx1qvnd] {
    font-family: var(--font-heading);
    font-size: 1.02rem;
}

.layout-card-items[b-v9ydx1qvnd] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.layout-card-items li[b-v9ydx1qvnd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--color-text);
}

.layout-card-empty[b-v9ydx1qvnd] {
    color: var(--color-text-muted);
    font-style: italic;
    background: transparent !important;
    padding-left: 0 !important;
}

.layout-card-item-remove[b-v9ydx1qvnd] {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: none;
    background: rgba(var(--color-danger-rgb), 0.1);
    color: var(--color-danger);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.layout-card-item-remove:hover[b-v9ydx1qvnd] {
    background: var(--color-danger);
    color: var(--color-white);
}

.layout-card select.form-select[b-v9ydx1qvnd] {
    margin-top: 0.15rem;
}
/* /Components/SiteBuilder/LogoColorPicker.razor.rz.scp.css */
/* A single clickable dropzone — the preview and the "upload" action used to
   be two separate elements (a box showing "Sem logo" next to a button that
   did the actual work) sitting side by side, which read as two unrelated
   things and left the box a dead, non-interactive placeholder. The <label>
   itself is the whole control now: click the icon, the caption, or an
   already-uploaded image and the same file picker opens either way. */
.logo-dropzone-wrap[b-5xihd69g96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.logo-dropzone[b-5xihd69g96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 14rem;
    height: 9rem;
    padding: 1rem;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.logo-dropzone:hover[b-5xihd69g96] {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
}

.logo-dropzone.is-disabled[b-5xihd69g96] {
    cursor: default;
    opacity: 0.7;
}

/* Once a logo exists this reads as a real preview, not an empty
   placeholder — solid border, white ground — while staying just as
   clickable to swap it for another file. */
.logo-dropzone.has-logo[b-5xihd69g96] {
    border-style: solid;
    background: var(--color-white);
}

.logo-dropzone img[b-5xihd69g96] {
    max-width: 100%;
    max-height: 5rem;
    object-fit: contain;
}

.logo-dropzone-icon[b-5xihd69g96] {
    width: 1.8rem;
    height: 1.8rem;
}

.logo-dropzone-caption[b-5xihd69g96] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}