/* Base .dropdown anchors to the right, which would push the subnav panels
   off the left edge of their tab */
.dropdown--subnav {
    min-width: 275px;
    left: 0;
    right: auto;
}

/**
 * Items used to sit flush against each other, so the hovered one and the
 * current one merged into a single block with no seam. A gap keeps the two
 * backgrounds apart and the colours can stay as they were.
 */
.dropdown,
.mega { display: flex; flex-direction: column; gap: 3px; }
.mega--wide { display: grid; }

.dropdown__item.is-active,
.mega__item.is-active {
    color: var(--brand-700);
    font-weight: 700;
    background: var(--brand-100);
}

.dropdown__item.is-active i,
.mega__item.is-active .mega__item-name { color: var(--brand-700); }

/* the icon box is filled on the current item, so the drawing inside it is white */
.mega__item.is-active .mega__item-ico i { color: #fff; }

.child-tab { font-size: 17px; color: var(--menu-text-2); }

/**
 * Loading spinner of the whole panel: Lucide loader-circle at the shadcn
 * cadence, 1s linear with no easing. Markup lives in includes/spinner.blade.php,
 * so every screen shows the same thing while it waits.
 */
.spin {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    animation: spin 1s linear infinite;
}

.spin--lg { width: 26px; height: 26px; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .spin { animation: none; }
}

.toasts {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 340px;
    max-width: min(440px, calc(100vw - 40px));
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(15, 30, 27, .16);
    font-size: 15px;
    font-weight: 600;
    color: var(--menu-text);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity .25s ease, transform .25s ease;
}

.toast.is-in { opacity: 1; transform: translateX(0); }
.toast > i:first-child { font-size: 19px; flex-shrink: 0; }
.toast > span { flex: 1 1 auto; line-height: 1.4; }

.toast--ok { border-color: var(--brand-300); }
.toast--ok > i:first-child { color: var(--brand); }
.toast--err { border-color: #f2b6b1; }
.toast--err > i:first-child { color: var(--danger); }

.toast__x {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-xs);
    color: var(--text-soft);
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 14px;
}

.toast__x:hover { color: var(--menu-text); background: var(--surface-3); }

@media (max-width: 640px) {
    .toasts { top: 12px; right: 12px; left: 12px; }
    .toast { min-width: 0; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Lives above the page title now, not in the context bar */
.app-main > .breadcrumb {
    margin-bottom: 16px;
    font-size: 14px;
    flex-wrap: wrap;
}

.app-main > .breadcrumb .sep i { font-size: 11px; }
.app-main > .breadcrumb .current { font-weight: 600; color: var(--menu-text); }

.breadcrumb__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    font-size: 14px;
    transition: color .15s ease, background .15s ease;
}

.breadcrumb__home:hover { color: var(--brand); background: var(--brand-50); }

.child-tabs { flex-wrap: wrap; overflow: visible; }

@media (max-width: 720px) {
    .child-tab { padding: 8px 12px; font-size: 16px; }
}

/* Darker than --text-muted: the default greens wash out on the light surface
   and the audience skews older */
:root {
    --menu-text: var(--text);
    --menu-text-2: var(--text-muted);
}

/* Wider panel so a description rarely needs the second line at all, and the
   second line is reserved regardless. Translations differ in length, so
   reserving it keeps every row the same height in pt, en and es alike, which
   is what lets the icon sit centered instead of drifting to the top. */
.mega { width: 400px; }

/**
 * The wide panel is 720px and its item sits at the right end of the nav, so
 * anchoring it to the left pushed it past the viewport and gave every page a
 * horizontal scrollbar. A hidden overlay still counts towards the scroll area,
 * which is why it happened with the menu closed. Opening leftward fixes the
 * cause; the clamp keeps any panel inside the viewport.
 */
.mega { max-width: calc(100vw - 24px); }
.mega--wide { left: auto; right: -8px; }

/* Eight entries in one column runs past the fold on a laptop */
.mega--wide {
    width: 720px;
    grid-template-columns: 1fr 1fr;
    gap: 3px 4px;
}

@media (max-width: 780px) {
    .mega--wide { width: min(400px, calc(100vw - 24px)); grid-template-columns: 1fr; }
}

.mega__item {
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
}

/* Room for a two line description is reserved on the text box, not on the
   description itself, so a short one centers in the leftover space instead of
   hanging from the top. Descriptions wrap in one language and not in another,
   and this is what keeps the rows identical across pt, en and es. */
.mega__item-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    min-height: 54px;
}

.mega__item-name { font-size: 15.5px; font-weight: 650; line-height: 1.2; color: var(--menu-text); }

.mega__item-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--menu-text-2);
}

.mega__item-ico { width: 38px; height: 38px; font-size: 15px; color: var(--brand-700); }

.parent-nav__btn { font-size: 15.5px; }

/* Bounded so a long domain cannot stretch the menu across the header */
.dropdown--user {
    width: 340px;
    max-width: min(340px, calc(100vw - 32px));
}

.udom {
    padding: 10px 10px 4px;
    margin: 4px 0 6px;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-2);
}

.udom__head {
    padding: 0 4px 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--menu-text-2);
}

.udom__row,
.udom__cta {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px;
    margin-bottom: 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.udom__row:hover { border-color: var(--brand-300); background: var(--brand-50); }

.udom__ico {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--text-muted);
    background: var(--surface-3);
}

.udom__ico--main { color: var(--brand); background: var(--brand-100); }

.udom__text,
.udom__cta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}

.udom__text strong,
.udom__cta-text strong {
    display: block;
    max-width: 100%;
    font-size: 14.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.udom__text small,
.udom__cta-text small {
    margin-top: 1px;
    font-size: 13.5px;
    color: var(--menu-text-2);
}

.udom__row > i:last-child,
.udom__cta > i:last-child { font-size: 13px; color: var(--text-soft); flex-shrink: 0; }

.udom__cta {
    border-style: dashed;
    border-color: var(--brand-300);
    background: var(--brand-50);
}

.udom__cta:hover { background: var(--brand-100); }
.udom__cta strong { color: var(--brand-700); }
.udom__cta > i:last-child { color: var(--brand); }

.udom__cta-ico {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    background: var(--brand);
}

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

.notif { position: relative; }

.notif__btn {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.notif__btn:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .38); }

.notif__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

.dropdown--notif { width: 330px; max-width: calc(100vw - 32px); padding: 0; }

.notif__head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    font-weight: 700;
    color: var(--menu-text);
}

.notif__item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 14px;
}

.notif__item + .notif__item { border-top: 1px solid var(--border-soft); }

.notif__ico {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.notif__ico--info { color: var(--info); background: #eaf2fd; }
.notif__ico--warn { color: var(--warning); background: #fdf3e6; }
.notif__ico--ok { color: var(--success); background: #e7f7ef; }

.notif__text { display: flex; flex-direction: column; min-width: 0; }
.notif__text strong { font-size: 14.5px; font-weight: 600; color: var(--menu-text); }
.notif__text small { margin-top: 2px; font-size: 13px; color: var(--menu-text-2); }

.notif__empty { padding: 26px 14px; text-align: center; font-size: 14px; color: var(--menu-text-2); }

.dropdown__item { font-size: 17px; font-weight: 600; color: var(--menu-text); }
.dropdown__item i { color: var(--menu-text-2); font-size: 16px; }
.dropdown__item:hover i,
.dropdown__item.is-active i { color: var(--brand-700); }

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.pager__info { margin: 0; font-size: 14px; color: var(--text-muted); }
.pager__list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }

.pager__item {
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

a.pager__item:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
.pager__item.is-active { color: #fff; border-color: var(--brand); background: var(--brand); }
.pager__item.is-off { opacity: .45; }

@media (max-width: 640px) {
    .pager { justify-content: center; }
    .pager__info { width: 100%; text-align: center; }
}

/**
 * Confirmation dialog shared by the screens that need a real stop, in place of
 * the sweetalert build the old layout pulled in.
 */
.modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 26, 22, .45);
}

/**
 * Small radius on purpose: the blur only costs while a dialog is open, and 3px
 * reads as depth without making a weak device work for it.
 */
@supports (backdrop-filter: blur(3px)) {
    .modal {
        background: rgba(10, 26, 22, .34);
        backdrop-filter: blur(3px);
    }
}

.modal[hidden] { display: none; }

/**
 * Faixa de "exibindo resultados para X". Quatro listagens usam, entao mora na
 * camada global: enquanto a regra viveu no CSS de posts e de categorias, a
 * mesma faixa na tela de videos saia como texto solto, colada na busca.
 */
.pfilter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 12px 16px;
    font-size: 14.5px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.pfilter strong { color: var(--text); }
.pfilter a { color: var(--text-muted); }
.pfilter a:hover { color: var(--danger); }

/**
 * Modal de criar categoria. Mora aqui, e nao no CSS de uma pagina, porque o
 * markup e um include compartilhado: quando so a tela de categorias tinha a
 * regra, o mesmo modal aberto na tela de video nascia com o spinner ligado.
 */
.catmodal .modal__input { width: 100%; }
.catmodal__ok .spin { display: none; }
.catmodal__ok.is-busy .spin { display: block; }

.modal__card {
    width: 100%;
    max-width: 460px;
    padding: 24px;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.modal__title { margin: 0 0 12px; font-size: 19px; font-weight: 700; color: var(--text); }
.modal__text { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }
.modal__input { width: 100%; }
.modal__error { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--danger); }
.modal__error[hidden] { display: none; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Um campo depois do outro precisa de ar entre eles, e nao so entre rótulo e controle */
.modal__card .field + .field { margin-top: 16px; }

/**
 * Centred, but deliberately restrained: a small square chip instead of the big
 * ringed circle, plain weights and two equal buttons. It should read as part of
 * the panel, not as a library dialog dropped on top of it.
 */
.cmodal .modal__card { max-width: 500px; padding: 28px 26px 22px; text-align: center; }

.cmodal__head { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.cmodal__ico {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    color: var(--danger);
    border-radius: var(--radius-md);
    background: #fdeceb;
}

.cmodal__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
/* the audience skews older, so nothing here goes small or washed out */
.cmodal__text { margin: 11px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-muted); }
.cmodal__text[hidden], .cmodal__ask[hidden], .cmodal__error[hidden] { display: none; }

.cmodal__ask { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; text-align: left; }
.cmodal__ask .field__label { font-size: 15px; font-weight: 600; color: var(--text-muted); }
/* only the word to be typed stands out, not the whole sentence */
.cmodal__ask .field__label strong { font-weight: 700; color: var(--text); }
.cmodal__input { font-size: 15.5px; }
.cmodal__input { width: 100%; }
.cmodal__error { margin: 12px 0 0; font-size: 14.5px; }

.cmodal .modal__foot { margin-top: 22px; gap: 10px; }
.cmodal .modal__foot .btn { flex: 1 1 0; justify-content: center; padding: 12px 18px; font-size: 15.5px; }

.cmodal__ok .spin { display: none; }
.cmodal__ok.is-busy .spin { display: block; }
.cmodal__ok:disabled, .cmodal__cancel:disabled { opacity: .6; cursor: not-allowed; }

.btn--danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn--danger:hover { filter: brightness(.94); }

/**
 * Mobile drawer.
 *
 * The burger and the panel only exist under 900px, which is where the header
 * already drops the area nav. Sections are labelled so the top level areas stay
 * visually separate from the sub navigation of the area being used.
 */
.burger {
    display: none;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: inherit;
    border: 0;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
}

.burger:hover { background: rgba(255, 255, 255, .24); }

.drawer {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(10, 26, 22, .45);
}

@supports (backdrop-filter: blur(3px)) {
    .drawer { background: rgba(10, 26, 22, .34); backdrop-filter: blur(3px); }
}

.drawer[hidden] { display: none; }

.drawer__panel {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(88vw, 340px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    transform: translateX(-100%);
    transition: transform .22s ease;
}

.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.drawer__user { display: flex; align-items: center; gap: 11px; min-width: 0; }
.drawer__user-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drawer__user-text strong { font-size: 15px; font-weight: 650; color: var(--text); }
.drawer__user-text small { font-size: 13px; color: var(--text-muted); }

.drawer__close {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
}

.drawer__close:hover { color: var(--text); background: var(--surface-3); }

/**
 * Two levels instead of one long list. The root shows only the areas; tapping
 * one slides its menu in. Pages are stacked absolutely so the slide is a
 * transform and never reflows the panel.
 */
.drawer__stack { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }

.drawer__page {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px 26px;
    background: var(--surface);
    transform: translateX(100%);
    transition: transform .22s ease;
}

.drawer__page[hidden] { display: none; }
.drawer__page.is-current { transform: translateX(0); }
.drawer__page.is-behind { transform: translateX(-28%); }

.drawer__label {
    margin: 12px 0 6px;
    padding: 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.drawer__rule { margin: 14px 4px 4px; border: 0; border-top: 1px solid var(--border-soft); }

/* Tall rows on purpose: this is a touch target, not a desktop menu line */
.drawer__link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    font-family: var(--font);
    font-size: 15.5px;
    font-weight: 600;
    text-align: left;
    color: var(--menu-text, var(--text));
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}

.drawer__link > i:first-child { width: 20px; flex-shrink: 0; font-size: 15px; text-align: center; color: var(--text-muted); }
.drawer__link > span { flex: 1 1 auto; }
.drawer__link:hover { background: var(--surface-2); }
.drawer__link:active { background: var(--surface-3); }
.drawer__link.is-active { color: var(--brand-700); background: var(--brand-50); }
.drawer__link.is-active > i:first-child { color: var(--brand); }
.drawer__link--out { color: var(--danger); }
.drawer__link--out > i:first-child { color: var(--danger); }

/* Area row: bigger, with a hint of what is inside, so the first screen reads
   as a choice of destination and not as a list of links */
.darea {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 10px;
    font-family: var(--font);
    text-align: left;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
}

.darea__ico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--brand-700);
    border-radius: var(--radius-md);
    /* a step darker than brand-50: on a white panel that tint read as no fill */
    background: #d7ece4;
}

.darea__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.darea__text strong { font-size: 15.5px; font-weight: 650; color: var(--menu-text, var(--text)); }

.darea__text small {
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.darea__go { flex-shrink: 0; font-size: 12px; color: var(--text-soft); }
.darea:hover { background: var(--surface-2); }
.darea:active { background: var(--surface-3); }

.dback {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 10px;
    margin-bottom: 4px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 650;
    color: var(--brand-700);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--brand-50);
    cursor: pointer;
}

.dback:hover { background: var(--brand-100); }


body.is-locked { overflow: hidden; }

@media (max-width: 900px) {
    .burger { display: inline-flex; }
}

@media (min-width: 901px) {
    .drawer { display: none !important; }
}

.udom--drawer { margin: 14px 2px 6px; }

/**
 * Mobile fixes.
 *
 * The dropdowns anchor to a small element and were rendering off screen or
 * clipped, so on touch they simply never appeared. Fixed positioning gives
 * them the width of the viewport instead.
 */
@media (max-width: 900px) {
    .dropdown {
        position: fixed;
        top: calc(var(--header-h) + 8px);
        left: 10px;
        right: 10px;
        min-width: 0;
        max-height: 72vh;
        overflow-y: auto;
        z-index: 110;
    }

    /* the drawer already carries this navigation, so the bar would be a
       second copy of it competing for the little height a phone has */
    .context-bar { display: none; }
}

/**
 * Pecas de listagem usadas por mais de uma tela. Ficam aqui e nao no CSS de
 * uma pagina: enquanto a barra de acoes e a busca moravam no arquivo de
 * videos, a tela de albuns reusava o markup e saia sem estilo nenhum.
 */
.ltools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.ltools__search { position: relative; flex: 1 1 260px; min-width: 0; }
.ltools__search i { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); font-size: 14px; color: var(--text-soft); }
.ltools__search .input { padding-left: 38px; }
.ltools__pick { flex: 0 0 220px; }

/* Acoes no rodape do card, com o nome escrito em vez de so o icone */
.cardacts {
    display: flex;
    margin-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.cardact {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 650;
    color: var(--text-muted);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.cardact + .cardact { border-left: 1px solid var(--border-soft); }
.cardact:hover { color: var(--brand-700); background: var(--brand-50); }
.cardact--del:hover { color: var(--err-fg); background: var(--err-bg); }

/* Marca de selecao sobre imagem, onde o fundo nao e previsivel */
.pickmark {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 7px;
    background: rgba(15, 30, 27, .45);
    backdrop-filter: blur(2px);
}

/* Barra que so aparece quando ha selecao */
.lbulk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid var(--brand-300);
    border-radius: var(--radius-md);
    background: var(--brand-50);
}

.lbulk[hidden] { display: none; }
.lbulk__n { font-size: 15px; font-weight: 700; color: var(--brand-700); }

/* Estado vazio de uma listagem */
.cempty {
    padding: 52px 24px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.btn--soft-blue { color: #1f5fa9; background: #eaf1fb; border-color: #cfe0f5; }
.btn--soft-blue:hover { color: #164a86; background: #dde9f8; border-color: #b6d2f0; }

.btn--soft-red { color: var(--err-fg); background: var(--err-bg); border-color: var(--err-bd); }
.btn--soft-red:hover { border-color: var(--danger); }

.page-head__acts { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
/* Linha de dica acima de uma grade ordenavel */
.lhint {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    font-size: 13.5px;
    color: var(--text-soft);
}

.lhint__sep { opacity: .6; }
/* Abas de filtro de uma listagem. Tres telas usam, entao mora na camada
   global: presa no CSS de eventos, a mesma aba saia como texto solto nas
   outras duas. */
.ltabs { display: flex; gap: 6px; flex-wrap: wrap; }

.ltab {
    padding: 9px 16px;
    font-size: 14.5px;
    font-weight: 650;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.ltab:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
.ltab.is-on { color: #fff; border-color: var(--brand); background: var(--brand); }

/* ---------- select com busca (select[data-combo]) ---------- */
.combo { position: relative; }
.combo__native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.combo__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 14.5px;
    text-align: left;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.combo__btn:hover { border-color: var(--brand-300); }
.combo__btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.combo[aria-busy] .combo__btn { opacity: .6; }

.combo__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo.is-empty .combo__label { color: var(--text-soft); }

.combo__arrow { flex-shrink: 0; font-size: 12px; color: var(--text-soft); transition: transform .15s ease; }
.combo__btn[aria-expanded="true"] .combo__arrow { transform: rotate(180deg); }

.combo__pop {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(15, 30, 27, .16);
}

.combo__pop[hidden] { display: none; }

.combo__search { position: relative; }
.combo__search > i { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); font-size: 13px; color: var(--text-soft); }

/**
 * O campo se estiliza sozinho, sem a classe .input: aquela regra mora no CSS
 * de pagina, que carrega depois deste, e a pagina vencia o padding que abre
 * espaco para a lupa. Componente global nao pode depender de regra de pagina.
 */
.combo__input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.combo__input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-100);
}

.combo__search:focus-within > i { color: var(--brand); }

.combo__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 250px;
    overflow-y: auto;
}

.combo__opt {
    padding: 10px 12px;
    font-size: 14.5px;
    color: var(--text);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.combo__opt[hidden] { display: none; }
.combo__opt--empty { color: var(--text-soft); }

/* o item sob o teclado e o ja escolhido sao estados diferentes, com espaco entre eles */
.combo__opt + .combo__opt { margin-top: 2px; }
.combo__opt.is-active { background: var(--surface-2); }
.combo__opt.is-on { font-weight: 650; color: var(--brand-700); background: var(--brand-50); }

.combo__none { margin: 10px 4px 4px; font-size: 14px; color: var(--text-muted); }
.combo__none[hidden] { display: none; }

/**
 * Cartao de uma linha de listagem: titulo, dados e acoes a direita.
 * Enquetes e promocoes usam o mesmo, entao ele mora aqui: preso ao css de
 * uma pagina, a outra abria com o cartao sem caixa nenhuma.
 */
.lcards { display: flex; flex-direction: column; gap: 12px; }

.lcard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color .15s ease;
}

.lcard:hover { border-color: var(--brand-300); }
.lcard.is-closed { background: var(--surface-2); }

.lcard__body { min-width: 0; }
.lcard__name { margin: 0 0 5px; font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.lcard__name a { color: var(--text); }
.lcard__name a:hover { color: var(--brand-700); }

.lcard__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 13.5px; color: var(--text-soft); }
.lcard__meta i { margin-right: 5px; }
.lcard__votes { font-weight: 650; color: var(--text-muted); }

.lcard__tag {
    padding: 2px 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-700);
    border-radius: var(--radius-pill);
    background: var(--brand-100);
}

.lcard__acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* enquete que esta num modulo do site nao pode ser apagada por baixo dele */
.lcard__locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 13px;
    color: var(--text-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

/* variacao menor do botao e o esconder: pertencem ao componente, nao a uma pagina */
.btn--sm { padding: 8px 13px; font-size: 14px; }
.btn[hidden] { display: none; }

.pager[hidden] { display: none; }

/* A dica agora e um balao solto no corpo da pagina, montado em painel-novo.js */
.tipfloat {
    position: fixed;
    z-index: 2000;
    display: none;
    max-width: 260px;
    padding: 8px 11px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    border-radius: var(--radius-sm);
    background: rgba(24, 32, 44, .96);
    pointer-events: none;
}

.tipfloat.is-on { display: block; }


/*
 * O spinner nasce escondido: ele so existe enquanto algo esta rodando, e a
 * regra ficava esquecida em cada tela nova.
 */
.spin { display: none; }

.is-busy .spin,
.is-saving .spin { display: block; }

/*
 * Caixa de selecao do painel. O desenho do navegador nao acompanha o resto,
 * entao o quadrado e a marca sao nossos.
 */
.app-main input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    border: 2px solid var(--text-soft);
    border-radius: 5px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.app-main input[type="checkbox"]:hover { border-color: var(--brand); }

.app-main input[type="checkbox"]:checked {
    border-color: var(--brand);
    background: var(--brand);
}

.app-main input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.app-main input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.app-main input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }