/*
  Общий вид службы выдачи бейджей.

  Отсылки к коду не для украшения, а чтобы человек с первого взгляда понимал,
  куда попал: здесь делают то, что потом читает сканер.

  * угловые метки — три квадрата, как у кода: две скобки по углам карточки;
  * фон — сетка модулей, которая гаснет к низу, будто код растворяется;
  * «тихая зона» — щедрые поля вокруг карточки: у настоящего кода без неё
    сканер не читает, и здесь она держит воздух.

  Палитра зимняя: глубокий синий, лёд, белый.
*/

:root {
  --ink: #0b1a2b;
  --ink-soft: #5b6b7f;
  --line: #dce4ee;
  --paper: #ffffff;
  --bg: #eef3f9;
  --accent: #11487f;
  --accent-soft: #2f80ed;
  --ice: #56ccf2;
  --bad: #b3261e;
  --radius: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eef6;
    --ink-soft: #90a2b8;
    --line: #24354a;
    --paper: #10202f;
    --bg: #071320;
    --accent: #6fb3ff;
    --accent-soft: #56ccf2;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  /* Сетка модулей: мелкие квадраты, гаснущие книзу. */
  background-image:
    linear-gradient(var(--bg) 0 0),
    repeating-linear-gradient(0deg, rgba(17, 72, 127, .07) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, rgba(17, 72, 127, .07) 0 6px, transparent 6px 12px);
  background-blend-mode: normal;
  background-size: 100% 100%, 100% 100%, 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 40px;
}

.mark {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 14px;
}

/* Три квадрата — как метки поиска у кода. */
.finder {
  width: 26px; height: 26px;
  border: 4px solid var(--accent);
  border-radius: 6px;
  position: relative;
}
.finder::after {
  content: "";
  position: absolute; inset: 5px;
  background: var(--accent);
  border-radius: 2px;
}
.finder.small { width: 16px; height: 16px; border-width: 3px; border-radius: 4px; opacity: .55; }
.finder.tiny { width: 10px; height: 10px; border-width: 2px; border-radius: 3px; opacity: .3; }

.card {
  width: 100%;
  max-width: 720px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 18px 48px rgba(11, 26, 43, .10);
  position: relative;
}

/* Угловые скобки — вторая отсылка к коду, уже на самой карточке. */
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 3px solid var(--ice);
  opacity: .55;
}
.card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: var(--radius) 0 0 0; }
.card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 var(--radius) 0; }

h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.2px; }
.lead { color: var(--ink-soft); font-size: 14px; margin: 0 0 22px; line-height: 1.45; }

label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }

input[type=text], input[type=password], input[type=search] {
  width: 100%;
  font: inherit;
  font-size: 17px;
  padding: 14px 16px;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(47, 128, 237, .16);
}

button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 15px;
  padding: 12px 20px;
  border: 0; border-radius: 12px;
  background: var(--accent); color: #fff;
  cursor: pointer; text-decoration: none;
  transition: transform .08s, filter .15s;
}
button:hover, .button:hover { filter: brightness(1.08); }
button:active, .button:active { transform: translateY(1px); }
.button.ghost {
  background: transparent; color: var(--accent);
  border: 2px solid var(--line);
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mt { margin-top: 18px; }

.error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(179, 38, 30, .10);
  color: var(--bad);
  font-size: 14px;
  font-weight: 600;
}

.hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

/* --- список сотрудников --- */

.people { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }

.person {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  transition: border-color .15s, transform .08s;
}
.person:hover { border-color: var(--accent-soft); }

/* Значок-модуль: маленький узор, похожий на кусочек кода. */
.glyph {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 9px;
  background:
    conic-gradient(from 0deg, var(--accent) 25%, transparent 0 50%, var(--accent) 0 75%, transparent 0);
  background-size: 12px 12px;
  opacity: .8;
}

.person .name { flex: 1 1 140px; font-weight: 600; font-size: 16px; min-width: 0; }
/* На узком экране кнопки уходят на свою строку целиком, а не обрезаются:
   обрезанная кнопка выглядит как поломка, а перенос — как вёрстка. */
.person .actions { flex: 0 0 auto; display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 460px) {
  .person .actions { width: 100%; margin-left: 0; }
  .person .actions .button { flex: 1 1 0; }
}

.empty { color: var(--ink-soft); font-size: 14px; padding: 18px 2px; }

.foot { margin-top: 22px; font-size: 12.5px; color: var(--ink-soft); }
.foot a { color: var(--accent); }