#desktop { padding: 20px clamp(16px, 4vw, 32px) 28px; min-height: 100vh; display: flex; flex-direction: column; }
#users { padding: 20px clamp(16px, 4vw, 32px) 28px; min-height: 100vh; }

.desk-bar { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-mute); }
.desk-bar .who { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px 5px 6px; border-radius: 100px; background: var(--glass); }
.desk-bar .who .avatar { width: 22px; height: 22px; flex-shrink: 0; }
.desk-bar .who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.desk-bar .who button { font: inherit; color: var(--ink-mute); background: none; border: 0; cursor: pointer; padding: 0 4px; flex-shrink: 0; }
.desk-bar .who button:hover { color: var(--ink); }

.desk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; margin-top: 32px; }
.desk-app { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: inherit; min-width: 0; }
.desk-app .tile {
  width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: box-shadow .15s ease, transform .15s ease;
}
/* Наведение — на всю плитку (иконка + подпись), не только на сам квадрат: отклик на курсор уместен
   уже там, где начинается кликабельная область .desk-app, а не только над её частью. Неработающие
   приложения (is-unavailable) не ссылки — им подсвечиваться нечего обещать. */
.desk-app:not(.is-unavailable):hover .tile {
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .32);
  transform: translateY(-3px);
}
.desk-app .tile svg { width: 29px; height: 29px; color: #fff; }
.desk-app small { font-size: 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Градиенты по id приложения — фиксированный набор из src/apps.ts. Неизвестный id (появится
   новое приложение раньше, чем сюда добавят цвет) падает на .tile-default, а не на пустоту. */
.tile-expenses { background: linear-gradient(160deg, #3E7A5B, #2A5B42); }
.tile-lingo    { background: linear-gradient(160deg, #4F6BD4, #33459B); }
.tile-diary    { background: linear-gradient(160deg, #A65C7A, #7A3E56); }
.tile-car      { background: linear-gradient(160deg, #C08040, #93602D); }
.tile-tree     { background: linear-gradient(160deg, #5E8F94, #3F676B); }
.tile-math     { background: linear-gradient(160deg, #7C6BB5, #584A88); }
.tile-brain    { background: linear-gradient(160deg, #B5705C, #8A5142); }
.tile-default  { background: var(--glass); border: 1px solid var(--glass-line); }

.desk-dock {
  margin: auto auto 0; display: flex; gap: 12px; padding: 9px 12px;
  border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-line);
}
.desk-dock .d { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); transition: background .15s ease; }
.desk-dock .d:hover { background: rgba(255, 255, 255, .28); }
.desk-dock .d svg { width: 21px; height: 21px; color: #fff; }

@media (max-width: 900px) { .desk-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .desk-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

/* Плитка-напоминание: приложение ещё не работает. Не ссылка (см. appTile), поэтому курсор
   обычный и наведение ничего не обещает. Приглушаем и добавляем пунктир, чтобы отличалась
   от рабочих с одного взгляда, но остаётся читаемой — она здесь именно чтобы напоминать. */
.desk-app.is-unavailable { cursor: default; }
.desk-app.is-unavailable .tile { opacity: .45; filter: grayscale(.6); box-shadow: none; border: 1px dashed rgba(255, 255, 255, .35); }
.desk-app.is-unavailable small { color: var(--ink-mute); }
.desk-app .soon { font-size: 10.5px; letter-spacing: .02em; opacity: .75; }

/* Экран "Кто живёт в портале" переиспользует .desk-bar (см. renderUsers в users-screen.js), но
   здесь в нём только кнопка "назад" — flex-end у .desk-bar (см. выше, для аватара на рабочем
   столе) увёл бы её на правый край, а "назад" по конвенции слева. */
#users .desk-bar { justify-content: flex-start; }

/* Общая кнопка для этого экрана — до этой правки все кнопки ("Сменить пароль", "Сбросить пароль",
   "Удалить", "← На рабочий стол", "Закрыть") были голыми браузерными <button> без единого своего
   стиля. Переиспользует уже существующий стеклянный язык портала (--glass/--glass-line — тот же,
   что у .who/.desk-dock), а не вводит новую палитру специально для этого экрана. */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 9px; border: 1px solid var(--glass-line);
  background: var(--glass); color: var(--ink-mute);
  font: 600 13px/1 inherit; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: rgba(255, 255, 255, .16); color: var(--ink); border-color: rgba(255, 255, 255, .28); }
.btn:active { background: rgba(255, 255, 255, .1); }
.btn:disabled { opacity: .5; cursor: default; }

/* "← На рабочий стол" — единственная навигационная кнопка на экране, пилюлей, как у .who/
   .desk-dock, чтобы читалась иначе, чем действия над конкретным человеком в списке ниже. */
.btn-pill { border-radius: 100px; padding: 8px 16px 8px 14px; }

/* Удаление человека — необратимо (сервер не даёт отмены), поэтому не просто приглушённый текст
   .danger, как было, а полноценная кнопка с явным красным тоном на основе уже заведённой
   переменной --danger (root, base.css) — та нигде раньше не применялась. */
.btn-danger {
  border-color: rgba(228, 87, 60, .35);
  background: rgba(228, 87, 60, .12);
  color: #FFB4A8;
}
.btn-danger:hover { background: rgba(228, 87, 60, .22); border-color: rgba(228, 87, 60, .55); color: #FFD2C8; }

.people { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
.people li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .8rem; border-radius: .6rem; background: rgba(255,255,255,.06); }
.people .person { flex: 1 1 14rem; }

.secret { margin: .8rem 0; padding: .8rem 1rem; border-radius: .6rem; background: rgba(255,255,255,.1); display: grid; gap: .5rem; justify-items: start; }
.secret code { font-size: 1.25rem; letter-spacing: .08em; user-select: all; }