* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

body {
  background: linear-gradient(180deg, #0f172a, #020617);
  color:#fff;
}

/* HEADER */
header {
  padding:20px;
  text-align:center;
  font-size:22px;
  font-weight:600;
  letter-spacing:1px;
}

/* GRID */
.grid {
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:16px;
  padding:20px;
}

/* CARDS */
.card {
  background: linear-gradient(145deg, #1e293b, #0f172a);
  padding:25px;
  border-radius:18px;
  text-align:center;
  font-size:15px;
  cursor:pointer;
  transition:0.2s;
  box-shadow:
    0 10px 25px rgba(0,0,0,0.4),
    inset 0 1px 1px rgba(255,255,255,0.05);
}

.card:active {
  transform: scale(0.96);
}

/* MODAL */
.modal {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
}

.modal-content {
  background: #111827;
  margin:15% auto;
  padding:20px;
  width:90%;
  border-radius:20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  animation: fadeUp 0.25s ease;
}

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

/* INPUT MODERNO */
input, textarea {
  width:100%;
  padding:14px;
  margin-top:8px;
  border-radius:14px;
  border:none;
  background:#0f172a;
  color:#fff;
  font-size:15px;
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

input:focus, textarea:focus {
  box-shadow: 0 0 0 2px #2563eb;
}

/* LABEL */
label {
  font-size:13px;
  opacity:0.7;
  margin-top:10px;
  display:block;
}

/* BOTÃO MODERNO */
button {
  width:100%;
  padding:14px;
  margin-top:15px;
  border-radius:14px;
  border:none;
  font-size:15px;
  font-weight:600;
  background: linear-gradient(145deg, #3b82f6, #2563eb);
  color:#fff;
  cursor:pointer;
  transition:0.2s;
  box-shadow: 0 10px 20px rgba(37,99,235,0.4);
}

button:active {
  transform: scale(0.97);
}

/* CALCULADORA */
.display {
  width:100%;
  padding:18px;
  font-size:26px;
  margin-bottom:10px;
  text-align:right;
  border-radius:16px;
  background:#020617;
}

.calc-grid {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:12px;
}

.calc-grid button {
  padding:18px;
  font-size:18px;
  border-radius:16px;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* BOTÃO LIMPAR */
.btn-danger {
  background: linear-gradient(145deg, #ef4444, #dc2626);
}

/* NOTAS */
.nota {
  background:#020617;
  padding:12px;
  margin-top:10px;
  border-radius:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
}

/* botão pequeno */
.nota button {
  width:auto;
  padding:6px 12px;
  font-size:12px;
  border-radius:8px;
  background: linear-gradient(145deg, #ef4444, #dc2626);
  box-shadow:none;
}

.card i {
  width:32px;
  height:32px;
  margin-bottom:10px;
  color:#3b82f6;
}

.card span {
  display:block;
}