/* ---------- The creator's settings page (web/admin-settings.js) ---------- */
/* Sections, fields and secret inputs are shown and hidden with the hidden attribute (search, section switch). */
.set-layout [hidden], .set-search [hidden] { display: none !important; }

.set-search { display: grid; max-width: 560px; margin: 4px 0 18px; }
.set-search label { margin-top: 0; }
.set-search .field-hint:empty { display: none; }

.set-layout { display: grid; gap: 18px; align-items: start; }
.set-nav { display: grid; gap: 14px; min-width: 0; }
.set-nav-group { display: flex; flex-wrap: wrap; gap: 6px; }
.set-nav-title { flex-basis: 100%; margin: 0 0 2px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.set-nav-item { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--text-2); font-size: 14px; font-weight: 500; text-align: left; }
.set-nav-item:hover { background: var(--panel-2); color: var(--text); }
.set-nav-item.active { border-color: var(--line-2); background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--text-2); }
.set-nav-item > span:first-child { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.set-nav-item .set-chip { display: none; }

.set-content { display: grid; gap: 16px; min-width: 0; }
.set-section { display: grid; gap: 10px; }
.set-section > * { margin: 0; }
.set-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.set-head h2 { margin: 0; }
.set-head h2:focus { outline: none; }
.set-head h2:focus-visible { outline: 3px solid var(--text-2); outline-offset: 4px; border-radius: 4px; }
.set-chip { flex: none; min-height: 24px; font-size: 12px; }
.set-chip.warn { background: rgb(228 174 79 / .12); color: var(--warn); }
.set-scope { padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg-deep); color: var(--text-2); font-size: 14px; line-height: 1.5; }
.set-scope.warn { border-left-color: var(--warn); }
.set-notice { margin: 0; padding: 12px 14px; border: 1px solid rgb(228 174 79 / .45); border-radius: var(--radius-md); background: rgb(228 174 79 / .08); font-size: 14px; line-height: 1.5; }
.set-section .form-grid { align-items: start; }
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.set-section .form-error:empty { display: none; }
.set-secret-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.set-secret-row + input, .set-secret-row + textarea { margin-top: 8px; }
.set-secret-state.danger { background: rgb(242 122 111 / .1); color: var(--danger); }
.set-check { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--panel-2); font-size: 14px; line-height: 1.5; }
.set-nothing { margin: 0; }
.set-section [aria-invalid="true"] { border-color: var(--danger); }
.set-section input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }

/* A section's own values (limits, rates, switches) and its server keys, each under the line saying what saving does. */
.set-block { display: grid; gap: 4px; min-width: 0; }
.set-block + .set-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.set-block > .set-scope { margin: 0 0 4px; }
.set-switches { margin: 12px 0 0; }
.set-switches legend { margin: 0 0 2px; color: var(--text-2); font-size: 14px; font-weight: 500; }
.set-switches .check-row span { min-width: 0; overflow-wrap: anywhere; }
.set-wide { min-width: 0; }
.set-wide .check-row { margin-top: 12px; }
.field-hint.set-warn { color: var(--warn); }
.set-notice.set-unavailable { border-color: var(--line-2); background: var(--panel-2); }
.set-moved { display: grid; justify-items: start; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.set-moved .field-hint { margin: 0; }
.set-packages { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.set-packages li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; font-size: 14px; }
.set-packages li + li { border-top: 1px solid var(--line); }
.set-packages strong { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }

@media (min-width: 960px) {
  .set-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
  .set-nav { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 2px; }
  .set-nav-group { display: grid; gap: 4px; }
  .set-nav-item { width: 100%; border-color: transparent; background: transparent; }
  .set-nav-item.active { border-color: var(--line-2); background: var(--panel-2); box-shadow: none; }
  .set-nav-item .set-chip { display: inline-flex; min-height: 20px; padding: 0 8px; font-size: 11px; }
  /* A long section name beside its status wraps instead of being cut («Обработка фото» · «Локальный режим»). */
  .set-nav-item { padding-block: 8px; }
  .set-nav-item > span:first-child { overflow: visible; white-space: normal; }
}

/* Hints under the server keys: the value used while empty, the usual range and the limits (web/admin-settings-hints.js). */
.set-span { grid-column: 1 / -1; }
.set-key-hint { max-width: 76ch; }
.set-key-hint strong { color: var(--warn); font-weight: 600; }
/* A value outside its limits is marked while it is typed (min/max/pattern of the input); an empty field means the default. */
.set-section input:not([type="checkbox"]):invalid:not(:placeholder-shown) { border-color: var(--danger); }
/* What a section is for and how to set it up (service bot, official Telegram login, payment notices). */
.set-explain { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-deep); color: var(--text-2); font-size: 14px; line-height: 1.55; }
.set-explain p, .set-explain ul, .set-explain ol { margin: 0; }
.set-explain ul, .set-explain ol { padding-left: 20px; }
.set-explain li + li { margin-top: 4px; }
.set-explain code { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.set-explain .row { margin-top: 4px; }
.set-explain-title { color: var(--text); font-weight: 600; }
.set-howto { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.set-howto summary { color: var(--text); font-weight: 600; cursor: pointer; }
.set-howto > * { margin: 0; }
.set-howto[open] > summary { margin-bottom: 2px; }
.set-howto > button { justify-self: start; }
.set-state { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; }
.set-state .dot { background: var(--muted); }
.set-state.is-on .dot { background: var(--ok); }
.set-notice-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
/* The person's own «Открыть бота» notice at the top of every cabinet page (web/service-bot-prompt.js). */
.service-prompt { margin: 0 0 16px; }
/* The results channel: a check through the service bot and what the channel received lately. */
.set-channel { display: grid; gap: 6px; margin-top: 10px; }
.set-channel .field-hint { margin: 0; }
.set-channel-result { margin: 0; }
.set-ok { color: var(--ok); }
.set-bad { color: var(--danger); }
/* «Криптовалюта» of iCryptoCheck (web/admin-crypto.js): the connection check and what arrived. */
.crypto-block .cred-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 6px; }
.crypto-block .set-check > * { margin: 0; }
.crypto-table-wrap { overflow-x: auto; }
.crypto-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.crypto-table th, .crypto-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.crypto-table th { color: var(--text-2); font-weight: 600; white-space: nowrap; }
/* Each cell: the fact on top, what it means small under it (the buyer, the dollars, how it was credited). */
.crypto-table td small { display: block; color: var(--muted); font-size: 12px; }
.set-ids { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.set-ids code { font-size: 13px; }

/* «Перенос стенда» (web/admin-stand.js): export, import with its preview part by part, the copies kept before imports. */
.stand-block h3 { margin: 0 0 6px; font-size: 16px; }
.stand-block + .stand-block { margin-top: 18px; }
.stand-block .file-button { margin: 0; }
.stand-history { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stand-history li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.stand-parts { display: grid; gap: 10px; margin: 12px 0; }
.stand-part { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.stand-part.is-quiet { opacity: .72; }
.stand-part-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; cursor: pointer; }
.stand-part select { width: 100%; margin-top: 4px; }
.stand-part .field-hint { margin: 4px 0 0; }
.stand-lines { margin: 6px 0 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
.stand-copy { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.stand-report { display: grid; gap: 8px; margin: 0 0 10px; padding-left: 18px; overflow-wrap: anywhere; }

/* «Сотрудники» (web/admin-staff.js): one block per person, their sections as switches, two columns on a wider screen. */
.staff-row h3, .staff-add h3 { margin: 0 0 4px; font-size: 16px; }
.staff-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.staff-head h3 { margin: 0; }
.staff-has { margin: 0; color: var(--text-2); font-size: 14px; overflow-wrap: anywhere; }
.staff-edit summary { margin-top: 4px; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.staff-sections { display: grid; gap: 0 10px; min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }
.staff-empty { margin: 0; }
@media (min-width: 720px) { .staff-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }