/* Shared by the signed-out pages (login, register). The app itself keeps its
   own styles inline in index.html; these are the same tokens. */

:root {
  --ink:#1a2332; --muted:#6b7686; --line:#e3e7ee;
  --good:#0a7d43; --bad:#a33; --bg:#f6f8fb; --card:#fff;
  --shadow:0 1px 2px rgba(26,35,50,.05), 0 12px 32px rgba(26,35,50,.07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#e8ecf3; --muted:#93a0b4; --line:#2a3444;
    --bg:#131a24; --card:#1a2332;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  }
}

* { box-sizing:border-box; margin:0; }

body {
  font-family:-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 16px;
  /* A faint horizon, so the sign-in page isn't a blank slab. */
  background-image:radial-gradient(1100px 420px at 50% -12%, rgba(10,125,67,.10), transparent 70%);
}

.card {
  width:100%; max-width:400px;
  background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:32px 30px 28px; box-shadow:var(--shadow);
}

.brand { font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; }
h1 { font-size:1.05rem; font-weight:600; margin:26px 0 6px; }
.sub { color:var(--muted); font-size:.85rem; margin:0; }
/* The gap above the fields lives here, so a card with no .sub line and no
   visible message still breathes between the heading and the first input. */
form { margin-top:18px; }

label { display:block; margin-bottom:14px; }
.lbl {
  display:block; font-size:.72rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px;
}
input[type=email], input[type=password], input[type=text] {
  display:block; width:100%; padding:11px 13px; font-size:1rem;
  border:1px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--ink);
}
input:focus {
  outline:none; border-color:var(--good);
  box-shadow:0 0 0 3px rgba(10,125,67,.14);
}

button {
  width:100%; margin-top:6px; padding:12px 16px;
  font-size:1rem; font-weight:600; font-family:inherit;
  color:#fff; background:var(--good);
  border:none; border-radius:10px; cursor:pointer;
  transition:filter .15s;
}
button:hover:not(:disabled) { filter:brightness(1.08); }
button:disabled { opacity:.6; cursor:default; }

.hint { font-size:.78rem; color:var(--muted); margin:-8px 0 16px; }

.msg {
  border-radius:10px; padding:10px 13px; font-size:.87rem;
  margin-bottom:18px; line-height:1.4;
}
.msg.err { color:var(--bad); background:rgba(170,51,51,.09); border:1px solid rgba(170,51,51,.3); }
.msg.ok  { color:var(--good); background:rgba(10,125,67,.09); border:1px solid rgba(10,125,67,.3); }
.msg[hidden] { display:none; }

.alt { margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
       font-size:.87rem; color:var(--muted); text-align:center; }
.alt a { color:var(--good); font-weight:600; text-decoration:none; }
.alt a:hover { text-decoration:underline; }

.foot { margin-top:18px; font-size:.75rem; color:var(--muted); text-align:center; line-height:1.5; }