/* Местные дополнения к навыку getmeback-admin-design. Токены и компоненты — из kit/,
   здесь только то, чего в навыке нет: обложка в строке, ручка порядка, вход и подключение. */

[hidden] { display: none !important; }

/* Вход */
.sa-login__form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; margin-top: 16px; }
.sa-login__form .gmb-field { margin: 0; }

/* Таблица сторис */
/* В навыке ширины 55/25/20 % заданы под таблицу из трёх колонок; здесь их пять. */
.sa-table th:first-child { width: 48px; }
.sa-table th:nth-child(2) { width: auto; }
.sa-table th:nth-child(3) { width: 200px; }
.sa-table th:nth-child(4), .sa-table th:nth-child(5) { width: 96px; }
.sa-table td { vertical-align: middle; }
.sa-row__handle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.sa-row__handle:disabled { cursor: default; opacity: .3; }
.sa-row__handle img { pointer-events: none; -webkit-user-drag: none; }
.sa-row__handle:focus-visible { outline: 2px solid #839096; outline-offset: 2px; }
.sa-row__name { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.sa-row__cover { position: relative; flex: none; width: 40px; height: 40px; }
.sa-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sa-row__cover img, .sa-row__cover span { position: absolute; inset: 4px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #ededed; }
.sa-row__cover span { display: flex; align-items: center; justify-content: center; color: #839096; font: 700 13px/1 var(--gmb-font-heading); text-transform: uppercase; }
.sa-row__state { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--gmb-color-muted); }
.sa-row__state--live { color: var(--gmb-color-primary); }
.sa-row--dragging { background: #fff; box-shadow: 0 8px 24px #0002; opacity: .95 !important; }
.sa-row--placeholder { background: #eef1f3; }
.sa-row--placeholder > td { opacity: .3; }
.sa-period { white-space: nowrap; }

/* Обводка кружков */
.sa-theme { margin-top: 24px; }
.sa-theme__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.sa-theme__form .gmb-field { margin: 0; }
.sa-color { display: block; width: 64px; height: 36px; padding: 2px; border: 1px solid var(--gmb-color-border); border-radius: var(--gmb-radius-control); background: #fff; cursor: pointer; }
.sa-theme__sample { position: relative; width: 44px; height: 44px; }
.sa-theme__sample span { position: absolute; inset: 5px; border-radius: 50%; background: #d7dde1; }

/* Подключение */
.sa-connect { margin-top: 24px; max-width: 760px; }
.sa-connect summary { cursor: pointer; color: var(--gmb-color-text); font: 700 14px/20px var(--gmb-font-heading); }
.sa-connect .gmb-field__hint { margin: 12px 0; }
.sa-connect code { font-size: 12px; }
.sa-code { overflow: auto; max-height: 360px; margin: 0 0 12px; padding: 12px; border: 1px solid #e1e6ea; border-radius: 8px; background: #fff; font: 12px/16px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }

/* Редактор */
/* Подсказка под свитчем выровнена по его подписи: дорожка 33 px + отступ 8 px. */
.sa-flag__hint { max-width: 560px; margin: 4px 0 0 41px; }
.sa-back { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.sa-leave { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 1040px; margin: 0 0 20px; padding: 10px 14px; border: 1px solid #fbb744; border-radius: 8px; background: #fff8eb; }
.sa-leave p { flex: 1 1 200px; margin: 0; font: 700 13px/17px var(--gmb-font-heading); }
.gmb-upload__filename[data-progress]::after { content: " · " attr(data-progress); color: var(--gmb-color-muted); }
.gmb-story__media .gmb-upload__media video { width: 100%; height: 100%; object-fit: contain; }
.gmb-stories__delete[data-confirm] { opacity: 1; background: #ff525212; }
.gmb-form-status--error { color: var(--gmb-color-error); }
.gmb-form-status--ok { color: var(--gmb-color-primary); }