/*
 * Monitor — style panelu poza wspólnym nexus-ds.css (F2.0 / PR 5).
 * nexus-ds.css (generowany, nie edytować) daje tokeny, szkielet i komponenty pm-*; tutaj tylko to, czego Nexus nie ma:
 * widok kafelków monitorów, wiersz z sparkline'em, formularz celu/endpointów, okna serwisowe, wykres latencji.
 * Kolory wyłącznie z tokenów ds (var(--…)), bez surowych #hex poza znacznikami wykresu.
 */

@font-face { font-family: 'Satoshi'; src: url('/fonts/Satoshi-Variable.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }

/* ── Podstawa ── */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--pm-ground, var(--bg)); }
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-iconbtn .i, .pm-btn .i { width: 16px; height: 16px; }
.pm-side .i { width: 16px; height: 16px; }
.muted { color: var(--text-muted); font-size: var(--pm-fs-3); }
[hidden] { display: none !important; }

/* ── Szkielet: pasek, tytuł, kafelki ── */
.pm-bar .pm-btn .i { margin-right: 0; }
.mon-title { align-items: flex-end; }
.mon-title > div:first-child { flex: 1; min-width: 0; }
.mon-sub { margin: var(--pm-space-2) 0 0; font-size: var(--pm-fs-6); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mon-sub b { font-weight: 500; }
.mon-sub b.up { color: var(--success); }
.mon-sub b.down { color: var(--danger); font-weight: 700; }
.mon-sub b.site { color: var(--site); }
.mon-sub b.maint { color: var(--warning); }
.mon-seg { margin-left: auto; flex: none; }
.pm-kpi__sub .warn { color: var(--warning); }
.pm-kpi__value.ok { color: var(--success); }
.pm-kpi__value.bad { color: var(--danger); }
.pm-kpi { cursor: default; }
.mon-banners:empty, #tiles:empty { display: none; }
.pm-banner button.go { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--danger); margin-left: auto; }
.pm-banner button.go::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pm-banner button.go:focus-visible { outline: none; }
.pm-banner button.go:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Filtry ── */
.mon-filters { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--pm-space-4); align-items: center; }
.mon-filters .pm-control { height: 32px; font-size: var(--pm-fs-4); }
.mon-search { position: relative; }
.mon-search .i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.mon-search .pm-control { padding-left: 32px; }
.mon-filternote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pm-space-3); margin-top: calc(var(--pm-space-6) * -1); }
.mon-filternote:empty { display: none; }
.mon-chip { display: inline-flex; align-items: center; gap: var(--pm-space-2); height: 28px; padding: 0 var(--pm-space-5) 0 var(--pm-space-6); border: 0; border-radius: var(--pm-radius-pill, 999px); background: var(--accent-soft); color: var(--accent); font: 600 var(--pm-fs-3)/var(--pm-lh-3) var(--pm-font); cursor: pointer; }
.mon-chip .i { width: 14px; height: 14px; }
select.pm-control { appearance: none; -webkit-appearance: none; padding-right: var(--pm-space-14); text-overflow: ellipsis; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
input[type="datetime-local"].pm-control { min-height: 36px; }

/* ── Lista (wiersze) ── */
.mon-list > .pm-group { overflow: hidden; }
.mon-row { cursor: pointer; transition: background-color 120ms var(--pm-ease); }
.mon-row:hover { background: var(--pm-hov); }
.mon-row.pm-row--alert:hover { background: var(--danger-soft); }
.mon-row.is-off { opacity: .75; }
.mon-row .pm-dot { margin-left: var(--pm-space-2); margin-right: var(--pm-space-2); }
.mon-open { all: unset; display: block; max-width: 100%; box-sizing: border-box; font-size: var(--pm-fs-5); line-height: var(--pm-lh-7); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.mon-open:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--pm-radius-3); }
.mon-row .pm-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-state { display: flex; flex-wrap: wrap; gap: var(--pm-space-2); justify-content: flex-start; min-width: 0; }
.mon-acts { display: flex; gap: var(--pm-space-1); flex: none; position: relative; z-index: 1; }
.mon-acts .pm-iconbtn-sm { width: 28px; height: 28px; border: 0; padding: 0; }
.pm-cell.mon-tone-ok b { color: var(--success); }
.mon-tone-ok { color: var(--success); } .mon-tone-norm { color: var(--text); } .mon-tone-warn { color: var(--warning); } .mon-tone-bad { color: var(--danger); } .mon-tone-none { color: var(--text-subtle); }
.mon-row .pm-chev { flex: none; }
.pm-cell b.warn { color: var(--warning); }
.mon-ssl-warn { color: var(--warning); font-weight: 700; } .mon-ssl-bad { color: var(--danger); font-weight: 700; }

/* ── Lista na stałej siatce (F2.0d): kolumny równe w każdym wierszu i zgodne z nagłówkiem; < 768 px bez zmian ──
 * ≥ 1360 px jeden rząd: kropka · cel · stan (176 px, badge’e zawijają się w kolumnie, bez ucinania) · wykres · odpowiedź · uptime · SSL · akcje · szewron.
 * 768–1359 px dwie linie na tej samej siatce: linia 1 = kropka, cel (przez tory komórek), stan, akcje, szewron; linia 2 = (wykres od 1200 px,) odpowiedź, uptime,
 * SSL pod celem. Jeden rząd zostawiłby celowi ok. 82 px przy 1200 i < 0 przy 768 px (pomiar: docs/f2-0d-kolumny-plan.md w Nexusie).
 * Nagłówek ma te same tory, więc etykiety stoją nad komórkami linii 2. */
.mon-list { --pm-cols: 18px minmax(0, 1fr) 176px 96px 84px 84px 124px 88px 16px; }
@media (min-width: 768px) and (max-width: 1359px) {
  .mon-row, .mon-rowhead { row-gap: var(--pm-space-2); }
  .mon-row > .pm-dot { grid-column: 1; grid-row: 1; }
  .mon-row > .pm-row__main, .mon-row > .mon-state, .mon-row > .mon-acts, .mon-row > .pm-chev { grid-row: 1; }
  .mon-row > .mon-spark, .mon-row > .mon-c-lat, .mon-row > .mon-c-up, .mon-row > .mon-c-ssl { grid-row: 2; }
  .mon-rowhead > :not(.c) { display: none; }
  .mon-rowhead > .c { grid-row: 1; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .mon-list { --pm-cols-mid: 18px 84px 84px 124px minmax(0, 1fr) 176px 88px 16px; }
  .mon-row > .pm-row__main { grid-column: 2 / 6; }
  .mon-row > .mon-state { grid-column: 6; }
  .mon-row > .mon-acts { grid-column: 7; }
  .mon-row > .pm-chev { grid-column: 8; }
  .mon-row > .mon-c-lat, .mon-rowhead > .mon-h-lat { grid-column: 2; }
  .mon-row > .mon-c-up, .mon-rowhead > .mon-h-up { grid-column: 3; }
  .mon-row > .mon-c-ssl, .mon-rowhead > .mon-h-ssl { grid-column: 4; }
}
@media (min-width: 1200px) and (max-width: 1359px) {
  .mon-list .mon-row, .mon-list .mon-rowhead { grid-template-columns: 18px 96px 84px 84px 124px minmax(0, 1fr) 176px 88px 16px; }
  .mon-row > .pm-row__main { grid-column: 2 / 7; }
  .mon-row > .mon-state { grid-column: 7; }
  .mon-row > .mon-acts { grid-column: 8; }
  .mon-row > .pm-chev { grid-column: 9; }
  .mon-row > .mon-spark, .mon-rowhead > .mon-spark { grid-column: 2; }
  .mon-row > .mon-c-lat, .mon-rowhead > .mon-h-lat { grid-column: 3; }
  .mon-row > .mon-c-up, .mon-rowhead > .mon-h-up { grid-column: 4; }
  .mon-row > .mon-c-ssl, .mon-rowhead > .mon-h-ssl { grid-column: 5; }
}

/* ── Kafelki (widok „Kafelki”) ── */
.mon-grid { display: grid; gap: var(--pm-space-8); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mon-card { min-width: 0; overflow: hidden; position: relative; padding: var(--pm-space-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pm-space-5); align-content: start; transition: box-shadow 120ms var(--pm-ease); }
.mon-card.down { background: var(--danger-soft); }
.mon-card.is-off { opacity: .75; }
.mon-card .mon-open::after { content: ''; position: absolute; inset: 0; border-radius: var(--pm-radius); }
.mon-card .mon-open:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mon-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pm-space-6); }
.mon-card-head > div:first-child { min-width: 0; }
.mon-url { font-size: var(--pm-fs-3); line-height: var(--pm-lh-4); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-pills { display: flex; gap: var(--pm-space-2); flex-wrap: wrap; justify-content: flex-end; flex: none; }
.mon-uptimes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pm-space-4); padding-top: var(--pm-space-5); box-shadow: inset 0 0.5px 0 var(--pm-hair); }
.mon-uptimes .l { font-size: var(--pm-fs-2); color: var(--text-muted); }
.mon-uptimes .v { font-size: var(--pm-fs-6); font-weight: 700; font-variant-numeric: tabular-nums; }
.mon-card .pm-spark { width: 100%; height: 28px; }
.mon-info { display: grid; gap: var(--pm-space-2); font-size: var(--pm-fs-3); }
.mon-info > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--pm-space-6); }
.mon-info .k { color: var(--text-muted); }
.mon-info .v { min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.mon-info .v b { font-weight: 700; }
.mon-chips { display: flex; gap: var(--pm-space-2); flex-wrap: wrap; }
.mon-history { overflow: hidden; position: relative; z-index: 1; display: flex; gap: 2px; height: 20px; align-items: flex-end; }
.mon-bar { flex: 1; min-width: 3px; max-width: 8px; border-radius: 2px; background: var(--text-subtle); height: 60%; }
.mon-bar.ok { background: var(--success-dot); opacity: .75; } .mon-bar.fail { background: var(--danger-dot); height: 100%; }
.mon-bar.obs { background: var(--text-subtle); height: 40%; opacity: .9; }
.mon-card .mon-acts { justify-content: flex-end; padding-top: var(--pm-space-3); box-shadow: inset 0 0.5px 0 var(--pm-hair); }

/* ── Podstrony i porty ── */
.eps { display: grid; gap: var(--pm-space-2); font-size: var(--pm-fs-3); }
.ep { display: flex; align-items: center; gap: var(--pm-space-4); min-width: 0; }
.ep .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--text-subtle); }
.ep .dot.up { background: var(--success-dot); } .ep .dot.down { background: var(--danger-dot); }
.ep .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ep .m { color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }
.ep .m.bad { color: var(--danger); font-weight: 500; }
.kind { flex: none; font-size: var(--pm-fs-1); font-weight: 700; letter-spacing: .025em; color: var(--text-muted); background: var(--pm-seg); border-radius: var(--pm-radius-2); padding: 0 var(--pm-space-2); }

/* ── Okna (dialogi) ── */
.modal-bg { display: none; }
.modal-bg.open { display: flex; }
.pm-dialog__body { gap: var(--pm-space-4); }
.pm-dialog__x { flex: none; }
.u { color: var(--text-muted); font-size: var(--pm-fs-4); word-break: break-all; }
.sec { margin-top: var(--pm-space-6); padding-top: var(--pm-space-6); box-shadow: inset 0 0.5px 0 var(--pm-hair); font-size: var(--pm-fs-4); font-weight: 600; color: var(--text-muted); }
.sec .muted { font-weight: 400; }
.dlist { display: grid; }
.dlist .r { display: flex; justify-content: space-between; gap: var(--pm-space-6); padding: var(--pm-space-4) 0; font-size: var(--pm-fs-4); }
.dlist .r + .r { box-shadow: inset 0 0.5px 0 var(--pm-hair); }
.dlist .r > span:first-child { color: var(--text-muted); flex: none; }
.dlist .r > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dlist b.warn { color: var(--warning); } .dlist b.bad { color: var(--danger); }
.dlist .r[style*="display:block"] { display: block; }
.resp-body { margin: var(--pm-space-3) 0 var(--pm-space-1); padding: var(--pm-space-4) var(--pm-space-5); background: var(--pm-seg); border-radius: var(--pm-radius-5); font: var(--pm-fs-3)/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.inc { padding: var(--pm-space-4) 0; font-size: var(--pm-fs-4); display: flex; justify-content: space-between; gap: var(--pm-space-5); }
.inc + .inc { box-shadow: inset 0 0.5px 0 var(--pm-hair); }
.inc .sub { display: block; color: var(--text-muted); font-size: var(--pm-fs-3); }
.inc .d { color: var(--danger); font-weight: 600; flex: none; } .inc .t { font-variant-numeric: tabular-nums; }
.win { display: flex; align-items: center; justify-content: space-between; gap: var(--pm-space-5); padding: var(--pm-space-3) 0; font-size: var(--pm-fs-4); }
.win + .win { box-shadow: inset 0 0.5px 0 var(--pm-hair); }
.win .t { font-variant-numeric: tabular-nums; } .win .note { color: var(--text-muted); } .win .now { color: var(--warning); font-weight: 700; }
.mon-noteline { display: flex; gap: var(--pm-space-4); align-items: center; }
.mon-noteline .pm-control { flex: 1; }
.pm-kpis--3.pm-kpis--dlg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pm-space-4); }
.pm-dialog__foot { flex-wrap: wrap; }
.pm-kpis--dlg .pm-kpi { padding: var(--pm-space-6) var(--pm-space-7); }
.pm-kpis--dlg .pm-kpi__value { font-size: var(--pm-fs-9); line-height: var(--pm-lh-10); }
.pm-kpis--dlg .pm-kpi__label { font-size: var(--pm-fs-3); }

/* ── Formularze ── */
.pm-field label, .pm-field .pm-field__label { font-size: var(--pm-fs-3); line-height: var(--pm-lh-3); font-weight: 500; color: var(--text-muted); }
.pm-form .chk { grid-column: 1 / -1; }
.chk { display: flex; align-items: center; gap: var(--pm-space-4); font-size: var(--pm-fs-4); }
.chk input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; margin: 0; }
.chk label { font-size: var(--pm-fs-4); color: var(--text); font-weight: 400; }
.pm-control.invalid { box-shadow: inset 0 0 0 1px var(--danger); }
.field-err { font-size: var(--pm-fs-3); line-height: var(--pm-lh-4); color: var(--danger); font-weight: 600; }
.ed { border-radius: var(--pm-radius-5); padding: var(--pm-space-5); margin-top: var(--pm-space-4); background: var(--pm-seg); display: grid; gap: var(--pm-space-4); }
.ed .top { display: flex; gap: var(--pm-space-4); align-items: center; }
.ed .top .pm-control { flex: 1; }
.ed .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pm-space-4); }
.ed .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pm-space-4); }
.ed label { display: block; font-size: var(--pm-fs-3); color: var(--text-muted); margin: 0 0 var(--pm-space-2); }
.ed .pm-control { background: var(--pm-card); }
.addrow { display: flex; gap: var(--pm-space-4); flex-wrap: wrap; }
.iconbtn { width: 28px; height: 28px; display: grid; place-items: center; border: 0; padding: 0; border-radius: var(--pm-radius-5); background: transparent; color: var(--text-muted); cursor: pointer; flex: none; }
.iconbtn:hover { background: var(--pm-seg); color: var(--text); }
.iconbtn.danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ── Wykres latencji ── */
.caxis { display: flex; justify-content: space-between; font-size: var(--pm-fs-2); color: var(--text-muted); margin: 0 0 var(--pm-space-2); }
.chart { position: relative; height: 140px; margin: var(--pm-space-3) 0; background: var(--pm-seg); border-radius: var(--pm-radius-5); overflow: hidden; cursor: crosshair; }
.cmax { position: absolute; top: 6px; right: 9px; font-size: var(--pm-fs-2); color: var(--text-muted); pointer-events: none; }
.cguide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--brand-fill); opacity: .5; display: none; pointer-events: none; }
.cdot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-fill); box-shadow: 0 0 0 3px var(--accent-soft); display: none; pointer-events: none; }
.ctip { position: absolute; background: var(--text); color: var(--pm-card); font-size: var(--pm-fs-2); padding: var(--pm-space-2) var(--pm-space-4); border-radius: var(--pm-radius-5); white-space: nowrap; display: none; pointer-events: none; box-shadow: var(--shadow-pop); }
.pm-spark, .spark { overflow: visible; }

/* ── Toasty (stos u dołu) ── */
#toasts { position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: var(--pm-space-4); justify-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
#toasts .pm-toast { position: static; transform: none; pointer-events: auto; }
#toasts .pm-toast.warn { box-shadow: inset 0 0 0 1px var(--warning), var(--shadow-pop); }

/* ── Arkusz mobilny (⋯, tagi) i nakładka ── */
.pm-overlay[hidden], .pm-sheet[hidden] { display: none !important; }
.mon-sheet-title { padding: var(--pm-space-2) var(--pm-space-6) var(--pm-space-4); font-size: var(--pm-fs-4); font-weight: 600; color: var(--text-muted); }
.pm-sheet__item .cnt { margin-left: auto; font-size: var(--pm-fs-4); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── Nawigacja boczna: pozycje filtrów ── */
.pm-nav button { display: flex; align-items: center; gap: var(--pm-space-5); width: 100%; height: 30px; padding: 0 var(--pm-space-5); border: 0; border-radius: var(--pm-radius-5); background: transparent; color: var(--text); font: 400 var(--pm-fs-4)/var(--pm-lh-5) var(--pm-font); text-align: left; cursor: pointer; transition: background-color 120ms var(--pm-ease); }
.pm-nav button:hover { background: var(--pm-hov); }
.pm-nav button[aria-current="true"] { background: var(--pm-sel); font-weight: 600; }
.pm-nav button svg { color: var(--accent); opacity: .9; flex: none; }
.pm-nav button .count { margin-left: auto; font-size: var(--pm-fs-3); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pm-nav button .badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pm-radius-6); background: var(--brand-fill); color: var(--on-brand); font-size: var(--pm-fs-2); font-weight: 700; }
.pm-nav button .pm-dot { width: 8px; height: 8px; margin: 0 var(--pm-space-2); }
.pm-nav button .pm-dot--down { box-shadow: none; }
.pm-nav button .pm-dot--tag { display: none; }
.pm-user button.out { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--pm-radius-5); background: transparent; color: var(--text-muted); cursor: pointer; flex: none; }
.pm-user button.out:hover { background: var(--pm-hov); color: var(--text); }
@media (max-width: 1199px) {
  .pm-nav button { position: relative; width: 48px; height: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .pm-nav button .count { display: none; }
  .pm-nav button svg { width: 20px; height: 20px; }
  .pm-nav button .badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; font-size: var(--pm-fs-1); padding: 0 var(--pm-space-2); }
  .mon-spark { display: none; }
  .mon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mon-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mon-search { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .mon-state, .mon-acts { display: none; }
  .pm-kpis--dlg .pm-kpi { padding: var(--pm-space-5) var(--pm-space-6); }
  .pm-kpis--dlg .pm-kpi__value { font-size: var(--pm-fs-8); line-height: var(--pm-lh-9); }
  .pm-kpis--dlg .pm-kpi__label { font-size: var(--pm-fs-2); }
  .mon-grid { grid-template-columns: minmax(0, 1fr); }
  .mon-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mon-filters .mon-f-tag, .mon-filters .mon-f-state { display: none; }
  .mon-search, .mon-filters #sortBy { grid-column: 1 / -1; }
  .pm-kpis--3 .pm-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ed .grid3 { grid-template-columns: minmax(0, 1fr); }
  .mon-seg { margin-left: 0; width: 100%; }
  .mon-seg button { flex: 1; }
  #toasts { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .pm-bar__more { display: grid; }
  .pm-bar .mon-bar-desktop { display: none; }
}
@media (min-width: 768px) {
  .pm-bar__more { display: none; }
}

/* ── Logowanie ── */
.mon-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; padding: var(--pm-space-10); background: var(--pm-ground); color: var(--text); font-family: var(--pm-font); }
.mon-auth__box { width: min(380px, 100%); box-sizing: border-box; padding: var(--pm-space-14); display: grid; gap: var(--pm-space-8); }
.mon-auth__brand { display: flex; align-items: center; color: var(--primary); height: 32px; }
.mon-auth__brand > span { display: block; height: 32px; }
.mon-auth__brand svg { display: block; height: 100%; width: auto; }
.mon-auth h1 { margin: 0; font-size: var(--pm-fs-10); line-height: var(--pm-lh-12); font-weight: 700; letter-spacing: -0.02em; }
.mon-auth p { margin: var(--pm-space-2) 0 0; font-size: var(--pm-fs-5); color: var(--text-muted); }
.mon-auth form { display: grid; gap: var(--pm-space-7); }
.mon-auth .pm-btn { height: 40px; width: 100%; }
.mon-auth .err { min-height: 18px; font-size: var(--pm-fs-4); color: var(--danger); font-weight: 600; }
.mon-auth .chk { margin: 0; }
@media (max-width: 479px) { .mon-auth { align-content: start; align-items: start; padding-top: var(--pm-space-16); } .mon-auth__box { padding: var(--pm-space-10); } }