:root{
  --teal:#1795a3;
  --teal-dark:#137c8d;
  --gray:#555555;
  --bg:#f5fbfc;
  --white:#ffffff;
}

*{box-sizing:border-box;font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}

body{margin:0;background:var(--bg);color:#222;}
header{
  background: linear-gradient(90deg, var(--teal), var(--teal-dark));
  color:var(--white);
  padding:18px 24px;
  display:flex;align-items:center;gap:16px;
}
header .logo{height:48px; width:auto;}
h1{font-size:1.4rem;margin:0;}

main{max-width:980px;margin:24px auto;padding:0 16px;}
.card{
  background:var(--white);
  border:1px solid #e3eef0;
  border-radius:10px;
  padding:18px;
  margin-bottom:18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.card h2{margin-top:0;color:var(--teal-dark);}

form{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
button{
  border:none; padding:10px 14px; border-radius:8px;
  background:var(--teal-dark); color:white; font-weight:600; cursor:pointer;
}
button:hover{filter:brightness(0.95);}

.flashes{list-style:none;padding-left:0;margin:12px 0 0 0;color:var(--gray);}
table{width:100%; border-collapse: collapse;}
th, td{padding:8px 10px; border-bottom:1px solid #eee; text-align:left;}
th{color:var(--gray); width:220px;}

.card.success{border-color:#d4f1d7; background:#f5fff6;}

footer{padding:24px;text-align:center;color:var(--gray);}