:root{
  --paper:#f8f5f2; --card:#fff; --ink:#1c1c1c; --muted:#6b6560; --line:#dfd8d0;
  --soft:#efeae3; --accent:#8d8d7a; --error:#a23328; --error-bg:#fff1ec; --ok:#3f6b4a;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#151515;--card:#1d1d1d;--ink:#f1ece7;--muted:#a9a099;--line:#3a3530;
        --soft:#262220;--error:#f0a091;--error-bg:#33221f;--ok:#9dc6a8;color-scheme:dark}
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
     padding:14px 24px;border-bottom:1px solid var(--line);background:var(--card)}
.brand{display:flex;flex-direction:column;line-height:1.2}
.mark{font-weight:600;letter-spacing:.14em;font-size:13px}
.sub{color:var(--muted);font-size:11px;letter-spacing:.06em}
.who{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}
/* display у .who и .note перебивает штатное скрытие, поэтому оно объявлено явно */
[hidden]{display:none!important}
.note{padding:10px 24px;background:var(--soft);font-size:13px}
.note.bad{background:var(--error-bg);color:var(--error)}
main{padding:24px;max-width:1180px;margin:0 auto}
.loading{color:var(--muted);padding:40px 24px}

.enter{max-width:380px;margin:60px auto;background:var(--card);border:1px solid var(--line);
       border-radius:10px;padding:28px}
.enter h1{font-size:20px;font-weight:500;margin-bottom:6px}
.enter p.hint{color:var(--muted);font-size:12px;margin-bottom:18px}
label{display:block;font-size:12px;color:var(--muted);margin:14px 0 5px}
input[type=text],input[type=password],textarea,select{
  width:100%;border:1px solid var(--line);border-radius:6px;background:var(--paper);
  padding:10px 12px;font-size:14px}
textarea{resize:vertical;min-height:76px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.button{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:6px;
        padding:10px 18px;cursor:pointer;font-size:13px;font-weight:500}
.button:hover{opacity:.88}
.button:disabled{opacity:.5;cursor:wait}
.button.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.button.small{padding:6px 12px;font-size:12px}
.link{background:none;border:0;cursor:pointer;text-decoration:underline;padding:0;font-size:12px;color:inherit}
.wide{width:100%;margin-top:20px}
.field-error{color:var(--error);font-size:12px;margin-top:6px}
/* Ключ и запасные коды: их переписывают глазами, поэтому моноширинный
   шрифт и крупный межбуквенный просвет - чтобы ноль не спутали с буквой. */
.enter .secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  letter-spacing:.08em;line-height:1.9;background:var(--line);border-radius:6px;
  padding:12px 14px;margin-bottom:18px;overflow-wrap:anywhere;user-select:all}
.enter .secret+.hint{margin-top:-10px}
.enter a{color:inherit}

.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
.bar label{margin:0 0 4px}
.bar>div{display:flex;flex-direction:column}
.bar .grow{flex:1;min-width:180px}
.spacer{flex:1}
.tally{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 14px;min-width:150px}
.tile-city{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.tile-main{font-size:12px;margin-top:3px}
.tile-main strong{font-size:19px;font-weight:600;margin-right:3px}
.tile.enough{border-color:var(--ok)}
.tile.enough .tile-main strong{color:var(--ok)}
.tile.full{border-color:var(--error)}
.tile.full .tile-main strong{color:var(--error)}
.tile-warn{font-size:10px;color:var(--error);margin-top:4px;max-width:170px;line-height:1.4}
.state.reserve{border-color:var(--accent);color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:4px 12px;
      font-size:12px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip .count{color:var(--muted);margin-left:6px}
.chip[aria-pressed=true] .count{color:var(--paper);opacity:.75}

table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:8px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:500}
tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--soft)}
.empty{padding:40px;text-align:center;color:var(--muted);background:var(--card);
       border:1px solid var(--line);border-radius:8px}
.state{display:inline-block;font-size:11px;border:1px solid var(--line);border-radius:20px;padding:2px 9px;white-space:nowrap}
.state.new{background:var(--soft)}
.state.invited{border-color:var(--ok);color:var(--ok)}
.state.declined{border-color:var(--error);color:var(--error)}
.withdrawn{color:var(--error);font-size:11px;display:block}

.card-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;margin-bottom:4px}
.card-head h1{font-size:22px;font-weight:500}
.meta{color:var(--muted);font-size:12px;margin-bottom:18px}
.columns{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin-bottom:16px}
.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
          font-weight:500;margin-bottom:12px}
dl{margin:0;display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:8px 16px}
dt{color:var(--muted);font-size:12px}
dd{margin:0;overflow-wrap:anywhere}
.statuses{display:flex;flex-wrap:wrap;gap:6px}
.history{list-style:none;padding:0;margin:0}
.history li{border-top:1px solid var(--line);padding:10px 0}
.history li:first-child{border-top:0;padding-top:0}
.history .when{color:var(--muted);font-size:11px}
.history .body{margin-top:3px;overflow-wrap:anywhere}
@media(max-width:900px){.columns{grid-template-columns:1fr}main{padding:16px}.top{padding:12px 16px}}

/* Экран «Команда»: администратор ведёт кураторов, не заходя на сервер. */
.team{max-width:900px;margin:30px auto;padding:0 20px}
.team h1{font-size:22px;font-weight:500;margin-bottom:6px}
.team h2{font-size:16px;font-weight:500;margin:32px 0 10px}
.team .hint{color:var(--muted);font-size:12px;margin-bottom:20px;line-height:1.6}
.team-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.team-table{width:100%;border-collapse:collapse;font-size:13px}
.team-table th{text-align:left;font-weight:500;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.07em;padding:8px 10px;border-bottom:1px solid var(--line)}
.team-table td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.team-actions{text-align:right;white-space:nowrap}
/* Метка рядом с логином не должна разрываться посередине: «это вы» на двух
   строках читается как мусор. */
.team-table .chip{white-space:nowrap;margin-left:6px}
/* Ширины не задаём: минимальные значения раздували таблицу за край окна,
   и правая колонка уезжала из виду. Пусть распределяет браузер. */
.team-table{table-layout:auto}
.team-actions .button{margin-left:8px}
.team-actions .muted{color:var(--muted);font-size:11px}
.city-picks{display:flex;flex-wrap:wrap;gap:10px 18px;margin:8px 0 18px}
.city-pick{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.city-pick input{width:16px;height:16px;accent-color:var(--ink)}
/* Ссылка-приглашение показывается один раз: её переписывают или копируют целиком. */
.invite-box{border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin-bottom:22px;background:var(--card)}
.invite-box p{font-size:13px;margin-bottom:8px}
@media(max-width:640px){
  .team{padding:0 14px}
  .team-table th:nth-child(2),.team-table td:nth-child(2){display:none}
  .team-actions{white-space:normal}
  .team-actions .button{margin:4px 0 0 6px}
}