:root{ --bg:#1a1a1a; --panel:#1f1f1f; --muted:#8b92a1; --text:#eef2ff; --button:#3b82f6; --radius:16px }
  *{box-sizing:border-box} html,body{height:100%}
  body{
    margin:0; font:14px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial; color:var(--text);
    background:
      radial-gradient(1000px 500px at 20% -10%, rgba(59,130,246,.55), transparent 60%),
      radial-gradient(1200px 600px at 80% -10%, rgba(239,68,68,.55), transparent 60%),
      var(--bg);
  }
  a, a:visited{ color:inherit; text-decoration:none } /* prevent purple/underline */

  header.nav{
    position:fixed; inset:0 0 auto 0; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 24px;
    backdrop-filter: blur(8px); background: rgba(26,26,26,.65); border-bottom:1px solid rgba(255,255,255,.12); z-index:10
  }
  .brand a{ font-weight:700; font-size:1.6rem }
  /* removed top-right text */

  .shell{ height:100%; display:grid; place-items:center }
  /* Bigger card */
  .stage{ width:min(1000px, 90vw); min-height: 480px; margin-top:64px; overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius); background:var(--panel) }
  .slides{ display:flex; width:200%; transition: transform .45s ease }
  .slide{ width:50%; padding:56px 48px }

  h1{ margin:0 0 10px; font-size:clamp(28px,3.2vw,36px) }
  p.muted{ color:var(--muted); margin:0 0 18px }
  form{ display:grid; gap:16px }
  label{ font-weight:600; margin-bottom:6px; display:block }
  input{
    width:100%; background:#161616; color:var(--text); border:1px solid rgba(255,255,255,.14);
    border-radius:12px; padding:12px; outline:none; transition:.15s border-color, .15s box-shadow;
  }
  input:focus{ border-color:var(--button); box-shadow:0 0 0 3px color-mix(in srgb,var(--button) 45%, transparent) }
  .actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
  .btn{ padding:12px 20px; border-radius:14px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color:var(--text); cursor:pointer }
  .btn.primary{ background:var(--button); border-color:var(--button) }
  .btn.primary:hover{ background:color-mix(in srgb,var(--button) 85%, white) }
  .hint{ color:var(--muted); font-size:.95rem; min-height:20px }
  .error{ color:#e63946 }

  .otp-boxes{ display:flex; gap:10px; justify-content:center; margin-top:8px }
  .otp-boxes input{
    width:52px; height:60px; text-align:center; font-size:1.6rem; border-radius:10px;
    border:1px solid rgba(255,255,255,.2); background:#161616; color:var(--text);
  }
  .otp-boxes input:focus{ outline:none; border-color:var(--button); box-shadow:0 0 0 3px color-mix(in srgb,var(--button) 45%, transparent) }
  html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1; }            /* pushes footer down */
footer.footer {
  background: var(--bg);
  border-top: 0;
  padding: 24px;
  text-align: center;
  color: var(--muted);
}
.login-link,
.login-link:visited {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}
.login-link:hover { text-decoration: underline; }
  /* =========================================
   Responsive tweaks shared across pages
   ========================================= */

/* Tablet */
@media (max-width: 900px) {
  .container { padding: 16px; }
  header.nav { padding: 12px 16px; }
  .brand { font-size: 1.6rem; }
  .tagline { display: none; } /* hide small greeting text if cramped */
  .card { margin: 12px 16px 0; }
}

/* Mobile */
@media (max-width: 720px) {
  /* Header */
  header.nav { gap: 8px; }
  header.nav .right { flex-wrap: wrap; gap: 8px; }

  /* Toolbar */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 16px 0; }
  .search input { width: 100%; }

  /* Buttons: only make full-width in toolbars/forms/modals (not header) */
  .toolbar .right .btn,
  form .actions .btn,
  .modal footer .btn { width: 100%; justify-content: center; }

  /* Tables */
  .card { overflow: auto; } /* ensure horizontal scroll if needed */
  table { min-width: 720px; } /* prevent squashing columns on tiny screens */
  thead th, tbody td { padding: 10px; }

  /* Modals */
  .modal { width: 96vw; }
  .modal .body { padding: 14px 16px; }
  .modal .row { grid-template-columns: 1fr; gap: 10px; }
  .modal footer { flex-wrap: wrap; gap: 8px; }
  .modal footer > div { width: 100%; display: flex; gap: 8px; }

  /* Forms */
  label { margin-bottom: 4px; }
  input, select, textarea { font-size: 16px; } /* avoid iOS zoom */

  /* Registration/Login specific (safe to include everywhere) */
  .stage { width: 96vw; min-height: unset; }
  .slide { padding: 32px 20px; }
  .otp-boxes { gap: 8px; }
  .otp-boxes input { width: 44px; height: 52px; font-size: 1.4rem; }

  /* Footer */
  .footer { padding: 16px; line-height: 1.5; }
}
  .footer a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
}
.footer a:hover {
  text-decoration: underline;
}