/* Страница входа и администрирование. Использует переменные из app.css. */
.auth { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 6fr); min-height: 100vh; }
.auth-side { position: relative; background: var(--green-dd); color: #e6f4ec; padding: 36px 48px; display: flex; flex-direction: column; overflow: hidden;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 64px 40px; background-position: -1px -1px; }
.auth-side .brand { font-size: 20px; }
.auth-pitch { margin: auto 0; max-width: 460px; padding: 40px 0; }
.auth-pitch h1 { font-size: 36px; line-height: 1.15; letter-spacing: -.015em; color: #fff; }
.auth-pitch ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.auth-pitch li { padding-left: 18px; border-left: 3px solid #3fc07a; color: #cde6d8; max-width: 40ch; }
.auth-pitch li strong { color: #fff; display: block; }
.auth-foot { color: #8fb9a0; font-size: 13px; }
.auth-main { display: grid; place-items: center; padding: 32px 24px; background: var(--canvas); }
.auth-card { width: min(420px, 100%); background: var(--white); border: 1px solid var(--grid); border-radius: 8px; padding: 32px 30px 28px; box-shadow: 0 12px 36px rgba(10, 61, 34, .09); }
.auth-card h2 { font-size: 24px; }
.auth-card .lead { color: var(--ink2); margin-top: 8px; font-size: 14.5px; }
.auth-card .btn { width: 100%; margin-top: 18px; }
.auth-card .hint { margin-top: 16px; color: var(--ink3); font-size: 13.5px; }
.auth-card .spin { margin: 20px auto; }
.pw { position: relative; }
.pw input { padding-right: 84px; }
.reveal { position: absolute; right: 4px; top: 4px; height: 34px; border: 0; background: transparent; color: var(--green-d); font-size: 13.5px; font-weight: 600; padding: 0 10px; cursor: pointer; border-radius: 4px; }
.reveal:hover { background: var(--green-ll); }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 22px 24px; }
  .auth-pitch { display: none; }
  .auth-foot { display: none; }
  .auth-main { align-items: start; padding-top: 24px; }
}

/* ---------- администрирование ---------- */
.adm { padding: 30px 0 70px; }
.adm h1 { font-size: 30px; }
.adm .sub { color: var(--ink2); margin-top: 6px; }
.atabs { display: flex; gap: 2px; margin: 24px 0 0; border-bottom: 1px solid var(--grid); }
.atabs button { border: 0; background: transparent; padding: 11px 18px 10px; cursor: pointer; border-bottom: 3px solid transparent; color: var(--ink2); font-weight: 500; margin-bottom: -1px; }
.atabs button:hover { background: var(--green-ll); }
.atabs button[aria-selected="true"] { color: var(--green-d); border-bottom-color: var(--green); font-weight: 600; }
.apane { padding-top: 22px; }
.acard { background: var(--white); border: 1px solid var(--grid); border-radius: 6px; padding: 20px; }
.acard h2 { font-size: 17px; }
.newuser { display: grid; grid-template-columns: 1.1fr 1.4fr .9fr auto; gap: 12px; align-items: end; margin-top: 12px; }
.newuser .field { margin-top: 0; }
.newuser .btn { height: 42px; margin: 0; }
.cred { margin-top: 16px; padding: 14px 16px; border-radius: 6px; background: var(--green-l); border: 1px solid #b9dcc8; display: grid; gap: 8px; }
.cred code { font-family: var(--mono); font-size: 18px; background: var(--white); border: 1px solid var(--grid); border-radius: 4px; padding: 6px 12px; letter-spacing: .04em; user-select: all; }
.cred .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cred .btn { height: 36px; padding: 0 14px; }

.tbl { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--grid); margin-top: 18px; font-size: 14.5px; }
.tbl th { background: var(--hdr); text-align: left; font-weight: 600; font-size: 12.5px; color: var(--ink3); padding: 9px 12px; border: 1px solid var(--grid); position: sticky; top: 0; }
.tbl td { padding: 10px 12px; border: 1px solid var(--grid2); vertical-align: middle; }
.tbl tr.off td { color: var(--ink3); background: #f7f9f8; }
.tbl .who { display: flex; align-items: center; gap: 10px; }
.tbl .who strong { display: block; line-height: 1.2; }
.tbl .who div span { color: var(--ink3); font-size: 13px; }
.tbl .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tbl .acts button { height: 32px; padding: 0 11px; border: 1px solid var(--grid); border-radius: 4px; background: var(--white); cursor: pointer; font-size: 13.5px; }
.tbl .acts button:hover { background: var(--green-ll); border-color: var(--green); }
.tbl .acts button.danger:hover { background: var(--red-bg); border-color: var(--red-line); color: var(--red-ink); }
.pill { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: var(--hdr); color: var(--ink2); border: 1px solid var(--grid); }
.pill.ok { background: var(--green-l); color: var(--green-d); border-color: #b9dcc8; }
.pill.warn { background: var(--amber-bg); color: var(--amber-ink); border-color: var(--amber-line); }
.pill.off { background: #eceeed; color: var(--ink3); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c5cfc9; margin-right: 6px; }
.dot.on { background: #25b36a; }
.tbl-wrap { overflow-x: auto; }

.conn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.conn { display: grid; gap: 12px; align-content: start; }
.conn header { display: flex; align-items: center; gap: 12px; }
.conn .logo { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; }
.conn .logo.tg { background: #2a9fd8; } .conn .logo.mx { background: #7a4be0; }
.conn dl { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 14px; }
.conn dt { color: var(--ink3); } .conn dd { margin: 0; }
.steps-mini { margin: 4px 0 0; padding-left: 20px; color: var(--ink2); font-size: 14px; }
.empty { color: var(--ink3); padding: 18px 4px; }
@media (max-width: 900px) {
  .newuser { grid-template-columns: 1fr 1fr; }
  .conn-grid { grid-template-columns: 1fr; }
  .atabs { overflow-x: auto; }
}
@media (max-width: 560px) { .newuser { grid-template-columns: 1fr; } }
.apane > * + * { margin-top: 18px; }

/* ---------- двухфакторная защита ---------- */
dialog.modal.tfa { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.tfa-steps { margin: 12px 0 0; padding-left: 22px; color: var(--ink2); font-size: 14.5px; }
.tfa-steps li { margin: 5px 0; }
.tfa-scan { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.tfa-qr { background: #fff; border: 1px solid var(--grid); border-radius: 6px; padding: 4px; image-rendering: pixelated; }
.tfa-key { display: block; font-family: var(--mono); font-size: 15px; letter-spacing: .06em; background: var(--hdr); border: 1px solid var(--grid); border-radius: 4px; padding: 6px 10px; margin: 4px 0 8px; user-select: all; overflow-wrap: anywhere; }
.tfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.tfa-codes code { font-family: var(--mono); font-size: 16px; text-align: center; padding: 8px; background: var(--hdr); border: 1px solid var(--grid); border-radius: 4px; user-select: all; }
.tfa-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.tfa-ok { display: flex; gap: 8px; align-items: center; margin-top: 12px; cursor: pointer; }
.tfa-warn { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); border-radius: 4px; padding: 8px 12px; margin: 10px 0; }
.btn.small { height: 34px; padding: 0 12px; font-size: 14px; width: auto; margin: 0; }
.lead { color: var(--ink2); margin-top: 8px; font-size: 14.5px; }
dialog.modal h3 { font-size: 17px; }
.auth-card .tfa-steps, .auth-card .tfa-scan { font-size: 14px; }
.auth-card .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.auth-card .modal-actions .btn { width: auto; margin-top: 0; }
.forgot-split { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--grid); }
.forgot-split h3 { font-size: 16px; }
.auth-card .linkbtn { background: none; border: 0; padding: 0; color: var(--green-d); text-decoration: underline; cursor: pointer; font: inherit; }
.okmsg { background: var(--green-l); border: 1px solid #b9dcc8; color: var(--green-dd); padding: 10px 12px; border-radius: 4px; margin-top: 14px; }
@media print { .titlebar, .foot, #toasts { display: none; } dialog.modal { box-shadow: none; border: 0; } }

/* интеграции и роли */
.conn .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.conn .acts input, .conn .acts select, .conn li select { height: 34px; border: 1px solid var(--grid); border-radius: 4px; padding: 0 8px; background: var(--white); color: var(--ink); }
.conn .inl { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.conn .adv { border: 1px solid var(--grid); border-radius: 4px; padding: 8px 12px; }
.conn .adv summary { cursor: pointer; font-weight: 600; }
.conn h3 { font-size: 15px; margin: 6px 0 0; }
.conn .steps-mini li { margin-bottom: 6px; }
.rolesel { height: 32px; border: 1px solid var(--grid); border-radius: 4px; background: var(--white); color: var(--ink); padding: 0 6px; font-size: 13.5px; }