/* ==========================================================================
   PM eszközök: közös felületi réteg (fejléc, gombok, ikonok, futásjelző,
   statisztika, futáslista, összecsukható blokkok). Az eszközök saját
   style.css-e ELŐTTE töltődik, ez a fájl a közös komponenseket adja.
   Paletta: Vikingo design system.
   ========================================================================== */

:root {
  --pm-coral: #FF544D;
  --pm-coral-hover: #E83D36;
  --pm-coral-soft: rgba(255, 84, 77, .12);
  --pm-ink: #3E2E45;
  --pm-ink-soft: #5C4C63;
  --pm-paper: #F3EEEB;
  --pm-surface: #FFFFFF;
  --pm-sand: #DCD0C3;
  --pm-sand-soft: #EAE2DA;
  --pm-mauve: #7A687F;
  --pm-good: #15803D;
  --pm-good-soft: #E7F6EC;
  --pm-warn: #B45309;
  --pm-warn-soft: #FEF3E2;
  --pm-bad: #DC2626;
  --pm-bad-soft: #FDECEC;
  --pm-info: #4F5BC4;
  --pm-info-soft: #ECEEFB;
  --pm-r-sm: 8px;
  --pm-r: 12px;
  --pm-r-lg: 16px;
  --pm-r-pill: 999px;
  --pm-shadow-sm: 0 1px 2px rgba(42, 32, 54, .06);
  --pm-shadow: 0 6px 24px rgba(42, 32, 54, .08);
  --pm-display: "Clash Display", system-ui, sans-serif;
  --pm-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pm-width: 1120px;
}

body { background: var(--pm-paper); }
/* A hidden attribútum mindig rejtsen, akkor is, ha egy komponens display-t állít. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Ikon --- */
.pm-i {
  width: 18px; height: 18px; flex: none; display: inline-block;
  vertical-align: -.2em; stroke: currentColor;
}
.pm-spin { animation: pm-spin 0.9s linear infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pm-spin { animation-duration: 2.4s; }
}

.pm-wrap { width: 100%; max-width: var(--pm-width); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .pm-wrap { padding: 0 16px; } }

.pm-skip {
  position: absolute; left: 12px; top: -40px; z-index: 100;
  padding: 8px 14px; border-radius: var(--pm-r-sm);
  background: var(--pm-ink); color: #fff; font-family: var(--pm-mono); font-size: 13px;
}
.pm-skip:focus { top: 12px; }

/* -------------------------------------------------------------- Fejléc --- */
.pm-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(243, 238, 235, .92);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--pm-sand);
}
.pm-header-row { height: 64px; display: flex; align-items: center; gap: 16px; }
.pm-brand {
  display: inline-flex; align-items: center; gap: 10px; color: var(--pm-ink);
  font-family: var(--pm-mono); font-size: 13px; white-space: nowrap;
}
.pm-brand, .pm-brand:hover, .pm-run-link, .pm-menu-item, .pm-btn { text-decoration: none; }
.pm-brand:hover { color: var(--pm-ink); }
.pm-brand img { display: block; }
.pm-brand strong { font-family: var(--pm-display); font-weight: 500; font-size: 16px; margin-right: 2px; }

.pm-switch { position: relative; margin-left: 8px; }
.pm-switch-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px 0 14px; margin: 0;
  background: var(--pm-surface); color: var(--pm-ink);
  border: 1px solid var(--pm-sand); border-radius: var(--pm-r-pill);
  font-family: var(--pm-mono); font-size: 14px; font-weight: 500; line-height: 1;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.pm-switch-btn:hover { background: var(--pm-surface); border-color: var(--pm-coral); color: var(--pm-coral); }
.pm-switch-btn .pm-i:first-child { color: var(--pm-coral); }
.pm-caret { width: 16px; height: 16px; transition: transform .18s; }
.pm-switch-btn[aria-expanded="true"] .pm-caret { transform: rotate(180deg); }
.pm-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: 260px; margin: 0; padding: 6px; list-style: none;
  background: var(--pm-surface); border: 1px solid var(--pm-sand);
  border-radius: var(--pm-r-lg); box-shadow: var(--pm-shadow);
}
.pm-menu[hidden] { display: none; }
.pm-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--pm-r-sm); color: var(--pm-ink);
  font-family: var(--pm-mono); font-size: 14px;
}
.pm-menu-item:hover { background: var(--pm-paper); color: var(--pm-coral); text-decoration: none; }
.pm-menu-item.is-active { color: var(--pm-coral); font-weight: 500; }
.pm-menu-item .pm-i { color: var(--pm-mauve); }
.pm-menu-item.is-active .pm-i, .pm-menu-item:hover .pm-i { color: var(--pm-coral); }

.pm-user { margin: 0 0 0 auto; display: flex; align-items: center; gap: 10px; }
.pm-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pm-ink); color: #fff; font-family: var(--pm-mono); font-size: 12px; font-weight: 500;
}
.pm-user-name { font-family: var(--pm-mono); font-size: 13px; color: var(--pm-ink); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .pm-brand-text, .pm-user-name { display: none; } }
@media (max-width: 560px) {
  .pm-hide-sm { display: none; }
  .pm-switch { margin-left: 0; }
  .pm-menu { left: -40px; }
}

/* ---------------------------------------------------------------- Gomb --- */
.pm-btn, a.pm-btn, button.pm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; margin: 0;
  border: 1px solid transparent; border-radius: var(--pm-r-pill);
  background: var(--pm-coral); color: #fff;
  font-family: var(--pm-mono); font-size: 14px; font-weight: 500; line-height: 1;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.pm-btn:hover, button.pm-btn:hover { background: var(--pm-coral-hover); color: #fff; text-decoration: none; }
.pm-btn:active { transform: translateY(1px); }
.pm-btn:focus-visible { outline: 2px solid var(--pm-ink); outline-offset: 3px; }
.pm-btn:disabled, .pm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.pm-btn.pm-btn--lg { height: 52px; padding: 0 28px; font-size: 15px; }
.pm-btn.pm-btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.pm-btn.pm-btn--sm .pm-i { width: 16px; height: 16px; }
.pm-btn.pm-btn--secondary { background: var(--pm-surface); color: var(--pm-ink); border-color: var(--pm-sand); }
.pm-btn.pm-btn--secondary:hover { background: var(--pm-surface); color: var(--pm-coral); border-color: var(--pm-coral); }
.pm-btn.pm-btn--ghost { background: transparent; color: var(--pm-mauve); }
.pm-btn.pm-btn--ghost:hover { background: var(--pm-sand-soft); color: var(--pm-ink); }
.pm-btn.pm-btn--icon { width: 36px; height: 36px; padding: 0; }

.pm-btn.is-loading { pointer-events: none; opacity: .85; }
.pm-btn.is-loading > .pm-i:first-child { display: none; }
.pm-btn.is-loading::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: pm-spin .8s linear infinite;
}
.pm-btn.pm-btn.is-ok { background: var(--pm-good-soft); color: var(--pm-good); border-color: transparent; }

/* ------------------------------------------------------------- Oldalváz --- */
.pm-main { padding: 28px 0 64px; }
.pm-card {
  background: var(--pm-surface); border: 1px solid var(--pm-sand);
  border-radius: var(--pm-r-lg); box-shadow: var(--pm-shadow-sm);
  padding: 24px; margin-bottom: 20px;
}
.pm-card > h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px; font-family: var(--pm-display); font-weight: 500; font-size: 20px; color: var(--pm-ink);
}
.pm-card > h2 .pm-i { color: var(--pm-coral); }
@media (max-width: 560px) { .pm-card { padding: 18px; } }

.pm-intro { display: flex; align-items: center; gap: 16px; margin: 4px 0 24px; }
.pm-intro-icon {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: var(--pm-r); background: var(--pm-coral-soft); color: var(--pm-coral);
}
.pm-intro-icon .pm-i { width: 26px; height: 26px; }
.pm-intro h1 { margin: 0; font-family: var(--pm-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; color: var(--pm-ink); }
.pm-intro p { margin: 4px 0 0; color: var(--pm-mauve); font-size: 16px; }

/* Kezdőképernyő: balra az űrlap, jobbra a legutóbbi futások. */
.pm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 960px) { .pm-layout { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------ Űrlap kiegészítés -- */
.pm-form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.pm-form-hint { font-family: var(--pm-mono); font-size: 12px; color: var(--pm-mauve); }
.pm-details {
  border: 1px solid var(--pm-sand); border-radius: var(--pm-r); margin: 4px 0 18px; background: #FCFAF8;
}
.pm-details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; font-family: var(--pm-mono); font-size: 13px; font-weight: 500; color: var(--pm-ink);
}
.pm-details > summary::-webkit-details-marker { display: none; }
.pm-details > summary .pm-i { color: var(--pm-mauve); }
.pm-details > summary .pm-chev { margin-left: auto; transition: transform .18s; }
.pm-details[open] > summary .pm-chev { transform: rotate(90deg); }
.pm-details > summary:hover { color: var(--pm-coral); }
.pm-details-body { padding: 4px 14px 14px; }
.pm-details-sub { font-weight: 400; color: var(--pm-mauve); }

.pm-alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 16px;
  border-radius: var(--pm-r); background: var(--pm-bad-soft); color: #9F1C1C; font-size: 14px;
}
.pm-alert .pm-i { margin-top: 1px; }

/* -------------------------------------------------- Legutóbbi futások --- */
.pm-runs { list-style: none; margin: 0; padding: 0; }
.pm-run-item { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--pm-sand-soft); }
.pm-run-item:first-child { border-top: 0; }
.pm-run-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; margin: 2px -8px; border-radius: var(--pm-r-sm); color: var(--pm-ink);
}
.pm-run-link:hover { background: var(--pm-paper); color: var(--pm-ink); text-decoration: none; }
.pm-run-app {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: var(--pm-r-sm); background: var(--pm-coral-soft); color: var(--pm-coral);
}
.pm-run-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-run-name { font-family: var(--pm-mono); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-run-meta-line { font-size: 12.5px; color: var(--pm-mauve); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-run-del { margin: 0; }
.pm-run-del .pm-btn { color: var(--pm-mauve); }
.pm-run-del .pm-btn:hover { color: var(--pm-bad); background: var(--pm-bad-soft); }
.pm-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--pm-mauve); }

.pm-status {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 10px 3px 8px; border-radius: var(--pm-r-pill);
  font-family: var(--pm-mono); font-size: 12px; font-weight: 500;
}
.pm-status .pm-i { width: 14px; height: 14px; }
.pm-status--done { background: var(--pm-good-soft); color: var(--pm-good); }
.pm-status--error { background: var(--pm-bad-soft); color: var(--pm-bad); }
.pm-status--running { background: var(--pm-coral-soft); color: var(--pm-coral-hover); }
.pm-status--stalled { background: var(--pm-warn-soft); color: var(--pm-warn); cursor: help; }
.pm-status--stopped { background: var(--pm-sand-soft); color: var(--pm-ink-soft); }

.pm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 8px; text-align: center; color: var(--pm-mauve); }
.pm-empty .pm-i { width: 28px; height: 28px; color: var(--pm-sand); }
.pm-empty p { margin: 0; font-size: 14px; max-width: 300px; }

/* -------------------------------------------------------- Futásjelző --- */
.pm-run { padding: 22px 24px 24px; }
.pm-run-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pm-run-state {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--pm-coral-soft); color: var(--pm-coral);
}
.pm-run-state .pm-i { width: 26px; height: 26px; display: none; }
.pm-run[data-state="running"] .pm-run-ico-running,
.pm-run[data-state="done"] .pm-run-ico-done,
.pm-run[data-state="error"] .pm-run-ico-error,
.pm-run[data-state="stopped"] .pm-run-ico-stopped { display: block; }
.pm-run[data-state="done"] .pm-run-state { background: var(--pm-good-soft); color: var(--pm-good); }
.pm-run[data-state="error"] .pm-run-state { background: var(--pm-bad-soft); color: var(--pm-bad); }
.pm-run[data-state="stopped"] .pm-run-state { background: var(--pm-sand-soft); color: var(--pm-ink-soft); }
.pm-run-title { flex: 1; min-width: 200px; }
.pm-run-title h1 { margin: 0; font-family: var(--pm-display); font-weight: 500; font-size: 26px; line-height: 1.15; color: var(--pm-ink); }
.pm-run-sub { margin: 4px 0 0; font-family: var(--pm-mono); font-size: 13px; color: var(--pm-mauve); word-break: break-all; }
.pm-run-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-run-actions form { margin: 0; }
@media (max-width: 640px) {
  .pm-run-actions { width: 100%; }
  .pm-run-title h1 { font-size: 22px; }
}

.pm-progress {
  position: relative; height: 10px; margin: 20px 0 10px; overflow: hidden;
  background: var(--pm-sand-soft); border-radius: var(--pm-r-pill);
}
.pm-progress-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #FF7A73, var(--pm-coral));
  transition: width .4s ease;
}
/* Amíg nincs mérhető haladás (pl. URL-gyűjtés), egy csúszó sáv jelzi, hogy dolgozik. */
.pm-progress.is-indeterminate .pm-progress-fill {
  width: 35% !important; transition: none;
  animation: pm-indeterminate 1.4s ease-in-out infinite;
}
@keyframes pm-indeterminate { 0% { left: -35%; } 100% { left: 100%; } }
.pm-run[data-state="running"] .pm-progress:not(.is-indeterminate) .pm-progress-fill {
  background-image: linear-gradient(90deg, #FF7A73, var(--pm-coral)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px);
  background-blend-mode: overlay;
}
.pm-run[data-state="done"] .pm-progress-fill { background: var(--pm-good); transition: none; width: 100% !important; }
.pm-run[data-state="error"] .pm-progress-fill { background: var(--pm-bad); transition: none; }
.pm-run[data-state="stopped"] .pm-progress-fill { background: var(--pm-mauve); transition: none; }

.pm-run-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--pm-mono); font-size: 13px; }
.pm-run-phase { color: var(--pm-ink); font-weight: 500; }
.pm-run-time { color: var(--pm-mauve); }
.pm-run-error { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--pm-r-sm); background: var(--pm-bad-soft); color: #9F1C1C; font-size: 14px; }

/* -------------------------------------------------------- Statisztika --- */
.pm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
.pm-stat {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px;
  align-items: center; padding: 14px 16px;
  background: #FCFAF8; border: 1px solid var(--pm-sand-soft); border-radius: var(--pm-r);
}
.pm-stat-icon {
  grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--pm-r-sm); background: var(--pm-sand-soft); color: var(--pm-ink-soft);
}
.pm-stat-num { font-family: var(--pm-display); font-weight: 500; font-size: 24px; line-height: 1.1; color: var(--pm-ink); font-variant-numeric: tabular-nums; }
.pm-stat-label { font-family: var(--pm-mono); font-size: 12px; color: var(--pm-mauve); }
.pm-stat--bad .pm-stat-icon { background: var(--pm-bad-soft); color: var(--pm-bad); }
.pm-stat--bad .pm-stat-num { color: var(--pm-bad); }
.pm-stat--good .pm-stat-icon { background: var(--pm-good-soft); color: var(--pm-good); }
.pm-stat--good .pm-stat-num { color: var(--pm-good); }
.pm-stat--warn .pm-stat-icon { background: var(--pm-warn-soft); color: var(--pm-warn); }

/* -------------------------------------------------- Eredmény-eszköztár --- */
.pm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.pm-toolbar h2 { margin: 0 auto 0 0; display: flex; align-items: center; gap: 10px; font-family: var(--pm-display); font-weight: 500; font-size: 20px; }
.pm-toolbar h2 .pm-i { color: var(--pm-coral); }
.pm-search { position: relative; }
.pm-search .pm-i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pm-mauve); pointer-events: none; }
.pm-search input[type=search] { margin: 0; width: 240px; height: 40px; padding: 0 12px 0 36px; font-size: 13px; }
.pm-toolbar select { margin: 0; width: auto; height: 40px; padding: 0 12px; font-size: 13px; }
.pm-toolbar .pm-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--pm-mono); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--pm-ink); }

@media (max-width: 640px) {
  .pm-search, .pm-search input[type=search], .pm-toolbar select { width: 100%; }
}

/* Súlyosság: színes pötty + szöveg (emoji helyett, mert az rendszerenként másképp néz ki). */
.pm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pm-dot--blocker { background: var(--pm-bad); }
.pm-dot--warning { background: #F59E0B; }
.pm-dot--notice { background: #6E79D0; }
.pm-sev {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--pm-r-pill); font-family: var(--pm-mono); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.pm-sev--blocker { background: var(--pm-bad-soft); color: #B91C1C; }
.pm-sev--warning { background: var(--pm-warn-soft); color: var(--pm-warn); }
.pm-sev--notice { background: var(--pm-info-soft); color: var(--pm-info); }

/* Kattintható súlyosság-csempék (szűrő). */
.pm-sev-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 16px; }
@media (max-width: 560px) { .pm-sev-tiles { grid-template-columns: 1fr; } }
.pm-sev-tile, button.pm-sev-tile {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; height: auto; padding: 14px 16px; margin: 0;
  text-align: left; cursor: pointer; border-radius: var(--pm-r);
  background: #FCFAF8; color: var(--pm-ink); border: 1px solid var(--pm-sand-soft);
  font-family: var(--pm-mono); font-size: 13px; font-weight: 400; line-height: 1.2;
  transition: border-color .15s, box-shadow .15s;
}
.pm-sev-tile:hover { background: #FCFAF8; border-color: var(--pm-sand); }
.pm-sev-tile[aria-pressed="true"] { border-color: currentColor; box-shadow: 0 0 0 3px var(--pm-coral-soft); }
.pm-sev-tile .pm-sev-num { font-family: var(--pm-display); font-weight: 500; font-size: 24px; }
.pm-sev-tile--blocker .pm-sev-num { color: var(--pm-bad); }
.pm-sev-tile--warning .pm-sev-num { color: var(--pm-warn); }
.pm-sev-tile--notice .pm-sev-num { color: var(--pm-info); }
.pm-sev-tile-text { display: flex; flex-direction: column; gap: 2px; }
.pm-sev-tile-hint { color: var(--pm-mauve); font-size: 11.5px; }

/* Lenyitó gomb a táblázatban („23 oldal”). */
.pm-expand-btn, button.pm-expand-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin: 0;
  background: var(--pm-surface); color: var(--pm-ink); border: 1px solid var(--pm-sand);
  border-radius: var(--pm-r-pill); font-family: var(--pm-mono); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.pm-expand-btn:hover { background: var(--pm-surface); color: var(--pm-coral); border-color: var(--pm-coral); }
.pm-expand-btn .pm-i { width: 14px; height: 14px; transition: transform .18s; }
.pm-expand-btn[aria-expanded="true"] { color: var(--pm-coral); border-color: var(--pm-coral); }
.pm-expand-btn[aria-expanded="true"] .pm-i { transform: rotate(90deg); }

/* Táblázat-töltés (sorok helyén). */
.pm-loading-row { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; color: var(--pm-mauve); font-family: var(--pm-mono); font-size: 13px; }

/* Összecsukható magyarázat a kezdőképernyő alján. */
.pm-explain { margin-top: 8px; }
.pm-explain > summary { padding: 16px 18px; font-size: 14px; }
.pm-explain[open] { background: var(--pm-surface); }

/* --------------------------------------------------------------- Lábléc --- */
.pm-footer { border-top: 1px solid var(--pm-sand); margin-top: 24px; }
.pm-footer-row { display: flex; align-items: center; gap: 10px; padding-top: 18px; padding-bottom: 18px; font-family: var(--pm-mono); font-size: 12.5px; color: var(--pm-mauve); flex-wrap: wrap; }
.pm-footer-sep { flex: 1; }

/* ----------------------------------------------------------- Értesítő --- */
.pm-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, 20px);
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: var(--pm-ink); color: #fff; border-radius: var(--pm-r-pill); box-shadow: var(--pm-shadow);
  font-family: var(--pm-mono); font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.pm-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Kis ikonok a táblázat-chipekben („Ugrás”, „CSS”) és a jelölőnégyzetek mellett. */
.jump-link .pm-i, .css-btn .pm-i { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
label.checkbox > span .pm-i { width: 16px; height: 16px; color: var(--pm-coral); vertical-align: -3px; }
.pager .pgbtns { display: inline-flex; gap: 6px; }

@media (max-width: 640px) {
  /* Mobilon két oszlopban, kisebb csempékkel, hogy a jelentés ne csússzon messze lefelé. */
  .pm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pm-stat { grid-template-columns: 1fr; padding: 10px 12px; }
  .pm-stat-icon { display: none; }
  .pm-stat-num { font-size: 20px; }
  .pm-run-actions > *, .pm-run-actions form .pm-btn { flex: 1; }
  .pm-run-actions form { display: flex; }
  .pm-run-state { width: 40px; height: 40px; }
}

/* ------------------------------------------------- Tipográfia és űrlap --- */
/* A Clash Display legfeljebb 500-as vastagságú; a böngésző ne rajzoljon hamis félkövért. */
body { font-synthesis-weight: none; }
h1, h2, h3, h4, h5, h6, strong, b, th, legend { font-weight: 500; }

/* Jelölőnégyzet: saját rajz a natív helyett, korall pipával. */
input[type=checkbox], label.checkbox input[type=checkbox], .pm-check input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 18px; height: 18px; margin: 1px 0 0; padding: 0;
  border: 1.5px solid #C9BFB6; border-radius: 5px;
  background: var(--pm-surface) center / 12px 12px no-repeat;
  cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
input[type=checkbox]:hover { border-color: var(--pm-coral); }
input[type=checkbox]:checked, label.checkbox input[type=checkbox]:checked {
  background-color: var(--pm-coral); border-color: var(--pm-coral);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
input[type=checkbox]:focus-visible { outline: none; border-color: var(--pm-coral); box-shadow: 0 0 0 3px var(--pm-coral-soft); }
input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }

/* Címke: a négyzet az első sorhoz igazodik, a megjegyzés mindig a cím alá kerül. */
label.checkbox {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  font-family: var(--pm-mono); font-size: 14px; font-weight: 500; line-height: 1.45;
  text-transform: none; letter-spacing: 0; color: var(--pm-ink); cursor: pointer;
}
label.checkbox > span { display: block; min-width: 0; }
label.checkbox:has(input:disabled) { cursor: not-allowed; color: var(--pm-mauve); }
.chk-note { display: block; margin: 2px 0 0; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--pm-mauve); }
.opts { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 18px; }

/* „Mit ellenőrizzen?”: kattintható csempék, a bekapcsoltak kiemelve. */
.checks-group { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.checks-group legend {
  padding: 0; margin: 0 0 10px; font-family: var(--pm-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pm-mauve);
}
.checks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .checks-grid { grid-template-columns: 1fr; } }
.checks-grid label.checkbox {
  padding: 12px 14px; border: 1px solid var(--pm-sand); border-radius: var(--pm-r);
  background: #FCFAF8; transition: border-color .15s, background-color .15s;
}
.checks-grid label.checkbox:hover { border-color: #C9BFB6; }
.checks-grid label.checkbox:has(input:checked) { background: var(--pm-surface); border-color: rgba(255, 84, 77, .45); }

/* Lenyíló: egységes nyíl, a szöveg ne fusson rá. */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 42px !important;
  background: var(--pm-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A687F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
}
select:hover { border-color: #C9BFB6; }
.pm-toolbar select { padding-right: 36px !important; background-position: right 10px center; }

/* A weboldal-cím sima szövegmező (a böngésző URL-ellenőrzése helyett mi javítjuk ki). */
input[type=text] {
  width: 100%; margin-top: 8px; padding: 13px 15px;
  background: var(--pm-surface); border: 1px solid var(--pm-sand); border-radius: var(--pm-r);
  font-family: var(--pm-mono); font-size: 15px; color: var(--pm-ink);
  transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus { outline: none; border-color: var(--pm-coral); box-shadow: 0 0 0 3px var(--pm-coral-soft); }