:root{
  --mint: #4EE0B5;
  --mint-dark: #2FBF94;
  --orange: #FF8A3D;
  --muted: #6b7280;
  --bg: #f7faf9;
  --card: #ffffff;
  --max-width: 980px;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:linear-gradient(180deg,var(--bg),#ffffff);margin:0;color:#0b2f2a}
.container{max-width:var(--max-width);margin:20px auto;padding:16px}
.app-header{background:linear-gradient(90deg,var(--mint),var(--orange));color:white;padding:14px 20px;border-radius:8px;margin:10px}
.card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(10,20,20,0.06);margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.auth-card{max-width:420px;margin:40px auto;padding:20px}
input, button{width:100%;padding:12px;margin:8px 0;border-radius:8px;border:1px solid #e6eef0}
.btn{padding:10px 12px;border:none;border-radius:8px;cursor:pointer}
.btn-primary{background:var(--mint);color:#003427}
.btn-success{background:#16a34a;color:white}
.btn-danger{background:#dc2626;color:white}
.alert{padding:10px;border-radius:8px;margin-bottom:12px}
.alert-error{background:#fee2e2;color:#9b1c1c}
.alert-success{background:#ecfdf5;color:#065f46}
.big{font-size:28px;font-weight:700;color:var(--mint-dark)}
/* responsive table */
table.responsive{width:100%;border-collapse:collapse}
table.responsive th, table.responsive td{padding:8px;border-bottom:1px solid #eef2f7;font-size:14px}
@media (max-width:600px){
  .auth-card{padding:12px;margin:20px}
}