:root { --radius: 14px; }
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin:0; color:#111; background:#0f2027; background: linear-gradient(135deg,#0f2027,#203a43,#2c5364); }
.container { max-width: 1024px; margin: 0 auto; padding: 16px; color: #fff; }
header { display:flex; justify-content:space-between; align-items:center; }
.brand h1 { margin:0; }
nav a { color:#fff; margin-left:16px; text-decoration:none; opacity:.9 }
nav a:hover { opacity:1 }
.hero { background: rgba(255,255,255,.06); padding: 24px; border-radius: var(--radius); margin: 18px 0; }
.btn { background:#00bcd4; color:#00323a; padding:10px 16px; border-radius: 999px; display:inline-block; text-decoration:none; border:0; cursor:pointer; }
.btn.outline { background: transparent; color:#fff; border:1px solid rgba(255,255,255,.3); }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.card { background: rgba(255,255,255,.06); padding:16px; border-radius: var(--radius); }
.form { background: rgba(255,255,255,.06); padding:16px; border-radius: var(--radius); }
.table-wrapper { overflow:auto; background: rgba(255,255,255,.06); padding:8px; border-radius: var(--radius); }
table { width:100%; border-collapse: collapse; }
th, td { padding:8px 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer { opacity:.7; text-align:center; margin-top:24px; }
.messages { list-style:none; padding:0; }
.messages li { padding:8px 12px; margin:8px 0; border-radius: var(--radius); background:#ffeaa7; color:#2d3436; }
.success { background: rgba(255,255,255,.06); padding:24px; border-radius: var(--radius); }
<style>
footer {
  font-size: 15px;
  padding: 10px 0;
  color: #ccc;
  border-top: 1px solid #333;
  margin-top: 40px;
}
</style>