/* ==========================================================
   FUTURYCRAFT - UPGRADE DE DESIGN
   Painel Staff
   Camada final: refina todas as páginas sem quebrar funções.
   Carregado por último em cada página.
========================================================== */

/* ---------- TOKENS ---------- */
:root{
    color-scheme: dark;

    --fc-bg:#070b12;
    --fc-card:linear-gradient(160deg,rgba(20,27,44,.95),rgba(10,15,25,.93));
    --fc-border:rgba(255,255,255,.07);
    --fc-border-strong:rgba(0,234,255,.35);

    --fc-cyan:#00eaff;
    --fc-purple:#7c5cff;
    --fc-blue:#0077ff;
    --fc-green:#00ff87;
    --fc-red:#ff3b6b;

    --fc-text:#ffffff;
    --fc-text-2:#93a1b8;

    --fc-radius:22px;
    --fc-radius-sm:14px;

    --fc-shadow:0 25px 60px rgba(0,0,0,.5);
    --fc-motion:.28s cubic-bezier(.25,.8,.25,1);
}

/* ---------- BASE ---------- */
html{ scroll-behavior:smooth; }

body{
    background:
        radial-gradient(circle at 12% 8%, rgba(124,92,255,.10) 0%, transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(0,234,255,.08) 0%, transparent 28%),
        linear-gradient(180deg,#070b12 0%,#0b1018 55%,#070b12 100%);
    color:var(--fc-text);
    font-family:'Montserrat','Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
}

h1,h2,h3,h4,h5,h6{ text-wrap:balance; }
p{ text-wrap:pretty; }
a,button,input,select,textarea{ font-family:inherit; }

::selection{ background:rgba(0,234,255,.35); color:#fff; }

*{ scrollbar-width:thin; scrollbar-color:#7c5cff #080b11; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#080b11; }
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#7c5cff,#00d8ff);
    border-radius:30px;
    border:2px solid #080b11;
}
::-webkit-scrollbar-thumb:hover{ background:#00eaff; }

/* ---------- ACESSIBILIDADE ---------- */
:is(a,button,[role="button"],input,select,textarea,label,.staff-card,.candidato-card,.course-card,.achievement-card,.menu-btn):focus-visible{
    outline:2px solid var(--fc-cyan);
    outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ---------- CARDS (todos) ---------- */
.panel-card,
.welcome-card,
.stat-card,
.staff-card,
.mini-card,
.candidato-card,
.perfil-card,
.config-card,
.conquista-card,
.desafio-card,
.achievement-card,
.avatar-card,
.glass-card,
.modal-box,
.box,
.card,
.course-card,
.profile-card,
.ranking-item,
.mural-item,
.activity-item,
.lista-comentarios,
.info-extra{
    box-shadow:
        var(--fc-shadow),
        inset 0 1px 0 rgba(255,255,255,.05);
    border:1px solid var(--fc-border);
    transition:border-color var(--fc-motion), box-shadow var(--fc-motion), transform var(--fc-motion);
}

.panel-card,
.welcome-card,
.stat-card,
.staff-card,
.candidato-card,
.perfil-card,
.config-card,
.achievement-card,
.modal-box,
.box,
.profile-card{
    border-radius:var(--fc-radius);
}

.panel-card,
.welcome-card,
.stat-card,
.staff-card,
.candidato-card,
.perfil-card,
.achievement-card,
.config-card,
.box{
    background:var(--fc-card);
    backdrop-filter:blur(16px);
}

/* cards interativos */
.staff-card:hover,
.candidato-card:hover,
.achievement-card:not(.bloqueada):hover,
.config-card:hover,
.course-card:not(.locked):hover,
.mini-card:hover,
.box:hover,
.profile-card:hover,
.ranking-item:hover,
.mural-item:hover,
.activity-item:hover{
    border-color:rgba(124,92,255,.45);
    box-shadow:
        0 30px 60px rgba(0,0,0,.5),
        0 0 30px rgba(124,92,255,.10),
        inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- BOTÕES (todos) ---------- */
button{
    min-height:44px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform var(--fc-motion), box-shadow var(--fc-motion), background var(--fc-motion), border-color var(--fc-motion), color var(--fc-motion);
}

button:active{ transform:scale(.97); }

button:disabled{ opacity:.5; cursor:not-allowed; }

.btn-primary{
    background:linear-gradient(135deg,#00eaff 0%,#0077ff 60%,#7c5cff 120%);
    background-size:180% 180%;
    color:#001018;
    box-shadow:0 14px 35px rgba(0,234,255,.30), inset 0 1px 0 rgba(255,255,255,.5);
    letter-spacing:.4px;
}

.btn-primary:hover{
    background-position:100% 100%;
    box-shadow:0 18px 42px rgba(0,234,255,.45), inset 0 1px 0 rgba(255,255,255,.5);
    transform:translateY(-2px);
}

.btn-danger{
    background:linear-gradient(135deg,#ff3b6b,#8b0b3a);
    box-shadow:0 14px 35px rgba(255,0,80,.25), inset 0 1px 0 rgba(255,255,255,.2);
}

.btn-danger:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 42px rgba(255,0,80,.35);
}

.btn-add,
.btn-login{
    background:linear-gradient(135deg,#00cfff,#5865ff);
    background-size:160% 160%;
    box-shadow:0 12px 30px rgba(88,101,255,.35), inset 0 1px 0 rgba(255,255,255,.3);
}

.btn-add:hover,
.btn-login:hover{
    background-position:100% 100%;
    transform:translateY(-2px);
}

.btn-remover,
.logout-button{
    background:linear-gradient(135deg,#ff3b6b,#9d0034);
    box-shadow:0 12px 30px rgba(255,50,100,.3);
}

.btn-remover:hover,
.logout-button:hover{
    transform:translateY(-2px);
}

/* botões ghost / topbar */
.topbar-actions button,
.staff-actions button,
.perfil-btn,
.menu-painel button,
.menu-btn{
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
    backdrop-filter:blur(10px);
    font-weight:600;
    letter-spacing:.3px;
}

.topbar-actions button:hover,
.staff-actions button:hover,
.menu-btn:hover,
.menu-btn.ativo{
    transform:translateY(-2px);
    border-color:rgba(0,234,255,.5);
    box-shadow:0 0 18px rgba(0,234,255,.30);
}

/* botão link (cadastro/registro) */
.btn-register,
.register a{
    position:relative;
    cursor:pointer;
    transition:color var(--fc-motion);
}

/* ---------- HEADERS / TOPO ---------- */
.staff-header,
.admin-topo,
.topbar,
.usuario-header,
.acoes-topo{
    background:linear-gradient(135deg,rgba(0,234,255,.10),rgba(80,0,255,.08)),
        rgba(9,13,22,.55);
    border:1px solid rgba(0,234,255,.16);
    backdrop-filter:blur(18px);
    box-shadow:0 15px 45px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}

.staff-logo{
    border-radius:12px;
}

/* ---------- INPUTS (todos) ---------- */
input,
select,
textarea{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);
    color:var(--fc-text);
    transition:border-color var(--fc-motion), box-shadow var(--fc-motion), background var(--fc-motion);
}

input:hover,select:hover,textarea:hover{
    border-color:rgba(0,234,255,.4);
}

input:focus,select:focus,textarea:focus{
    border-color:var(--fc-cyan);
    background:rgba(0,234,255,.05);
    box-shadow:0 0 0 4px rgba(0,234,255,.14), 0 0 20px rgba(0,234,255,.12);
}

input[type="checkbox"],
input[type="radio"]{
    accent-color:var(--fc-cyan);
    cursor:pointer;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
    -webkit-box-shadow:0 0 0 1000px rgba(12,16,26,.98) inset;
    -webkit-text-fill-color:#fff;
    caret-color:#fff;
}

/* ---------- STATUS / BADGES ---------- */
.status,
.badge,
.role-tag,
.tag,
.staff-role{
    letter-spacing:.5px;
    font-weight:700;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.status-pendente,
.status-Pendente,
.badge-warning{
    background:rgba(255,190,59,.14) !important;
    color:#ffbe3b !important;
    border-color:rgba(255,190,59,.35) !important;
}

.status-aprovado,
.badge-success{
    background:rgba(0,255,135,.14) !important;
    color:#00ff87 !important;
    border-color:rgba(0,255,135,.35) !important;
}

.status-recusado,
.badge-danger{
    background:rgba(255,59,107,.14) !important;
    color:#ff5c7a !important;
    border-color:rgba(255,59,107,.35) !important;
}

.badge-info{
    background:rgba(0,234,255,.12) !important;
    color:#00eaff !important;
    border-color:rgba(0,234,255,.35) !important;
}

/* ---------- ESTATÍSTICAS / AVATAR ---------- */
.stat-icon{
    background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(0,216,255,.18));
    border:1px solid rgba(124,92,255,.3);
}

.staff-avatar img,
.avatar-staff img,
.avatar{
    box-shadow:0 0 45px rgba(124,92,255,.4), inset 0 0 20px rgba(255,255,255,.06);
}

.profile-details p{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
}

/* ---------- BARRAS DE PROGRESSO ---------- */
.level-bar,
.progress-bar,
.conquista-progress,
.desafio-progress,
.barra-progresso,
.progress-fill-track{
    background:#0c121b;
    border:1px solid rgba(255,255,255,.04);
    box-shadow:inset 0 2px 6px rgba(0,0,0,.4);
}

.level-fill,
.conquista-progress div,
.desafio-progress div,
.progress-fill{
    background:linear-gradient(90deg,#7c5cff,#00d8ff);
    background-size:200% 100%;
    animation:progressSheen 3s ease infinite;
    box-shadow:0 0 16px rgba(0,216,255,.4);
}

@keyframes progressSheen{
    0%{ background-position:0% 0%; }
    100%{ background-position:200% 0%; }
}

/* ---------- MENU / DROPDOWN ---------- */
.dropdown-content{
    background:linear-gradient(180deg,#101827,#070c15);
    border:1px solid rgba(0,234,255,.22);
    box-shadow:0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
    border-radius:16px;
}

.dropdown-content a{
    transition:background var(--fc-motion), color var(--fc-motion), padding-left var(--fc-motion);
}

.staff-button-menu{
    border-radius:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    transition:border-color var(--fc-motion), box-shadow var(--fc-motion);
}

.staff-button-menu:hover{
    border-color:rgba(0,234,255,.5);
    box-shadow:0 0 16px rgba(0,234,255,.25);
}

/* ---------- MODAIS ---------- */
.modal-box{
    background:linear-gradient(160deg,rgba(20,27,44,.97),rgba(10,15,25,.98));
    border:1px solid rgba(0,234,255,.2);
}

/* ---------- LISTAS / ITENS ---------- */
.activity-item{
    border-left-width:4px;
}

.candidato-card{
    padding:24px;
}

.grid-candidatos{
    gap:22px;
}

/* ---------- LOADING ---------- */
.loader,
.loading,
.loading-card{
    color:var(--fc-cyan);
}

/* shimmer genérico de carregamento */
@keyframes fcPulse{
    0%,100%{ opacity:1; }
    50%{ opacity:.55; }
}

.loading:not(:empty),
.loading-card{
    animation:fcPulse 1.2s ease-in-out infinite;
}

/* ---------- RESPONSIVO EXTRA ---------- */
@media (max-width:700px){
    .panel-card,
    .welcome-card,
    .candidato-card,
    .staff-card,
    .perfil-card,
    .config-card{
        border-radius:18px;
    }

    .staff-actions{
        width:100%;
    }

    .staff-actions button{
        flex:1;
    }

    .logout-button,
    .btn-primary,
    .btn-danger{
        min-height:44px;
    }
}

@media (max-width:480px){
    .topbar-actions{
        width:100% !important;
        display:grid !important;
        grid-template-columns:1fr;
    }
}

/* ==========================================================
   CRIADORES (YouTuber / Streamer)
   Novos status + ações do detalhe + seções de resposta.
========================================================== */

.status-em-analise{
    background:rgba(0,234,255,.12) !important;
    color:#00eaff !important;
    border-color:rgba(0,234,255,.4) !important;
}

.status-contatado{
    background:rgba(190,242,255,.1) !important;
    color:#9cd8ff !important;
    border-color:rgba(156,216,255,.35) !important;
}

.mini-card.em-analise{
    background:linear-gradient(135deg,rgba(0,234,255,.16),rgba(0,140,255,.1));
    border:1px solid rgba(0,234,255,.45);
}

.mini-card.em-analise strong{
    color:#00eaff;
}

.mini-card.contatado{
    background:linear-gradient(135deg,rgba(156,216,255,.16),rgba(120,160,255,.1));
    border:1px solid rgba(156,216,255,.4);
}

.mini-card.contatado strong{
    color:#9cd8ff;
}

.botao-status{
    border:1px solid var(--fc-border);
    background:rgba(255,255,255,.06);
    color:var(--fc-text);
    font-weight:700;
    cursor:pointer;
    border-radius:999px;
    padding:.65rem 1.1rem;
    min-height:44px;
    transition:filter var(--fc-motion), transform var(--fc-motion);
}

.botao-status:hover{
    filter:brightness(1.15);
    transform:translateY(-1px);
}

.botao-status.analisar{
    border-color:rgba(0,234,255,.55);
    background:rgba(0,234,255,.14);
    color:#00eaff;
}

.botao-status.contatar{
    border-color:rgba(156,216,255,.55);
    background:rgba(156,216,255,.14);
    color:#9cd8ff;
}

.criador-acoes{
    flex-wrap:wrap;
    gap:.6rem;
}

.secao-resposta{
    margin-bottom:1.4rem;
}

.secao-resposta h3{
    font-size:1rem;
    color:var(--fc-primary);
    margin:0 0 .7rem;
    padding-bottom:.5rem;
    border-bottom:1px solid rgba(76,194,255,.25);
}

.novo-comentario{
    margin-top:1.5rem;
    padding-top:1rem;
    border-top:1px solid var(--fc-border);
}

.novo-comentario h3{
    font-size:.95rem;
    margin:0 0 .6rem;
}

.novo-comentario textarea{
    width:100%;
    min-height:90px;
    padding:.7rem .9rem;
    border-radius:12px;
    border:1px solid var(--fc-border);
    background:rgba(255,255,255,.05);
    color:var(--fc-text);
    font-family:inherit;
    resize:vertical;
}

.novo-comentario button{
    margin-top:.6rem;
    padding:.6rem 1.2rem;
    border:none;
    border-radius:999px;
    background:var(--fc-primary, #22d3ee);
    color:#001018;
    font-weight:800;
    cursor:pointer;
    min-height:44px;
}

@media (max-width:640px){
    .botao-status{
        flex:1 1 45%;
    }
}

/* ==========================================================
   PORTAL DE CANDIDATURAS — admin unificado
   Alias de mini-cards, badges de tipo e filtro de tipo.
========================================================== */

.mini-card.analise{
    background:linear-gradient(135deg,rgba(0,234,255,.16),rgba(0,140,255,.1));
    border:1px solid rgba(0,234,255,.45);
}

.mini-card.analise strong{
    color:#00eaff;
}

.menu-tipos{
    margin-top:.25rem;
    border-top:none;
}

.tipo-staff{
    color:#7db8ff;
}

.tipo-youtuber{
    color:#ff6b9d;
}

.tipo-streamer{
    color:#ff5470;
}

.tipo-btn{
    font-size:.85rem;
}

.card-info strong.tipo-staff,
.card-info strong.tipo-youtuber,
.card-info strong.tipo-streamer{
    font-weight:800;
}