/* ================= RESET ================= */
*{ margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* ================= BODY ================= */
body{
    background: url("fundo.jpg.jpeg") no-repeat center center fixed;
    background-size: cover;
    color:white;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* ================= SPLASH ================= */
#splash{
    position: fixed;
    top:0; left:0; width:100%; height:100%;
    background: linear-gradient(135deg,#0f172a,#1e293b);
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    z-index:2000;
}
.splash-logo{ width:200px; animation: spin 2s linear infinite; margin-bottom:20px; }
#splash h2{ font-size:20px; color:white; letter-spacing:1px; }
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

/* ================= LOGO ================= */
.logo-area{
    position: fixed; top:20px; left:40px; z-index:1000;
}
.logo{ width:190px; height:auto; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5)); transition:0.3s ease; }
.logo:hover{ transform: scale(1.05); }

/* ================= TITULO ================= */
h1{
    margin-top:40px; font-size:32px; letter-spacing:1px; text-align:center; width:100%;
}

/* ================= CONTAINER ================= */
.container{
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.1);
    width:400px;
    padding:25px;
    margin:20px 0;
    border-radius:15px;
    box-shadow:0 15px 35px rgba(0,0,0,0.4);
    transition:0.3s;
}
.container:hover{ transform:translateY(-5px); }

/* ================= INPUT ================= */
input{
    width:100%; padding:12px; margin:10px 0;
    border-radius:8px; border:none; outline:none;
    background:#0f172a; color:white; font-size:14px;
    border:1px solid rgba(255,255,255,0.1);
}
input:focus{ border:1px solid #22c55e; box-shadow:0 0 10px #22c55e50; }

/* ================= BUTTON ================= */
button{
    width:100%; padding:12px; margin-top:10px;
    border-radius:8px; border:none; font-size:15px; font-weight:bold;
    cursor:pointer; background:linear-gradient(135deg,#22c55e,#16a34a); color:white;
    transition:0.3s;
}
button:hover{ transform:scale(1.03); box-shadow:0 5px 15px #22c55e70; }
button:active{ transform:scale(0.98); }

/* ================= SALDO ================= */
#saldo{ color:#22c55e; font-weight:bold; font-size:22px; }

/* ================= HISTORICO ================= */
ul{ list-style:none; margin-top:15px; max-height:150px; overflow-y:auto; padding-right:5px; }
ul li{ background:rgba(255,255,255,0.05); padding:8px; margin-bottom:8px; border-radius:6px; font-size:13px; border-left:3px solid #22c55e; }

/* ================= SCROLL ================= */
ul::-webkit-scrollbar{ width:6px; }
ul::-webkit-scrollbar-thumb{ background:#22c55e; border-radius:5px; }

/* ================= USER INFO ================= */
.user-info p{ margin:5px 0; font-size:14px; }

/* ================= OPERATIONS ================= */
.operations h4{ margin-top:15px; }
.operations input{ margin-bottom:5px; }

/* ================= HIDDEN ================= */
.hidden{ display:none; }

/* ================= RODAPÉ ================= */
.footer{
    width:100%; text-align:center; padding:20px 0; position:fixed;
    bottom:0; left:0; background: rgba(30,41,59,0.9); color:#ccc;
    font-size:14px; border-top:1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px);
}