/* ============================================================
   Cuiudo Lurker — sistema visual do painel
   Dark, com acento verde do Kick. Todos os ids/classes usados por
   app.js e pelo launcher são preservados. NÃO usar transform/filter
   em .grade/.slot/.slot-chat: o launcher desenha o vídeo por cima
   dessas coordenadas e qualquer deslocamento CSS desalinha.
   ============================================================ */

:root {
    /* superfícies (do fundo para a frente) */
    --bg:        #08080e;
    --surface-1: #101017;
    --surface-2: #171720;
    --surface-3: #1f1f2b;
    --surface-hi: #26263300;

    /* texto */
    --fg:      #ededf3;
    --fg-dim:  #9c9cb0;
    --fg-mute: #6c6c7e;

    /* acentos */
    --kick:     #53fc18;
    --kick-2:   #43d80f;
    --amarelo:  #f7d64e;
    --vermelho: #ff5060;
    --verde:    #3dff6a;

    /* linhas */
    --borda:      #2a2a38;
    --borda-soft: rgba(255,255,255,.06);

    /* geometria */
    --r:    12px;
    --r-sm: 8px;
    --r-xs: 6px;

    /* sombras / brilhos */
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 6px 20px rgba(0,0,0,.45);
    --glow-kick: 0 0 0 1px rgba(83,252,24,.35), 0 6px 24px rgba(83,252,24,.12);

    /* gradientes */
    --grad-kick: linear-gradient(180deg, #63ff30 0%, #45e00f 100%);
    --grad-surface: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--fg);
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Esconde a barra de rolagem do documento (o app é tela cheia);
   os containers roláveis internos ganham uma barra fininha própria. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

a { color: var(--kick); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(83,252,24,.28); }

/* Barra de rolagem fininha para as áreas que rolam */
.grade, .planos, .admin-corpo, #modal-config {
    scrollbar-width: thin;
    scrollbar-color: #33333f transparent;
}
.grade::-webkit-scrollbar, .planos::-webkit-scrollbar,
.admin-corpo::-webkit-scrollbar { width: 10px; height: 10px; }
.grade::-webkit-scrollbar-thumb, .planos::-webkit-scrollbar-thumb,
.admin-corpo::-webkit-scrollbar-thumb {
    background: #30303d; border-radius: 10px;
    border: 3px solid transparent; background-clip: content-box;
}
.grade::-webkit-scrollbar-thumb:hover, .planos::-webkit-scrollbar-thumb:hover,
.admin-corpo::-webkit-scrollbar-thumb:hover { background: #43434f; background-clip: content-box; }

/* ---------- Botões (sistema unificado) ---------- */
.btn-primario, .btn-assinar, .btn-kick, .btn-mini-kick {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 0; border-radius: var(--r-sm); cursor: pointer;
    background: var(--grad-kick); color: #06140a; font-weight: 700;
    box-shadow: var(--sh-1);
    transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn-primario { width: 100%; padding: 11px 14px; font-size: 14px; }
.btn-primario:hover, .btn-assinar:hover, .btn-kick:hover, .btn-mini-kick:hover {
    filter: brightness(1.06);
    box-shadow: 0 4px 16px rgba(83,252,24,.25);
}
.btn-primario:active, .btn-assinar:active, .btn-kick:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: default; filter: none !important; box-shadow: none; }

.btn-sec {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 11px 16px; border-radius: var(--r-sm);
    border: 1px solid var(--borda); background: var(--surface-3); color: var(--fg);
    font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s;
}
.btn-sec:hover { border-color: #3a3a4a; background: #24242f; }

:focus-visible {
    outline: 2px solid var(--kick);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* =========================================================
   Telas de login / cadastro
   ========================================================= */
.tela-auth, .tela-connect {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(83,252,24,.10), transparent 60%),
        radial-gradient(800px 500px at 90% 110%, rgba(83,252,24,.06), transparent 55%),
        var(--bg);
}
.card-auth {
    width: 100%; max-width: 380px;
    background: var(--surface-2); background-image: var(--grad-surface);
    border: 1px solid var(--borda); border-radius: 16px;
    padding: 32px 30px;
    box-shadow: var(--sh-2);
    text-align: center;
}
.card-auth .marca-mark { width: 64px; height: 64px; border-radius: 14px; margin: 0 auto 16px; }
.card-auth h1 { margin: 0 0 4px; font-size: 23px; font-weight: 800; letter-spacing: -.2px; }
.card-auth form { text-align: left; margin-top: 20px; }
.sub { margin: 0 0 20px; color: var(--fg-dim); font-size: 14px; }
.card-auth label {
    display: block; margin-bottom: 14px; font-size: 12px; font-weight: 600;
    color: var(--fg-dim); text-transform: uppercase; letter-spacing: .4px;
}
.card-auth input {
    width: 100%; margin-top: 7px; padding: 11px 13px;
    background: var(--surface-1); border: 1px solid var(--borda);
    border-radius: var(--r-sm); color: var(--fg); font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.card-auth input::placeholder { color: var(--fg-mute); }
.card-auth input:focus {
    outline: none; border-color: var(--kick);
    box-shadow: 0 0 0 3px rgba(83,252,24,.15);
}
.card-auth .btn-primario { margin-top: 4px; }
.troca-modo { margin-top: 20px; text-align: center; font-size: 13px; color: var(--fg-dim); }

/* Marca (logo textual + selo) */
.marca-mark {
    width: 30px; height: 30px; border-radius: 9px;
    background: url('logo.png') center/contain no-repeat; display: inline-block;
    flex: 0 0 auto;
}
.marca-mark::after {
    display: none;
}
:root {
    --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-5 0-9 4.5-10 7 1 2.5 5 7 10 7s9-4.5 10-7c-1-2.5-5-7-10-7Zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3C/svg%3E");
}

.alerta {
    background: rgba(255,80,96,.12); border: 1px solid rgba(255,80,96,.5);
    color: #ffb8bf; padding: 11px 13px; border-radius: var(--r-sm);
    font-size: 13px; margin-bottom: 16px; text-align: left;
}

/* =========================================================
   Painel principal — barra de topo
   ========================================================= */
.tela-lurk { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.barra-topo {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; flex: 0 0 auto;
    background: linear-gradient(180deg, #0d0d14, #0a0a10);
    border-bottom: 1px solid var(--borda);
}
.marca {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 800; font-size: 14.5px; letter-spacing: -.1px;
}
.marca .marca-mark { width: 28px; height: 28px; border-radius: 8px; }
.espaco { flex: 1; }

/* Badge de conexão como pílula com bolinha */
.status-conexao {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; padding: 4px 10px 4px 8px;
    border-radius: 999px; border: 1px solid var(--borda); background: var(--surface-2);
    color: var(--fg-dim);
}
.status-conexao::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 8px currentColor;
}
.status-conexao[data-state="connected"]    { color: var(--verde);   border-color: rgba(61,255,106,.35); }
.status-conexao[data-state="reconnecting"] { color: var(--amarelo); border-color: rgba(247,214,78,.35); }
.status-conexao[data-state="disconnected"] { color: var(--vermelho);border-color: rgba(255,80,96,.35); }

/* Botões da barra */
.barra-topo .btn-config, .btn-sair {
    display: inline-flex; align-items: center;
    padding: 8px 13px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 700;
    cursor: pointer; border: 1px solid var(--borda); background: var(--surface-2);
    color: var(--fg); text-decoration: none; transition: border-color .15s, background .15s;
}
.barra-topo .btn-config:hover, .btn-sair:hover { border-color: #3a3a4a; background: #22222d; }
.barra-topo .btn-kick { padding: 8px 13px; font-size: 12.5px; }

/* ---------- HUD (chips de status) ---------- */
.hud { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.hud-item {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 12px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--borda);
}
.hud-item::before {
    content: ""; width: 15px; height: 15px; flex: 0 0 auto;
    background: var(--fg-dim);
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
}
.hud-moedas::before { background: var(--amarelo);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm.9-12.5H10v9h1.9v-3H13a3 3 0 0 0 0-6Zm.1 4h-1.1v-2H13a1 1 0 0 1 0 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm.9-12.5H10v9h1.9v-3H13a3 3 0 0 0 0-6Zm.1 4h-1.1v-2H13a1 1 0 0 1 0 2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.hud-ciclo::before { background: var(--kick);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-13h-2v6l5 3 1-1.7-4-2.3V7Z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-13h-2v6l5 3 1-1.7-4-2.3V7Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.hud-passe-item::before { background: var(--kick);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4V8a2 2 0 0 1 2-2Zm11 2v8h2V8h-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4V8a2 2 0 0 1 2-2Zm11 2v8h2V8h-2Z'/%3E%3C/svg%3E") center/contain no-repeat; }

.hud-texto { display: flex; flex-direction: column; line-height: 1.15; }
.hud-rotulo { color: var(--fg-mute); text-transform: uppercase; letter-spacing: .5px; font-size: 9.5px; font-weight: 700; }
.hud-item strong { font-size: 14px; font-variant-numeric: tabular-nums; }
#hud-saldo { color: var(--amarelo); }
#hud-passe { color: var(--kick); }

.hud-ciclo { min-width: 150px; }
.barra-ciclo {
    flex: 1; height: 7px; border-radius: 999px; background: #0c0c12;
    border: 1px solid var(--borda); overflow: hidden;
}
.barra-ciclo > div {
    height: 100%; width: 0; border-radius: 999px;
    background: var(--grad-kick); box-shadow: 0 0 10px rgba(83,252,24,.5);
    transition: width .5s ease;
}
.hud-ciclo small { color: var(--fg-dim); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

/* Banner de conta Kick desconectada */
.aviso-kick {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    padding: 11px 16px; font-size: 13px;
    background: linear-gradient(180deg, rgba(247,214,78,.14), rgba(247,214,78,.07));
    border-bottom: 1px solid rgba(247,214,78,.4);
    color: #f8e9ac;
}
.aviso-kick::before {
    content: "⚠"; color: var(--amarelo); font-size: 15px; flex: 0 0 auto;
}
.aviso-kick[hidden] { display: none; }
.btn-mini-kick { margin-left: auto; padding: 7px 13px; font-size: 12px; }

/* =========================================================
   Corpo: grade da vitrine + lateral de planos
   ========================================================= */
.corpo { flex: 1 1 auto; display: flex; min-height: 0; }

.grade {
    flex: 1 1 auto; display: grid; gap: 10px; padding: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-auto-rows: min-content; align-content: start; min-height: 0;
    overflow-y: auto;
}

.slot {
    display: flex; flex-direction: column;
    border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden;
    background: var(--surface-2);
    box-shadow: var(--sh-1);
    /* só cor/sombra na interação — nada de transform (desalinharia o vídeo) */
    transition: border-color .15s ease, box-shadow .15s ease;
}
.slot:hover { border-color: #39394a; box-shadow: var(--sh-2); }
.slot-cabecalho {
    flex: 0 0 auto; padding: 8px 11px; font-size: 12px; font-weight: 700;
    background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
    border-bottom: 1px solid var(--borda);
    display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden;
}
.slot-nome { overflow: hidden; text-overflow: ellipsis; }
.slot-viewers {
    margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
    color: var(--kick); font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: rgba(83,252,24,.12); border-radius: 999px; padding: 2px 8px;
}
.slot-viewers:empty { display: none; }
.slot-viewers::before {
    content: ""; width: 12px; height: 12px; background: var(--kick);
    -webkit-mask: var(--eye) center/contain no-repeat; mask: var(--eye) center/contain no-repeat;
}
.ao-vivo {
    width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho);
    flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(255,80,96,.6); animation: pulso 1.8s infinite;
}
@keyframes pulso {
    0%   { box-shadow: 0 0 0 0 rgba(255,80,96,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(255,80,96,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,80,96,0); }
}
/* O launcher desenha o vídeo por cima desta área (16:9). Sem transform aqui. */
.slot-chat { width: 100%; aspect-ratio: 16 / 9; background: #0b0b11; }

/* Estado vazio */
.vazio {
    grid-column: 1 / -1; align-self: center; justify-self: center;
    text-align: center; color: var(--fg-dim); padding: 60px 20px; max-width: 380px;
}
.vazio::before {
    content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 16px;
    background: var(--fg-mute); opacity: .5;
    -webkit-mask: var(--eye) center/contain no-repeat; mask: var(--eye) center/contain no-repeat;
}
.vazio p { margin: 4px 0; }
.vazio p:first-of-type { color: var(--fg); font-weight: 700; font-size: 15px; }
.vazio .btn-primario { width: auto; margin-top: 14px; padding: 10px 20px; }

/* Fora do launcher: placeholders neutros */
.grade.sem-launcher .slot-chat::after {
    content: "vídeo disponível no aplicativo";
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--fg-mute); font-size: 12px; letter-spacing: .3px;
}

/* =========================================================
   Lateral de planos
   ========================================================= */
.planos {
    flex: 0 0 264px; padding: 16px; overflow-y: auto;
    background: var(--surface-1); border-left: 1px solid var(--borda);
}
.planos h2 { margin: 0 0 10px; font-size: 15px; font-weight: 800; letter-spacing: -.1px; }
.planos .sub { margin-bottom: 14px; font-size: 12px; }

.plano-atual-destaque {
    margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r);
    background: linear-gradient(180deg, rgba(83,252,24,.12), rgba(83,252,24,.04));
    border: 1px solid rgba(83,252,24,.4);
    font-size: 12px; color: var(--fg-dim); text-transform: uppercase;
    letter-spacing: .4px; font-weight: 700;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.plano-atual-destaque strong {
    color: var(--kick); font-size: 15px; text-transform: none; letter-spacing: 0;
}

.plano {
    border: 1px solid var(--borda); border-radius: var(--r);
    background: var(--surface-2); background-image: var(--grad-surface);
    padding: 13px; margin-bottom: 10px; position: relative;
    transition: border-color .15s, box-shadow .15s;
}
.plano:hover { border-color: #37374a; }
.plano-atual {
    border-color: rgba(83,252,24,.5);
    box-shadow: var(--glow-kick);
}
.plano-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.plano-topo strong { font-size: 15px; font-weight: 800; }
.plano-preco { font-size: 12px; color: var(--fg-dim); font-weight: 600; }
.plano-farm {
    margin-top: 6px; font-size: 12.5px; color: var(--amarelo); font-weight: 700;
    display: inline-flex; align-items: center; gap: 5px;
}
.plano-farm::before {
    content: ""; width: 13px; height: 13px; background: var(--amarelo);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm.9-12.5H10v9h1.9v-3H13a3 3 0 0 0 0-6Zm.1 4h-1.1v-2H13a1 1 0 0 1 0 2Z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm.9-12.5H10v9h1.9v-3H13a3 3 0 0 0 0-6Zm.1 4h-1.1v-2H13a1 1 0 0 1 0 2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.plano-tag {
    display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: 999px;
    background: var(--grad-kick); color: #06140a; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .4px;
}
.btn-assinar { width: 100%; margin-top: 10px; padding: 9px; font-size: 12.5px; }
.btn-gerenciar { width: 100%; margin-top: 4px; }

/* Caixa de ativar passe */
.caixa-passe {
    margin-top: 18px; padding: 14px; border-radius: var(--r);
    border: 1px solid var(--borda); background: var(--surface-2);
}
.caixa-passe h3 { margin: 0 0 3px; font-size: 14px; font-weight: 800; }
.caixa-passe .sub { margin-bottom: 12px; font-size: 12px; }
.caixa-passe label {
    display: block; font-size: 11px; font-weight: 600; color: var(--fg-dim);
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px;
}
.caixa-passe input {
    width: 100%; margin-top: 6px; padding: 9px 11px;
    background: var(--surface-1); border: 1px solid var(--borda);
    border-radius: var(--r-sm); color: var(--fg); font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.caixa-passe input:focus {
    outline: none; border-color: var(--kick); box-shadow: 0 0 0 3px rgba(83,252,24,.15);
}
.caixa-passe .btn-primario { padding: 10px; font-size: 13px; }

.passe-msg { margin: 10px 0 0; font-size: 12px; color: var(--verde); }
.passe-msg.erro { color: var(--vermelho); }

/* =========================================================
   Modal "meu canal"
   ========================================================= */
#modal-config {
    border: 1px solid var(--borda); border-radius: 16px;
    background: var(--surface-2); background-image: var(--grad-surface);
    color: var(--fg); width: min(440px, 92vw); padding: 26px;
    box-shadow: var(--sh-2);
}
#modal-config::backdrop { background: rgba(4,4,8,.66); backdrop-filter: blur(3px); }
.form-config h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.form-config label {
    display: block; margin-bottom: 12px; font-size: 11px; font-weight: 600;
    color: var(--fg-dim); text-transform: uppercase; letter-spacing: .4px;
}
.form-config input {
    width: 100%; margin-top: 7px; padding: 11px 13px;
    background: var(--surface-1); border: 1px solid var(--borda);
    border-radius: var(--r-sm); color: var(--fg); font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.form-config input:focus {
    outline: none; border-color: var(--kick); box-shadow: 0 0 0 3px rgba(83,252,24,.15);
}
.acoes-modal { display: flex; gap: 10px; margin-top: 14px; }
.acoes-modal .btn-primario { width: auto; flex: 1; }

/* Aviso fixo fora do launcher */
.fora-do-app {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    background: var(--surface-3); border: 1px solid var(--borda); color: var(--fg-dim);
    padding: 11px 18px; border-radius: 999px; font-size: 13px; box-shadow: var(--sh-2);
}

/* =========================================================
   Admin
   ========================================================= */
.tela-admin { min-height: 100vh; display: flex; flex-direction: column; }
.admin-corpo { padding: 22px; overflow: auto; }
.aviso-ok {
    background: rgba(61,255,106,.1); border: 1px solid rgba(61,255,106,.45);
    color: #bfffce; padding: 11px 14px; border-radius: var(--r-sm);
    font-size: 13px; margin-bottom: 18px;
}

.bloco-pendentes { margin-bottom: 28px; }
.bloco-pendentes h2 { font-size: 16px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; }
.contador-pend {
    background: var(--amarelo); color: #1a1400; font-size: 12px; font-weight: 800;
    border-radius: 999px; padding: 2px 10px; min-width: 22px; text-align: center;
}

.tabela-admin {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
    background: var(--surface-1); border: 1px solid var(--borda); border-radius: var(--r);
    overflow: hidden;
}
.tabela-admin th, .tabela-admin td {
    padding: 11px 12px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle;
}
.tabela-admin thead th {
    color: var(--fg-mute); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
    font-weight: 700; background: var(--surface-2);
}
.tabela-admin tbody tr:last-child td { border-bottom: 0; }
.tabela-admin tbody tr:hover { background: rgba(255,255,255,.02); }
.tabela-admin td.num { text-align: right; color: var(--amarelo); font-weight: 700; font-variant-numeric: tabular-nums; }
.tabela-admin small.sub { display: block; margin: 3px 0 0; color: var(--fg-mute); }

.form-linha { display: flex; gap: 6px; align-items: center; }
.form-linha select, .form-linha input {
    padding: 6px 8px; background: var(--surface-3); border: 1px solid var(--borda);
    border-radius: var(--r-xs); color: var(--fg); font-size: 12px; width: 82px;
}
.btn-mini {
    padding: 6px 11px; border-radius: var(--r-xs); border: 1px solid var(--borda);
    background: var(--surface-3); color: var(--fg); font-size: 11px;
    font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s;
}
.btn-mini:hover { border-color: #3a3a4a; background: #262632; }
/* Estado ligado / ação positiva → verde do tema */
.btn-mini-on { background: var(--grad-kick); border-color: transparent; color: #06140a; }
.btn-mini-on:hover { filter: brightness(1.06); background: var(--grad-kick); }
/* Ação de cautela (bloquear) → âmbar */
.btn-mini-warn {
    background: rgba(247,214,78,.14); border-color: rgba(247,214,78,.5); color: var(--amarelo);
}
.btn-mini-warn:hover { background: rgba(247,214,78,.22); border-color: var(--amarelo); }
/* Ação destrutiva (remover) → vermelho */
.btn-mini-danger {
    background: rgba(255,80,96,.12); border-color: rgba(255,80,96,.5); color: #ff8b95;
}
.btn-mini-danger:hover { background: rgba(255,80,96,.2); border-color: var(--vermelho); color: #ffb3ba; }

/* Coluna de ações: botões empilhados, alinhados e com respiro */
.acoes-admin { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.acoes-admin form { display: flex; }
.acoes-admin .btn-mini { width: 100%; justify-content: center; }

/* Tags de status e cargo */
.tag-vivo {
    margin-left: 5px; padding: 2px 7px; border-radius: 999px;
    background: var(--vermelho); color: #fff; font-size: 10px; font-weight: 700;
}
.tag-status { padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.tag-ok   { background: rgba(61,255,106,.15); color: var(--verde); }
.tag-pend { background: rgba(247,214,78,.18); color: var(--amarelo); }
.tag-off  { background: rgba(255,80,96,.15); color: var(--vermelho); }

.tag-role {
    margin-left: 5px; padding: 1px 7px; border-radius: 999px;
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
    vertical-align: middle;
}
.tag-admin { background: var(--grad-kick); color: #06140a; }
.tag-vip   { background: linear-gradient(180deg, #ffd85a, #f2b705); color: #241a00; }

/* Portão app-vs-navegador na tela de entrada. O <script> no index.php marca
   html.em-app (dentro do launcher) ou html.no-app (navegador comum). */
.so-no-app        { display: none; }
html.em-app .so-no-app { display: block; }
.aviso-abrir-app  { display: none; }
html.no-app .aviso-abrir-app { display: block; }
.texto-abrir-app {
    color: var(--fg-dim); font-size: 14px; line-height: 1.55; margin: 10px 0 0;
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; }
}