/* ============================================================
   THIRD RUSSIA · Москва — панель логов
   Чёрно-синяя тема. Только CSS, без фреймворков.
   ============================================================ */

:root {
  --bg:            #05070f;
  --bg-deep:       #03040a;
  --surface:       #0a1020;
  --surface-2:     #0e1628;
  --surface-3:     #121c33;
  --line:          #1b2745;
  --line-soft:     #16203a;
  --text:          #dbe6ff;
  --text-dim:      #8698c4;
  --text-mute:     #5d6d94;
  --blue:          #2f6bff;
  --blue-soft:     #3f7dff;
  --blue-deep:     #1b3f9e;
  --cyan:          #35d0ff;
  --violet:        #7a5cff;
  --ok:            #2fd48a;
  --warn:          #ffb52e;
  --danger:        #ff4d6a;
  --gold:          #ffd166;
  --radius:        14px;
  --radius-sm:     10px;
  --shadow:        0 18px 50px rgba(2, 6, 20, .65);
  --shadow-sm:     0 8px 22px rgba(2, 6, 20, .45);
  --glow:          0 0 0 1px rgba(47, 107, 255, .35), 0 8px 30px rgba(47, 107, 255, .18);
  --sidebar-w:     262px;
  --font:          'Segoe UI', 'Inter', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono:          'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(1100px 640px at 12% -8%, rgba(47, 107, 255, .16), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(53, 208, 255, .09), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-soft); text-decoration: none; }
a:hover { color: var(--cyan); }

h1, h2, h3, h4 { margin: 0 0 .6rem; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

code, pre, .mono { font-family: var(--mono); font-size: .86em; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #182543; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #233563; }

.icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.16em;
}
.icon-lg { width: 1.35em; height: 1.35em; }
.icon-xl { width: 2rem; height: 2rem; }

/* ------------------------- РАЗМЕТКА ------------------------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, rgba(10, 16, 32, .96), rgba(5, 8, 18, .98));
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.05rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  box-shadow: var(--glow);
  color: #fff;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-title { font-weight: 750; letter-spacing: .04em; font-size: .93rem; }
.brand-sub { color: var(--text-mute); font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; }

.nav { padding: .7rem .55rem 1.4rem; overflow-y: auto; flex: 1; }
.nav-group { margin-bottom: .35rem; }
.nav-label {
  padding: .75rem .65rem .35rem;
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: .885rem;
  font-weight: 500;
  transition: background .14s, color .14s, transform .14s;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active {
  background: linear-gradient(90deg, rgba(47, 107, 255, .22), rgba(47, 107, 255, .04));
  color: #fff;
  box-shadow: inset 2px 0 0 var(--blue);
}
.nav a .icon { color: var(--blue-soft); }
.nav a.active .icon { color: var(--cyan); }
.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  padding: .05rem .4rem;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .72rem 1.15rem;
  background: rgba(5, 8, 18, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { margin: 0; font-size: 1.06rem; }
.topbar-sub { color: var(--text-mute); font-size: .78rem; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .55rem; }

.userchip {
  display: flex; align-items: center; gap: .55rem;
  padding: .32rem .6rem .32rem .35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.userchip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-deep), var(--violet));
  color: #fff; font-weight: 700; font-size: .8rem;
}
.userchip .u-login { font-size: .84rem; font-weight: 600; }
.userchip .u-role { font-size: .7rem; color: var(--text-mute); }

.content { padding: 1.15rem 1.15rem 3rem; flex: 1; }

@media (max-width: 1020px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after {
    content: ''; position: fixed; inset: 0; background: rgba(2, 4, 12, .6); z-index: 25;
  }
  .burger { display: grid !important; }
}
.burger {
  display: none;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* ------------------------- КАРТОЧКИ ------------------------- */

.card {
  background: linear-gradient(180deg, var(--surface), rgba(8, 13, 26, .96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.05rem;
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .icon { color: var(--blue-soft); }
.card-head .right { margin-left: auto; display: flex; gap: .45rem; align-items: center; }
.card-body { padding: 1rem; }
.card-body.tight { padding: .5rem; }
.card-foot {
  padding: .65rem 1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--text-mute);
  font-size: .8rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}

.grid { display: grid; gap: 1.05rem; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1300px) { .grid.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-6 { grid-template-columns: 1fr; }
}

/* Плитка со счётчиком */
.stat {
  position: relative;
  padding: .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--surface-2), rgba(6, 10, 22, .9));
  overflow: hidden;
}
.stat::after {
  content: '';
  position: absolute; inset: auto -30% -60% auto;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 107, 255, .18), transparent 70%);
}
.stat-top { display: flex; align-items: center; gap: .5rem; color: var(--text-mute); font-size: .78rem; }
.stat-top .icon { color: var(--blue-soft); }
.stat-value { font-size: 1.62rem; font-weight: 700; letter-spacing: -.02em; margin-top: .3rem; }
.stat-sub { color: var(--text-mute); font-size: .76rem; }
.stat.accent-cyan .stat-top .icon { color: var(--cyan); }
.stat.accent-ok .stat-top .icon { color: var(--ok); }
.stat.accent-warn .stat-top .icon { color: var(--warn); }
.stat.accent-danger .stat-top .icon { color: var(--danger); }
.stat.accent-gold .stat-top .icon { color: var(--gold); }
.stat.accent-violet .stat-top .icon { color: var(--violet); }

/* Плитка-ссылка (источники логов, разделы статистики) */
a.stat { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.stat:hover { border-color: var(--blue-soft); transform: translateY(-1px); }
a.stat.is-current { border-color: var(--blue); }

/* Разделитель внутри карточки (между двумя формами) */
hr.sep { border: 0; border-top: 1px solid var(--line-soft); margin: .9rem 0; }

/* ------------------------- ТАБЛИЦЫ ------------------------- */

.table-wrap { overflow-x: auto; }
table.grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
table.grid-table th {
  text-align: left;
  padding: .6rem .75rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-mute);
  background: rgba(9, 14, 28, .9);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.grid-table th a { color: inherit; display: inline-flex; gap: .25rem; align-items: center; }
table.grid-table th a:hover { color: var(--cyan); }
table.grid-table td {
  padding: .58rem .75rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
table.grid-table tbody tr:hover { background: rgba(24, 38, 72, .42); }
table.grid-table tbody tr:last-child td { border-bottom: none; }
table.grid-table td.num, table.grid-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid-table td.nowrap { white-space: nowrap; }
.t-dim { color: var(--text-mute); }
.t-mono { font-family: var(--mono); font-size: .82rem; }
.t-strong { font-weight: 650; }
.t-ok { color: var(--ok); }
.t-danger { color: var(--danger); }
.t-warn { color: var(--warn); }
.t-cyan { color: var(--cyan); }
.t-gold { color: var(--gold); }

/* Длинный текст «как есть»: обращения и ответы в репортах */
p.pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.55;
}

.empty {
  padding: 2.4rem 1rem;
  text-align: center;
  color: var(--text-mute);
}
.empty .icon-xl { color: var(--line); display: block; margin: 0 auto .6rem; }

/* ------------------------- ЗНАЧКИ ------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge .icon { width: .9em; height: .9em; }
.badge-blue   { background: rgba(47, 107, 255, .16); color: #9dbcff; border-color: rgba(47, 107, 255, .35); }
.badge-cyan   { background: rgba(53, 208, 255, .14); color: #8fe5ff; border-color: rgba(53, 208, 255, .3); }
.badge-ok     { background: rgba(47, 212, 138, .14); color: #86efc0; border-color: rgba(47, 212, 138, .32); }
.badge-warn   { background: rgba(255, 181, 46, .14); color: #ffd894; border-color: rgba(255, 181, 46, .32); }
.badge-danger { background: rgba(255, 77, 106, .15); color: #ff9fb0; border-color: rgba(255, 77, 106, .34); }
.badge-violet { background: rgba(122, 92, 255, .16); color: #c0b0ff; border-color: rgba(122, 92, 255, .34); }
.badge-gold   { background: rgba(255, 209, 102, .14); color: #ffe3a3; border-color: rgba(255, 209, 102, .3); }
.badge-mute   { background: rgba(93, 109, 148, .14); color: var(--text-dim); border-color: var(--line); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-on  { background: var(--ok); box-shadow: 0 0 8px rgba(47, 212, 138, .8); }
.dot-off { background: #35415f; }

/* ------------------------- КНОПКИ ------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .48rem .85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: .855rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .1s, box-shadow .14s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: #24345c; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 24px rgba(47, 107, 255, .28);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--blue-soft), #2350c4); color: #fff; }
.btn-danger { background: rgba(255, 77, 106, .14); border-color: rgba(255, 77, 106, .38); color: #ffb0be; }
.btn-danger:hover { background: rgba(255, 77, 106, .24); color: #fff; }
.btn-ok { background: rgba(47, 212, 138, .14); border-color: rgba(47, 212, 138, .38); color: #92f0c4; }
.btn-ok:hover { background: rgba(47, 212, 138, .24); color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: .3rem .55rem; font-size: .78rem; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: .45rem; flex-wrap: wrap; }

/* ------------------------- ФОРМЫ ------------------------- */

label { display: block; font-size: .78rem; color: var(--text-dim); margin-bottom: .28rem; font-weight: 600; }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=search], input[type=date], select, textarea {
  width: 100%;
  padding: .52rem .7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #070c18;
  color: var(--text);
  font-family: inherit;
  font-size: .88rem;
  transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, .16);
}
input::placeholder, textarea::placeholder { color: #47556f; }
textarea { min-height: 84px; resize: vertical; }
select option { background: #070c18; }

.field { margin-bottom: .8rem; }
.field-hint { font-size: .74rem; color: var(--text-mute); margin-top: .25rem; }
.form-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.form-row > * { flex: 1 1 150px; }
.form-row > .narrow { flex: 0 0 120px; }
.form-row > .fit { flex: 0 0 auto; }

/* Мини-форма прямо в ячейке таблицы (снять бан / варн одной кнопкой) */
.inline-form { display: flex; gap: .35rem; align-items: center; }
.inline-form input.mini { width: 140px; padding: .28rem .45rem; font-size: .78rem; }

.filters {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 12, 24, .6);
}
.filters .f { flex: 0 1 170px; }
.filters .f.wide { flex: 1 1 260px; }
.filters .f label { margin-bottom: .2rem; }

.switch-row { display: flex; align-items: center; gap: .5rem; }
.switch-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue); }
.switch-row label { margin: 0; }

/* ------------------------- ПРОЧЕЕ ------------------------- */

.flash {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  margin-bottom: 1rem;
  font-size: .88rem;
  background: var(--surface-2);
}
.flash-ok    { border-color: rgba(47, 212, 138, .4);  background: rgba(47, 212, 138, .1);  color: #a6f3cd; }
.flash-error { border-color: rgba(255, 77, 106, .42); background: rgba(255, 77, 106, .1);  color: #ffb3c0; }
.flash-warn  { border-color: rgba(255, 181, 46, .42); background: rgba(255, 181, 46, .1);  color: #ffdea1; }
.flash-info  { border-color: rgba(47, 107, 255, .42); background: rgba(47, 107, 255, .1);  color: #b6cdff; }

/* Заметка внутри карточки: пояснение, предупреждение, состояние объекта. */
.note {
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: .86rem;
}
.note + .note { margin-top: .5rem; }
.note-ok     { border-left-color: var(--ok);     background: rgba(47, 212, 138, .08); }
.note-danger { border-left-color: var(--danger); background: rgba(255, 77, 106, .08); }
.note-warn   { border-left-color: var(--warn);   background: rgba(255, 181, 46, .08); }
.note-info   { border-left-color: var(--blue);   background: rgba(47, 107, 255, .08); }

.pager { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 32px;
  padding: .25rem .5rem;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: .8rem;
  color: var(--text-dim);
}
.pager a:hover { border-color: var(--blue); color: #fff; }
.pager .cur { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.pager .gap { border: none; }

.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a {
  padding: .42rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: .84rem;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
}
.tabs a:hover { border-color: #24345c; color: #fff; }
.tabs a.active { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); border-color: transparent; color: #fff; }

.kv { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: .1rem .8rem; font-size: .87rem; }
.kv dt { color: var(--text-mute); padding: .3rem 0; border-bottom: 1px solid var(--line-soft); }
.kv dd { margin: 0; padding: .3rem 0; border-bottom: 1px solid var(--line-soft); text-align: right; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: none; }

.bar { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }

.chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.chart .col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart .col i {
  display: block;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  min-height: 2px;
}
.chart-legend { display: flex; justify-content: space-between; color: var(--text-mute); font-size: .7rem; margin-top: .35rem; }

.swatch {
  width: 20px; height: 20px; border-radius: 6px;
  border: 1px solid var(--line);
  display: inline-block; vertical-align: -.35em;
}

.copyable { cursor: pointer; border-bottom: 1px dashed var(--line); }
.copyable:hover { color: var(--cyan); }

pre.sql-out {
  margin: 0;
  padding: .8rem;
  border-radius: var(--radius-sm);
  background: #060a14;
  border: 1px solid var(--line);
  max-height: 420px;
  overflow: auto;
  font-size: .8rem;
}

/* ------------------------- ВХОД / РЕГИСТРАЦИЯ ------------------------- */

.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
.auth-card {
  width: 100%;
  max-width: 430px;
  background: linear-gradient(180deg, rgba(12, 19, 38, .96), rgba(6, 10, 22, .98));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.auth-card.wide { max-width: 520px; }
.auth-head { padding: 1.5rem 1.5rem 1rem; text-align: center; }
.auth-head .brand-mark { margin: 0 auto .7rem; width: 46px; height: 46px; border-radius: 14px; }
.auth-head h1 { font-size: 1.3rem; margin-bottom: .2rem; }
.auth-head p { margin: 0; color: var(--text-mute); font-size: .84rem; }
.auth-body { padding: 0 1.5rem 1.5rem; }
.auth-foot {
  padding: .9rem 1.5rem;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: .83rem;
  color: var(--text-mute);
}
.captcha-box { display: flex; gap: .6rem; align-items: stretch; }
.captcha-img {
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #070c18;
  display: grid; place-items: center;
  padding: .2rem;
}
.captcha-img svg { display: block; }
.code-input {
  letter-spacing: .5em;
  text-align: center;
  font-size: 1.3rem !important;
  font-family: var(--mono);
}
.errors { list-style: none; margin: 0 0 .9rem; padding: .6rem .8rem .6rem 1.6rem; }
.errors li { color: #ffb3c0; font-size: .84rem; list-style: '— '; }

.steps { display: flex; gap: .4rem; margin: 0 0 1rem; }
.steps .step {
  flex: 1;
  padding: .4rem;
  text-align: center;
  border-radius: 8px;
  font-size: .72rem;
  border: 1px solid var(--line);
  color: var(--text-mute);
}
.steps .step.done { border-color: rgba(47, 212, 138, .4); color: #92f0c4; }
.steps .step.cur { border-color: var(--blue); color: #fff; background: rgba(47, 107, 255, .12); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.muted { color: var(--text-mute); }
.small { font-size: .8rem; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.hstack { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.vstack { display: flex; flex-direction: column; gap: .45rem; }
.scroll-y { max-height: 420px; overflow-y: auto; }



.auth-divider { display:flex; align-items:center; gap:.7rem; margin:1rem 0 .75rem; color:var(--text-mute); font-size:.78rem; }
.auth-divider::before, .auth-divider::after { content:''; height:1px; flex:1; background:var(--line); }
.oauth-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.btn-oauth { justify-content:center; gap:.55rem; min-height:42px; border-color:var(--line); }
.btn-oauth-google:hover { border-color:#4285f4; }
.btn-oauth-vk:hover { border-color:#2787f5; }
.oauth-mark { display:inline-grid; place-items:center; min-width:1.65rem; height:1.65rem; border-radius:7px; font-weight:800; font-size:.8rem; color:#fff; background:#4285f4; }
.btn-oauth-vk .oauth-mark { background:#2787f5; font-size:.65rem; }
@media (max-width:520px) { .oauth-grid { grid-template-columns:1fr; } }