/* Панель ключей AWG: компоновка в стиле пробника (dashboard/design/probe/today.html, 24.10) —
   тёмный тёплый холст, мягкие плитки, полоса-объект с цветной кромкой слева, моно для чисел.
   Своих цветов и размеров здесь нет: всё берётся переменными из panel-tokens.css,
   поэтому смена стиля правит один файл, а не разметку. Правило стережёт проверка. */
.page { max-width: var(--page-w); margin: 0 auto; padding: var(--s4) var(--s6) var(--s6); }

/* --- шапка дня --- */
.head { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap;
        padding: var(--s4) 0 var(--s6); }
.head h1 { margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: var(--ls-tight); line-height: 1.1; }
.head .sub { color: var(--muted); font-size: var(--fs-xs); margin-top: var(--s-half); }
.head .grow { flex: 1; }
.head-tools { display: flex; gap: var(--s2); align-items: center; margin-left: auto; }

/* --- полоса состояния сети --- */
.bar { display: flex; align-items: center; gap: var(--s3); min-height: var(--bar-h);
       padding: var(--s2) var(--s4); border: var(--bw-hair) solid var(--line);
       border-radius: var(--r-ctl); background: var(--panel);
       font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s6); }
.bar .dot { width: var(--dot); height: var(--dot); border-radius: var(--r-pill);
            background: var(--ok); box-shadow: 0 0 var(--dot-glow) var(--ok); flex: none; }
.bar.bad { border-color: var(--hot); color: var(--hot); }
.bar.bad .dot { background: var(--hot); box-shadow: 0 0 var(--dot-glow) var(--hot); }
.bar b { color: var(--text); font-weight: 600; font-family: var(--num); }
.bar .grow { flex: 1; }

/* --- список ключей: полоса-объект, как «полоска на доске» --- */
.keys { display: flex; flex-direction: column; gap: var(--row-gap); }
.key { --k: var(--teal);
       display: flex; align-items: center; gap: var(--s3);
       padding: var(--s3) var(--tile-pad);
       border: var(--bw-hair) solid var(--line); border-left: var(--bw-accent) solid var(--k);
       border-radius: var(--r-strip); background: var(--panel); }
/* Перехода на background здесь нет намеренно: он тянулся и за сменой темы —
   по экрану пробегала волна перекраски (владелец 25.10). Мгновенно — и чисто. */
.key.is-on { --k: var(--ok); }
.key.is-off { --k: var(--idle); }
.key:hover { background: var(--panel-2); }
.key .dot { width: var(--dot); height: var(--dot); border-radius: var(--r-pill); flex: none; }
.key .dot.on { background: var(--ok); box-shadow: 0 0 var(--dot-glow) var(--ok); }
.key .dot.off { background: var(--idle); }
.key .who { flex: 1; min-width: 0; }
.key .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key .note { font-size: var(--fs-xs); color: var(--muted); }
.key .addr { font-family: var(--num); font-variant-numeric: tabular-nums; color: var(--muted); }
.key .traffic { font-family: var(--num); font-variant-numeric: tabular-nums;
                text-align: right; min-width: var(--traffic-w); line-height: 1.25; }
/* Время подключения — главное в колонке, трафик — пояснение под ним (как «когда» в пробнике). */
.key .traffic .ago { font-size: var(--fs-s); color: var(--text); }
.key .traffic .bytes { font-size: var(--fs-xs); color: var(--muted); }
.key.is-on .traffic .ago { color: var(--ok); }
.key .acts { display: flex; gap: var(--s2); margin-left: var(--s2); }
.key .own { font-size: var(--fs-xs); color: var(--idle); margin-left: var(--s2); }

/* --- кнопки --- */
.btn { border: var(--bw-hair) solid var(--line); background: var(--panel-2); color: var(--text);
       border-radius: var(--r-ctl); padding: var(--s-half) var(--s3); min-height: var(--min-btn);
       cursor: pointer; font: inherit; font-size: var(--fs-xs); transition: border-color var(--t-fast), color var(--t-fast); }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: linear-gradient(135deg, var(--accent-2), var(--accent));
               border-color: var(--accent); color: var(--on-accent); font-weight: 600;
               box-shadow: var(--shadow-btn); padding: var(--s2) var(--s4); }
.btn.primary:hover { filter: brightness(1.06); color: var(--on-accent); }
.btn.danger:hover { border-color: var(--hot); color: var(--hot); }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }

/* --- форма и окно выдачи ключа --- */
.form { display: none; gap: var(--s2); padding: var(--tile-pad); margin-bottom: var(--s4);
        border: var(--bw-hair) solid var(--line); border-radius: var(--r-tile); background: var(--panel-2); }
.form.open { display: block; }
.form .row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
input[type=text], input[type=password], select {
  background: var(--panel); color: var(--text); border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-ctl); padding: var(--s-half) var(--s3); min-height: var(--min-btn);
  font: inherit; font-size: var(--fs-xs); min-width: 0; }
input[type=text] { flex: 1; }
.profiles { display: flex; flex-direction: column; gap: var(--s-half); margin-top: var(--s2); }
.profiles label { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer;
                  font-size: var(--fs-xs); }
.profiles .why { color: var(--muted); }

/* выдача: показывается один раз */
.issue { margin-bottom: var(--s4); border: var(--bw-hair) solid var(--accent); border-radius: var(--r-tile);
         background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }
.issue .cap { padding: var(--s2) var(--s4); background: var(--panel-2); font-size: var(--fs-xs);
              border-bottom: var(--bw-hair) solid var(--line); }
.issue .cap b { color: var(--accent); }
.issue pre { margin: 0; padding: var(--s4); overflow-x: auto; font-size: var(--fs-xs);
             font-family: var(--mono); line-height: 1.5; }
.issue .acts { display: flex; gap: var(--s2); align-items: center; padding: var(--s3) var(--s4);
               border-top: var(--bw-hair) solid var(--line); }
.issue img { display: block; margin: 0 auto var(--s3); image-rendering: pixelated; }

/* --- вход --- */
.login { max-width: var(--login-w); margin: var(--login-top) auto; display: flex; flex-direction: column; gap: var(--s2); }
.login h1 { font-size: var(--fs-m); margin: 0 0 var(--s2); font-weight: 600; }
.hint { color: var(--muted); font-size: var(--fs-xs); }
.error { color: var(--hot); font-size: var(--fs-xs); min-height: var(--lh-em); }
.empty { padding: var(--s6); text-align: center; color: var(--muted);
         border: var(--bw-hair) dashed var(--line); border-radius: var(--r-tile); }

/* --- инструкция для друзей (страница /help) --- */
.help-block { align-items: flex-start; }
.help-block .who { min-width: 0; }
.help-block .name { font-size: var(--fs-m); margin-bottom: var(--s2); }
.help-block .steps { margin: 0; padding-left: var(--s6); display: flex;
                     flex-direction: column; gap: var(--s2); font-size: var(--fs-xs); }
.help-block .steps b { color: var(--text); }
.help-block .steps code { font-family: var(--mono); background: var(--panel-2);
                          border: var(--bw-hair) solid var(--line); border-radius: var(--r-ctl);
                          padding: 0 var(--s-half); }
.help-block .steps a { color: var(--accent); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }

/* 620px — литерал, не var(): в @media переменные не работают, правило было бы мёртвым. */
@media (max-width: 620px) {
  .page { padding: var(--s3) var(--s4) var(--s6); }
  .key { flex-wrap: wrap; }
  .key .traffic { text-align: left; min-width: 0; width: 100%; }
  .head h1 { font-size: var(--fs-l); }
}