/* Собственные стили поверх Bootstrap. Держим здесь, а не инлайном в шаблонах,
   чтобы правки не требовали трогать разметку и чтобы файл кэшировался. */

:root {
    --sg-shell-bg: #f5f7fa;
}

body.sg-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--sg-shell-bg);
    padding: 1.5rem;
}

.sg-auth-card {
    width: 100%;
    max-width: 26rem;
}

/* Поле для ввода одноразового кода: разрядка и табличные цифры, чтобы код
   читался как на бумаге и не «прыгал» при вводе. */
.sg-code-input {
    letter-spacing: .5em;
    text-align: center;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    padding-left: .5em;
}

/* Обёртка QR. Центрируем через margin-inline вместо text-align: SVG у нас
   блочный, и text-align на него не действует. width: fit-content нужен, чтобы
   рамка обтягивала код, а не растягивалась на всю карточку. */
.sg-qr {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    line-height: 0;
}

/* Масштабирование обязательно: otpauth-URI даёт версию 10-12, это 57-65
   модулей и при 5 px на модуль ~365 px — шире, чем карточка входа на узком
   экране. Атрибуты width/height в SVG перекрываем, пропорции держит viewBox. */
.sg-qr svg {
    display: block;
    width: min(15rem, 100%);
    height: auto;
    /* Пиксельная графика: сглаживание превращает границы модулей в кашу и
       мешает распознаванию при съёмке с экрана. */
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}

.sg-secret {
    font-family: var(--bs-font-monospace);
    letter-spacing: .06em;
}

body.sg-app {
    background: var(--sg-shell-bg);
}

.sg-navbar {
    background: #fff;
    border-bottom: 1px solid var(--bs-border-color);
}