:root {
  --cerulean: #007BA7;
  --cerulean-d: #005e80;
  --ink: #0f2733;
  --slate: #4a5b66;
  --line: #e2e8ec;
  --mist: #f4f8fa;
  --amber: #b45309;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--mist);
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; background: #fff; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--cerulean-d); text-decoration: none; letter-spacing: .04em; }
.topbar nav { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.topbar nav a { color: var(--slate); text-decoration: none; }
.topbar nav a:hover { color: var(--cerulean-d); }
.who { color: var(--ink); font-weight: 600; }
.inline { display: inline; margin: 0; }
.linkbtn { background: none; border: 0; color: var(--slate); cursor: pointer; font: inherit; padding: 0; }
.linkbtn:hover { color: var(--cerulean-d); }

.wrap { max-width: 960px; margin: 32px auto; padding: 0 20px; }
h1 { font-size: 24px; margin: 0 0 4px; }
.sub { color: var(--slate); margin: 0 0 20px; }
.hint { color: var(--slate); font-size: 13px; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 22px;
}
.card.auth { max-width: 380px; margin: 60px auto; }
.card.auth label { display: block; margin: 14px 0 4px; font-size: 14px; font-weight: 600; }
.card.auth input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit;
}
.btn {
  margin-top: 18px; width: 100%; padding: 11px; border: 0; border-radius: 8px;
  background: var(--cerulean); color: #fff; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--cerulean-d); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.widget .wlabel { color: var(--slate); font-size: 13px; }
.widget .wvalue { font-size: 30px; font-weight: 700; line-height: 1.2; }
.widget .whint { color: var(--slate); font-size: 12px; margin-top: 6px; }

.notice {
  background: #fff8ec; border: 1px solid #f2d9a8; color: var(--amber);
  padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 14px;
}
.notice a { color: var(--amber); font-weight: 600; }

.messages { list-style: none; padding: 0; margin: 0 0 18px; }
.msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-size: 14px; }
.msg.success { background: #e7f6ee; color: #146c43; }
.msg.error { background: #fbeaea; color: #b02a37; }
.formerr { background: #fbeaea; color: #b02a37; padding: 10px 14px; border-radius: 8px; font-size: 14px; }

.otp-uri { background: var(--mist); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; word-break: break-all; font-size: 12px; }