:root {
  --bg: #060816;
  --card: rgba(255,255,255,0.12);
  --text: #f5f7ff;
  --muted: #a7b1c9;
  --accent: #4cc9f0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Cairo', sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #060816, #111d34);
  color: var(--text);
}
.page-shell { width: min(460px, calc(100% - 20px)); }
.card {
  padding: 24px;
  border-radius: 24px;
  background: var(--card);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 20px 60px rgba(0,0,0,0.32);
}
input, button { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); margin-top: 12px; font: inherit; }
button { cursor: pointer; background: linear-gradient(135deg, var(--accent), #7c4dff); color: #fff; font-weight: 700; }
a { display: block; margin-top: 12px; color: #bcdfff; text-align: center; }
.message { margin-top: 12px; color: #b7ffcc; min-height: 24px; }