/* fbposzt felület. A színek, méretek és sugarak a tokens.css-ből jönnek (szabályok: DESIGN.md).
   Töréspontok: telefon < 768 px (alsó menüsor), tablet 768-1023 px, asztali >= 1024 px. */

*, *::before, *::after { box-sizing: border-box; }
/* a hidden attribútum a display-t adó osztályok (.btn, .field, .compose) mellett is rejtsen */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fw-normal) var(--fs-16)/var(--lh) var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-text); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
code { font: .92em/1.4 var(--font-mono); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 5px; overflow-wrap: anywhere; }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0; font-weight: var(--fw-semibold); }
strong, b { font-weight: var(--fw-semibold); }
.muted { color: var(--text-secondary); }
.ic { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; }

/* ---------- keret: fejléc + menü ---------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-topbar); }
.topbar__in { max-width: var(--content-max); min-height: var(--topbar-h); margin: 0 auto; padding: var(--sp-2) var(--sp-4); display: flex; align-items: center; gap: var(--sp-5); }
.brand { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-18); letter-spacing: -.01em; }
.brand:hover { color: var(--text); }
.brand__mark { background: var(--primary); color: var(--on-primary); border-radius: var(--radius-xs); padding: 2px 7px; font-size: var(--fs-15); letter-spacing: .02em; }
.nav { display: flex; gap: var(--sp-1); flex: 1; }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-h); padding: 0 var(--sp-3);
  border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: var(--fs-15); font-weight: var(--fw-semibold);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__link:hover { background: var(--surface-2); color: var(--text); }
.nav__link.is-on { background: var(--primary-subtle); color: var(--primary-text); }
.topbar__me { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__me form { margin: 0; }
.topbar__who { color: var(--text-secondary); font-size: var(--fs-14); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-12); }
.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-6) var(--sp-4); gap: var(--sp-4); }

/* ---------- kártya, gomb ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.card__title { font-size: var(--fs-18); margin-bottom: var(--sp-3); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); }
.card__title .muted { font-size: var(--fs-15); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--ctl-h); padding: 0 var(--sp-4); border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: inherit; font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn--primary:active { background: var(--primary-active); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--ghost:active { background: var(--surface-3); }
.btn--danger { color: var(--danger); }
.btn--danger:hover { color: var(--danger); background: var(--danger-subtle); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn--danger-solid { background: var(--danger); color: var(--neutral-0); }
.btn--danger-solid:hover { background: var(--danger-hover); color: var(--neutral-0); }
.btn--sm { min-height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-14); }
.btn--lg { min-height: var(--ctl-h-lg); padding: 0 var(--sp-5); font-size: var(--fs-16); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .55; pointer-events: none; }
.btn.is-busy .ic { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.iconbtn {
  border: 0; background: transparent; color: var(--text-muted); width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.iconbtn--danger:hover { color: var(--danger); background: var(--danger-subtle); }

/* ---------- űrlap ---------- */
.form { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; }
.form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.form__row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; flex: none; min-width: 0; }
.form--inline > .field, .form__row > .field { flex: 1 1 220px; }
.form--inline > .field--narrow, .form__row > .field--narrow { flex: 0 1 140px; }
.field__label { font-weight: var(--fw-semibold); font-size: var(--fs-15); }
.field__label .muted { font-weight: var(--fw-normal); }
.field__hint { color: var(--text-secondary); font-size: var(--fs-14); }
.field__hint code { font-size: var(--fs-14); }
.input {
  width: 100%; min-height: var(--ctl-h); padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-16);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--text-muted); }
.input:hover { border-color: var(--text-disabled); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: var(--field-ring); }
.input--code { font: var(--fw-semibold) 20px/1 var(--font-mono); letter-spacing: .18em; max-width: 160px; }

/* kapcsoló: itt a kerek forma maga a tárgy (kivétel a kerekítési szabály alól) */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: var(--ctl-h); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { width: 42px; height: 24px; background: var(--border-strong); border-radius: 12px; position: relative; transition: background-color var(--dur) var(--ease); flex: none; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--neutral-0); border-radius: 50%; transition: transform var(--dur) var(--ease); }
.switch input:checked + .switch__track { background: var(--primary); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; }

/* ---------- jelvény, visszajelzés ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 26px; padding: 2px var(--sp-2); border-radius: var(--radius-xs); font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1.3; width: fit-content; white-space: nowrap; }
.chip .ic { width: 15px; height: 15px; }
.chip--ok { background: var(--success-subtle); color: var(--success); }
.chip--warn { background: var(--warning-subtle); color: var(--warning); }
.chip--bad { background: var(--danger-subtle); color: var(--danger); }
.chip--idle { background: var(--surface-3); color: var(--text-secondary); }
.chip--accent { background: var(--info-subtle); color: var(--info); }
.chip--busy { background: var(--surface-3); color: var(--text-secondary); }
/* forgó töltésjelző: a kör maga a tárgy (kivétel a kerekítési szabály alól) */
.chip--busy::before { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }

.flash { width: 100%; max-width: var(--content-max); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); margin-bottom: var(--sp-4); font-weight: var(--fw-semibold); border: 1px solid transparent; }
.flash--ok { background: var(--success-subtle); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.flash--err { background: var(--danger-subtle); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.auth .flash { max-width: 420px; }

.verdict { flex: 1 1 320px; margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); font-weight: var(--fw-semibold); border: 1px solid transparent; }
.verdict--ok { background: var(--success-subtle); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.verdict--warn { background: var(--warning-subtle); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.verdict--idle { background: var(--surface-3); color: var(--text-secondary); border-color: var(--border); }

/* ---------- belépés ---------- */
.auth__card { width: 100%; max-width: 420px; padding: var(--sp-8) var(--sp-6); }
.auth__brand { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); font-size: 20px; margin-bottom: var(--sp-4); }
.auth__title { font-size: var(--fs-24); margin-bottom: var(--sp-4); letter-spacing: -.01em; }
.auth__alt { margin: var(--sp-4) 0 0; text-align: center; }

/* ---------- oldalfej + számlálók ---------- */
.pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.pagehead__title { font-size: var(--fs-24); letter-spacing: -.01em; }
.pagehead__sub { margin: 6px 0 0; color: var(--text-secondary); max-width: 780px; }
.pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pagehead__actions form { margin: 0; }
.stats { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; min-width: 150px; }
.stat__num { font-size: var(--fs-28); font-weight: var(--fw-semibold); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--text-secondary); font-size: var(--fs-14); }

/* ---------- lehúzás a Facebookról ---------- */
.syncbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: calc(-1 * var(--sp-2)) 0 var(--sp-5); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.syncbar__icon { display: inline-flex; color: var(--text-secondary); }
.syncbar.is-busy .syncbar__icon .ic { animation: spin 1s linear infinite; }
.syncbar__text { flex: 1 1 260px; margin: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.syncbar__errs { flex: 1 1 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; color: var(--danger); }

/* ---------- oldal-kártyák ---------- */
.pagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease-pop); }
.pcard.is-off { opacity: .62; }
.pcard.is-leaving { opacity: 0; transform: scale(.96); }
.pcard__top { display: flex; gap: var(--sp-3); align-items: center; }
.pcard__pic { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex: none; border: 1px solid var(--border); }
.pcard__pic--blank { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-secondary); font-weight: var(--fw-semibold); font-size: 22px; }
.pcard__id { min-width: 0; }
.pcard__name { font-size: 17px; overflow-wrap: anywhere; }
.pcard__meta { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--fs-14); }
.pcard__note { margin: 0; color: var(--text-secondary); font-size: var(--fs-14); }
.pcard__note:empty { display: none; }
.pcard__dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-15); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.pcard__dl dt { color: var(--text-secondary); }
.pcard__dl dd { margin: 0; overflow-wrap: anywhere; }
.pcard__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--sp-1); }
.pcard__actions form { margin: 0 0 0 auto; }

/* ---------- üres állapot, napló ---------- */
.empty { text-align: left; }
.empty__title { font-size: 20px; margin-bottom: var(--sp-3); }
.empty--state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-5); }
.empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--surface-3); color: var(--text-muted); }
.empty__icon .ic { width: 26px; height: 26px; }
.empty__text { margin: 0; color: var(--text-secondary); max-width: 520px; }
.steps__list { margin: 0 0 var(--sp-2); padding-left: 22px; display: flex; flex-direction: column; gap: var(--sp-2); }
.log__title { font-size: 17px; margin-bottom: var(--sp-3); }
.log__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.log__list li { display: flex; gap: var(--sp-3); font-size: var(--fs-15); }
.log__list time { color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 2FA ---------- */
.totp { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: flex-start; margin-top: var(--sp-3); }
.totp__qr { background: var(--neutral-0); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); width: 204px; height: 204px; }
.totp__qr img, .totp__qr canvas { display: block; width: 180px; height: 180px; }
.totp__side { flex: 1 1 260px; }
.totp__secret code { font-size: 17px; letter-spacing: .06em; }

/* ---------- modál (animált nyitás és zárás: .show kirakja, .in animálja) ---------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--sp-4); }
.modal.show { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--dur) ease; }
.modal__box {
  position: relative; width: 100%; max-width: 540px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--surface-overlay); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(14px) scale(.94);
  transition: transform var(--dur-slow) var(--ease-pop), opacity var(--dur) ease;
}
.modal.in .modal__backdrop { opacity: 1; }
.modal.in .modal__box { opacity: 1; transform: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) 6px; }
.modal__title { font-size: var(--fs-18); overflow-wrap: anywhere; }
.modal__body { padding: var(--sp-2) var(--sp-5) var(--sp-1); }
.modal__body p { margin: 0 0 var(--sp-2); }
.modal__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.modal__err { color: var(--danger); font-weight: var(--fw-semibold); margin: var(--sp-2) 0 0; }
.modal__err:empty { display: none; }

/* ---------- értesítés ---------- */
.toasts { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2); max-width: min(420px, calc(100vw - 32px)); }
.toast {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-weight: var(--fw-semibold); box-shadow: var(--shadow-2); border: 1px solid var(--border);
  background: var(--surface-overlay); color: var(--text); opacity: 0; transform: translateY(10px) scale(.96);
  transition: transform var(--dur-slow) var(--ease-pop), opacity var(--dur) ease;
}
.toast.in { opacity: 1; transform: none; }
.toast--ok { background: var(--success-subtle); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.toast--err { background: var(--danger-subtle); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

/* ---------- médiatár ---------- */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: var(--sp-8) var(--sp-4); border: 2px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.drop:hover, .drop.is-over { border-color: var(--primary); background: var(--primary-subtle); }
.drop:focus-within { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; }
.drop__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop__icon { color: var(--text-muted); }
.drop__icon .ic { width: 30px; height: 30px; }
.drop__title { font-weight: var(--fw-semibold); font-size: 17px; }
.drop__hint { color: var(--text-secondary); font-size: var(--fs-14); max-width: 560px; }
.uplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.uplist:not(:empty) { margin-top: var(--sp-4); }
.uprow { padding: 10px var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease; }
.uprow.is-leaving { opacity: 0; transform: translateY(-6px); }
.uprow__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); font-size: var(--fs-15); margin-bottom: 6px; }
.uprow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.uprow__close { width: 32px; height: 32px; margin: -4px -6px -4px 0; }
.uprow__state { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uprow.is-done .uprow__state { color: var(--success); }
.uprow.is-err .uprow__state { color: var(--danger); }
.uprow__err { margin: 6px 0 0; color: var(--danger); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.bar { height: 8px; background: var(--surface-3); border-radius: var(--radius-2xs); overflow: hidden; }
.bar__fill { height: 100%; width: 0; background: var(--primary); transition: width var(--dur) ease; }
.uprow.is-done .bar__fill { background: var(--success); }
.uprow.is-err .bar__fill { background: var(--danger); }

.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); align-items: start; }
.mgrid:empty { display: none; }
.mtile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column;
  transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease-pop); }
.mtile.is-new, .mtile.is-leaving { opacity: 0; transform: scale(.96); }
.mtile__view { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-bottom: 1px solid var(--border); background: var(--surface-2); cursor: zoom-in; overflow: hidden; }
.mtile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mtile__badge { position: absolute; left: var(--sp-2); bottom: var(--sp-2); background: var(--media-scrim); color: var(--neutral-0); padding: 4px 6px; border-radius: var(--radius-xs); display: inline-flex; }
.mtile__body { padding: 10px var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mtile__name { margin: 0; font-weight: var(--fw-semibold); font-size: var(--fs-15); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtile__facts { margin: 0; color: var(--text-secondary); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.mtile__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-14); }
.mtile__foot form { margin: 0; }

.modal__box--wide { max-width: min(1100px, calc(100vw - 32px)); }
.lightbox { display: flex; justify-content: center; background: #0b0d11; border-radius: var(--radius-sm); overflow: hidden; }
.lightbox img, .lightbox video { display: block; max-width: 100%; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); object-fit: contain; }

/* ---------- szerver-korlátok ---------- */
.limits { width: 100%; border-collapse: collapse; margin-top: var(--sp-3); font-size: var(--fs-15); }
.limits th, .limits td { text-align: left; padding: 10px var(--sp-3) 10px 0; border-top: 1px solid var(--border); vertical-align: middle; }
.limits th { font-weight: var(--fw-semibold); white-space: nowrap; }
.limits__val { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- posztoló ---------- */
.compose { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); gap: var(--sp-5); align-items: start; }
.compose__form { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.compose__side { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.compose__text { min-height: 168px; resize: vertical; line-height: var(--lh); }
.compose__submit { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: var(--sp-1); }
.compose__err { margin: 0; color: var(--danger); font-weight: var(--fw-semibold); }
.compose__err:empty { display: none; }

/* gombcsoport rádió helyett: a natív rádió a helyén marad (billentyűzet), csak láthatatlan */
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--sp-4); background: var(--surface); }
.seg__item { position: relative; display: inline-flex; flex: 1 1 auto; }
.seg__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg__item span { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--ctl-h); padding: 0 var(--sp-4); font-weight: var(--fw-semibold); font-size: var(--fs-15); cursor: pointer; color: var(--text-secondary); border-left: 1px solid var(--border-strong); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.seg__item:first-child span { border-left: 0; }
.seg__item span:hover { color: var(--text); background: var(--surface-2); }
.seg__item input:checked + span { background: var(--primary-subtle); color: var(--primary-text); }
.seg__item input:focus-visible + span { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }

/* oldal-választó: két oszlop, a teljes név látszik (kell, akkor két sorban) */
.pagepick__tools { display: flex; gap: 6px; margin-bottom: var(--sp-3); }
.pagepick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.pagepick__item {
  display: flex; align-items: center; gap: 10px; min-height: 52px; height: 100%; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.pagepick__item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.pagepick__item.is-on { border-color: var(--primary); background: var(--primary-subtle); }
.pagepick__item.is-off { opacity: .62; cursor: not-allowed; }
.pagepick__item input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); flex: none; }
.pagepick__pic { width: 32px; height: 32px; border-radius: var(--radius-xs); object-fit: cover; border: 1px solid var(--border); flex: none; }
.pagepick__pic--blank { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-secondary); font-weight: var(--fw-semibold); font-size: var(--fs-15); }
.pagepick__name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: var(--fw-semibold); font-size: var(--fs-15); line-height: 1.3; }
.pagepick__item .chip { flex: none; }

.pick__list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pick__list:empty { display: none; }
.pick__item { position: relative; width: 132px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); cursor: grab; transition: opacity var(--dur-fast) ease; }
.pick__item.is-drag { opacity: .45; }
.pick__item.is-over { outline: 2px solid var(--primary); outline-offset: -2px; }
.pick__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; pointer-events: none; }
.pick__num { position: absolute; top: 6px; left: 6px; background: var(--media-scrim); color: var(--neutral-0); font-size: var(--fs-14); font-weight: var(--fw-semibold); padding: 1px 7px; border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; }
.pick__tools { display: flex; justify-content: space-between; padding: 2px; background: var(--surface); border-top: 1px solid var(--border); }
.pick__tools .iconbtn { width: 34px; height: 34px; }
.pick__tools .iconbtn[disabled] { opacity: .35; pointer-events: none; }
.pick__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.pick__actions .btn { position: relative; }
.pick .uplist:not(:empty) { margin-top: var(--sp-3); }

.lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; padding: 2px; }
.lib__item { position: relative; display: block; cursor: pointer; border: 2px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); transition: border-color var(--dur-fast) var(--ease); }
.lib__item:hover { border-color: var(--border-strong); }
.lib__item.is-on { border-color: var(--primary); }
.lib__item input { position: absolute; top: var(--sp-2); left: var(--sp-2); width: 20px; height: 20px; margin: 0; accent-color: var(--primary); z-index: 1; }
.lib__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.lib__name { display: block; font-size: var(--fs-14); padding: 4px var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib__empty { margin: 4px 0 var(--sp-2); }

/* előnézet: a Facebook-poszt közelítése */
.fbpost { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.fbpost__head { display: flex; gap: 10px; align-items: center; padding: var(--sp-3) 14px var(--sp-2); }
.fbpost__pic { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-3); flex: none; }
.fbpost__pic--blank { display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); font-weight: var(--fw-semibold); }
.fbpost__who { min-width: 0; display: flex; flex-direction: column; }
.fbpost__name { font-size: var(--fs-15); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbpost__meta { color: var(--text-secondary); font-size: var(--fs-14); display: inline-flex; align-items: center; gap: 4px; }
.fbpost__meta .ic { width: 14px; height: 14px; }
.fbpost__text { margin: 0; padding: 0 14px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-15); }
.fbpost__text:empty { display: none; }
.fbpost__media { display: grid; gap: 2px; background: var(--border); }
.fbpost__media:empty { display: none; }
.fbpost__cell { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--surface-2); }
.fbpost__cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fbpost__media--1 .fbpost__cell { aspect-ratio: 4 / 3; }
.fbpost__media--1 .fbpost__cell img { object-fit: contain; }
.fbpost__media--2, .fbpost__media--3, .fbpost__media--4 { grid-template-columns: 1fr 1fr; }
.fbpost__media--3 .fbpost__cell:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.fbpost__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--scrim); color: var(--neutral-0); font-size: 26px; font-weight: var(--fw-semibold); }
.fbpost__link { display: block; text-decoration: none; color: inherit; border-top: 1px solid var(--border); background: var(--surface-2); padding: 10px 14px; }
.fbpost__linkhost { display: block; color: var(--text-secondary); font-size: var(--fs-14); text-transform: uppercase; letter-spacing: .02em; }
.fbpost__linkurl { display: block; font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview__note { margin: 10px 0 0; font-size: var(--fs-14); }

/* ---------- küldési sor és célpontok ---------- */
.tlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.trow { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.trow:first-child { border-top: 0; }
.trow__pic { width: 36px; height: 36px; border-radius: var(--radius-xs); object-fit: cover; border: 1px solid var(--border); flex: none; }
.trow__pic--blank { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-secondary); font-weight: var(--fw-semibold); font-size: var(--fs-15); }
.trow__main { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.trow__name { font-weight: var(--fw-semibold); font-size: var(--fs-15); }
.trow__err { color: var(--danger); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.trow__err:empty { display: none; }
.trow__stats { color: var(--text-secondary); font-size: var(--fs-14); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.trow__stats:empty { display: none; }
.trow__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.trow__actions form { margin: 0; }
.queue__foot { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: 14px; }
.queue .tlist { margin-top: 6px; }

/* ---------- posztok ---------- */
.camp { transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease-pop); }
.camp.is-leaving { opacity: 0; transform: scale(.98); }
.camp__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.camp__when { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.camp__created { font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.camp__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.camp__actions form { margin: 0; }
.camp__body { display: flex; gap: 14px; margin-bottom: var(--sp-3); align-items: flex-start; }
.camp__media { display: flex; gap: 4px; flex: none; flex-wrap: wrap; max-width: 304px; }
.camp__thumb { position: relative; width: 72px; height: 72px; border-radius: var(--radius-xs); overflow: hidden; border: 1px solid var(--border); padding: 0; background: var(--surface-2); cursor: zoom-in; }
.camp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camp__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--scrim); color: var(--neutral-0); font-weight: var(--fw-semibold); font-size: var(--fs-18); }
.camp__content { min-width: 0; flex: 1; }
.camp__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-15); max-height: 7.6em; overflow: hidden; }
.camp__text.is-open { max-height: none; }
.camp__toggle { margin-top: 6px; }
.camp__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-14); overflow-wrap: anywhere; }
.camp .tlist { border-top: 1px solid var(--border); padding-top: 2px; }
.camp .trow:first-child { border-top: 0; }

/* ---------- AI-szövegírás ---------- */
.field__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ainote { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.ainote__text { margin: 0; font-weight: var(--fw-semibold); font-size: var(--fs-15); }
.ainote__warn { margin: 0; padding-left: 20px; color: var(--warning); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.ainote__warn:empty { display: none; }
.aiform .field { gap: 6px; }
.aiform__busy { margin: 0; color: var(--text-secondary); font-weight: var(--fw-semibold); }
.aibar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.aibar .field__hint { flex: 1 1 260px; }
.variants__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.variants__head .card__title { margin-bottom: 0; }
.variants__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.variants__hint { margin: var(--sp-2) 0 var(--sp-3); display: block; }
.variants .verdict { margin-bottom: var(--sp-3); }
.vlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.vrow { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3); background: var(--surface); display: flex; flex-direction: column; gap: var(--sp-2); transition: border-color var(--dur-fast) var(--ease); }
.vrow.is-bad { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.vrow__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) 10px; }
.vrow__pic { width: 32px; height: 32px; border-radius: var(--radius-xs); object-fit: cover; border: 1px solid var(--border); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-secondary); font-weight: var(--fw-semibold); font-size: var(--fs-15); }
.vrow__name { font-size: var(--fs-15); min-width: 0; overflow-wrap: anywhere; }
.vrow__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vrow__tools { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.vrow__text { min-height: 112px; resize: vertical; line-height: var(--lh); }
.trow__own { margin-top: 4px; font-size: var(--fs-14); }
.trow__own summary { cursor: pointer; color: var(--text-secondary); font-weight: var(--fw-semibold); width: fit-content; }
.trow__own p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-15); color: var(--text); }

/* ---------- Flatpickr a saját tokenekkel (sötét téma is), kis sarkokkal ---------- */
.flatpickr-calendar { background: var(--surface-overlay); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-2); border-radius: var(--radius-md); font-family: inherit; }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface-overlay); }
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface-overlay); }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday, .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--surface-overlay); color: var(--text); fill: var(--text); }
span.flatpickr-weekday { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.flatpickr-current-month { font-size: var(--fs-16); }
.flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--text); font-size: var(--fs-16); }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--text); fill: var(--text); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary); }
.flatpickr-day { color: var(--text); border-radius: var(--radius-xs); font-size: var(--fs-14); }
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus { background: var(--surface-2); border-color: var(--surface-2); }
.flatpickr-day.today { border-color: var(--primary); }
.flatpickr-day.today:hover { background: var(--primary-subtle); color: var(--text); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-muted); opacity: .55; }
.flatpickr-time { border-top: 1px solid var(--border); }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator { color: var(--text); font-size: var(--fs-15); }
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .numInputWrapper:hover { background: var(--surface-2); }
.numInputWrapper span { border-color: var(--border); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--text-muted); }
.numInputWrapper span.arrowDown::after { border-top-color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .btn.is-busy .ic, .chip--busy::before { animation: none; }
}

/* ---------- tablet és kis laptop: a posztoló egy oszlopban, a fejléc tömörebb ---------- */
@media (max-width: 1023.98px) {
  .compose { grid-template-columns: minmax(0, 1fr); }
  .compose__side { position: static; }
  .topbar__who { display: none; }
  .topbar__me .btn span { display: none; }      /* Kilépés: csak ikon, a felirat aria-label-ben */
  .topbar__me .btn { width: var(--ctl-h); min-height: var(--ctl-h); padding: 0; }
  .topbar__in { gap: var(--sp-4); }
}

/* ---------- telefon: alsó menüsor, nagy érintési felületek, alul ragadó küldés ---------- */
@media (max-width: 767.98px) {
  body.is-app { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }
  /* a fejléc nem ragad: a menü alul van, fent csak a márka és a kilépés */
  .topbar { position: static; }
  .topbar__in { min-height: 56px; padding: var(--sp-2) var(--sp-4); justify-content: space-between; }
  .topbar__me .btn { width: var(--touch-min); min-height: var(--touch-min); }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottomnav);
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
    padding: 5px var(--sp-2) calc(6px + env(safe-area-inset-bottom));   /* 1 px keret + 5 + 52 + 6 = 64 px */
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .nav__link { flex-direction: column; justify-content: center; gap: 3px; min-height: calc(var(--bottomnav-h) - 12px); padding: 0 2px; font-size: var(--fs-14); line-height: 1.15; min-width: 0; }
  .nav__link .ic { width: var(--icon-nav); height: var(--icon-nav); }
  .nav__link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main { padding: var(--sp-4) var(--sp-4) var(--sp-8); }
  .toasts { left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--sp-3)); max-width: none; align-items: center; }
  .toast { width: 100%; }

  /* érintés: legalább 44 px */
  .btn, .btn--sm { min-height: var(--touch-min); }
  .input { min-height: var(--touch-min); }
  .iconbtn { width: var(--touch-min); height: var(--touch-min); }
  .pick__tools .iconbtn { width: 40px; height: 40px; }
  .uprow__close { width: 40px; height: 40px; }

  .card { padding: var(--sp-4); margin-bottom: var(--sp-4); }
  .pagehead { margin-bottom: var(--sp-4); }
  .pagehead__actions { width: 100%; }
  .pagehead__actions .btn, .pagehead__actions form { flex: 1 1 auto; }
  .pagehead__actions form .btn { width: 100%; }
  .pagegrid { grid-template-columns: minmax(0, 1fr); }
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .limits td:last-child { display: none; }
  .modal__box--wide { max-width: none; }
  .stat { flex: 1 1 calc(33% - 12px); min-width: 0; padding: 10px var(--sp-3); }
  .stat__num { font-size: var(--fs-24); }
  /* a modál alulról nyíló lap */
  .modal { align-items: flex-end; padding: 0; }
  .modal__box { max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 90vh; max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom); }
  .modal__foot .btn { flex: 1 1 auto; }
  .pagepick { grid-template-columns: minmax(0, 1fr); }
  .seg { display: flex; }
  .trow__actions { margin-left: 0; width: 100%; }
  .trow__actions .btn { flex: 1 1 auto; }
  .trow__actions form { flex: 1 1 auto; display: flex; }
  .trow__actions form .btn { width: 100%; }
  .camp__body { flex-direction: column; }
  .camp__head { flex-direction: column; align-items: stretch; }
  .camp__actions .btn, .camp__actions form { flex: 1 1 auto; }
  .camp__actions form .btn { width: 100%; }
  /* a küldés gomb alul ragad, az alsó menüsor fölött */
  .compose__submit {
    position: sticky; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
    margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4);
    background: var(--surface); border-top: 1px solid var(--border); align-items: stretch;
  }
  .compose__submit .btn { width: 100%; }
  .lib { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 55vh; }
  .vrow__tools { margin-left: 0; width: 100%; }
  .vrow__tools .btn, .variants__tools .btn, .aibar .btn { flex: 1 1 auto; }
  .pick__item { width: calc(50% - 5px); }
}

/* ---------- naptár (M2b) ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.calbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.calbar__nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calbar__step { padding: 0 var(--sp-2); }
.calbar__label { margin: 0 0 0 var(--sp-2); font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: -.01em; }
.calbar__tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.calbar__filter { margin: 0; display: flex; gap: 6px; }
.calbar__select { min-width: 190px; }
.seg--links { margin-bottom: 0; }
.seg__link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ctl-h); padding: 0 var(--sp-4); font-weight: var(--fw-semibold); font-size: var(--fs-15); color: var(--text-secondary); text-decoration: none; border-left: 1px solid var(--border-strong); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.seg__link:first-child { border-left: 0; }
.seg__link:hover { color: var(--text); background: var(--surface-2); }
.seg__link.is-on { background: var(--primary-subtle); color: var(--primary-text); }
.seg__link:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
.calsum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--sp-3); color: var(--text-secondary); }
.calsum strong { color: var(--text); font-weight: var(--fw-semibold); }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; margin-bottom: var(--sp-5); transition: opacity var(--dur-fast) var(--ease); }
.cal.is-loading { opacity: .55; pointer-events: none; }
.cal__head { display: contents; }
.cal__head span { padding: 6px var(--sp-2); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--text-secondary); background: var(--surface-2); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.cal__head span:first-child { border-left: 0; }
.cal__day { min-width: 0; min-height: 132px; padding: 6px; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.cal__day:nth-of-type(7n + 1) { border-left: 0; }
.cal--month .cal__day:nth-of-type(-n + 7), .cal--week .cal__day { border-top: 0; }
.cal--week .cal__day { min-height: 360px; }
.cal__day.is-out { background: var(--surface-2); }
.cal__day.is-out .cal__num { color: var(--text-secondary); }
.cal__dayhead { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.cal__num { font-size: var(--fs-15); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: var(--radius-xs); line-height: 26px; }
.cal__day.is-today .cal__num { background: var(--primary-subtle); color: var(--primary-text); }
.cal__dayname { display: none; font-weight: var(--fw-semibold); }
.cal__new { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-xs); color: var(--text-secondary); border: 1px solid transparent; }
.cal__new:hover { color: var(--primary-text); background: var(--surface-2); border-color: var(--border); }
.cal__new:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
.cal__new .ic { width: 16px; height: 16px; }
.cal__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cal__none { display: none; margin: 0; color: var(--text-secondary); font-size: var(--fs-14); }
.cal__more { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--primary-text); text-decoration: none; padding: 2px 4px; }
.cal__more:hover { text-decoration: underline; }

.calitem { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px 0; padding: 3px 6px; margin: 0; text-align: left; font-family: inherit; font-size: var(--fs-14); line-height: 1.35; color: var(--text); background: var(--surface-3); border: 1px solid transparent; border-radius: var(--radius-xs); cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.calitem:hover { border-color: var(--border-strong); }
.calitem:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
.calitem--ok { background: var(--success-subtle); }
.calitem--accent { background: var(--info-subtle); }
.calitem--bad { background: var(--danger-subtle); }
.calitem.is-ext { border: 1px dashed var(--border-strong); }
.calitem > * { grid-column: 1; min-width: 0; }
.calitem__line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calitem__time { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.calitem__meta { display: flex; flex-wrap: wrap; gap: 4px; }
.calitem__pic { grid-column: 2; grid-row: 1 / span 5; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); margin-left: var(--sp-3); }
.calitem__text { color: var(--text-secondary); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.calitem__stats { color: var(--text-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calitem__err { color: var(--danger); font-weight: var(--fw-semibold); }
/* havi rács: csak az idő és az oldal; a többi a részletek-ablakban */
.cal--month .calitem__meta, .cal--month .calitem__pic, .cal--month .calitem__text, .cal--month .calitem__stats, .cal--month .calitem__err { display: none; }
/* heti rács asztalon: kép nélkül, a szöveg két sor */
.cal--week .calitem { padding: 6px; gap: 4px 0; }
.cal--week .calitem__pic { display: none; }
.cal--week .calitem__text { -webkit-line-clamp: 2; }
.cal--week .cal__none { display: block; }

/* részletek-ablak */
.caldet { display: flex; flex-direction: column; gap: var(--sp-3); }
.caldet__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--text-secondary); }
.caldet__page { font-weight: var(--fw-semibold); font-size: 16px; margin: 0; }
.caldet__pic { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.caldet__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.caldet__stats { margin: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.caldet__err { margin: 0; color: var(--danger); font-weight: var(--fw-semibold); }
.caldet__open { align-self: flex-start; }

/* heti nézet tableten és telefonon: napi lista */
@media (max-width: 1023.98px) {
  .cal--week { display: block; border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .cal--week .cal__head { display: none; }
  .cal--week .cal__day { min-height: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--sp-3); margin-bottom: var(--sp-3); gap: var(--sp-2); }
  .cal--week .cal__num { display: none; }
  .cal--week .cal__dayname { display: inline; }
  .cal--week .cal__day.is-today .cal__dayname { color: var(--primary-text); }
  .cal--week .calitem { padding: var(--sp-2) var(--sp-3); }
  .cal--week .calitem__pic { display: block; }
  .cal--week .calitem__text { -webkit-line-clamp: 3; }
}

/* telefon: a havi nézet is napi lista, csak a posztos napokkal és a mával */
@media (max-width: 767.98px) {
  .calbar { flex-direction: column; align-items: stretch; }
  .calbar__nav { justify-content: space-between; }
  .calbar__label { order: -1; flex: 1 1 100%; margin: 0 0 var(--sp-1); }
  .calbar__nav .btn { flex: 1 1 auto; }
  .calbar__tools { flex-direction: column; align-items: stretch; }
  .calbar__select { width: 100%; min-width: 0; }
  .calbar__filter { flex: 1 1 auto; }
  .seg--links { display: flex; }
  .seg__link { flex: 1 1 0; min-height: var(--touch-min); }
  .cal--month { display: block; border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .cal--month .cal__head { display: none; }
  .cal--month .cal__day { min-height: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--sp-3); margin-bottom: var(--sp-3); gap: var(--sp-2); }
  .cal--month .cal__day.is-out, .cal--month .cal__day.is-free:not(.is-today) { display: none; }
  .cal--month .cal__day.is-today.is-free .cal__none { display: block; }
  .cal--month .cal__num { display: none; }
  .cal--month .cal__dayname { display: inline; }
  .cal--month .cal__day.is-today .cal__dayname { color: var(--primary-text); }
  .cal--month .calitem { padding: var(--sp-2) var(--sp-3); }
  .cal--month .calitem__meta { display: flex; }
  .cal--month .calitem__pic, .cal--month .calitem__stats, .cal--month .calitem__err { display: block; }
  .cal--month .calitem__text { display: -webkit-box; }
  .cal__new { width: var(--touch-min); height: var(--touch-min); border-color: var(--border); }
  .cal__more { display: none; }
  .caldet__open { align-self: stretch; }
}

/* ---------- fejléc: Fiók gomb (M3b óta nem menüpont) ---------- */
.topbar__acct { gap: var(--sp-2); max-width: 260px; }
.topbar__acct .topbar__who { color: inherit; font-size: var(--fs-14); }
.topbar__acct.is-on { background: var(--primary-subtle); color: var(--primary-text); border-color: transparent; }
.nav__short { display: none; }

/* ---------- statisztika (M3b) ---------- */
.stats__range { margin: 0; }
#stats { transition: opacity var(--dur-fast) var(--ease); }
#stats.is-loading { opacity: .55; pointer-events: none; }
.card__sub { font-size: var(--fs-14); font-weight: var(--fw-normal); }
.seg--wrap { flex-wrap: wrap; margin-bottom: var(--sp-4); }
.seg--wrap .seg__link { font-family: inherit; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.seg--wrap .seg__link.is-on { background: var(--primary-subtle); }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi__label { color: var(--text-secondary); font-size: var(--fs-14); }
.kpi__value { font-size: var(--fs-28); font-weight: var(--fw-semibold); line-height: 1.2; }
.kpi__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--text-secondary); }
.kpi__delta .ic { width: 15px; height: 15px; }
.kpi__delta--up { color: var(--success); }
.kpi__delta--down { color: var(--danger); }

.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.insights .verdict { flex: none; }

.trend { position: relative; min-height: 200px; margin-bottom: var(--sp-3); }
.trend:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 4px; border-radius: var(--radius-xs); }
.trend__svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend__grid { stroke: var(--chart-grid); stroke-width: 1; }
.trend__base { stroke: var(--chart-axis); stroke-width: 1; }
.trend__tick { fill: var(--chart-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.trend__line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend__area { fill: var(--chart-1-wash); stroke: none; }
.trend__dot { fill: var(--chart-1); stroke: var(--surface); stroke-width: 2; }
.trend__end { fill: var(--text); font-size: 14px; font-weight: var(--fw-semibold); }
.trend__cross { stroke: var(--chart-axis); stroke-width: 1; }
.trend__hit { fill: transparent; pointer-events: all; cursor: crosshair; }

.charttip { position: fixed; z-index: var(--z-toast); pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); padding: 6px 10px; font-size: var(--fs-14); font-weight: var(--fw-semibold); max-width: min(360px, calc(100vw - 16px)); font-variant-numeric: tabular-nums; }

.hbars { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hbar { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) minmax(84px, auto); align-items: center; gap: var(--sp-3); min-height: 32px; border-radius: var(--radius-xs); }
.hbar:hover .hbar__fill, .hbar:focus-visible .hbar__fill { filter: brightness(1.12); }
.hbar:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; }
.hbar__name { font-size: var(--fs-15); font-weight: var(--fw-semibold); overflow-wrap: anywhere; min-width: 0; }
.hbar__track { position: relative; height: 18px; border-left: 1px solid var(--chart-axis); }
.hbar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--chart-1); border-radius: 0 4px 4px 0; transition: width var(--dur-slow, .4s) var(--ease); }
.hbar__val { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-15); color: var(--text); }
.hbars--compact .hbar { min-height: 28px; }
.hbars--compact .hbar__track { height: 14px; }

.tablebox { margin-top: var(--sp-2); }
.tablebox summary { cursor: pointer; color: var(--text-secondary); font-weight: var(--fw-semibold); width: fit-content; padding: 6px 0; }
.tablescroll { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-14); margin-top: var(--sp-2); }
.dtable th, .dtable td { padding: 6px var(--sp-2); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.dtable thead th { color: var(--text-secondary); font-weight: var(--fw-semibold); }
.dtable tfoot th, .dtable tfoot td { font-weight: var(--fw-semibold); border-bottom: 0; }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }

.toplist { list-style: none; margin: 0; padding: 0; }
.toplist__item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.toplist__item:first-child { border-top: 0; padding-top: 0; }
.toplist__rank { font-weight: var(--fw-semibold); color: var(--text-secondary); min-width: 28px; font-variant-numeric: tabular-nums; }
.toplist__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.toplist__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-2); }
.toplist__text { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.toplist__nums { margin: 0; display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); font-variant-numeric: tabular-nums; }
.toplist__nums strong { font-weight: var(--fw-semibold); }
.toplist__open { flex: none; }

.camps-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-4); }
.cstat { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3); min-width: 0; }
.cstat__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); }
.cstat__title { margin: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.cstat .hbar { grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) minmax(64px, auto); }

@media (max-width: 767.98px) {
  .nav__long { display: none; }
  .nav__short { display: inline; }
  .topbar__acct { width: var(--touch-min); min-height: var(--touch-min); padding: 0; justify-content: center; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi__value { font-size: var(--fs-24); }
  .hbar { grid-template-columns: minmax(0, 1fr) minmax(64px, auto); grid-template-areas: "name val" "track track"; gap: 4px var(--sp-3); }
  .hbar__name { grid-area: name; }
  .hbar__val { grid-area: val; }
  .hbar__track { grid-area: track; }
  .cstat .hbar { grid-template-columns: minmax(0, 1fr) minmax(64px, auto); }
  .camps-stats { grid-template-columns: minmax(0, 1fr); }
  .toplist__item { flex-wrap: wrap; }
  .toplist__open { width: 100%; }
  .seg--wrap .seg__link { flex: 1 1 calc(50% - 1px); border-left: 0; border-top: 1px solid var(--border-strong); min-height: var(--touch-min); }
  .tablebox summary { min-height: var(--touch-min); display: flex; align-items: center; }
}

/* tablet: hét elem a fejlécben (márka, 6 menüpont, Fiók, Kilépés) egy sorban fér el */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .topbar__in { gap: var(--sp-3); padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .nav { gap: 2px; }
  .nav__link { padding: 0 5px; gap: 4px; white-space: nowrap; }
}
.dtable tbody th, .dtable tfoot th { font-weight: var(--fw-semibold); }

/* ---------- sablonok és oldalcsoportok (M2c) ---------- */
.card__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.card__head .card__title { margin-bottom: 0; }
.tplbar { display: flex; flex-wrap: wrap; gap: 6px; }

.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.tcard { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; min-width: 0; }
.tcard__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.tcard__name { font-size: var(--fs-16); font-weight: var(--fw-semibold); margin: 0; overflow-wrap: anywhere; }
.tcard__when { font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.tcard__text { margin: 0; font-size: var(--fs-15); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tcard__link { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-14); color: var(--text-secondary); min-width: 0; }
.tcard__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard__link .ic { flex: none; width: 16px; height: 16px; }
.tcard__pics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tcard__pics img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); }
.tcard__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--sp-1); }
.tcard__actions .btn--danger { margin-left: auto; }

.groups__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.groups__head .card__title { margin-bottom: 0; }
.groups__hint { display: block; margin: var(--sp-1) 0 var(--sp-3); }
.glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.glist__item { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.glist__item:first-child { border-top: 0; padding-top: 0; }
.glist__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.glist__name { font-size: var(--fs-16); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.glist__pages { font-size: var(--fs-14); color: var(--text-secondary); overflow-wrap: anywhere; }
.glist__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gpick { border: 0; margin: 0; padding: 0; min-width: 0; }
.gpick legend { padding: 0; margin-bottom: var(--sp-2); }

.pagepick__tools { flex-wrap: wrap; align-items: center; }
.pagepick__group[aria-pressed="true"] { background: var(--primary-subtle); color: var(--primary-text); border-color: var(--primary); }
.pagepick__group span { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagepick__manage { font-size: var(--fs-14); margin-left: auto; display: inline-flex; align-items: center; min-height: var(--ctl-h-sm); }

.tplpick__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); max-height: 60vh; overflow-y: auto; }
.tplpick__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left;
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font-family: inherit; font-size: var(--fs-15); line-height: 1.4; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.tplpick__item:hover { border-color: var(--primary); background: var(--surface-2); }
.tplpick__item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; }
.tplpick__name { font-weight: var(--fw-semibold); font-size: var(--fs-16); overflow-wrap: anywhere; }
.tplpick__text { color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tplpick__meta { font-size: var(--fs-14); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) {
  .tgrid { grid-template-columns: minmax(0, 1fr); }
  .tcard__actions .btn { flex: 1 1 auto; }
  .tcard__actions .btn--danger { margin-left: 0; }
  .tplbar { width: 100%; }
  .tplbar .btn { flex: 1 1 auto; }
  .pagepick__manage { min-height: var(--touch-min); margin-left: 0; }
  .glist__actions { width: 100%; }
  .glist__actions .btn { flex: 1 1 0; }
}

/* ---------- tömeges felvitel (M2d) ---------- */
.bulkbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); }
.bulkbar__info { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.bulkbar__info .verdict { margin: 0; }
.bulkbar__saved { font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.bulkbar__tools { display: flex; flex-wrap: wrap; gap: 6px; }

.blist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.brow { margin-bottom: var(--sp-4); transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease-pop); }
.brow.is-new, .brow.is-leaving { opacity: 0; transform: translateY(-6px); }
.brow__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); }
.brow__num { font-size: var(--fs-18); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; min-width: 2ch; }
.brow__tools { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.brow__grid {
  display: grid; gap: var(--sp-3) var(--sp-4);
  grid-template-columns: minmax(200px, 230px) minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas: "when text link" "pages text pics";
  align-items: start;
}
.brow__when { grid-area: when; }
.brow__text { grid-area: text; }
.brow__text textarea { min-height: 132px; resize: vertical; }
.brow__link { grid-area: link; }
.brow__pics { grid-area: pics; }
.brow__pages { grid-area: pages; }
.brow__picbtns { display: flex; flex-wrap: wrap; gap: 6px; }
.brow__err { margin: var(--sp-3) 0 0; color: var(--danger); font-weight: var(--fw-semibold); font-size: var(--fs-15); }
.brow__err:empty { display: none; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.bpages { width: 100%; justify-content: flex-start; text-align: left; font-weight: var(--fw-medium); }
.bpages span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bpages.is-invalid { border-color: var(--danger); }
.bpics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bpics:empty { display: none; }
.bpic { position: relative; width: 56px; height: 56px; }
.bpic img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); }
.bpic__x {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface); color: var(--text); cursor: pointer;
}
.bpic__x::after { content: ""; position: absolute; inset: -10px; }   /* érintési felület 44 px */
.bpic__x .ic { width: 14px; height: 14px; }
.bpic__x:hover { color: var(--danger); border-color: var(--danger); }
.bpic__x:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
.bpages__list { margin-top: var(--sp-3); }
.bulk__submit { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: var(--sp-1); }

.qgroups { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.qgroup__head { margin: 0 0 4px; font-weight: var(--fw-semibold); font-size: var(--fs-15); overflow-wrap: anywhere; }
.qgroup__err { margin: 0; color: var(--danger); font-size: var(--fs-15); }

@media (max-width: 1023.98px) {
  .brow__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "when pages" "text text" "link pics"; }
}
@media (max-width: 767.98px) {
  .brow__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "text" "link" "pics" "pages"; }
  /* a sor eszközei telefonon csak ikonnal (a felirat aria-label-ben), a sorszám mellett */
  .brow__tools .btn { width: var(--touch-min); padding: 0; justify-content: center; }
  .brow__tools .btn span { display: none; }
  .brow__picbtns .btn, .bulkbar__tools .btn { flex: 1 1 auto; }
  .bulkbar__tools { width: 100%; }
  .bulk__submit {
    position: sticky; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
    margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4);
    background: var(--surface); border-top: 1px solid var(--border); align-items: stretch;
  }
  .bulk__submit .btn { width: 100%; }
}