/* =================================================================
   PAINEL — linguagem do redesign (etapa 1: shell + lista de redirecionadores)

   Carregado DEPOIS de style.css e dark-mode.css nas páginas do painel
   (dashboard, account, help), que põem a classe `gp-app` no <body>.
   As telas que ainda não passaram pelo redesign continuam com os estilos
   antigos; tudo aqui usa o prefixo gp- para não colidir com o Bootstrap.

   Princípios (os mesmos da landing e do redesign do Dispario):
   - Bricolage Grotesque com tracking negativo nos títulos, Hanken no corpo,
     números tabulares onde há contagem.
   - Superfícies com linha fina + brilho interno no topo, em vez de sombra
     cinza genérica embaixo de cada card.
   - Verde da marca só onde há ação ou "tem vaga"; o resto é neutro.
   - Motion só em resposta ao usuário, mais um momento: os grupos enchendo
     na primeira carga da lista.
   ================================================================= */

/* ---------- tokens: tema claro (padrão) ---------- */
body.gp-app {
    --p-bg: #F3F5F4;
    --p-surface: #FFFFFF;
    --p-surface-2: #F7F9F8;
    --p-hover: rgba(14, 40, 26, 0.035);
    --p-line: rgba(14, 40, 26, 0.09);
    --p-line-strong: rgba(14, 40, 26, 0.16);
    --p-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --p-shadow: 0 1px 2px rgba(14, 40, 26, 0.05), 0 12px 32px -20px rgba(14, 40, 26, 0.25);

    --p-ink: #0E1A14;
    --p-ink-2: #34443C;
    --p-muted: #5F6F67;

    --p-green: #25D366;            /* fundo de botão / preenchimento */
    --p-green-ink: #0A7F3F;        /* verde como texto sobre a superfície */
    --p-on-green: #03210F;         /* texto sobre o verde (contraste ~10:1) */
    --p-green-soft: rgba(37, 211, 102, 0.12);

    --p-amber: #B86E00;
    --p-amber-fill: #F0A52B;
    --p-red: #C2362B;
    --p-red-fill: #E5574B;
    --p-tank: rgba(14, 40, 26, 0.08);
    /* Uma cor por bloco de estatística (cada bloco é uma medida só). Paleta
       validada para daltonismo e contraste nos dois temas, olhando os blocos
       vizinhos na grade: origem azul | campanhas laranja / aparelho rosa | local violeta. */
    --p-viz-blue: #2a78d6;
    --p-viz-orange: #eb6834;
    --p-viz-violet: #6250d6;
    --p-viz-magenta: #e87ba4;
    --p-data: rgba(14, 40, 26, 0.2);

    --p-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --p-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

    --p-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --p-radius: 14px;
    --p-radius-lg: 20px;

    background: var(--p-bg);
    color: var(--p-ink);
    font-family: var(--p-body);
    font-size: 0.9375rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- tokens: tema escuro ---------- */
body.gp-app.dark-mode {
    --p-bg: #080B0A;
    --p-surface: #0F1513;
    --p-surface-2: #141B18;
    --p-hover: rgba(255, 255, 255, 0.03);
    --p-line: rgba(255, 255, 255, 0.075);
    --p-line-strong: rgba(255, 255, 255, 0.13);
    --p-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --p-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.9);

    --p-ink: #ECF1EE;
    --p-ink-2: #C3CDC8;
    --p-muted: #8A9891;

    --p-green-ink: #5BF0A0;
    --p-green-soft: rgba(37, 211, 102, 0.14);

    --p-amber: #F5B544;
    --p-amber-fill: #E9A23B;
    --p-red: #FF8A7F;
    --p-red-fill: #E5574B;
    --p-tank: rgba(255, 255, 255, 0.07);
    --p-viz-blue: #3987e5;
    --p-viz-orange: #d95926;
    --p-viz-violet: #9085e9;
    --p-viz-magenta: #d55181;
    --p-data: rgba(255, 255, 255, 0.17);
}

/* Um só ponto de luz, no topo — o mesmo verde da landing, bem mais contido
   (o painel é para trabalhar, não para vender). */
body.gp-app.dark-mode {
    background:
        radial-gradient(900px 420px at 50% -160px, rgba(37, 211, 102, 0.11), transparent 70%),
        var(--p-bg) !important;
}

/* O conteúdo começa logo abaixo da barra (que agora é sticky, não fixed). */
body.gp-app #mainContent,
body.gp-app .main-content,
body.gp-app .hero-section {
    padding-top: 2.25rem;
}

/* ---------- foco visível em tudo que é clicável no shell ---------- */
.gp-bar a:focus-visible,
.gp-bar button:focus-visible,
.gp-btn:focus-visible,
.gp-icon-btn:focus-visible,
.gp-row:focus-visible,
.gp-copy:focus-visible,
.gp-footer a:focus-visible,
.gp-footer button:focus-visible {
    outline: 2px solid var(--p-green);
    outline-offset: 2px;
}

/* =================================================================
   Barra superior
   ================================================================= */
.gp-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: color-mix(in srgb, var(--p-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--p-line);
}
.gp-bar-inner {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    height: 72px;
}
.gp-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.gp-logo {
    height: 32px;
    width: auto;
}
.gp-logo-dark { display: none; }
body.dark-mode .gp-logo-dark { display: block; }
body.dark-mode .gp-logo-light { display: none; }

.gp-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}
.gp-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    height: 42px;
    padding: 0 0.95rem;
    border-radius: 11px;
    color: var(--p-muted);
    font-weight: 500;
    font-size: 0.975rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.gp-nav-link i {
    font-size: 0.95rem;
    opacity: 0.85;
}
.gp-nav-link:hover {
    color: var(--p-ink);
    background: var(--p-hover);
}
.gp-nav-link[aria-current="page"] {
    color: var(--p-ink);
    background: var(--p-surface);
    box-shadow: inset 0 0 0 1px var(--p-line), var(--p-highlight);
}

.gp-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}

/* Sino de novidades: o markup vem do novidades.js (classes do Bootstrap). */
.gp-actions #novidades-toggle {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    font-size: 1.05rem;
    justify-content: center;
    border-radius: 10px;
    color: var(--p-muted) !important;
}
.gp-actions #novidades-toggle:hover,
.gp-actions #novidades-toggle[aria-expanded="true"] {
    color: var(--p-ink) !important;
    background: var(--p-hover);
}
.gp-actions #novidades-toggle .d-lg-none {
    display: none !important;
}
.gp-actions .novidades-sino {
    color: inherit;
}
.gp-actions .novidades-badge {
    box-shadow: 0 0 0 2px var(--p-bg);
}

/* Conta: avatar com iniciais + nome */
.gp-account {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    height: 44px;
    padding: 0 0.7rem 0 0.3rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--p-ink);
    font-weight: 500;
    font-size: 0.975rem;
    transition: background-color 0.15s ease;
}
.gp-account:hover,
.gp-account[aria-expanded="true"] {
    background: var(--p-hover);
}
.gp-account::after {
    display: none !important;
}
.gp-account .fa-chevron-down {
    font-size: 0.65rem;
    color: var(--p-muted);
    transition: transform 0.2s var(--p-ease-out);
}
.gp-account[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}
.gp-account-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gp-avatar {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--p-green-soft);
    color: var(--p-green-ink);
    font-family: var(--p-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.28);
}

/* Menu da conta */
.gp-menu.dropdown-menu {
    min-width: 248px;
    padding: 0.375rem;
    border: 1px solid var(--p-line-strong);
    border-radius: var(--p-radius);
    background: var(--p-surface);
    box-shadow: var(--p-highlight), 0 18px 44px -18px rgba(0, 0, 0, 0.45);
    color: var(--p-ink);
    transform-origin: top right;
}
.gp-menu.show {
    animation: gp-menu-in 0.16s var(--p-ease-out);
}
@keyframes gp-menu-in {
    from { opacity: 0; transform: scale(0.97) translateY(-4px); }
}
.gp-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 9px;
    color: var(--p-ink);
    font-size: 0.9rem;
}
.gp-menu .dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--p-muted);
}
.gp-menu .dropdown-item:hover,
.gp-menu .dropdown-item:focus {
    background: var(--p-hover);
    color: var(--p-ink);
}
.gp-menu .gp-danger,
.gp-menu .gp-danger i {
    color: var(--p-red);
}
.gp-menu .dropdown-divider {
    margin: 0.375rem 0.25rem;
    border-color: var(--p-line);
    opacity: 1;
}
.gp-menu-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.4rem 0.4rem 0.65rem;
    font-size: 0.9rem;
}
.gp-seg {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-line);
}
.gp-seg button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 28px;
    padding: 0 0.6rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.gp-seg button .fa-check {
    display: none;
}
.gp-seg button[aria-pressed="true"] {
    background: var(--p-surface);
    color: var(--p-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 1px var(--p-line);
}
body.dark-mode .gp-seg button[aria-pressed="true"] {
    background: var(--p-surface-2);
}

/* =================================================================
   Botões
   ================================================================= */
.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 11px;
    font-family: var(--p-body);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.16s var(--p-ease-out),
        background-color 0.15s ease,
        box-shadow 0.2s ease;
}
.gp-btn:active {
    transform: scale(0.97);
}
/* Ação em andamento (setButtonBusy em utils.js): spinner no próprio botão */
.gp-btn.is-busy,
.gp-btn.is-busy:disabled {
    cursor: progress;
    opacity: 0.85;
}
.gp-btn-spinner {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: gp-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .gp-btn-spinner {
        animation-duration: 2s;
    }
}
.gp-btn-primary {
    background: var(--p-green);
    color: var(--p-on-green);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 8px 22px -10px rgba(37, 211, 102, 0.7);
}
.gp-btn-primary:hover {
    background: #3BE077;
    color: var(--p-on-green);
}
.gp-btn-ghost {
    background: var(--p-surface);
    color: var(--p-ink);
    box-shadow: inset 0 0 0 1px var(--p-line-strong), var(--p-highlight);
}
.gp-btn-ghost:hover {
    background: var(--p-surface-2);
    color: var(--p-ink);
}

.gp-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: var(--p-surface);
    color: var(--p-muted);
    box-shadow: inset 0 0 0 1px var(--p-line-strong), var(--p-highlight);
    transition: color 0.15s ease, transform 0.16s var(--p-ease-out);
}
.gp-icon-btn:hover {
    color: var(--p-ink);
}
.gp-icon-btn:active {
    transform: scale(0.95);
}
.gp-icon-btn.is-busy i {
    animation: gp-spin 0.8s linear infinite;
}
@keyframes gp-spin {
    to { transform: rotate(360deg); }
}

/* =================================================================
   Cabeçalho da página
   ================================================================= */
.gp-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.gp-title {
    margin: 0;
    font-family: var(--p-display) !important;
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.05;
    color: var(--p-ink) !important;
}
.gp-subtitle {
    margin: 0.5rem 0 0;
    color: var(--p-muted) !important;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}
.gp-subtitle strong {
    color: var(--p-ink);
    font-weight: 600;
}
.gp-head-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* =================================================================
   Uso do plano (antes flutuava no rodapé)
   ================================================================= */
.gp-usage {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--p-radius);
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-highlight);
    font-size: 0.875rem;
}
.gp-usage-label {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    white-space: nowrap;
}
.gp-usage-plan {
    font-weight: 600;
    color: var(--p-ink);
}
.gp-usage-count {
    color: var(--p-muted);
    font-variant-numeric: tabular-nums;
}
.gp-usage-count strong {
    color: var(--p-ink);
    font-weight: 600;
}
.gp-usage-track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--p-tank);
    overflow: hidden;
}
.gp-usage-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--p-green);
    transition: width 0.6s var(--p-ease-out);
}
.gp-usage[data-state="alto"] .gp-usage-fill { background: var(--p-amber-fill); }
.gp-usage[data-state="limite"] .gp-usage-fill { background: var(--p-red-fill); }
.gp-usage[data-state="ilimitado"] .gp-usage-track { display: none; }
.gp-usage[data-state="ilimitado"] {
    grid-template-columns: 1fr auto;
}
.gp-usage-link {
    color: var(--p-green-ink);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.gp-usage-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--p-green-ink);
}

/* Faixa da carência do antigo plano grátis (mesmo tom do chip "warn") */
.gp-carencia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--p-radius);
    background: rgba(240, 165, 43, 0.12);
    box-shadow: inset 0 0 0 1px rgba(240, 165, 43, 0.3);
    color: var(--p-ink);
    font-size: 0.875rem;
}
.gp-carencia[hidden] {
    display: none;
}
.gp-carencia > i {
    color: var(--p-amber);
}
.gp-carencia > span {
    flex: 1 1 16rem;
}

/* =================================================================
   Lista de redirecionadores
   ================================================================= */
.gp-list {
    border-radius: var(--p-radius-lg);
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-highlight), var(--p-shadow);
    overflow: hidden;
}
.gp-list-head,
.gp-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) 7.5rem 1.25rem;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.25rem;
}
.gp-list-head {
    height: 40px;
    border-bottom: 1px solid var(--p-line);
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}
.gp-list-head .gp-col-num {
    text-align: right;
}

.gp-row {
    position: relative;
    min-height: 84px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--p-line);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.gp-row:last-child {
    border-bottom: 0;
}
.gp-row:hover {
    background: var(--p-hover);
}

.gp-ident {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}
.gp-type {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--p-green-soft);
    color: var(--p-green-ink);
    font-size: 0.9rem;
}
.gp-type[data-type="NUMERO"] {
    background: rgba(56, 152, 236, 0.12);
    color: #2F7FD0;
}
body.dark-mode .gp-type[data-type="NUMERO"] {
    color: #7DB8F2;
}
.gp-ident-text {
    min-width: 0;
}
.gp-name {
    display: block;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--p-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--p-ink);
}
.gp-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    margin-top: 0.2rem;
    color: var(--p-muted);
    font-size: 0.85rem;
}
.gp-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gp-link-text b {
    color: var(--p-ink-2);
    font-weight: 500;
}
.gp-copy {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--p-muted);
    font-size: 0.78rem;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.16s var(--p-ease-out);
}
.gp-copy:hover {
    color: var(--p-ink);
    background: var(--p-hover);
}
.gp-copy:active {
    transform: scale(0.92);
}
.gp-copy.is-copied {
    color: var(--p-green-ink);
}
.gp-copy.is-copied i {
    animation: gp-pop 0.25s var(--p-ease-out);
}
@keyframes gp-pop {
    from { transform: scale(0.6); opacity: 0; }
}

/* Lotação: um "tanque" por grupo, preenchido de baixo para cima. */
.gp-capacity {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}
.gp-tanks {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 32px;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}
.gp-tank {
    position: relative;
    flex: 0 0 10px;
    height: 100%;
    border-radius: 3px;
    background: var(--p-tank);
    overflow: hidden;
}
.gp-tank > i {
    position: absolute;
    inset: auto 0 0 0;
    height: 100%;
    border-radius: 2px;
    background: var(--p-green);
    transform-origin: bottom;
    transform: scaleY(var(--fill, 0));
}
.gp-tanks-more {
    align-self: center;
    padding-right: 0.25rem;
    color: var(--p-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
/* Muitos grupos (redirecionadores grandes): tanques finos que dividem a
   largura disponível, para todos caberem na fileira. */
.gp-tanks.is-dense {
    gap: 2px;
    flex: 0 1 auto;
}
.gp-tanks.is-dense .gp-tank {
    flex: 0 1 7px;
    min-width: 3px;
    border-radius: 2px;
}
.gp-summary .gp-tanks.is-dense {
    gap: 3px;
}
.gp-summary .gp-tanks.is-dense .gp-tank {
    flex: 0 1 11px;
    border-radius: 3px;
}
.gp-tank[data-state="quase"] > i { background: var(--p-amber-fill); }
.gp-tank[data-state="cheio"] > i { background: var(--p-red-fill); }
.gp-tank[data-state="pausado"] {
    background: repeating-linear-gradient(-45deg, var(--p-tank) 0 2px, transparent 2px 4px);
}
.gp-tank[data-state="pausado"] > i { display: none; }

/* A primeira carga da lista mostra os grupos enchendo até o nível atual. */
.gp-list.is-entering .gp-tank > i {
    animation: gp-fill 0.7s var(--p-ease-out) both;
    animation-delay: calc(var(--i, 0) * 35ms + 80ms);
}
@keyframes gp-fill {
    from { transform: scaleY(0); }
}

.gp-capacity-text {
    min-width: 0;
    font-size: 0.85rem;
    color: var(--p-muted);
    line-height: 1.35;
}
.gp-capacity-text strong {
    display: block;
    color: var(--p-ink);
    font-weight: 600;
    white-space: nowrap;
}
.gp-capacity-text[data-state="cheio"] strong { color: var(--p-red); }
.gp-capacity-text[data-state="quase"] strong { color: var(--p-amber); }

/* Atendentes (redirecionador de números): iniciais empilhadas */
.gp-people {
    display: flex;
    flex-shrink: 0;
}
.gp-people span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-left: -6px;
    border-radius: 999px;
    background: var(--p-surface-2);
    box-shadow: 0 0 0 2px var(--p-surface), inset 0 0 0 1px var(--p-line-strong);
    color: var(--p-ink-2);
    font-size: 0.65rem;
    font-weight: 700;
}
.gp-people span:first-child {
    margin-left: 0;
}

.gp-today {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.gp-today strong {
    display: block;
    font-family: var(--p-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--p-ink);
}
.gp-today span {
    font-size: 0.8rem;
    color: var(--p-muted);
}

.gp-chevron {
    color: var(--p-muted);
    font-size: 0.8rem;
    transition: transform 0.2s var(--p-ease-out), color 0.15s ease;
}
.gp-row:hover .gp-chevron {
    color: var(--p-ink);
    transform: translateX(2px);
}

/* Carregando: linhas-esqueleto no lugar do modal "Carregando..." */
.gp-skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--p-tank) 0%, var(--p-hover) 50%, var(--p-tank) 100%);
    background-size: 200% 100%;
    animation: gp-shimmer 1.2s linear infinite;
}
@keyframes gp-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
.gp-row.is-skeleton {
    cursor: default;
}
.gp-row.is-skeleton:hover {
    background: transparent;
}

/* Vazio */
.gp-empty {
    padding: 3.5rem 1.5rem;
    text-align: center;
}
.gp-empty-art {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    margin-bottom: 1.25rem;
}
.gp-empty-art i {
    width: 12px;
    border-radius: 4px;
    background: var(--p-tank);
}
.gp-empty-art i:nth-child(1) { height: 45%; }
.gp-empty-art i:nth-child(2) { height: 75%; background: var(--p-green); }
.gp-empty-art i:nth-child(3) { height: 100%; }
.gp-empty h2 {
    margin: 0 0 0.5rem;
    font-family: var(--p-display) !important;
    font-size: 1.375rem !important;
    letter-spacing: -0.025em !important;
    color: var(--p-ink) !important;
}
.gp-empty p {
    max-width: 44ch;
    margin: 0 auto 1.5rem;
    color: var(--p-muted) !important;
}

/* =================================================================
   Rodapé
   ================================================================= */
.gp-footer {
    margin-top: auto;
    padding: 2.5rem 0 2rem;
    color: var(--p-muted);
    font-size: 0.8125rem;
}
.gp-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--p-line);
}
.gp-footer-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.gp-footer a,
.gp-footer button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--p-muted);
    text-decoration: none;
    font: inherit;
    transition: color 0.15s ease;
}
.gp-footer a:hover,
.gp-footer button:hover {
    color: var(--p-ink);
}
.gp-version {
    font-variant-numeric: tabular-nums;
}

/* =================================================================
   Responsivo
   ================================================================= */
@media (max-width: 991.98px) {
    .gp-list-head,
    .gp-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 5.5rem 1rem;
        gap: 1rem;
    }
}

@media (max-width: 767.98px) {
    .gp-bar-inner {
        gap: 0.75rem;
    }
    .gp-nav-link span,
    .gp-account-name,
    .gp-account .fa-chevron-down {
        display: none;
    }
    .gp-bar-inner {
        height: 64px;
    }
    .gp-logo {
        height: 28px;
    }
    .gp-nav-link {
        width: 44px;
        padding: 0;
        justify-content: center;
    }
    .gp-account {
        padding: 0 0.25rem;
    }

    .gp-page-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .gp-usage {
        grid-template-columns: 1fr auto;
    }
    .gp-usage-label {
        flex-wrap: wrap;
        gap: 0.15rem 0.6rem;
        white-space: normal;
    }
    .gp-usage-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .gp-list-head {
        display: none;
    }
    .gp-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "ident ident"
            "cap today";
        gap: 0.9rem 1rem;
        padding: 1rem;
    }
    .gp-ident { grid-area: ident; padding-right: 1.5rem; }
    .gp-capacity { grid-area: cap; }
    .gp-today { grid-area: today; }
    .gp-chevron {
        position: absolute;
        top: 1.6rem;
        right: 1rem;
    }

    .gp-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gp-list.is-entering .gp-tank > i,
    .gp-menu.show,
    .gp-copy.is-copied i,
    .gp-icon-btn.is-busy i {
        animation: none;
    }
    .gp-skel {
        animation: none;
    }
    .gp-btn,
    .gp-icon-btn,
    .gp-chevron,
    .gp-usage-fill {
        transition: none;
    }
}


/* =================================================================
   ETAPA 2 — DETALHE DO REDIRECIONADOR
   Cabeçalho com o link, resumo da lotação, abas e as quatro telas
   (Configurações, Grupos, Estatísticas, Leads). Boa parte do HTML das
   abas ainda é gerada com classes do Bootstrap; o bloco "pele" mais abaixo
   veste esses componentes só dentro de .gp-detail.
   ================================================================= */

.gp-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--p-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}
.gp-back i {
    font-size: 0.75rem;
    transition: transform 0.2s var(--p-ease-out);
}
.gp-back:hover {
    color: var(--p-ink);
}
.gp-back:hover i {
    transform: translateX(-2px);
}

.gp-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.gp-detail-ident {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}
.gp-type-lg {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 1.2rem;
}
.gp-detail-ident-text {
    min-width: 0;
}
.gp-detail-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.gp-detail-title-row .gp-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gp-link-lg {
    margin-top: 0.35rem;
    font-size: 0.9375rem;
}

/* Selo pequeno: tipo do redirecionador, estado do grupo, uso do plano */
.gp-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 24px;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
    color: var(--p-ink-2);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.gp-chip[data-tone="ok"] {
    background: var(--p-green-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.28);
    color: var(--p-green-ink);
}
.gp-chip[data-tone="warn"] {
    background: rgba(240, 165, 43, 0.12);
    box-shadow: inset 0 0 0 1px rgba(240, 165, 43, 0.3);
    color: var(--p-amber);
}
.gp-chip[data-tone="full"] {
    background: rgba(229, 87, 75, 0.1);
    box-shadow: inset 0 0 0 1px rgba(229, 87, 75, 0.3);
    color: var(--p-red);
}
.gp-chip[data-tone="muted"] {
    color: var(--p-muted);
}

/* Botões extras */
.gp-btn-sm {
    height: 34px;
    padding: 0 0.85rem;
    border-radius: 9px;
    font-size: 0.85rem;
}
.gp-btn-quiet-danger {
    background: transparent;
    color: var(--p-red);
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
}
.gp-btn-quiet-danger:hover {
    background: rgba(229, 87, 75, 0.08);
    color: var(--p-red);
    box-shadow: inset 0 0 0 1px rgba(229, 87, 75, 0.35);
}
.gp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.gp-icon-btn-sm {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.85rem;
}
.gp-icon-btn-danger:hover {
    color: var(--p-red);
    box-shadow: inset 0 0 0 1px rgba(229, 87, 75, 0.35);
}

/* ---------- Resumo ---------- */
.gp-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    min-height: 92px;
    margin-bottom: 1.75rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--p-radius-lg);
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-highlight), var(--p-shadow);
}
.gp-summary:empty {
    display: none;
}
.gp-summary .gp-tanks {
    height: 48px;
    gap: 5px;
}
.gp-summary .gp-tank {
    flex-basis: 14px;
    border-radius: 4px;
}
.gp-summary .gp-capacity {
    gap: 1.25rem;
}
.gp-summary .gp-capacity-text {
    font-size: 0.9rem;
}
.gp-summary .gp-capacity-text strong {
    font-family: var(--p-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.1rem;
}
.gp-summary .gp-people span {
    width: 36px;
    height: 36px;
    margin-left: -8px;
    font-size: 0.8rem;
}
.gp-summary .gp-people span:first-child {
    margin-left: 0;
}
.gp-summary-cap.is-entering .gp-tank > i {
    animation: gp-fill 0.7s var(--p-ease-out) both;
    animation-delay: calc(var(--i, 0) * 35ms + 80ms);
}
.gp-summary-cells {
    display: flex;
    margin: 0;
}
.gp-summary-cells > div {
    padding: 0.15rem 1.5rem;
    border-left: 1px solid var(--p-line);
}
.gp-summary-cells dt {
    margin-bottom: 0.25rem;
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}
.gp-summary-cells dd {
    margin: 0;
    color: var(--p-ink);
    font-family: var(--p-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gp-summary-cells dd.is-alert {
    color: var(--p-red);
}

/* ---------- Abas ---------- */
.gp-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--p-line);
}
.gp-tabs {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 0.25rem;
    margin: 0 0 -1px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.gp-tabs::-webkit-scrollbar {
    display: none;
}
body.gp-app .gp-tabs .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 46px;
    padding: 0 0.9rem;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    color: var(--p-muted) !important;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s ease;
}
body.gp-app .gp-tabs .nav-link::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0;
    width: auto;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--p-green);
    transform: scaleX(0);
    transition: transform 0.2s var(--p-ease-out);
}
body.gp-app .gp-tabs .nav-link:hover {
    color: var(--p-ink) !important;
}
body.gp-app .gp-tabs .nav-link.active {
    color: var(--p-ink) !important;
    font-weight: 600;
}
body.gp-app .gp-tabs .nav-link.active::after {
    transform: scaleX(1);
}
.gp-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-line);
    color: var(--p-muted);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    vertical-align: 0.1em;
}
.gp-tab-count.is-accent {
    background: var(--p-green);
    box-shadow: none;
    color: var(--p-on-green);
}

/* ---------- Painel genérico ---------- */
.gp-panel {
    position: relative;
    margin-bottom: 1.5rem;
    border-radius: var(--p-radius-lg);
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-highlight), var(--p-shadow);
}
.gp-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0;
}
.gp-panel-head-stack {
    display: block;
}
.gp-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--p-display) !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: var(--p-ink) !important;
}
.gp-panel-sub {
    max-width: 62ch;
    margin: 0.35rem 0 0;
    color: var(--p-muted) !important;
    font-size: 0.875rem;
    line-height: 1.5;
}
.gp-panel-sub strong {
    color: var(--p-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.gp-panel-body {
    padding: 1.25rem 1.5rem 1.5rem;
}
.gp-panel-body-flush {
    padding: 1rem 0 0;
}
.gp-panel-foot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--p-line);
}
#numeros-adicionais {
    scroll-margin-top: 5.5rem; /* o link do painel rola até aqui, e o topo é fixo */
}
.gp-extra-packs {
    flex-wrap: wrap;
}
.gp-extra-packs .gp-panel-note {
    flex: 1 1 14rem;
}
.gp-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--p-line);
    border-radius: 0.5rem;
}
.gp-stepper button {
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}
.gp-stepper button:disabled {
    opacity: 0.4;
    cursor: default;
}
.gp-stepper output {
    min-width: 2rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.gp-panel-note {
    color: var(--p-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.gp-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 1.5rem 0.75rem;
    color: var(--p-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.gp-hint > i {
    margin-top: 0.2rem;
}
.gp-hint strong {
    color: var(--p-ink-2);
    font-weight: 600;
}

/* ---------- Configurações: linhas de ajuste ---------- */
.gp-section {
    padding: 1.5rem 1.5rem 0.5rem;
    border-bottom: 1px solid var(--p-line);
}
.gp-section .gp-section-title {
    margin-bottom: 0.5rem;
}
.gp-field {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0.6rem 2.5rem;
    padding: 1rem 0;
}
.gp-field + .gp-field {
    border-top: 1px dashed var(--p-line);
}
.gp-field-label label {
    display: block;
    margin: 0 0 0.25rem;
    color: var(--p-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}
.gp-field-label p {
    max-width: 52ch;
    margin: 0;
    color: var(--p-muted) !important;
    font-size: 0.85rem;
    line-height: 1.5;
}
.gp-field-label p b {
    color: var(--p-ink-2);
    font-weight: 600;
}
.gp-field-control {
    align-self: center;
}
.gp-field-control-sm {
    max-width: 220px;
}
.gp-logo-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.gp-form-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 0 0 var(--p-radius-lg) var(--p-radius-lg);
    background: color-mix(in srgb, var(--p-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.gp-form-foot-hint {
    color: var(--p-muted);
    font-size: 0.8125rem;
}

/* Recurso bloqueado pelo plano: em vez do cadeado solto no canto (que caía
   em cima do campo), um selo com o nome do plano ao lado do rótulo. */
body.gp-app .gp-detail .premium-feature.locked {
    opacity: 1;
}
body.gp-app .gp-detail .premium-feature.locked::after {
    display: none;
}
body.gp-app .gp-detail .gp-field.premium-feature.locked .gp-field-control,
body.gp-app .gp-detail .gp-field.premium-feature.locked .gp-field-label p,
body.gp-app .gp-detail .gp-panel.premium-feature.locked .gp-panel-body,
body.gp-app .gp-detail .gp-panel.premium-feature.locked .gp-panel-head .gp-btn,
body.gp-app .gp-detail .gp-panel.premium-feature.locked .gp-period {
    opacity: 0.55;
}
.gp-plan-chip {
    display: none;
    align-items: center;
    height: 20px;
    margin-left: 0.5rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: rgba(240, 165, 43, 0.14);
    box-shadow: inset 0 0 0 1px rgba(240, 165, 43, 0.35);
    color: var(--p-amber);
    font-family: var(--p-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: 0.1em;
    white-space: nowrap;
}
.premium-feature.locked .gp-plan-chip {
    display: inline-flex;
}
body.gp-app .gp-detail .premium-feature.locked,
body.gp-app .gp-detail .premium-feature.locked * {
    cursor: pointer;
}

/* ---------- Grupos ---------- */
.gp-groups {
    border-top: 1px solid var(--p-line);
}
body.gp-app .gp-detail .gp-group {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto 6.5rem auto;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0.9rem 1.5rem;
    /* !important: o dark-mode.css antigo pinta .group-item com !important */
    border: 0 !important;
    border-bottom: 1px solid var(--p-line) !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    transition: background-color 0.15s ease;
}
body.gp-app .gp-detail .gp-group:last-child {
    border-bottom: 0 !important;
    border-radius: 0 0 var(--p-radius-lg) var(--p-radius-lg);
}
body.gp-app .gp-detail .gp-group:hover {
    background: var(--p-hover) !important;
}
.gp-group-number {
    grid-template-columns: auto auto minmax(0, 1fr) 6.5rem auto auto !important;
}
.gp-group-number.is-paused .gp-group-name,
.gp-group-number.is-paused .gp-person {
    opacity: 0.55;
}
.gp-group .gp-chip {
    justify-self: start;
}
.gp-group .group-drag-handle {
    display: grid;
    place-items: center;
    width: 20px;
    height: 32px;
    color: var(--p-muted);
    opacity: 0.6;
    cursor: grab;
    transition: opacity 0.15s ease;
}
.gp-group:hover .group-drag-handle {
    opacity: 1;
}
.gp-tank-lg {
    flex: none;
    width: 12px;
    height: 40px;
    border-radius: 4px;
}
.gp-person {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(56, 152, 236, 0.12);
    color: #2F7FD0;
    font-size: 0.75rem;
    font-weight: 700;
}
body.dark-mode .gp-person {
    color: #7DB8F2;
}
.gp-group-main {
    min-width: 0;
}
/* Desktop: nome e link na mesma linha, para dezenas de grupos caberem na tela */
@media (min-width: 992px) {
    .gp-group:not(.gp-group-number) .gp-group-main {
        display: grid;
        grid-template-columns: minmax(120px, 210px) minmax(0, 1fr);
        align-items: center;
        column-gap: 1rem;
    }
    .gp-group:not(.gp-group-number) .gp-group-name {
        margin-bottom: 0;
    }
    .gp-group:not(.gp-group-number) .gp-group-warn {
        grid-column: 2;
    }
    body.gp-app .gp-detail .gp-group:not(.gp-group-number) {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
    .gp-group:not(.gp-group-number) .gp-tank-lg {
        height: 32px;
    }
}
.gp-group[hidden] {
    display: none !important;
}
.gp-period-count {
    margin-left: 0.3rem;
    color: var(--p-muted);
    font-variant-numeric: tabular-nums;
}
.gp-group-name {
    margin-bottom: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--p-ink);
    font-weight: 600;
}
.gp-group-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 460px;
}
.gp-group-link .input-group {
    max-width: 240px;
}
.gp-group-warn {
    margin-top: 0.4rem;
    color: var(--p-amber);
    font-size: 0.8rem;
}
.gp-group-warn i {
    margin-right: 0.35rem;
}
.gp-group-slots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--p-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gp-group-slots span {
    color: var(--p-muted);
}
.gp-group-slots input {
    width: 84px;
    text-align: right;
}
.gp-group.sortable-ghost {
    opacity: 0.4;
}
.gp-group.sortable-chosen {
    background: var(--p-surface-2) !important;
}

/* Formulário "Adicionar grupo" */
.gp-detail #group-rows .group-row + .group-row {
    margin-top: 0.75rem;
}
.gp-detail .group-row-divider {
    display: none;
}

/* Ferramentas do WhatsApp (VIP): eram dois banners verdes chamativos;
   agora ficam como painéis de ferramenta, no mesmo tom do resto. */
body.gp-app .gp-detail .sync-banners-row {
    margin-bottom: 1.5rem;
    gap: 1rem;
}
body.gp-app .gp-detail .sync-banner {
    padding: 1.1rem 1.25rem;
    border-radius: var(--p-radius-lg);
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-highlight);
    color: var(--p-ink);
}
body.gp-app .gp-detail .sync-banner-glow {
    display: none;
}
body.gp-app .gp-detail .sync-banner--compact .sync-banner-content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.4rem 0.9rem;
}
body.gp-app .gp-detail .sync-banner-icon {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--p-green-soft);
    color: var(--p-green-ink);
    font-size: 1rem;
    box-shadow: none;
}
body.gp-app .gp-detail .sync-banner-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--p-ink);
    font-family: var(--p-display);
    font-size: 0.975rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
body.gp-app .gp-detail .sync-banner-vip {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(240, 165, 43, 0.14);
    box-shadow: inset 0 0 0 1px rgba(240, 165, 43, 0.35);
    color: var(--p-amber);
    font-size: 0.68rem;
    font-weight: 700;
}
body.gp-app .gp-detail .sync-banner-subtitle,
body.gp-app .gp-detail .sync-banner-meta {
    color: var(--p-muted) !important;
    font-size: 0.85rem;
    opacity: 1;
}
body.gp-app .gp-detail .sync-banner--compact .sync-banner-btn {
    grid-column: 2;
    width: auto;
    height: 34px;
    margin-top: 0.4rem;
    padding: 0 0.85rem;
    justify-self: start;
    border-radius: 9px;
    background: var(--p-surface-2);
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
    color: var(--p-ink);
    font-size: 0.85rem;
    font-weight: 600;
}
body.gp-app .gp-detail .sync-banner--compact .sync-banner-btn:hover {
    background: var(--p-hover);
    transform: none;
}
body.gp-app .gp-detail .sync-banner.vip-locked {
    opacity: 0.7;
}

/* ---------- Estatísticas ---------- */
.gp-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.gp-stats-grid > .gp-panel {
    margin-bottom: 0;
}
.gp-stat-panel .gp-panel-head {
    align-items: center;
    flex-wrap: wrap;
}
body.gp-app .gp-detail .access-chart-wrapper {
    height: 280px;
}
.access-chart-wrapper.is-empty {
    height: auto !important;
}
.gp-chart-empty,
.gp-rank-empty {
    margin: 0;
    padding: 2rem 0;
    color: var(--p-muted) !important;
    text-align: center;
    font-size: 0.9rem;
}

/* Hoje / 7 dias / 30 dias */
.gp-period {
    display: inline-flex;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 10px;
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-line);
}
.gp-period label {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 0.6rem;
    border-radius: 7px;
    color: var(--p-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.gp-period label:hover {
    color: var(--p-ink);
}
.gp-period .btn-check:checked + label {
    background: var(--p-surface);
    color: var(--p-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 0 1px var(--p-line);
}
body.dark-mode .gp-period .btn-check:checked + label {
    background: var(--p-surface-2);
}
.gp-period .btn-check:focus-visible + label {
    outline: 2px solid var(--p-green);
    outline-offset: 1px;
}
.gp-period .btn-check:disabled + label {
    cursor: not-allowed;
}

/* Sub-abas (Aparelho/Sistema, Cidade/Estado/...) */
.gp-subtabs {
    display: flex;
    gap: 0.25rem;
    margin: -0.25rem 0 0.9rem;
    padding: 0;
    border: 0;
}
body.gp-app .gp-subtabs .nav-link {
    display: inline-flex;
    align-items: center;
    height: 28px;
    /* !important: style.css força padding 0.5rem 1rem em todo .nav-link */
    padding: 0 0.6rem !important;
    border: 0 !important;
    border-radius: 7px;
    background: none !important;
    color: var(--p-muted) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
}
body.gp-app .gp-subtabs .nav-link::after {
    display: none;
}
body.gp-app .gp-subtabs .nav-link:hover {
    color: var(--p-ink) !important;
}
body.gp-app .gp-subtabs .nav-link.active {
    background: var(--p-hover) !important;
    color: var(--p-ink) !important;
    box-shadow: inset 0 0 0 1px var(--p-line);
}
.gp-scroll-list {
    max-height: 340px;
    overflow-y: auto;
}

/* Ranking (origem, aparelho, localização) */
.gp-rank {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gp-rank-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 36px;
    padding: 0 0.75rem;
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.875rem;
}
.gp-rank-bar {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 8px;
    /* A cor do bloco (--viz, definida no painel) bem clara atrás do texto */
    background: color-mix(in srgb, var(--viz, var(--p-green)) 16%, transparent);
}
body.dark-mode .gp-rank-bar {
    background: color-mix(in srgb, var(--viz, var(--p-green)) 24%, transparent);
}
.gp-rank-label,
.gp-rank-value {
    position: relative;
}
.gp-rank-label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--p-ink);
    font-weight: 500;
}
.gp-rank-label i {
    width: 16px;
    color: var(--viz, var(--p-muted));
    text-align: center;
}
/* Origem dos acessos: o ícone leva a cor da rede (a barra continua na cor do bloco) */
.gp-rank-label i.gp-brand-facebook { color: #1877F2; }
.gp-rank-label i.gp-brand-none { color: var(--p-muted); }
.gp-rank-label i.gp-brand-youtube { color: #FF0033; }
.gp-rank-label i.gp-brand-tiktok {
    color: var(--p-ink);
    /* As duas sombras do logo do TikTok, discretas */
    text-shadow: -1px -1px 0 #25F4EE, 1px 1px 0 #FE2C55;
}
.gp-rank-label i.gp-brand-instagram {
    background: linear-gradient(45deg, #F58529 10%, #DD2A7B 50%, #8134AF 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gp-rank-value {
    flex-shrink: 0;
    color: var(--p-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.gp-rank-value span {
    display: inline-block;
    min-width: 3.4rem;
    margin-left: 0.5rem;
    color: var(--p-muted);
    font-weight: 400;
    text-align: right;
}

/* Ranking dos links de campanha (markup do dashboard.js) */
body.gp-app .gp-detail .campaign-rank-row {
    padding: 0.55rem 0;
    border: 0;
    background: none;
}
body.gp-app .gp-detail .campaign-rank-bar {
    height: 6px;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: var(--p-tank);
}
body.gp-app .gp-detail .campaign-rank-bar span {
    border-radius: 999px;
    background: var(--viz, var(--p-green));
}
/* "Link principal" é a referência: cinza */
body.gp-app .gp-detail .campaign-rank-row--main .campaign-rank-bar span {
    background: var(--p-data);
}
body.gp-app .gp-detail .campaign-rank-row:not(.campaign-rank-row--main) .fa-bullseye {
    color: var(--viz, var(--p-green)) !important;
}
body.gp-app .gp-detail .border-top,
body.gp-app .gp-detail .border-bottom {
    border-color: var(--p-line) !important;
}
body.gp-app .gp-detail .campaign-rank-value {
    font-variant-numeric: tabular-nums;
}

/* ---------- Leads ---------- */
.gp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1.5rem;
    border-radius: var(--p-radius-lg);
    background: var(--p-surface);
    border: 1px solid var(--p-line);
    box-shadow: var(--p-highlight), var(--p-shadow);
}
.gp-stat {
    padding: 1.1rem 1.5rem;
}
.gp-stat + .gp-stat {
    border-left: 1px solid var(--p-line);
}
.gp-stat-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}
.gp-stat-value {
    display: block;
    color: var(--p-ink);
    font-family: var(--p-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.gp-stat-value.is-accent {
    color: var(--p-green-ink);
}
.gp-leads .gp-panel-head .row {
    margin-top: 0.9rem !important;
}
body.gp-app .gp-detail .leads-table {
    margin: 0;
    color: var(--p-ink);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--p-hover);
    --bs-table-color: var(--p-ink);
    --bs-table-hover-color: var(--p-ink);
}
body.gp-app .gp-detail .leads-table > :not(caption) > * > * {
    padding: 0.8rem 1rem;
    border-color: var(--p-line);
    background: transparent;
    color: var(--p-ink);
}
body.gp-app .gp-detail .leads-table th {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
body.gp-app .gp-detail .leads-table td:first-child,
body.gp-app .gp-detail .leads-table th:first-child {
    padding-left: 1.5rem;
}
body.gp-app .gp-detail .leads-table td:last-child,
body.gp-app .gp-detail .leads-table th:last-child {
    padding-right: 1.5rem;
}
body.gp-app .gp-detail .lead-status {
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
}
body.gp-app .gp-detail .lead-status--pending {
    background: rgba(240, 165, 43, 0.12);
    color: var(--p-amber);
}
body.gp-app .gp-detail .lead-status--notified {
    background: var(--p-green-soft);
    color: var(--p-green-ink);
}

/* ---------- Vazios ---------- */
.gp-empty-sm {
    padding: 2.5rem 1.5rem;
}
.gp-empty-sm h2 {
    font-size: 1.125rem !important;
}
body.gp-app .gp-detail .campaign-empty {
    padding: 2rem 1rem;
    color: var(--p-muted);
    text-align: center;
}
body.gp-app .gp-detail .campaign-empty > i {
    color: var(--p-muted);
    opacity: 0.6;
}
body.gp-app .gp-detail .campaign-empty .text-dark {
    color: var(--p-ink) !important;
}

/* =================================================================
   Pele: componentes do Bootstrap gerados pelo JS, dentro do detalhe
   ================================================================= */
body.gp-app .gp-detail .form-control,
body.gp-app .gp-detail .form-select {
    min-height: 42px;
    border: 1px solid var(--p-line-strong);
    border-radius: 10px;
    background-color: var(--p-surface-2);
    color: var(--p-ink);
    font-size: 0.9375rem;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
body.gp-app .gp-detail .form-control-sm,
body.gp-app .gp-detail .form-select-sm {
    min-height: 34px;
    border-radius: 8px;
    font-size: 0.85rem;
}
body.gp-app .gp-detail .form-control::placeholder {
    color: var(--p-muted);
    opacity: 0.8;
}
body.gp-app .gp-detail .form-control:hover,
body.gp-app .gp-detail .form-select:hover {
    border-color: color-mix(in srgb, var(--p-ink) 22%, transparent);
}
body.gp-app .gp-detail .form-control:focus,
body.gp-app .gp-detail .form-select:focus {
    border-color: var(--p-green);
    background-color: var(--p-surface);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}
body.gp-app .gp-detail .form-control:disabled,
body.gp-app .gp-detail .form-select:disabled {
    opacity: 0.6;
}
body.gp-app .gp-detail .input-group-text {
    border: 1px solid var(--p-line-strong);
    border-radius: 10px 0 0 10px;
    background: var(--p-hover);
    color: var(--p-muted);
    font-size: 0.9rem;
}
body.gp-app .gp-detail .input-group > .form-control {
    border-radius: 0 10px 10px 0;
}
body.gp-app .gp-detail .input-group-sm .input-group-text {
    border-radius: 8px 0 0 8px;
}
body.gp-app .gp-detail .input-group-sm > .form-control {
    border-radius: 0 8px 8px 0;
}
body.gp-app .gp-detail .form-label {
    margin-bottom: 0.35rem;
    color: var(--p-ink);
    font-size: 0.875rem;
    font-weight: 600;
}
body.gp-app .gp-detail .form-text {
    color: var(--p-muted);
    font-size: 0.8rem;
}

body.gp-app .gp-detail .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: 9px;
    font-weight: 600;
    transition: transform 0.16s var(--p-ease-out), background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
body.gp-app .gp-detail .btn:active {
    transform: scale(0.97);
}
body.gp-app .gp-detail .btn i.me-1 {
    margin-right: 0 !important;
}
body.gp-app .gp-detail .btn-success {
    border: 0;
    background: var(--p-green);
    color: var(--p-on-green);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
}
body.gp-app .gp-detail .btn-success::after {
    display: none;
}
body.gp-app .gp-detail .btn-success:hover {
    background: #3BE077;
    color: var(--p-on-green);
}
body.gp-app .gp-detail .btn-outline-secondary,
body.gp-app .gp-detail .btn-outline-success,
body.gp-app .gp-detail .btn-outline-dark {
    border: 0;
    background: var(--p-surface);
    color: var(--p-ink);
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
}
body.gp-app .gp-detail .btn-outline-secondary:hover,
body.gp-app .gp-detail .btn-outline-success:hover,
body.gp-app .gp-detail .btn-outline-dark:hover {
    background: var(--p-surface-2);
    color: var(--p-ink);
}
body.gp-app .gp-detail .btn-outline-danger {
    border: 0;
    background: transparent;
    color: var(--p-muted);
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
}
body.gp-app .gp-detail .btn-outline-danger:hover {
    background: rgba(229, 87, 75, 0.08);
    color: var(--p-red);
    box-shadow: inset 0 0 0 1px rgba(229, 87, 75, 0.35);
}

body.gp-app .gp-detail .alert {
    display: flex;
    border: 1px solid var(--p-line);
    border-radius: var(--p-radius);
    font-size: 0.875rem;
}
body.gp-app .gp-detail .alert.d-none {
    display: none !important;
}
body.gp-app .gp-detail .alert-warning {
    background: rgba(240, 165, 43, 0.1);
    border-color: rgba(240, 165, 43, 0.3);
    color: var(--p-ink);
}
body.gp-app .gp-detail .alert-info {
    background: var(--p-hover);
    color: var(--p-ink-2);
}

body.gp-app .gp-detail .campaign-form {
    padding: 1.1rem;
    border: 1px solid var(--p-line);
    border-radius: var(--p-radius);
    background: var(--p-surface-2);
}
body.gp-app .gp-detail .campaign-item {
    padding: 0.9rem 0;
    border: 0;
    border-top: 1px solid var(--p-line);
    border-radius: 0;
    background: transparent;
}
body.gp-app .gp-detail .campaign-item:first-child {
    border-top: 0;
}
body.gp-app .gp-detail .campaign-item-name {
    color: var(--p-ink);
    font-weight: 600;
}
body.gp-app .gp-detail .campaign-item-url {
    color: var(--p-muted);
    font-size: 0.85rem;
}
body.gp-app .gp-detail .campaign-tag-badge {
    border-radius: 999px;
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
    color: var(--p-ink-2);
}
body.gp-app .gp-detail .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 2px;
    color: var(--p-muted) !important;
}

/* ---------- Detalhe: responsivo ---------- */
@media (max-width: 1199.98px) {
    /* minmax(0, 1fr): sem isso a coluna cresce até caber todos os tanques
       (34 grupos) e a página ganha rolagem lateral no celular */
    .gp-summary {
        grid-template-columns: minmax(0, 1fr);
    }
    .gp-summary > * {
        min-width: 0;
    }
}

/* Celular: o texto da lotação em cima e os tanques embaixo, na largura toda
   (lado a lado não cabem 34 grupos e o texto) */
@media (max-width: 575.98px) {
    .gp-summary .gp-capacity {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.75rem;
    }
    .gp-summary .gp-tanks {
        width: 100%;
    }
    .gp-summary-cells > div:first-child {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 991.98px) {
    .gp-stats-grid {
        grid-template-columns: 1fr;
    }
    .gp-field {
        grid-template-columns: 1fr;
    }
    .gp-field-control-sm {
        max-width: none;
    }
    body.gp-app .gp-detail .gp-group,
    .gp-group-number {
        grid-template-columns: auto auto minmax(0, 1fr) auto !important;
        grid-template-areas:
            "drag tank main del"
            "drag tank slots chip";
        row-gap: 0.6rem;
    }
    .gp-group .group-drag-handle { grid-area: drag; }
    .gp-group > .gp-tank-lg,
    .gp-group > .gp-person { grid-area: tank; }
    .gp-group-main { grid-area: main; }
    .gp-group-slots { grid-area: slots; }
    .gp-group > .gp-chip { grid-area: chip; justify-self: end; }
    .gp-group > .gp-icon-btn-danger { grid-area: del; }
    .gp-group-number > .gp-btn { grid-area: slots; justify-self: start; }
}

@media (max-width: 767.98px) {
    .gp-detail-head {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .gp-detail-title-row {
        flex-wrap: wrap;
        gap: 0.4rem 0.6rem;
    }
    .gp-detail-title-row .gp-title {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .gp-link-lg .gp-link-text {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .gp-detail-ident {
        align-items: flex-start;
    }
    body.gp-app .gp-detail .gp-group,
    .gp-group-number {
        grid-template-columns: auto auto auto minmax(0, 1fr) auto !important;
        grid-template-areas:
            "drag tank main main main"
            "drag tank slots chip del";
        column-gap: 0.6rem;
    }
    .gp-group > .gp-chip { justify-self: start; }
    /* Sem espaço para o selo: o tanque e o "de 1.024" já dizem se lotou */
    .gp-group:not(.gp-group-number) > .gp-chip {
        display: none;
    }
    .gp-group-slots input {
        width: 72px;
    }
    .gp-panel-head {
        flex-wrap: wrap;
    }
    /* As abas rolam para o lado: o esmaecido na borda mostra que há mais */
    .gp-tabs {
        -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
        mask-image: linear-gradient(to right, #000 82%, transparent);
        padding-right: 1.5rem;
    }
    .gp-group-link {
        max-width: none;
    }
    .gp-group-link .input-group {
        max-width: none;
    }
    .gp-detail-head .gp-head-actions {
        align-self: stretch;
    }
    .gp-type-lg {
        width: 44px;
        height: 44px;
    }
    .gp-summary {
        padding: 1.1rem;
    }
    .gp-summary-cells {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .gp-summary-cells > div {
        padding: 0 0.75rem;
    }
    .gp-summary-cells dd {
        font-size: 1.05rem;
        white-space: normal;
    }
    .gp-section,
    .gp-panel-head,
    .gp-panel-body {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
    .gp-hint {
        margin-left: 1.1rem;
        margin-right: 1.1rem;
    }
    body.gp-app .gp-detail .gp-group {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .gp-form-foot {
        padding: 0.9rem 1.1rem;
    }
    .gp-form-foot-hint {
        display: none;
    }
    .gp-form-foot .gp-btn {
        flex: 1;
    }
    .gp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .gp-stat:nth-child(3) {
        border-left: 0;
    }
    .gp-stat:nth-child(n + 3) {
        border-top: 1px solid var(--p-line);
    }
    .gp-stat-panel .gp-panel-head {
        flex-direction: column;
        align-items: flex-start;
    }
    body.gp-app .gp-detail .premium-feature.locked[data-plan-label]::after {
        top: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gp-summary-cap.is-entering .gp-tank > i {
        animation: none;
    }
    body.gp-app .gp-tabs .nav-link::after,
    .gp-back i {
        transition: none;
    }
}


/* =================================================================
   ETAPA 3 — NOVO REDIRECIONADOR
   Mesmas linhas de ajuste das Configurações, empilhadas (rótulo em cima)
   porque o formulário divide a largura com a prévia do link.
   ================================================================= */
.gp-create .gp-page-head {
    margin-bottom: 1.75rem;
}
.gp-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 1.5rem;
}
.gp-create-layout > .gp-panel {
    margin-bottom: 0;
}

/* Campos empilhados */
.gp-settings-stacked .gp-field {
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
.gp-settings-stacked .gp-field-label p {
    max-width: none;
}
.gp-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    border-top: 1px dashed var(--p-line);
}
.gp-field-row > .gp-field {
    border-top: 0;
}

/* Escolha do tipo: dois cartões grandes, o selecionado com borda verde */
.gp-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0.75rem 0 1rem;
}
.gp-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 1.1rem 1.15rem 1.15rem;
    border-radius: var(--p-radius);
    background: var(--p-surface-2);
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
    cursor: pointer;
    transition: box-shadow 0.15s ease, background-color 0.15s ease, transform 0.16s var(--p-ease-out);
}
.gp-choice:hover {
    background: var(--p-hover);
}
.gp-choice:active {
    transform: scale(0.99);
}
.btn-check:checked + .gp-choice {
    background: color-mix(in srgb, var(--p-green) 7%, var(--p-surface));
    box-shadow: inset 0 0 0 2px var(--p-green);
}
.btn-check:focus-visible + .gp-choice {
    outline: 2px solid var(--p-green);
    outline-offset: 2px;
}
.gp-choice-art {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 30px;
    margin-bottom: 0.6rem;
}
.gp-choice-art .gp-tank {
    flex: 0 0 9px;
    height: 100%;
}
.gp-choice-art.gp-people {
    align-items: center;
}
.gp-choice-art.gp-people span {
    width: 30px;
    height: 30px;
    margin-left: -8px;
    background: rgba(56, 152, 236, 0.12);
    color: #2F7FD0;
    font-size: 0.68rem;
}
body.dark-mode .gp-choice-art.gp-people span {
    color: #7DB8F2;
}
.gp-choice-art.gp-people span:first-child {
    margin-left: 0;
}
.gp-choice-title {
    color: var(--p-ink);
    font-family: var(--p-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.gp-choice-text {
    color: var(--p-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}
.gp-choice-check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--p-green);
    font-size: 1.1rem;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.2s var(--p-ease-out);
}
.btn-check:checked + .gp-choice .gp-choice-check {
    opacity: 1;
    transform: scale(1);
}

/* Prévia do link */
.gp-create-preview {
    position: sticky;
    top: calc(72px + 1.5rem);
}
.gp-preview-label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}
.gp-preview-link {
    padding: 0.8rem 0.9rem;
    border-radius: 11px;
    background: var(--p-surface-2);
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
    color: var(--p-muted);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}
.gp-preview-link b {
    color: var(--p-ink);
    font-weight: 600;
}
.gp-preview-link b.is-placeholder {
    color: var(--p-muted);
    font-weight: 400;
    font-style: italic;
}
.gp-preview-list {
    margin: 1.25rem 0 0;
}
.gp-preview-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--p-line);
    font-size: 0.875rem;
}
.gp-preview-list dt {
    color: var(--p-muted);
    font-weight: 400;
}
.gp-preview-list dd {
    margin: 0;
    color: var(--p-ink);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}
.gp-preview-next {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 11px;
    background: var(--p-green-soft);
}
.gp-preview-next .gp-preview-label {
    color: var(--p-green-ink);
    font-weight: 600;
}
.gp-preview-next p {
    margin: 0;
    color: var(--p-ink-2) !important;
    font-size: 0.85rem;
    line-height: 1.5;
}
.gp-create .gp-form-foot {
    justify-content: flex-end;
}

@media (max-width: 991.98px) {
    .gp-create-layout {
        grid-template-columns: 1fr;
    }
    /* No celular a prévia vem antes: o link é o que importa */
    .gp-create-preview {
        position: static;
        order: -1;
    }
    .gp-preview-list,
    .gp-preview-next {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .gp-choices,
    .gp-field-row {
        grid-template-columns: 1fr;
    }
    .gp-field-row > .gp-field + .gp-field {
        border-top: 1px dashed var(--p-line);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gp-choice,
    .gp-choice-check {
        transition: none;
    }
}
.gp-hint[hidden] {
    display: none;
}


/* =================================================================
   SELETOR (js/select.js)
   O campo tem a mesma cara nos dois modos: no celular é o <select> nativo
   (com a seta desenhada aqui), no computador é o botão do select.js com a
   lista do painel no lugar da lista do sistema.
   ================================================================= */

/* Seta do <select> nativo (celular): o chevron do Bootstrap/dark-mode some e
   entra um no tom do texto secundário de cada tema. */
body.gp-app .gp-detail .form-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235F6F67' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.85rem center;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    cursor: pointer;
}
body.gp-app.dark-mode .gp-detail .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238A9891' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
}

/* ---------- versão do computador ---------- */
.gp-select {
    position: relative;
}
.gp-select-native {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
.gp-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 42px;
    padding: 0 0.85rem;
    border: 1px solid var(--p-line-strong);
    border-radius: 10px;
    background: var(--p-surface-2);
    color: var(--p-ink);
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.gp-select-sm .gp-select-trigger {
    min-height: 34px;
    border-radius: 8px;
    font-size: 0.85rem;
}
.gp-select-trigger:hover {
    border-color: color-mix(in srgb, var(--p-ink) 22%, transparent);
}
.gp-select-trigger:focus-visible,
.gp-select.is-open .gp-select-trigger {
    outline: none;
    border-color: var(--p-green);
    background: var(--p-surface);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}
.gp-select-trigger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    /* Botão desabilitado engole o clique; assim ele chega na linha bloqueada
       (.premium-feature.locked), que mostra o convite de upgrade */
    pointer-events: none;
}
.gp-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gp-select-trigger .fa-chevron-down {
    flex-shrink: 0;
    color: var(--p-muted);
    font-size: 0.7rem;
    transition: transform 0.2s var(--p-ease-out);
}
.gp-select.is-open .fa-chevron-down {
    transform: rotate(180deg);
}

.gp-select-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1060;
    min-width: 100%;
    max-height: 300px;
    margin: 0;
    padding: 0.3rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--p-line-strong);
    border-radius: 12px;
    background: var(--p-surface);
    box-shadow: var(--p-highlight), 0 18px 44px -16px rgba(0, 0, 0, 0.45);
    transform-origin: top center;
    animation: gp-select-in 0.15s var(--p-ease-out);
}
body.dark-mode .gp-select-list {
    background: var(--p-surface-2);
    box-shadow: var(--p-highlight), 0 18px 44px -12px rgba(0, 0, 0, 0.85);
}
.gp-select.opens-up .gp-select-list {
    top: auto;
    bottom: calc(100% + 6px);
    transform-origin: bottom center;
}
@keyframes gp-select-in {
    from { opacity: 0; transform: scale(0.97) translateY(-4px); }
}
.gp-select.opens-up .gp-select-list {
    animation-name: gp-select-in-up;
}
@keyframes gp-select-in-up {
    from { opacity: 0; transform: scale(0.97) translateY(4px); }
}
.gp-select-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    color: var(--p-ink);
    font-size: 0.9rem;
    cursor: pointer;
}
.gp-select-sm .gp-select-list li {
    font-size: 0.85rem;
}
.gp-select-list li.is-active {
    background: var(--p-hover);
}
body.dark-mode .gp-select-list li.is-active {
    background: rgba(255, 255, 255, 0.06);
}
.gp-select-list li[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}
.gp-select-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.gp-select-option-text small {
    color: var(--p-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}
.gp-select-list li .fa-check {
    flex-shrink: 0;
    color: var(--p-green-ink);
    font-size: 0.75rem;
    visibility: hidden;
}
.gp-select-list li.is-selected {
    font-weight: 600;
}
.gp-select-list li.is-selected .fa-check {
    visibility: visible;
}
.gp-select-list li.is-selected small {
    font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
    .gp-select-list {
        animation: none;
    }
    .gp-select-trigger .fa-chevron-down {
        transition: none;
    }
}


/* =================================================================
   ETAPA 4 — MINHA CONTA
   Menu de seções à esquerda (abas no celular), plano atual com o uso do
   mês, comparação dos planos em tabela e Perfil/Senha nas mesmas linhas
   de ajuste das Configurações.
   ================================================================= */
.gp-account-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
}
.gp-account-page .gp-page-head {
    margin-bottom: 1.75rem;
}

/* Menu de seções */
.gp-subnav {
    position: sticky;
    top: calc(72px + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.gp-subnav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    height: 42px;
    padding: 0 0.85rem;
    border-radius: 10px;
    color: var(--p-muted);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.gp-subnav-link i {
    width: 16px;
    text-align: center;
    font-size: 0.85rem;
}
.gp-subnav-link:hover {
    color: var(--p-ink);
    background: var(--p-hover);
}
.gp-subnav-link.active {
    color: var(--p-ink);
    background: var(--p-surface);
    box-shadow: inset 0 0 0 1px var(--p-line), var(--p-highlight);
    font-weight: 600;
}
.gp-subnav-link.active i {
    color: var(--p-green-ink);
}
.gp-subnav-link:focus-visible {
    outline: 2px solid var(--p-green);
    outline-offset: 2px;
}

/* Plano atual */
.gp-plan-current-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 0;
}
.gp-plan-name {
    margin: 0;
    font-family: var(--p-display) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: var(--p-ink) !important;
}
.gp-plan-current-head .gp-panel-sub {
    margin-top: 0.4rem;
}
.gp-plan-usage {
    display: grid;
    gap: 0.6rem;
    padding: 1.25rem 1.5rem 1.5rem;
}
.gp-plan-usage-text {
    color: var(--p-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}
.gp-plan-usage-text strong {
    margin-right: 0.25rem;
    color: var(--p-ink);
    font-family: var(--p-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.gp-plan-usage .gp-usage-track {
    height: 8px;
}
.gp-plan-usage[data-state="alto"] .gp-usage-fill { background: var(--p-amber-fill); }
.gp-plan-usage[data-state="limite"] .gp-usage-fill { background: var(--p-red-fill); }
.gp-plan-usage[data-state="ilimitado"] .gp-usage-track,
.gp-plan-usage[data-state="ilimitado"] .gp-plan-usage-note {
    display: none;
}
.gp-plan-usage-note {
    margin: 0;
    color: var(--p-muted) !important;
    font-size: 0.8125rem;
}
.gp-plan-current .gp-panel-foot {
    justify-content: flex-end;
    flex-wrap: wrap;
}
.gp-plan-current .gp-panel-foot .gp-panel-note {
    margin-right: auto;
}

/* Comparação dos planos */
.gp-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.gp-compare th,
.gp-compare td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--p-line);
    vertical-align: middle;
}
.gp-compare thead th {
    border-top: 0;
    vertical-align: bottom;
    padding-top: 0.25rem;
    padding-bottom: 1rem;
}
.gp-compare tbody th {
    width: 40%;
    color: var(--p-ink-2);
    font-weight: 500;
    text-align: left;
}
.gp-compare td,
.gp-compare thead th[data-plan] {
    width: 20%;
    color: var(--p-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.gp-compare th:first-child,
.gp-compare td:first-child {
    padding-left: 1.5rem;
}
.gp-compare th:last-child,
.gp-compare td:last-child {
    padding-right: 1.5rem;
}
.gp-compare-name {
    display: block;
    color: var(--p-ink);
    font-family: var(--p-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.gp-compare-price {
    display: block;
    margin-top: 0.15rem;
    color: var(--p-muted);
    font-size: 0.85rem;
    font-weight: 500;
}
.gp-compare-price small {
    font-size: 0.8em;
}
.gp-compare .fa-check {
    color: var(--p-green-ink);
}
.gp-no {
    color: var(--p-muted);
    font-weight: 400;
    opacity: 0.6;
}
.gp-compare tfoot td {
    padding-top: 1rem;
    padding-bottom: 1.25rem;
}
.gp-compare tfoot .gp-btn {
    width: 100%;
    max-width: 180px;
}
/* A coluna do plano atual ganha um fundo e um selo "Seu plano" no topo */
.gp-compare[data-current="INICIAL"] [data-plan="INICIAL"],
.gp-compare[data-current="ESSENCIAL"] [data-plan="ESSENCIAL"],
.gp-compare[data-current="VIP"] [data-plan="VIP"] {
    background: var(--p-green-soft);
}
.gp-compare[data-current="INICIAL"] thead [data-plan="INICIAL"] .gp-compare-name::before,
.gp-compare[data-current="ESSENCIAL"] thead [data-plan="ESSENCIAL"] .gp-compare-name::before,
.gp-compare[data-current="VIP"] thead [data-plan="VIP"] .gp-compare-name::before {
    content: 'Seu plano';
    display: block;
    margin-bottom: 0.3rem;
    color: var(--p-green-ink);
    font-family: var(--p-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
}
.gp-compare thead th[data-plan] {
    border-radius: 12px 12px 0 0;
}
.gp-compare tfoot td[data-plan] {
    border-radius: 0 0 12px 12px;
}

/* Botão de mostrar senha dentro do campo */
body.gp-app .gp-detail .gp-input-btn {
    display: grid;
    place-items: center;
    width: 44px;
    border: 1px solid var(--p-line-strong);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: var(--p-hover);
    color: var(--p-muted);
    transition: color 0.15s ease;
}
body.gp-app .gp-detail .gp-input-btn:hover {
    color: var(--p-ink);
}
body.gp-app .gp-detail .input-group > .form-control:has(+ .gp-input-btn) {
    border-radius: 10px 0 0 10px;
}

.gp-account-page .gp-form-foot[hidden] {
    display: none;
}
.gp-forgot .gp-panel-head {
    align-items: center;
    padding-bottom: 1.25rem;
}
.gp-forgot .gp-panel-body {
    display: none;
}

@media (max-width: 991.98px) {
    .gp-account-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    /* As seções viram abas em linha */
    .gp-subnav {
        position: static;
        flex-direction: row;
        gap: 0.25rem;
        overflow-x: auto;
        border-bottom: 1px solid var(--p-line);
        scrollbar-width: none;
    }
    .gp-subnav-link {
        position: relative;
        height: 44px;
        border-radius: 0;
        white-space: nowrap;
    }
    .gp-subnav-link.active {
        background: none;
        box-shadow: none;
    }
    .gp-subnav-link.active::after {
        content: '';
        position: absolute;
        left: 0.6rem;
        right: 0.6rem;
        bottom: 0;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: var(--p-green);
    }
}

@media (max-width: 575.98px) {
    /* Cada recurso vira uma linha inteira, com os três valores embaixo */
    .gp-compare,
    .gp-compare thead,
    .gp-compare tbody,
    .gp-compare tfoot {
        display: block;
    }
    .gp-compare tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-top: 1px solid var(--p-line);
    }
    .gp-compare thead tr {
        border-top: 0;
    }
    .gp-compare th,
    .gp-compare td {
        width: auto !important;
        padding: 0.45rem 0.35rem;
        border-top: 0;
        font-size: 0.85rem;
    }
    .gp-compare tbody th[scope="row"] {
        grid-column: 1 / -1;
        padding: 0.75rem 1rem 0.1rem;
        color: var(--p-muted);
        font-size: 0.8rem;
    }
    .gp-compare thead th:first-child,
    .gp-compare tfoot th:first-child {
        display: none;
    }
    .gp-compare tbody td {
        padding-bottom: 0.7rem;
    }
    .gp-compare th:first-child,
    .gp-compare td:first-child {
        padding-left: 0.35rem;
    }
    .gp-compare th:last-child,
    .gp-compare td:last-child {
        padding-right: 0.35rem;
    }
    .gp-compare-name {
        font-size: 0.95rem;
    }
    .gp-compare thead th[data-plan],
    .gp-compare tfoot td[data-plan] {
        border-radius: 0;
    }
    .gp-compare tfoot .gp-btn {
        height: auto;
        min-height: 34px;
        padding: 0.4rem 0.35rem;
        white-space: normal;
        font-size: 0.75rem;
        line-height: 1.2;
    }
    .gp-plan-current-head,
    .gp-plan-usage {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
    .gp-forgot .gp-panel-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Notificação do canto (showToast em js/utils.js), usada em todo o painel */
body.gp-app .toast {
    overflow: hidden;
    border: 1px solid var(--p-line-strong);
    border-radius: var(--p-radius);
    background: var(--p-surface);
    color: var(--p-ink);
    box-shadow: var(--p-highlight), 0 18px 44px -16px rgba(0, 0, 0, 0.5);
}
body.gp-app.dark-mode .toast {
    background: var(--p-surface-2);
}
body.gp-app .toast .toast-header {
    padding: 0.7rem 0.9rem 0;
    border: 0;
    background: transparent;
    color: var(--p-ink);
    font-size: 0.875rem;
}
body.gp-app .toast .toast-body {
    padding: 0.35rem 0.9rem 0.8rem 2.35rem;
    color: var(--p-ink-2);
    font-size: 0.875rem;
}
body.gp-app.dark-mode .toast .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}


/* =================================================================
   ETAPA 5 — CENTRAL DE AJUDA
   Mesmo esqueleto da Minha conta (assuntos à esquerda, conteúdo em
   painéis), com busca no topo. O momento visual é a seção de
   Distribuição: os tanques da lista enchem seguindo cada algoritmo.
   ================================================================= */
.gp-help-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}
.gp-help-search {
    position: relative;
    flex: 0 1 340px;
    min-width: 0;
}
.gp-help-search > i {
    position: absolute;
    top: 50%;
    left: 0.95rem;
    transform: translateY(-50%);
    color: var(--p-muted);
    font-size: 0.85rem;
    pointer-events: none;
}
.gp-help-search input {
    width: 100%;
    height: 44px;
    padding: 0 2.6rem 0 2.5rem;
    border: 1px solid var(--p-line-strong);
    border-radius: 12px;
    background: var(--p-surface);
    box-shadow: var(--p-highlight);
    color: var(--p-ink);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gp-help-search input::placeholder {
    color: var(--p-muted);
}
.gp-help-search input:focus {
    outline: none;
    border-color: var(--p-green);
    box-shadow: 0 0 0 3px var(--p-green-soft);
}
.gp-help-search input::-webkit-search-cancel-button {
    cursor: pointer;
}
.gp-help-search kbd {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
    color: var(--p-muted);
    font-family: var(--p-body);
    font-size: 0.75rem;
    pointer-events: none;
}
.gp-help-search input:focus ~ kbd,
.gp-help-search input:not(:placeholder-shown) ~ kbd {
    display: none;
}

.gp-help-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
}
.gp-help-page {
    padding-bottom: 3.5rem;
}
.gp-help-content {
    min-width: 0;
}
.gp-help-page [hidden] {
    display: none !important;
}
.gp-help-topic {
    scroll-margin-top: calc(72px + 1.5rem);
}
.gp-help-topic > .gp-panel-head {
    padding-bottom: 1.25rem;
}
.gp-help-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0;
    font-family: var(--p-display) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    color: var(--p-ink) !important;
}
.gp-help-page .gp-plan-chip {
    display: inline-flex;
    margin-left: 0;
}

/* Blocos de texto dentro de cada assunto */
.gp-help-block {
    padding: 1.15rem 1.5rem;
    border-top: 1px solid var(--p-line);
    scroll-margin-top: calc(72px + 1.5rem);
}
.gp-help-block h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0 0 0.4rem;
    font-family: var(--p-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--p-ink);
}
.gp-help-block p,
.gp-help-list {
    max-width: 68ch;
    margin: 0 0 0.6rem;
    color: var(--p-ink-2);
    line-height: 1.6;
}
.gp-help-block > :last-child {
    margin-bottom: 0;
}
.gp-help-list {
    padding-left: 1.2rem;
}
.gp-help-list li + li {
    margin-top: 0.3rem;
}
.gp-help-list li::marker {
    color: var(--p-muted);
}
.gp-help-page code {
    padding: 0.1em 0.4em;
    border-radius: 6px;
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-line);
    color: var(--p-ink);
    font-size: 0.85em;
    word-break: break-word;
}
.gp-help-content a:not(.gp-btn) {
    color: var(--p-green-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--p-green-ink) 35%, transparent);
    text-underline-offset: 3px;
}
.gp-help-content a:not(.gp-btn):hover {
    text-decoration-color: currentColor;
}
.gp-help-meta {
    color: var(--p-muted) !important;
    font-size: 0.8125rem;
}
.gp-help-sub {
    padding: 0.85rem 1.5rem 0.15rem;
    border-top: 1px solid var(--p-line);
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}
.gp-help-sub + .gp-help-block {
    border-top: 0;
}

/* Primeiros passos: é uma sequência de verdade, então ganha números */
.gp-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: gp-step;
}
.gp-steps > li {
    position: relative;
    padding-left: 4.25rem;
    counter-increment: gp-step;
}
.gp-steps > li::before {
    content: counter(gp-step);
    position: absolute;
    top: 1.05rem;
    left: 1.5rem;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--p-green-soft);
    color: var(--p-green-ink);
    font-family: var(--p-display);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.gp-steps > li + li {
    border-top-color: transparent;
}
/* Linha que liga um passo ao próximo */
.gp-steps > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(1.05rem + 34px);
    bottom: -1rem;
    left: calc(1.5rem + 13.5px);
    width: 1px;
    background: var(--p-line-strong);
}
.gp-steps h3 {
    min-height: 28px;
}

/* Grupos ou números: lado a lado */
.gp-help-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.gp-help-pair > .gp-help-block + .gp-help-block {
    border-left: 1px solid var(--p-line);
}
.gp-help-pair .gp-type {
    margin-bottom: 0.8rem;
}

/* Distribuição: um tanque por grupo, enchendo como o algoritmo manda */
.gp-algo {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
}
.gp-algo-sim.gp-tanks {
    justify-content: center;
    gap: 6px;
    height: 46px;
    overflow: visible;
}
.gp-algo-sim .gp-tank {
    flex: 0 0 14px;
    border-radius: 4px;
}
.gp-algo-sim .gp-tank > i {
    border-radius: 3px;
    transition: transform 0.35s var(--p-ease-out), background-color 0.2s ease;
}
/* Números: três atendentes, o que recebe o clique acende */
.gp-algo-people {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.gp-algo-people span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(56, 152, 236, 0.12);
    color: #2F7FD0;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s var(--p-ease-out);
}
body.dark-mode .gp-algo-people span {
    background: rgba(56, 152, 236, 0.16);
    color: #8CC4FF;
}
.gp-algo-people span.is-hit {
    background: var(--p-green);
    color: var(--p-on-green);
    transform: scale(1.12);
}

/* Dúvidas comuns */
.gp-faq details > summary {
    position: relative;
    padding-right: 2rem;
    color: var(--p-ink);
    font-weight: 600;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
}
.gp-faq details > summary::-webkit-details-marker {
    display: none;
}
.gp-faq details > summary::after {
    content: '';
    position: absolute;
    top: 0.35em;
    right: 0.2rem;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--p-muted);
    border-bottom: 2px solid var(--p-muted);
    transform: rotate(45deg);
    transition: transform 0.2s var(--p-ease-out);
}
.gp-faq details[open] > summary::after {
    transform: translateY(3px) rotate(225deg);
}
.gp-faq details > summary:hover {
    color: var(--p-green-ink);
}
.gp-faq details > summary:focus-visible {
    outline: 2px solid var(--p-green);
    outline-offset: 4px;
    border-radius: 4px;
}
.gp-faq details > p {
    margin-top: 0.6rem;
}

/* Busca */
.gp-help-empty {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--p-muted);
    text-align: center;
}
.gp-help-empty > i {
    font-size: 1.5rem;
    opacity: 0.5;
}
.gp-help-empty p {
    margin: 0;
}
.gp-help-empty strong {
    color: var(--p-ink);
}
::highlight(gp-help-match) {
    background-color: rgba(240, 165, 43, 0.35);
    color: inherit;
}

/* Contato */
.gp-help-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--p-radius-lg);
    background: var(--p-green-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-green) 25%, transparent);
}
.gp-help-contact p {
    margin: 0.35rem 0 0;
    color: var(--p-ink-2);
}
.gp-help-contact .gp-btn {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .gp-help-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    /* Os assuntos viram uma faixa presa logo abaixo da barra */
    .gp-help-page .gp-subnav {
        position: sticky;
        top: 72px;
        z-index: 5;
        /* Encosta nas bordas da tela: o container tem 12px de respiro (15px até 768px, em style.css) */
        margin: 0 -12px;
        padding: 0 12px;
        background: color-mix(in srgb, var(--p-bg) 92%, transparent);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
    .gp-help-topic,
    .gp-help-block {
        scroll-margin-top: calc(72px + 44px + 1rem);
    }
}

@media (max-width: 768px) {
    .gp-help-page .gp-subnav {
        margin: 0 -15px;
        padding: 0 15px;
    }
}

@media (max-width: 767.98px) {
    .gp-help-head {
        flex-direction: column;
        align-items: stretch;
    }
    .gp-help-search {
        flex-basis: auto;
    }
    .gp-help-search kbd {
        display: none;
    }
    .gp-help-pair {
        grid-template-columns: 1fr;
    }
    .gp-help-pair > .gp-help-block + .gp-help-block {
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .gp-help-block,
    .gp-help-sub {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
    .gp-steps > li {
        padding-left: 3.6rem;
    }
    .gp-steps > li::before {
        left: 1.1rem;
    }
    .gp-steps > li:not(:last-child)::after {
        left: calc(1.1rem + 13.5px);
    }
    .gp-algo {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 1rem;
    }
    .gp-algo-sim.gp-tanks {
        gap: 4px;
    }
    .gp-algo-people {
        gap: 3px;
    }
    .gp-algo-people span {
        width: 23px;
        height: 23px;
    }
    .gp-help-contact {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gp-algo-sim .gp-tank > i,
    .gp-algo-people span {
        transition: none;
    }
}


/* =================================================================
   ETAPA 6 — LOGIN (entrar, criar conta, recuperar e criar senha nova)
   Formulário à esquerda, no tema que a pessoa escolheu; à direita, sempre
   escuro, a demonstração do produto: um link enchendo os grupos com os
   mesmos tanques do painel. Some no celular, onde só fica o formulário.
   ================================================================= */
.gp-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    min-height: 100vh;
    min-height: 100dvh;
}
.gp-auth-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2rem clamp(1.5rem, 4vw, 3.5rem) 1.5rem;
}
.gp-auth-brand {
    align-self: flex-start;
    border-radius: 8px;
}
.gp-auth-brand:focus-visible {
    outline: 2px solid var(--p-green);
    outline-offset: 4px;
}
.gp-auth-box {
    width: 100%;
    max-width: 400px;
    margin: auto;
    padding: 2.5rem 0;
}
.gp-auth-title {
    margin: 0;
    font-family: var(--p-display);
    font-size: clamp(1.9rem, 1.5rem + 1vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--p-ink);
}
.gp-auth-sub {
    margin: 0.6rem 0 1.75rem;
    color: var(--p-muted);
    line-height: 1.5;
}

/* Campos */
.gp-auth-form {
    display: grid;
    gap: 1.1rem;
}
.gp-auth-form[hidden] {
    display: none;
}
.gp-auth-field label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--p-ink);
    font-size: 0.875rem;
    font-weight: 600;
}
.gp-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.gp-input {
    width: 100%;
    height: 46px;
    padding: 0 0.9rem;
    border: 1px solid var(--p-line-strong);
    border-radius: 11px;
    background: var(--p-surface);
    box-shadow: var(--p-highlight);
    color: var(--p-ink);
    font: inherit;
    font-size: 0.9375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.dark-mode .gp-input {
    background: var(--p-surface-2);
}
.gp-input::placeholder {
    color: var(--p-muted);
    opacity: 0.7;
}
.gp-input:hover {
    border-color: color-mix(in srgb, var(--p-ink) 24%, transparent);
}
.gp-input:focus {
    outline: none;
    border-color: var(--p-green);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
}
/* Preenchimento automático do navegador sem fundo amarelo/branco */
.gp-input:-webkit-autofill,
.gp-input:-webkit-autofill:hover,
.gp-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--p-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--p-surface-2) inset;
    caret-color: var(--p-ink);
}
.gp-auth-pass {
    position: relative;
}
.gp-auth-pass .gp-input {
    padding-right: 3rem;
}
.gp-auth-eye {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--p-muted);
    transition: color 0.15s ease, background-color 0.15s ease;
}
.gp-auth-eye:hover {
    background: var(--p-hover);
    color: var(--p-ink);
}
.gp-auth-eye:focus-visible {
    outline: 2px solid var(--p-green);
    outline-offset: -2px;
}
.gp-auth-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 0.75rem;
}
.gp-auth-hint {
    margin: -0.35rem 0 0;
    color: var(--p-muted);
    font-size: 0.8125rem;
}
.gp-auth-field .gp-auth-hint {
    margin-top: 0.4rem;
}

/* Botões e links */
.gp-auth-submit {
    width: 100%;
    height: 46px;
    margin-top: 0.35rem;
    font-size: 0.9375rem;
}
.gp-auth-submit:disabled {
    cursor: progress;
    opacity: 0.85;
}
.gp-auth-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: gp-spin 0.7s linear infinite;
}
.gp-auth-submit.is-busy .gp-auth-spinner {
    display: inline-block;
}
.gp-auth-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--p-green-ink);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease;
}
.gp-auth-link:hover {
    text-decoration-color: currentColor;
}
.gp-auth-link:focus-visible,
.gp-auth-back:focus-visible {
    outline: 2px solid var(--p-green);
    outline-offset: 3px;
    border-radius: 4px;
}
.gp-auth-switch {
    margin: 1.75rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--p-line);
    color: var(--p-muted);
    font-size: 0.9rem;
}
.gp-auth-switch .gp-auth-link {
    font-size: inherit;
}
.gp-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--p-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s ease;
}
.gp-auth-back:hover {
    color: var(--p-ink);
}

/* Avisos */
.gp-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.9rem;
    border-radius: 11px;
    background: rgba(229, 87, 75, 0.1);
    box-shadow: inset 0 0 0 1px rgba(229, 87, 75, 0.28);
    color: var(--p-red);
    font-size: 0.875rem;
    line-height: 1.45;
}
.gp-auth-alert > i {
    margin-top: 0.15em;
}
.gp-auth-alert[data-tone="ok"] {
    background: var(--p-green-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.28);
    color: var(--p-green-ink);
}
.gp-auth-sent {
    display: grid;
    justify-items: start;
    gap: 0.9rem;
    padding: 1.25rem;
    border-radius: 14px;
    background: var(--p-surface);
    box-shadow: inset 0 0 0 1px var(--p-line), var(--p-highlight);
}
.gp-auth-sent p {
    margin: 0;
    color: var(--p-ink-2);
    line-height: 1.55;
}
.gp-auth-sent strong {
    color: var(--p-ink);
    word-break: break-all;
}
.gp-auth-sent-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--p-green-soft);
    color: var(--p-green-ink);
}

/* Plano escolhido na landing */
.gp-auth-plan {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 2rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: var(--p-green-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.28);
}
.gp-auth-plan[hidden] {
    display: none;
}
.gp-auth-plan-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--p-green);
    color: var(--p-on-green);
    font-size: 0.85rem;
}
.gp-auth-plan strong {
    color: var(--p-ink);
    font-size: 0.9375rem;
}
.gp-auth-plan p {
    margin: 0.15rem 0 0;
    color: var(--p-ink-2);
    font-size: 0.85rem;
}

.gp-auth-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    color: var(--p-muted);
    font-size: 0.8125rem;
}
.gp-auth-foot span {
    margin-left: auto;
}
.gp-auth-foot a {
    color: var(--p-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
.gp-auth-foot a:hover {
    color: var(--p-ink);
}

/* ---------- Demonstração (sempre escura) ---------- */
.gp-auth-show {
    --p-surface: #0F1513;
    --p-surface-2: #141B18;
    --p-hover: rgba(255, 255, 255, 0.03);
    --p-line: rgba(255, 255, 255, 0.075);
    --p-line-strong: rgba(255, 255, 255, 0.13);
    --p-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --p-ink: #ECF1EE;
    --p-ink-2: #C3CDC8;
    --p-muted: #8A9891;
    --p-green-ink: #5BF0A0;
    --p-green-soft: rgba(37, 211, 102, 0.14);
    --p-amber: #F5B544;
    --p-red: #FF8A7F;
    --p-tank: rgba(255, 255, 255, 0.07);

    position: relative;
    display: grid;
    place-items: center;
    margin: 12px;
    padding: 3rem clamp(2rem, 5vw, 4.5rem);
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(640px 420px at 85% 0%, rgba(37, 211, 102, 0.16), transparent 65%),
        radial-gradient(560px 420px at 0% 100%, rgba(18, 140, 126, 0.14), transparent 60%),
        radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 22px 22px,
        #0A0F0D;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    color: var(--p-ink);
}
.gp-auth-show-inner {
    width: 100%;
    max-width: 480px;
}
.gp-auth-pitch {
    margin: 0;
    font-family: var(--p-display);
    font-size: clamp(2rem, 1.1rem + 2.1vw, 2.85rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.04;
    color: var(--p-ink);
}
.gp-auth-pitch-sub {
    max-width: 40ch;
    margin: 0;
    color: var(--p-muted);
    line-height: 1.55;
}
.gp-demo {
    margin: 2.25rem 0 1.75rem;
    border-radius: 18px;
    background: var(--p-surface);
    box-shadow:
        inset 0 0 0 1px var(--p-line),
        var(--p-highlight),
        0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.gp-demo-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--p-line);
}
.gp-demo-link {
    color: var(--p-ink-2);
    font-size: 0.875rem;
}
.gp-demo-link i {
    margin-right: 0.5rem;
    color: var(--p-green-ink);
    font-size: 0.8rem;
}
.gp-demo-link b {
    color: var(--p-ink);
}
.gp-demo-clicks {
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
.gp-demo-clicks b {
    color: var(--p-ink);
    font-weight: 600;
}
.gp-demo-groups {
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
}
.gp-demo-group {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 1.15rem;
    transition: background-color 0.3s ease;
}
.gp-demo-group.is-active {
    background: rgba(37, 211, 102, 0.045);
}
.gp-demo-group .gp-tank {
    height: 34px;
    transition: box-shadow 0.25s ease;
}
.gp-demo-group .gp-tank > i {
    transition: transform 0.45s var(--p-ease-out), background-color 0.3s ease;
}
/* O clique que acabou de chegar acende o tanque por um instante */
.gp-demo-group.is-hit .gp-tank {
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.28);
}
.gp-demo-name {
    color: var(--p-ink);
    font-size: 0.9rem;
    font-weight: 600;
}
.gp-demo-count {
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
.gp-demo-group .gp-chip {
    justify-content: center;
    min-width: 88px;
}

@media (max-width: 991.98px) {
    .gp-auth {
        grid-template-columns: 1fr;
    }
    .gp-auth-show {
        display: none;
    }
    .gp-auth-main {
        padding: 1.25rem 16px 1.25rem;
    }
    .gp-auth-box {
        padding: 2.5rem 0 2rem;
    }
}

@media (max-width: 479.98px) {
    .gp-auth-pair {
        grid-template-columns: 1fr;
    }
    .gp-auth-foot span {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gp-demo-group,
    .gp-demo-group .gp-tank,
    .gp-demo-group .gp-tank > i {
        transition: none;
    }
}


/* =================================================================
   DIÁLOGOS (SweetAlert2) — configurados em utils.js com buttonsStyling
   desligado: os botões são os .gp-btn do painel. Alinhados à esquerda,
   ícone pequeno no canto em vez do ícone grande centralizado.
   ================================================================= */
body.gp-app .swal2-container.swal2-backdrop-show {
    background: rgba(4, 10, 7, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
body.gp-app .gp-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 1.6rem 1.6rem 1.4rem;
    border-radius: 20px;
    background: var(--p-surface);
    box-shadow: inset 0 0 0 1px var(--p-line), var(--p-highlight), 0 40px 80px -30px rgba(0, 0, 0, 0.55);
    color: var(--p-ink);
    font-family: var(--p-body);
    text-align: left;
}
/* Ícone: pequeno e à esquerda. Tudo no SweetAlert é medido em em, então
   o font-size encolhe o desenho inteiro. */
body.gp-app .gp-dialog .gp-dialog-icon {
    margin: 0 0 1rem;
    font-size: 0.5rem;
}
body.gp-app .gp-dialog .swal2-icon.swal2-warning {
    border-color: rgba(240, 165, 43, 0.5);
    color: var(--p-amber);
}
body.gp-app .gp-dialog .swal2-icon.swal2-error {
    border-color: rgba(229, 87, 75, 0.5);
}
body.gp-app .gp-dialog .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--p-red-fill);
}
body.gp-app .gp-dialog .swal2-icon.swal2-info,
body.gp-app .gp-dialog .swal2-icon.swal2-question {
    border-color: var(--p-line-strong);
    color: var(--p-muted);
}
body.gp-app .gp-dialog .swal2-icon.swal2-success {
    border-color: rgba(37, 211, 102, 0.4);
    color: var(--p-green-ink);
}
body.gp-app .gp-dialog .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(37, 211, 102, 0.35);
}
body.gp-app .gp-dialog .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--p-green);
}
/* As "máscaras" do anel de sucesso precisam ter a cor do fundo do diálogo */
body.gp-app .gp-dialog .swal2-icon.swal2-success .swal2-success-circular-line-left,
body.gp-app .gp-dialog .swal2-icon.swal2-success .swal2-success-circular-line-right,
body.gp-app .gp-dialog .swal2-icon.swal2-success .swal2-success-fix {
    background-color: var(--p-surface) !important;
}
/* Ícone do convite de plano: coroa num quadrado verde, como os ícones do painel */
body.gp-app .gp-dialog .swal2-icon.gp-dialog-icon-plan {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 13px;
    background: var(--p-green-soft);
    color: var(--p-green-ink);
    font-size: 1.05rem;
}
body.gp-app .gp-dialog .swal2-icon.gp-dialog-icon-plan .swal2-icon-content {
    font-size: inherit;
}

body.gp-app .gp-dialog .gp-dialog-title {
    margin: 0 0 0.5rem;
    padding: 0;
    font-family: var(--p-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--p-ink);
    text-align: left;
}
body.gp-app .gp-dialog .gp-dialog-text {
    margin: 0;
    padding: 0;
    color: var(--p-ink-2);
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: left;
}
body.gp-app .gp-dialog .gp-dialog-text strong {
    color: var(--p-ink);
}
body.gp-app .gp-dialog .gp-dialog-actions {
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin: 1.5rem 0 0;
    padding: 0;
}
body.gp-app .gp-dialog .gp-dialog-actions .gp-btn {
    margin: 0;
}
body.gp-app .gp-dialog .gp-dialog-input,
body.gp-app .gp-dialog .swal2-textarea,
body.gp-app .gp-dialog .swal2-select {
    width: 100%;
    margin: 1rem 0 0;
    border: 1px solid var(--p-line-strong);
    border-radius: 10px;
    background: var(--p-surface-2);
    box-shadow: none;
    color: var(--p-ink);
    font-family: var(--p-body);
    font-size: 0.95rem;
}
body.gp-app .gp-dialog .gp-dialog-input:focus,
body.gp-app .gp-dialog .swal2-textarea:focus {
    border-color: var(--p-green);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}
body.gp-app .gp-dialog .gp-dialog-validation {
    margin: 1rem 0 0;
    border-radius: 10px;
    background: rgba(229, 87, 75, 0.1);
    color: var(--p-red);
    font-size: 0.875rem;
}
body.gp-app .gp-dialog .gp-dialog-validation::before {
    background-color: var(--p-red-fill);
}
body.gp-app .gp-dialog .swal2-close {
    color: var(--p-muted);
}

/* Botão de perigo (exclusões) */
.gp-btn-danger {
    background: var(--p-red-fill);
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 22px -12px rgba(229, 87, 75, 0.8);
}
.gp-btn-danger:hover {
    background: #EE6A5F;
    color: #FFFFFF;
}

/* Convite de plano (showUpgradeDialog) */
.gp-upgrade-lead {
    margin: 0 0 1rem;
}
.gp-upgrade-sub {
    margin: 0 0 0.5rem;
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}
.gp-upgrade-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gp-upgrade-list li {
    display: flex;
    gap: 0.6rem;
    color: var(--p-ink);
}
.gp-upgrade-list i {
    margin-top: 0.3em;
    color: var(--p-green-ink);
    font-size: 0.75rem;
}
.gp-upgrade-price {
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--p-line);
    color: var(--p-muted);
    font-size: 0.85rem;
}

/* Entrada e saída curtas, sem o "pulo" padrão do SweetAlert */
.gp-dialog-in {
    animation: gp-dialog-in 0.18s var(--p-ease-out);
}
.gp-dialog-out {
    animation: gp-dialog-out 0.12s ease forwards;
}
@keyframes gp-dialog-in {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to { opacity: 1; transform: none; }
}
@keyframes gp-dialog-out {
    to { opacity: 0; transform: scale(0.98); }
}

@media (max-width: 575.98px) {
    body.gp-app .gp-dialog {
        padding: 1.4rem 1.25rem 1.2rem;
    }
    body.gp-app .gp-dialog .gp-dialog-actions .gp-btn {
        flex: 1 1 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .gp-dialog-in,
    .gp-dialog-out {
        animation: none;
    }
}


/* =================================================================
   MODAL DO WHATSAPP (sincronizar, importar, participantes em massa)
   Mesmo esqueleto dos diálogos: cabeçalho com ícone, conteúdo alinhado
   à esquerda, ações no rodapé à direita. As etapas são trocadas pelo
   whatsapp-sync.js (.sync-step).
   ================================================================= */
body.gp-app .gp-modal .modal-content {
    border: 0;
    border-radius: 20px;
    background: var(--p-surface);
    box-shadow: inset 0 0 0 1px var(--p-line), var(--p-highlight), 0 40px 80px -30px rgba(0, 0, 0, 0.55);
    color: var(--p-ink);
    font-family: var(--p-body);
}
body.gp-app .gp-modal .modal-dialog {
    max-width: 640px;
}
body.gp-app .modal-backdrop.show {
    background: rgb(4, 10, 7);
    opacity: 0.55;
}
.gp-modal-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem 1.25rem 1.1rem 1.5rem;
    border-bottom: 1px solid var(--p-line);
}
.gp-modal-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--p-green-soft);
    color: var(--p-green-ink);
    font-size: 1.15rem;
}
.gp-modal-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--p-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--p-ink);
}
.gp-modal-body {
    padding: 1.5rem;
}
.gp-modal-lead {
    max-width: 62ch;
    margin: 0 0 1.25rem;
    color: var(--p-ink-2);
    line-height: 1.55;
}
.gp-modal-lead strong,
.gp-modal-hint strong {
    color: var(--p-ink);
}
.gp-modal-label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--p-ink);
    font-size: 0.875rem;
    font-weight: 600;
}
.gp-modal-hint {
    margin: 0.45rem 0 0;
    color: var(--p-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.gp-modal-field + .gp-modal-field,
.gp-modal-options + .gp-modal-field {
    margin-top: 1.1rem;
}
.gp-modal-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--p-green-ink);
    font-size: 0.875rem;
    font-weight: 600;
}
.gp-modal-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.gp-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* Alternar QR Code / código */
body.gp-app .gp-modal-seg {
    display: inline-flex;
    margin: 0 0 1.25rem;
    padding: 3px;
    border-radius: 10px;
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-line);
}
body.gp-app .gp-modal-seg .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 32px;
    padding: 0 0.85rem !important;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--p-muted);
    font-size: 0.85rem;
    font-weight: 600;
}
body.gp-app .gp-modal-seg .nav-link::after {
    display: none;
}
body.gp-app .gp-modal-seg .nav-link.active {
    background: var(--p-surface-2);
    color: var(--p-ink);
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
}

/* QR Code com os passos ao lado */
.gp-connect {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: center;
    gap: 1.75rem;
}
.gp-qr {
    display: grid;
    place-items: center;
    width: 232px;
    height: 232px;
    padding: 12px;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(14, 40, 26, 0.08);
    color: #5F6F67;
}
.gp-qr .spinner-border {
    color: #25D366;
}
.gp-qr-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.gp-qr-wait {
    margin: 0;
    font-size: 0.85rem;
}
.gp-connect-steps {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: gp-connect;
    color: var(--p-ink-2);
    font-size: 0.9rem;
    line-height: 1.45;
}
.gp-connect-steps li {
    position: relative;
    min-height: 24px;
    padding: 0.15rem 0 0 2.1rem;
    counter-increment: gp-connect;
}
/* O número fica fora do fluxo do texto (texto e negrito seguem na mesma linha) */
.gp-connect-steps li::before {
    content: counter(gp-connect);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--p-green-soft);
    color: var(--p-green-ink);
    font-size: 0.75rem;
    font-weight: 700;
}
.gp-connect-steps strong {
    color: var(--p-ink);
}

/* Código de pareamento */
.gp-modal-inline {
    display: flex;
    gap: 0.5rem;
}
.gp-modal-inline .gp-phone {
    flex: 1;
    min-width: 0;
}
.gp-phone {
    position: relative;
}
.gp-phone > span {
    position: absolute;
    top: 50%;
    left: 0.85rem;
    transform: translateY(-50%);
    color: var(--p-muted);
    font-weight: 600;
    pointer-events: none;
}
body.gp-app .gp-modal .gp-input {
    width: 100%;
    height: 42px;
    padding: 0 0.85rem;
    border: 1px solid var(--p-line-strong);
    border-radius: 10px;
    background: var(--p-surface-2);
    color: var(--p-ink);
    font: inherit;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.gp-app .gp-modal .gp-phone .gp-input {
    padding-left: 1.75rem;
}
body.gp-app .gp-modal .gp-input:focus {
    outline: none;
    border-color: var(--p-green);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}
.gp-modal-inline .gp-btn {
    height: 42px;
}
.gp-pair {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    border-radius: 18px;
    background: var(--p-surface-2);
    box-shadow: inset 0 0 0 1px var(--p-line);
}
.gp-pair-label {
    color: var(--p-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}
body.gp-app .gp-modal .gp-pair-code {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--p-ink);
    font-family: var(--p-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#sync-pair-result {
    margin-top: 1.5rem;
}

/* Avisos dentro do modal */
.gp-modal-alert {
    display: flex;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.8rem 0.95rem;
    border-radius: 12px;
    background: var(--p-hover);
    box-shadow: inset 0 0 0 1px var(--p-line);
    color: var(--p-ink-2);
    font-size: 0.875rem;
    line-height: 1.5;
}
.gp-modal-alert > i {
    margin-top: 0.2em;
    color: var(--p-muted);
}
.gp-modal-alert strong {
    color: var(--p-ink);
}
.gp-modal-alert[data-tone="error"] {
    background: rgba(229, 87, 75, 0.1);
    box-shadow: inset 0 0 0 1px rgba(229, 87, 75, 0.28);
    color: var(--p-red);
}

/* Estados (conectado, processando, concluído, erro) */
.gp-modal-state {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0 0.25rem;
    text-align: center;
}
.gp-modal-state-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 0.5rem;
    border-radius: 16px;
    background: var(--p-hover);
    color: var(--p-muted);
    font-size: 1.3rem;
}
.gp-modal-state-icon[data-tone="ok"] {
    background: var(--p-green-soft);
    color: var(--p-green-ink);
}
.gp-modal-state-icon[data-tone="error"] {
    background: rgba(229, 87, 75, 0.12);
    color: var(--p-red);
}
.gp-modal-state h3 {
    margin: 0;
    font-family: var(--p-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--p-ink);
}
.gp-modal-state p {
    max-width: 52ch;
    margin: 0;
    color: var(--p-muted);
    font-variant-numeric: tabular-nums;
}
.gp-modal-state p strong {
    color: var(--p-ink);
}
.gp-modal-connected {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    color: var(--p-muted);
    font-size: 0.875rem;
}
.gp-modal-connected i {
    color: var(--p-green-ink);
}
.gp-modal-connected strong {
    color: var(--p-ink);
    font-variant-numeric: tabular-nums;
}

/* Barra de progresso */
.gp-progress {
    height: 8px;
    margin-top: 1.25rem;
    border-radius: 999px;
    background: var(--p-tank);
    overflow: hidden;
}
.gp-progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--p-green);
    transition: width 0.4s var(--p-ease-out);
}

/* Números do resultado */
.gp-modal-results {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.gp-modal-results > div {
    display: grid;
    justify-items: center;
    min-width: 132px;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    background: var(--p-surface-2);
    box-shadow: inset 0 0 0 1px var(--p-line);
}
.gp-modal-results strong {
    color: var(--p-ink);
    font-family: var(--p-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.gp-modal-results span {
    color: var(--p-muted);
    font-size: 0.8125rem;
    text-align: center;
}
.gp-modal-results > div[data-tone="warn"] strong {
    color: var(--p-amber);
}
.gp-modal-group {
    margin-top: 1.25rem;
    color: var(--p-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}
.gp-modal-group > p {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}
.gp-modal-group > p i {
    margin-top: 0.2em;
}
.gp-modal-group > p strong {
    color: var(--p-ink);
}
.gp-modal-group[data-tone="warn"] > p,
.gp-modal-group[data-tone="warn"] > p strong {
    color: var(--p-amber);
}
.gp-modal-names {
    max-height: 150px;
    margin: 0;
    padding: 0.35rem 0.85rem;
    overflow-y: auto;
    border-radius: 12px;
    background: var(--p-surface-2);
    box-shadow: inset 0 0 0 1px var(--p-line);
    list-style: none;
}
.gp-modal-names li {
    padding: 0.4rem 0;
    color: var(--p-ink-2);
}
.gp-modal-names li + li {
    border-top: 1px solid var(--p-line);
}

/* Listas de grupos com caixa de seleção */
.gp-modal-listhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.gp-modal-listhead h3 {
    margin: 0;
    font-family: var(--p-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--p-ink);
}
.gp-checklist {
    max-height: 340px;
    margin-top: 1rem;
    overflow-y: auto;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--p-line);
}
.gp-check-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.gp-check-row + .gp-check-row {
    border-top: 1px solid var(--p-line);
}
.gp-check-row:hover {
    background: var(--p-hover);
}
.gp-check-row.is-disabled {
    cursor: default;
}
.gp-check-row.is-disabled .gp-check-main {
    opacity: 0.55;
}
.gp-check-row.is-disabled:hover {
    background: none;
}
.gp-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--p-green);
    cursor: inherit;
}
.gp-check-main {
    display: grid;
    flex: 1;
    min-width: 0;
}
.gp-check-main strong {
    overflow: hidden;
    color: var(--p-ink);
    font-size: 0.9rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gp-check-main small {
    color: var(--p-muted);
    font-size: 0.8rem;
}
.gp-check-main small i {
    margin-right: 0.35rem;
    font-size: 0.7rem;
}
.gp-check-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}
.gp-checklist-loading,
.gp-checklist-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    padding: 2rem 1rem;
    color: var(--p-muted);
    font-size: 0.875rem;
    text-align: center;
}
.gp-checklist-loading .spinner-border {
    color: var(--p-green);
}

/* Escolha da ação em massa */
.gp-modal-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.gp-modal-option {
    display: flex;
    gap: 0.7rem;
    margin: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    background: var(--p-surface-2);
    box-shadow: inset 0 0 0 1px var(--p-line);
    cursor: pointer;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.gp-modal-option:hover {
    box-shadow: inset 0 0 0 1px var(--p-line-strong);
}
.gp-modal-option:has(input:checked) {
    background: var(--p-green-soft);
    box-shadow: inset 0 0 0 1.5px var(--p-green);
}
.gp-modal-option input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 0.15rem;
    accent-color: var(--p-green);
}
.gp-modal-option span {
    display: grid;
    gap: 0.15rem;
}
.gp-modal-option strong {
    color: var(--p-ink);
    font-size: 0.9rem;
}
.gp-modal-option small {
    color: var(--p-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}
.gp-modal-option + .gp-modal-option {
    margin: 0;
}
/* Resultado da última operação em massa, acima do QR Code */
.gp-last-result {
    margin: 0 0 1rem;
}
.gp-last-result summary {
    cursor: pointer;
}
/* 5 opções em 2 colunas: a principal ocupa a linha inteira */
.gp-modal-option:first-child {
    grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
    body.gp-app .gp-modal .modal-dialog {
        margin: 0.75rem;
    }
    .gp-modal-head {
        padding: 1rem 1rem 0.9rem 1.1rem;
    }
    .gp-modal-body {
        padding: 1.1rem;
    }
    .gp-connect {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 1.25rem;
    }
    .gp-connect .gp-pair {
        width: 100%;
    }
    .gp-modal-inline {
        flex-direction: column;
    }
    .gp-modal-options {
        grid-template-columns: 1fr;
    }
    .gp-modal-foot .gp-btn {
        flex: 1 1 0;
    }
    .gp-check-row {
        flex-wrap: wrap;
    }
    .gp-check-tags {
        flex-direction: row;
        flex-wrap: wrap;
        margin-left: calc(18px + 0.85rem);
    }
}


/* Notas da versão (Central de ajuda › Novidades): uma versão por <details>,
   a mais nova aberta e as anteriores fechadas */
.gp-release {
    border-top: 1px solid var(--p-line);
    scroll-margin-top: calc(72px + 1.5rem);
}
.gp-release > summary {
    position: relative;
    display: grid;
    gap: 0.3rem;
    padding: 1.15rem 3.25rem 1.15rem 1.5rem;
    background: var(--p-surface-2);
    list-style: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.gp-release > summary::-webkit-details-marker {
    display: none;
}
.gp-release > summary:hover {
    background: color-mix(in srgb, var(--p-surface-2) 85%, var(--p-ink) 4%);
}
.gp-release > summary:focus-visible {
    outline: 2px solid var(--p-green);
    outline-offset: -2px;
}
/* Seta de abrir e fechar, igual à das dúvidas */
.gp-release > summary::after {
    content: '';
    position: absolute;
    top: 1.55rem;
    right: 1.6rem;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--p-muted);
    border-bottom: 2px solid var(--p-muted);
    transform: rotate(45deg);
    transition: transform 0.2s var(--p-ease-out);
}
.gp-release[open] > summary::after {
    transform: translateY(3px) rotate(225deg);
}
.gp-release-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    color: var(--p-ink);
    font-family: var(--p-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.gp-release-sum {
    max-width: 68ch;
    color: var(--p-ink-2);
    line-height: 1.55;
}
@media (max-width: 575.98px) {
    .gp-release > summary {
        padding-left: 1.1rem;
    }
}

/* =================================================================
   Sugestões
   ================================================================= */
.gp-sugestoes-page {
    max-width: 860px;
}
/* .gp-panel não tem padding próprio: quem dá é o .gp-panel-head e o conteúdo de cada tela */
.gp-sugestoes-page .gp-panel {
    padding: 1.25rem;
}
.gp-sugestao-form {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}
.gp-sugestao-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.gp-sugestao-lista-titulo {
    margin: 2rem 0 0.75rem;
}
.gp-sugestao-lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}
.gp-sugestao-lista .gp-panel {
    margin-bottom: 0;
}
.gp-sugestao-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.65rem;
    color: var(--p-muted);
    font-size: 0.8125rem;
}
.gp-sugestao-autor {
    color: var(--p-ink-2);
    overflow-wrap: anywhere;
}
/* Mantém as quebras de linha do cliente; URL longa não pode estourar o cartão */
.gp-sugestao-texto {
    margin: 0;
    color: var(--p-ink);
    font-size: 0.9375rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.gp-sugestao-resposta {
    margin-top: 0.85rem;
    padding: 0.75rem 0.9rem;
    border-radius: 11px;
    background: var(--p-green-soft);
}
.gp-sugestao-resposta strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--p-green-ink);
    font-size: 0.8125rem;
}
.gp-sugestao-admin {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--p-line);
}
/* Cartão recolhível do admin */
.gp-sugestoes-page .gp-sugestao-fila {
    padding: 0;
}
.gp-sugestao-fila summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.25rem;
    border-radius: var(--p-radius-lg);
    cursor: pointer;
    list-style: none;
}
.gp-sugestao-fila summary::-webkit-details-marker {
    display: none;
}
.gp-sugestao-fila summary:focus-visible {
    outline: 2px solid var(--p-green);
    outline-offset: 2px;
}
.gp-sugestao-fila summary > i {
    flex-shrink: 0;
    color: var(--p-muted);
    font-size: 0.75rem;
}
.gp-sugestao-fila[open] summary > i {
    transform: rotate(180deg);
}
.gp-sugestao-cabecalho {
    display: block;
    flex: 1;
    min-width: 0;
}
.gp-sugestao-fila .gp-sugestao-meta {
    margin-bottom: 0.35rem;
}
.gp-sugestao-trecho {
    display: block;
    overflow: hidden;
    color: var(--p-ink);
    font-size: 0.9375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Aberto, o texto completo fica no corpo, onde dá para selecionar sem fechar o cartão */
.gp-sugestao-fila[open] .gp-sugestao-trecho {
    display: none;
}
.gp-sugestao-fila[open] .gp-sugestao-meta {
    margin-bottom: 0;
}
.gp-sugestao-corpo {
    padding: 0 1.25rem 1.25rem;
}
.gp-sugestao-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.gp-sugestao-vazio {
    margin: 0;
    padding: 2rem 1rem;
    color: var(--p-muted);
    text-align: center;
}