* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --rosa: #ec4899;
    --roxo: #7c3aed;
    --gradiente: linear-gradient(135deg, #f472b6 0%, #c026d3 50%, #7c3aed 100%);
    --lilas: #f6effe;
    --branco: #fff;
    --texto: #2e1065;
    --suave: #8b7aa8;
    --linha: rgba(124, 58, 237, .08);
    --sombra: 0 30px 60px -12px rgba(59, 7, 100, .45);
    --suave-anim: cubic-bezier(.2, .8, .2, 1);
}

body {
    font-family: system-ui, "Segoe UI", Arial, sans-serif;
    color: var(--texto);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(244, 114, 182, .55), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(124, 58, 237, .6), transparent 50%),
        linear-gradient(135deg, #db2777, #9333ea 55%, #4c1d95);
}

button, input, select { font: inherit; border: none; border-radius: 999px; outline: none; }
button {
    background: var(--gradiente);
    color: var(--branco);
    padding: 12px 22px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 20px -4px rgba(192, 38, 211, .5);
    transition: transform .2s var(--suave-anim), box-shadow .2s;
}
button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -4px rgba(192, 38, 211, .6); }
button:active { transform: scale(.94); }
input, select { background: var(--lilas); color: var(--texto); padding: 13px 18px; transition: box-shadow .2s, background .2s; }
input:focus, select:focus { background: var(--branco); box-shadow: 0 0 0 2px #e9d5ff, 0 4px 14px rgba(124, 58, 237, .15); }
select { cursor: pointer; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Foto de perfil com anel gradiente */
.avatar {
    width: 58px; height: 58px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    padding: 2.5px;
    background: var(--gradiente);
    box-shadow: 0 6px 14px -4px rgba(192, 38, 211, .5);
}

/* Corações flutuando */
.coracoes { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.coracoes span {
    position: absolute;
    bottom: -40px;
    color: rgba(255, 255, 255, .55);
    animation: subir 16s ease-in-out infinite;
}
.coracoes span:nth-child(even) { color: rgba(244, 114, 182, .55); }
.coracoes span:nth-child(1)  { left: 3%;  font-size: 14px; animation-delay: 0s; }
.coracoes span:nth-child(2)  { left: 10%; font-size: 22px; animation-delay: 4s;  animation-duration: 19s; }
.coracoes span:nth-child(3)  { left: 17%; font-size: 11px; animation-delay: 8s; }
.coracoes span:nth-child(4)  { left: 24%; font-size: 18px; animation-delay: 2s;  animation-duration: 21s; }
.coracoes span:nth-child(5)  { left: 31%; font-size: 26px; animation-delay: 10s; }
.coracoes span:nth-child(6)  { left: 38%; font-size: 13px; animation-delay: 6s;  animation-duration: 14s; }
.coracoes span:nth-child(7)  { left: 45%; font-size: 20px; animation-delay: 1s;  animation-duration: 18s; }
.coracoes span:nth-child(8)  { left: 52%; font-size: 12px; animation-delay: 12s; }
.coracoes span:nth-child(9)  { left: 59%; font-size: 24px; animation-delay: 5s;  animation-duration: 20s; }
.coracoes span:nth-child(10) { left: 66%; font-size: 15px; animation-delay: 9s; }
.coracoes span:nth-child(11) { left: 73%; font-size: 19px; animation-delay: 3s;  animation-duration: 17s; }
.coracoes span:nth-child(12) { left: 80%; font-size: 11px; animation-delay: 7s; }
.coracoes span:nth-child(13) { left: 86%; font-size: 23px; animation-delay: 11s; animation-duration: 22s; }
.coracoes span:nth-child(14) { left: 92%; font-size: 14px; animation-delay: 13s; }
.coracoes span:nth-child(15) { left: 97%; font-size: 18px; animation-delay: 2.5s; animation-duration: 15s; }

@keyframes subir {
    0%   { transform: translate(0, 0) rotate(-10deg); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translate(25px, -55vh) rotate(10deg); }
    90%  { opacity: .8; }
    100% { transform: translate(-10px, -110vh) rotate(-10deg); opacity: 0; }
}

/* Entrada */
.entrada { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.caixa {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .6);
    padding: 40px 28px 32px;
    border-radius: 32px;
    width: 100%;
    max-width: 370px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--sombra);
    text-align: center;
    animation: aparecer .6s var(--suave-anim);
}
.logo {
    width: 80px; height: 80px;
    margin: 0 auto 4px;
    display: grid; place-items: center;
    font-size: 38px;
    border-radius: 50%;
    background: var(--gradiente);
    box-shadow: 0 14px 30px -6px rgba(192, 38, 211, .6);
    animation: pulsar 2s ease-in-out infinite;
}
@keyframes pulsar { 50% { transform: scale(1.07); } }
.caixa h1 {
    font-size: 32px;
    letter-spacing: -.5px;
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.caixa select { align-self: center; padding: 8px 16px; font-size: 14px; }
.tela { display: flex; flex-direction: column; gap: 12px; animation: aparecer .4s var(--suave-anim); }
.tela h2 { font-size: 18px; color: var(--texto); }
.tela p { font-size: 14px; color: var(--suave); }
/* Campos bem visíveis sobre o cartão branco */
.caixa input {
    background: var(--branco);
    border: 1.5px solid #d8b4fe;
    color: var(--texto);
    font-size: 16px;
}
.caixa input::placeholder { color: #7e6a9e; }
.caixa input:focus { border-color: #a855f7; }
.caixa button { padding: 14px; }
.caixa button:disabled { opacity: .6; cursor: wait; }
.caixa .link {
    background: none;
    box-shadow: none;
    color: var(--roxo);
    padding: 4px;
    font-size: 14px;
}
.caixa .link:hover { transform: none; text-decoration: underline; }
.aviso {
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 14px;
    color: #be123c;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    animation: aparecer .3s var(--suave-anim);
}
.aviso::before { content: "⚠️ "; }
.aviso:empty { display: none; }
.aviso.ok { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.aviso.ok::before { content: "💌 "; }
.sair {
    padding: 8px 14px;
    font-size: 14px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: none;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(20px) scale(.97); } }

/* App */
.app {
    position: relative;
    z-index: 1;
    height: calc(100% - 48px);
    max-width: 1060px;
    margin: 24px auto;
    display: flex;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--sombra);
    border: 1px solid rgba(255, 255, 255, .35);
    animation: aparecer .5s var(--suave-anim);
}
.app header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-height: 78px; }

/* Lista de conversas */
.lista {
    width: 340px;
    background: rgba(255, 255, 255, .86);
    border-right: 1px solid var(--linha);
    display: flex;
    flex-direction: column;
}
.lista header {
    justify-content: space-between;
    background: var(--gradiente);
    color: var(--branco);
    font-size: 17px;
    box-shadow: 0 6px 20px -8px rgba(124, 58, 237, .6);
}
.lista header select {
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .35);
    color: var(--branco);
    padding: 8px 14px;
    font-weight: 600;
}
.lista header option { color: var(--texto); }
#usuario { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista h2 { font-size: 11px; letter-spacing: 1.5px; padding: 20px 22px 10px; color: #a855f7; text-transform: uppercase; }
.lista ul { list-style: none; overflow-y: auto; padding: 0 12px 12px; }
.lista li {
    display: flex; align-items: center; gap: 14px;
    padding: 12px;
    margin-bottom: 6px;
    border-radius: 22px;
    cursor: pointer;
    transition: background .25s, transform .25s var(--suave-anim), box-shadow .25s;
    animation: aparecer .4s var(--suave-anim) both;
}
.lista li:nth-child(2) { animation-delay: .05s; }
.lista li:nth-child(3) { animation-delay: .1s; }
.lista li div { min-width: 0; flex: 1; }
.lista li strong { font-size: 16px; }
.lista li small { display: block; margin-top: 2px; color: var(--suave); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista li:hover { background: rgba(243, 232, 255, .8); transform: translateX(3px); }
.lista li.ativa {
    background: linear-gradient(135deg, rgba(244, 114, 182, .14), rgba(124, 58, 237, .14));
    box-shadow: inset 3px 0 0 var(--rosa);
}

/* Conversa */
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat header {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--linha);
    font-size: 18px;
}
.chat header .avatar { width: 52px; height: 52px; }
.voltar {
    display: none;
    width: 40px; height: 40px;
    padding: 0;
    background: var(--lilas);
    color: var(--roxo);
    box-shadow: none;
    font-size: 18px;
}

.mensagens {
    flex: 1; overflow-y: auto;
    padding: 24px;
    display: flex; flex-direction: column; gap: 12px;
    background: linear-gradient(180deg, rgba(253, 244, 255, .88), rgba(243, 232, 255, .88));
    scroll-behavior: smooth;
}
.msg {
    max-width: 70%;
    padding: 11px 16px;
    line-height: 1.4;
    border-radius: 22px 22px 22px 6px;
    background: var(--branco);
    box-shadow: 0 4px 14px -4px rgba(124, 58, 237, .18);
    word-wrap: break-word;
    animation: entrar .35s var(--suave-anim);
    transform-origin: bottom left;
}
.msg.minha {
    align-self: flex-end;
    border-radius: 22px 22px 6px 22px;
    background: var(--gradiente);
    color: var(--branco);
    box-shadow: 0 8px 18px -6px rgba(192, 38, 211, .55);
    transform-origin: bottom right;
}
.msg b { display: block; font-size: 11px; font-weight: 600; color: #a855f7; margin-bottom: 3px; }
.msg.minha b { color: rgba(255, 255, 255, .8); }
@keyframes entrar { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.vazio { margin: auto; color: var(--suave); text-align: center; }
.lista li.vazio { display: block; cursor: default; font-size: 14px; line-height: 1.5; padding: 20px 12px; }
.lista li.vazio:hover { background: none; transform: none; }

/* Campo de mensagem */
.envio {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .95);
    border-top: 1px solid var(--linha);
}
.envio input { flex: 1; min-width: 0; padding: 14px 20px; }
.btn-enviar {
    width: 50px; height: 50px;
    padding: 0;
    flex-shrink: 0;
    display: grid; place-items: center;
}
.btn-enviar svg { margin-left: 3px; }

/* Celular */
@media (max-width: 700px) {
    .app { height: 100%; margin: 0; border-radius: 0; border: none; }
    .lista { width: 100%; border: none; }
    .chat { display: none; }
    .app.abrir-chat .lista { display: none; }
    .app.abrir-chat .chat { display: flex; animation: deslizar .35s var(--suave-anim); }
    .voltar { display: grid; place-items: center; }
    .app header { min-height: 70px; padding: 12px 14px; }
    .avatar { width: 56px; height: 56px; }
    .chat header .avatar { width: 46px; height: 46px; }
    .mensagens { padding: 16px 12px; }
    .msg { max-width: 82%; }
    .envio { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
    .btn-enviar { width: 48px; height: 48px; }
}
@keyframes deslizar { from { opacity: 0; transform: translateX(30px); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============ Premium ============ */
.perfil { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#plano { font-size: 12px; line-height: 1.3; opacity: .9; margin-top: 2px; }

.envio input[readonly] { cursor: pointer; color: var(--suave); }

.modal {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(46, 16, 101, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal .caixa { position: relative; }
.modal h2 { font-size: 22px; color: var(--texto); }
.modal p { color: var(--suave); }
.preco {
    font-size: 26px;
    font-weight: 700;
    background: var(--gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
.modal .fechar {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 12px;
    font-size: 13px;
    background: var(--lilas);
    color: var(--roxo);
    box-shadow: none;
}

/* ============ Pagamento ============ */
.modal { overflow-y: auto; align-items: safe center; }
.validade { font-weight: 600; color: var(--roxo) !important; margin-top: -6px; }
.caixa .opcao {
    background: var(--branco);
    color: var(--texto);
    border: 1.5px solid #d8b4fe;
    box-shadow: none;
}
.caixa .opcao:hover { border-color: #a855f7; box-shadow: 0 6px 16px -6px rgba(124, 58, 237, .35); }
.sepa {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    background: var(--lilas);
    text-align: left;
    font-size: 14px;
    animation: aparecer .3s var(--suave-anim);
}
.sepa p { color: var(--texto) !important; }
.ref { font-family: Consolas, monospace; font-size: 16px; letter-spacing: 1px; color: var(--roxo); user-select: all; }
.estado { font-weight: 600; color: #b45309 !important; }
.nota { font-size: 14px; color: var(--roxo) !important; background: var(--lilas); padding: 10px 14px; border-radius: 14px; }

/* Dados bancários SEPA e comprovativo */
.banco {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    padding: 12px;
    border: 1.5px dashed #c084fc;
    border-radius: 12px;
    background: var(--branco);
}
.banco dt { color: var(--suave); }
.banco dd { font-weight: 600; word-break: break-all; }

/* ============ Área do administrador ============ */
.admin { position: relative; z-index: 1; min-height: 100%; padding: 24px 16px; overflow-y: auto; height: 100%; }
.admin .caixa { max-width: 720px; margin: 0 auto; text-align: left; }
.admin-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-topo h1 { font-size: 24px; }
.admin-topo select { padding: 8px 14px; }
.admin a.link { color: var(--roxo); text-decoration: none; font-weight: 600; font-size: 14px; }
.pedidos { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pedidos li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 18px;
    background: var(--lilas);
    animation: aparecer .3s var(--suave-anim);
}
.pedidos .email { color: var(--suave); margin-top: -6px; }
.pedidos dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.pedidos dt { color: var(--suave); }
.pedidos dd { font-weight: 600; }
.pedidos dd .link { padding: 0; font-size: 14px; }
.pedidos .confirmar { align-self: flex-start; }
.link-admin { font-size: 12px; color: var(--branco); opacity: .9; margin-top: 2px; }
.sepa h3 { font-size: 16px; color: var(--texto); }
.iban { font-family: Consolas, monospace; letter-spacing: .5px; user-select: all; }