:root { --bg1:#4facfe;
    --bg2:#00f2fe; --card:#fff; --text:#333;
}
*{ box-sizing: border-box;
}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height:100vh;
  background: linear-gradient(120deg, var(--bg1), var(--bg2));
  display:flex; align-items: center; justify-content: center;
}
.container{ width:min(1000px, 95vw); }
.header{
  display:flex; align-items:center; justify-content: space-between;
  color:#fff; margin-bottom:16px;
}
.header nav a{ color:#fff; margin-left:12px; text-decoration:none; opacity:.9; }
.header nav a:hover{ opacity:1; text-decoration: underline; }
.card{
  background: var(--card); padding:20px; border-radius:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15); margin-bottom:16px;
}
main form.card{ display:flex; flex-direction: column; gap:12px; }
textarea, input, button{
  font: inherit; padding:12px; border-radius:10px; border:1px solid #ddd;
}
button{
  cursor:pointer; border:none; background:#2563eb; color:#fff; font-weight:600;
  transition: transform .05s ease, opacity .2s ease;
}
button:hover{ opacity:.95; }
button:active{ transform: translateY(1px); }
button.danger{ background:#ef4444; }
.row{ display:flex; gap:10px; flex-wrap: wrap; }
table{ width:100%; border-collapse: collapse; }
th, td{ text-align:left; padding:10px; border-bottom:1px solid #eee; }
.total{ font-size: 28px; font-weight: 800; color:#2563eb; }