:root {
  --blue: #168bd2;
  --light: #eaf7ff;
  --sky: #68c7fa;
  --white: #fff;
  --text: #25445c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(140deg,#e5f5ff,#fff 55%,#d8efff);
  color: var(--text);
  min-height: 100vh;
}
header {
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid #cce9fa;
  padding: 18px 7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.logo { color: var(--blue); font-size: 23px; font-weight: 900; }
nav a { color: var(--blue); text-decoration: none; margin-left: 16px; }
main { width: min(920px,92%); margin: 45px auto; }
.hero {
  background: linear-gradient(120deg,#168bd2,#65c7fa);
  color: white; padding: 55px 35px; border-radius: 24px;
  box-shadow: 0 14px 35px #168bd230;
}
.hero h1 { font-size: clamp(32px,6vw,55px); margin: 0 0 12px; }
.card {
  background: white; padding: 28px; border-radius: 20px;
  box-shadow: 0 8px 28px #3d8bb51a; margin-top: 22px;
}
input,textarea {
  display:block; width:100%; padding:13px; margin:9px 0 18px;
  border:1px solid #c6e5f7; border-radius:10px; font:inherit;
}
textarea { min-height:130px; resize:vertical; }
button,.btn {
  display:inline-block; background:var(--blue); color:white;
  border:0; border-radius:11px; padding:13px 22px;
  font-weight:bold; text-decoration:none; cursor:pointer;
}
button:hover,.btn:hover { background:#0873b5; }
.muted { color:#7190a5; }
.status { padding:7px 12px; border-radius:20px; background:#e6f5ff; color:#0873b5; }
table { width:100%; border-collapse:collapse; }
td,th { text-align:left; padding:12px; border-bottom:1px solid #e5f1f8; }
@media(max-width:600px) {
  header { flex-direction:column; }
  nav a { margin:5px; }
  .hero { padding:35px 22px; }
}