/* ============================================================================
   MQFS One — pele visual compartilhada (por Mia / OpenClaw)
   Regra: SOBREPOR, nunca reescrever. Nao mexe em largura, posicao ou display
   das telas: cuida de fundo, tipografia, cantos, sombras, hover e transicoes.
   Ninguem fica sem animacao: respeita prefers-reduced-motion.
   ============================================================================ */

:root{
    --tinta:#11150a;
    --lima:#CCFF66;
    --lima-2:#a8e800;
    --papel:#f7f8f4;
    --mute:#6b7264;
    --mqfs-linha:rgba(17,21,10,.08);
    --mqfs-sombra:0 12px 34px rgba(17,21,10,.10), 0 3px 8px rgba(17,21,10,.05);
    --mqfs-raio:16px;
}

/* ---------- fundo e tipografia ---------- */
/* O degradê vai no HTML (que pinta a TELA inteira, nao so o conteudo) e o body
   ganha min-height:100vh + fundo fixo: assim nunca ha quebra de altura — em
   pagina logada, deslogada ou com busca sem resultado. */
html{
    background:
        radial-gradient(1100px 520px at 78% -12%, rgba(204,255,102,.30), transparent 62%),
        radial-gradient(760px 420px at 6% -6%, rgba(108,150,255,.12), transparent 58%),
        var(--papel);
    background-attachment:fixed;
    min-height:100%;
}
body{
    min-height:100vh;
    background:
        radial-gradient(1100px 520px at 78% -12%, rgba(204,255,102,.30), transparent 62%),
        radial-gradient(760px 420px at 6% -6%, rgba(108,150,255,.12), transparent 58%),
        var(--papel) !important;
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:var(--tinta) !important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Calibri,Arial,sans-serif !important;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{letter-spacing:-.01em}

/* ---------- halos de paralaxe (inseridos pelos templates) ---------- */
.plx{position:fixed;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;z-index:0}
.plx-1{width:420px;height:420px;top:-120px;right:-60px;background:rgba(204,255,102,.55)}
.plx-2{width:360px;height:360px;bottom:-140px;left:-80px;background:rgba(120,160,255,.22)}

/* ---------- transicao suave entre paginas ---------- */
html.js body{opacity:0;transform:translateY(8px)}
html.js body.pronto{opacity:1;transform:none;
    transition:opacity .26s cubic-bezier(.22,.61,.36,1), transform .26s cubic-bezier(.22,.61,.36,1)}

/* ---------- barra de pesquisa (index) ---------- */
.cont-search-bar input,
.search-bar input,
input.search-input{
    border:1px solid var(--mqfs-linha) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 10px 30px rgba(17,21,10,.08);
    transition:box-shadow .22s ease, border-color .22s ease;
}
.cont-search-bar input:focus,
.search-bar input:focus,
input.search-input:focus{
    outline:none;
    border-color:var(--lima) !important;
    box-shadow:0 0 0 4px rgba(204,255,102,.35), 0 10px 30px rgba(17,21,10,.10);
}

/* ---------- resultados da pesquisa virando cartoes ---------- */
.cont-result{line-height:1.45}
.cont-result-line{
    background:rgba(255,255,255,.92) !important;
    border:1px solid var(--mqfs-linha) !important;
    border-radius:var(--mqfs-raio) !important;
    box-shadow:0 8px 22px rgba(17,21,10,.07);
    margin-bottom:12px;
    transition:transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease, border-color .26s ease;
}
@media (hover:hover){
    .cont-result-line:hover{
        transform:translateY(-2px);
        box-shadow:0 16px 34px rgba(17,21,10,.13);
        border-color:rgba(204,255,102,.75) !important;
    }
}
.ptitulo{font-weight:700;letter-spacing:-.01em}
.pdescricao{color:#3a4132}
.pcontem{color:#5b6350}

/* ---------- botoes ---------- */
.btn-alugar,.btn-liberado{
    border-radius:12px !important;
    font-weight:700;
    border:0;
    cursor:pointer;
    transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease, filter .2s ease;
}
.btn-alugar{background:linear-gradient(135deg,#e2ff9e,var(--lima)) !important;color:#11150a !important;
    box-shadow:0 8px 20px rgba(120,170,0,.26)}
.btn-liberado{background:linear-gradient(135deg,#d7ff8a,var(--lima-2)) !important;color:#11150a !important;
    box-shadow:0 8px 20px rgba(120,170,0,.24)}
@media (hover:hover){
    .btn-alugar:hover,.btn-liberado:hover{transform:translateY(-2px);filter:brightness(1.03);
        box-shadow:0 14px 28px rgba(120,170,0,.32)}
}
.btn-alugar:active,.btn-liberado:active{transform:translateY(0) scale(.99)}

/* ---------- caixas/containers genericos das outras telas ---------- */
.container,
.cont-extrato,.cont-recarga,.cont-migrate,.cont-indicacao{
    background:rgba(255,255,255,.9);
    border:1px solid var(--mqfs-linha);
    border-radius:var(--mqfs-raio);
    box-shadow:var(--mqfs-sombra);
}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
    border-radius:11px !important;
    border:1px solid var(--mqfs-linha) !important;
    transition:box-shadow .2s ease, border-color .2s ease;
}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,
input[type=number]:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--lima) !important;box-shadow:0 0 0 4px rgba(204,255,102,.32)
}
button[type=submit],.button{
    border-radius:12px !important;
    transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease, filter .2s ease;
}
@media (hover:hover){
    button[type=submit]:hover,.button:hover{transform:translateY(-1px);filter:brightness(1.03)}
}

/* ---------- menu do topo: item ativo em pilula + cantos arredondados ---------- */
/* o menu e position:fixed SEM top definido -> herda a posicao estatica e pode
   ser empurrado para baixo (vao branco acima). Aqui ele fica preso no topo. */
.cont-navbar{top:0 !important;left:0 !important;right:0 !important}
/* a barra preta do menu ganha canto arredondado (e o overflow corta o hover
   para nao escapar pelos cantos) */
.menu{
    border-radius:14px;
    overflow:hidden;
}
.menu a{
    border-radius:0;
}
.menu a:first-child{border-radius:12px 0 0 12px}
.menu a:last-child{border-radius:0 12px 12px 0}
@media (max-width:768px){
    .menu{border-radius:12px}
    .menu a:first-child{border-radius:12px 12px 0 0}
    .menu a:last-child{border-radius:0 0 12px 12px}
}
.menu a:hover{background-color:var(--lima) !important;color:#11150a !important}

/* ---------- cards de SUGESTAO da index (aparecem logado, sem busca) ---------- */
.sugestao{
    /* volta ao flex do seu CSS (grades apertadas encolhiam os cards) */
    height:auto !important;
    align-items:stretch !important;
    flex-wrap:wrap;
    gap:12px;
    padding:4px 0;
}
.sugestao_col{
    flex:1 1 290px;
    width:32% !important;
    min-width:250px;
    max-width:100%;
    min-height:0;
    height:auto !important;
    display:flex; flex-direction:column; gap:8px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--mqfs-linha);
    border-radius:14px;
    padding:13px 15px !important;
    /* mantem a barrinha verde original, agora como detalhe interno */
    box-shadow:0 8px 22px rgba(17,21,10,.07), inset 3px 0 0 0 #3AB54A !important;
    cursor:pointer; text-align:left;
    min-width:0;
    transition:transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s ease, border-color .24s ease;
}
/* o texto NUNCA escapa: quebra em qualquer ponto e respeita a largura do card */
.sugestao_col span,
.sugestao_col div{
    display:block; min-width:0; max-width:100%;
    white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.35;
}
.sugestao_col span:first-child{
    font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#7a8a3f;
}
.sugestao_col span:last-child{
    font-weight:650; color:var(--tinta);
}
@media (hover:hover){
    .sugestao_col:hover{
        transform:translateY(-2px);
        box-shadow:0 16px 34px rgba(17,21,10,.13);
        border-color:rgba(204,255,102,.75);
    }
}

/* ---------- TABELAS (extrato · recarga · migrações) ---------- */
.cont-result table{
    width:100%; border-collapse:separate; border-spacing:0; font-size:14px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--mqfs-linha); border-radius:14px; overflow:hidden;
    box-shadow:0 10px 26px rgba(17,21,10,.08);
}
.cont-result thead th{
    background:#f2f5ec; color:#5b6350; text-align:left;
    font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
    padding:11px 14px; border-bottom:1px solid var(--mqfs-linha); white-space:nowrap;
}
.cont-result tbody td{
    padding:11px 14px; vertical-align:middle;
    border-bottom:1px solid rgba(17,21,10,.05);
}
.cont-result tbody tr:last-child td{border-bottom:0}
.cont-result tbody tr:nth-child(even){background:rgba(246,247,242,.65)}
.cont-result tbody tr:hover{background:rgba(204,255,102,.15)}
/* colunas numericas alinhadas e sem "pulos" de largura */
.cont-result th.col1,.cont-result th.col2,.cont-result th.col3,
.cont-result td.col1,.cont-result td.col2,.cont-result td.col3,
.cont-result td.colc{
    text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.cont-result td.cold{text-align:right; white-space:nowrap; font-weight:750; font-variant-numeric:tabular-nums}
.cont-result td.col4{max-width:420px}
@media (max-width:900px){
    .cont-result{overflow-x:auto; -webkit-overflow-scrolling:touch}
    .cont-result table{min-width:680px}
}

/* ---------- RECARGA: acabamento SEM mexer na disposição do seu CSS ---------- */
/* a sua folha já define .opcoes-recarga como flex (row/wrap) e .opcao com
   flex:1 1 240px + max-width:280px — aqui só entram cor, canto, sombra e hover */
.opcoes-recarga{gap:15px}
.opcao{
    border:1.5px solid var(--mqfs-linha);
    border-radius:14px;
    background:rgba(255,255,255,.95);
    box-shadow:0 8px 22px rgba(17,21,10,.06);
    transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease,
               border-color .2s ease, background .2s ease;
}
@media (hover:hover){ .opcao:hover{transform:translateY(-2px); border-color:rgba(204,255,102,.8)} }
.opcao.selecionada{
    border-color:var(--lima) !important; background:rgba(204,255,102,.10) !important;
    box-shadow:0 12px 28px rgba(120,170,0,.22) !important;
}
.opcao input[type="radio"]{accent-color:#7fb800; flex:none}
.opcao-conteudo{min-width:0; text-align:left}
.opcao-titulo{font-weight:750; font-size:16px; line-height:1.25}
.opcao-desc{overflow-wrap:anywhere}
.opcao-tag{
    font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
    color:#5b6350; background:#eef2e5; border-radius:999px; padding:3px 10px; align-self:flex-start;
}
.opcao-valor{font-weight:800; font-size:17px}

/* campos: MANTÉM A LINHA do seu CSS (valor + botões lado a lado).
   Só devolve altura automática para nada ficar escondido atrás da tabela. */
.campos_recarga{
    height:auto !important; min-height:50px;
    flex-wrap:wrap; gap:12px; align-items:center; justify-content:center;
}
.linha-rec{display:flex; align-items:center; gap:8px}
.linha-rec label{font-size:13px; font-weight:600; color:#5b6350}
.cont-recarga input[name="valor"],
.cont-recarga input#valor{
    text-align:right; font-size:17px; font-weight:750;
    font-variant-numeric:tabular-nums; min-width:150px;
}
.cont-recarga .btn{border-radius:12px; font-weight:700}
@media (max-width:640px){
    .campos_recarga{flex-direction:column; align-items:stretch; height:auto !important}
    .linha-rec{justify-content:space-between}
    .cont-recarga input[name="valor"],
    .cont-recarga input#valor{width:100%; min-width:0}
    .cont-recarga .btn{width:100%}
}

/* ---------- botões iguais, seja <button> ou <a> ----------
   (ex.: "Copiar script" x "Baixar .sql": um é button, outro é link, e as alturas
   divergiam. Aqui os dois passam pela MESMA régua de altura e padding.) */
button.btn-alugar, button.btn-liberado,
a.btn-alugar, a.btn-liberado{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    min-height:46px;
    padding:0 22px !important;
    border:0 !important;
    line-height:1 !important;
    font-family:inherit !important;
    font-size:15px !important;
    font-weight:700 !important;
    text-decoration:none !important;
    white-space:nowrap;
    vertical-align:middle;
}
/* quando ficam lado a lado (card do script), mesma altura para os dois */
.sc-acoes{align-items:stretch}
.sc-acoes .btn-alugar,
.sc-acoes .btn-liberado{flex:0 1 auto}

/* ---------- quem pediu menos animacao recebe menos animacao ---------- */
@media (prefers-reduced-motion: reduce){
    html.js body{opacity:1;transform:none}
    .plx{display:none}
    .cont-result-line,.btn-alugar,.btn-liberado,button[type=submit],.button,.sugestao_col,.opcao{transition:none !important}
    .cont-result-line:hover,.btn-alugar:hover,.btn-liberado:hover,.sugestao_col:hover,.opcao:hover{transform:none !important}
}