/* Стили сервисных страниц: вход, смена пароля, прогресс, админка.
   Палитра совпадает со страницами курса. */
* { box-sizing: border-box }
body {
  font: 16px/1.6 -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0; color: #1a1a1a; background: #fafafa;
}
a { color: #06c }
.wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 80px }
.narrow { max-width: 420px }
h1 { font-size: 24px; margin: 0 0 4px }
h2 { font-size: 18px; margin: 32px 0 10px }
.sub { color: #666; margin: 0 0 24px; font-size: 14px }
.card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 14px;
  padding: 22px; margin: 14px 0;
}
label { display: block; font-size: 13px; color: #555; margin: 12px 0 4px; font-weight: 600 }
input[type=text], input[type=password], select, textarea {
  width: 100%; font: inherit; padding: 10px 12px;
  border: 1px solid #d8d8d8; border-radius: 10px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #b9c8ff; border-color: #7a97ff }
button {
  font: inherit; font-weight: 600; cursor: pointer; padding: 10px 16px;
  border-radius: 10px; border: 1px solid transparent; background: #3b5bdb; color: #fff;
}
button:hover { background: #31489f }
button:disabled { opacity: .5; cursor: not-allowed }
button.ghost { background: #fff; color: #333; border-color: #d8d8d8 }
button.ghost:hover { background: #f2f4ff }
button.danger { background: #c92a2a }
button.danger:hover { background: #a41f1f }
button.small { padding: 6px 10px; font-size: 13px; border-radius: 8px }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.spacer { flex: 1 }
.msg { border-radius: 10px; padding: 10px 14px; margin: 14px 0; font-size: 14px }
.msg.err { background: #fff0f0; border: 1px solid #ffc9c9; color: #a41f1f }
.msg.ok { background: #eafaef; border: 1px solid #bfe6cd; color: #0a7d33 }
.msg.warn { background: #fff8e6; border: 1px solid #ffe0a3; color: #8a5a00 }
table { width: 100%; border-collapse: collapse; font-size: 14px }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #eee; vertical-align: top }
th { color: #777; font-size: 12px; text-transform: uppercase; letter-spacing: .04em }
tr:hover td { background: #fafbff }
.tag {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 6px;
  background: #eee; color: #555; margin-right: 4px;
}
.tag.admin { background: #e7e0ff; color: #5433c0 }
.tag.off { background: #ffe3e3; color: #a41f1f }
.tag.warn { background: #fff3bf; color: #8a5a00 }
.tag.ok { background: #d3f9d8; color: #0a7d33 }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px }
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  background: #fff; border-bottom: 1px solid #e6e6e6;
}
.topbar b { font-size: 15px }
.topbar a { text-decoration: none; font-size: 14px }
.stat { display: flex; gap: 22px; flex-wrap: wrap; margin: 8px 0 0 }
.stat div b { display: block; font-size: 22px }
.stat div span { font-size: 12px; color: #777 }
.bar { height: 8px; background: #eee; border-radius: 999px; overflow: hidden; margin-top: 6px }
.bar > i { display: block; height: 100%; background: #3b5bdb }
.muted { color: #888; font-size: 13px }