* {
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  margin:0;
  background:#f7f8fb;
  color:#222;
}

/* ---------------- LOGIN ---------------- */

.login-body {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  animation: fadeIn 1s ease;
}

.login-box {
  background:white;
  padding:50px;
  width:340px;
  border-radius:22px;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  text-align:center;
  animation: floatUp .8s ease;
}

.login-box h1 {
  margin-bottom:25px;
  color:#ff3b3b;
  font-weight:600;
}

.login-box input {
  width:100%;
  padding:12px;
  margin:10px 0;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:15px;
  transition:.3s;
}

.login-box input:focus {
  outline:none;
  border-color:#ff3b3b;
  box-shadow:0 0 0 3px rgba(255,59,59,.15);
}

.login-box button {
  width:100%;
  padding:12px;
  margin-top:15px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#ff3b3b,#ff7676);
  color:white;
  font-size:16px;
  cursor:pointer;
  transition:.3s;
}

.login-box button:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(255,59,59,.3);
}

/* ---------------- LOADING ---------------- */

.loading-body {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:white;
  animation: fadeIn .8s;
}

.loader-box {
  position:relative;
  animation: pulse 2s infinite;
}

.circle {
  width:130px;
  height:130px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.circle img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.spinner {
  position:absolute;
  top:-10px;
  left:-10px;
  width:150px;
  height:150px;
  border-radius:50%;
  border:4px solid transparent;
  border-top:4px solid #ff3b3b;
  border-right:4px solid #ff3b3b;
  animation: spin 1s linear infinite;
}

/* ---------------- DASHBOARD ---------------- */

.dash-body {
  padding:50px;
  animation: fadeIn 1s;
}

.menu {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  margin-top:40px;
}

.menu a {
  background:white;
  padding:30px;
  border-radius:20px;
  text-align:center;
  text-decoration:none;
  color:#ff3b3b;
  font-size:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:.3s;
}

.menu a:hover {
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

/* ---------------- CONFIG ---------------- */

form {
  max-width:400px;
  margin:auto;
  background:white;
  padding:40px;
  border-radius:22px;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
  animation: floatUp .8s;
}

form input {
  width:100%;
  padding:12px;
  margin:10px 0;
  border-radius:12px;
  border:1px solid #ddd;
}

/* ---------------- ANIMAÇÕES ---------------- */

@keyframes spin {
  100% { transform:rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity:0 }
  to { opacity:1 }
}

@keyframes floatUp {
  from { transform:translateY(30px); opacity:0 }
  to { transform:translateY(0); opacity:1 }
}

@keyframes pulse {
  0% { transform:scale(1) }
  50% { transform:scale(1.05) }
  100% { transform:scale(1) }
}
.card-produto{
  background:white;
  border-radius:18px;
  padding:15px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:.3s;
  animation: fadeIn .4s;
}

.card-produto:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.card-produto img{
  width:100%;
  height:110px;   /* menor */
  object-fit:contain;
  border-radius:10px;
  background:#f7f7f7;
}


.card-produto h3{
  margin:10px 0 5px;
  font-size:16px;
}

.btn-download{
  display:block;
  margin-top:10px;
  padding:10px;
  text-align:center;
  background:#ff3b3b;
  color:white;
  border-radius:12px;
  text-decoration:none;
  font-size:14px;
}