/* ============================================================================
   BAURAD — strefa architekta (konto B2B + logowanie)
   Wszystkie style w arkuszu — widoki nie używają atrybutów `style=""`.
   Układ i wartości 1:1 z makiet (Architekten Dashboard, Projekte verwalten,
   Projekt anlegen, Profil bearbeiten, Architektenprofil, B2B Login).
   ============================================================================ */

/* ------------------------------- Logowanie ------------------------------- */
.br-acct-login { max-width: 74rem; margin: 0 auto; padding: 5.5rem var(--space-4) var(--space-15x); }
.br-acct-login__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.br-acct-login__col { min-width: 0; }
.br-acct-login__title { margin: var(--space-2) 0; }
.br-acct-login__lead { color: var(--color-ink-2); margin: 0 0 var(--space-5); max-width: 34rem; }
.br-acct-panel {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-surface);
	background: var(--color-bg);
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
}
.br-acct-panel .br-label { display: block; margin-bottom: var(--space-05); }
/* Komunikaty w panelu (błąd/sukces) — własny odstęp od pól formularza. */
.br-acct-panel > .br-alert { margin-bottom: var(--space-2); }
.br-acct-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.br-acct-remember { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-body); color: var(--color-ink-2); }
.br-acct-remember input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-action); }
.br-acct-link { font-size: var(--text-body); font-weight: 600; color: var(--color-action-text); text-decoration: none; }
.br-acct-link:hover { color: var(--color-action); }
.br-acct-link--muted { font-size: var(--text-body-sm); color: var(--color-ink-2); }
.br-acct-link--back { display: inline-block; margin-bottom: var(--space-5); }
.br-acct-hint { background: var(--color-paper); border-radius: var(--radius-field); padding: var(--space-2) var(--space-25); font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); }
.br-acct-foot { margin-top: var(--space-3); font-size: var(--text-body); color: var(--color-ink-2); }
.br-acct-foot a { font-weight: 600; }
.br-acct-aside { background: var(--color-surface); border-radius: var(--radius-surface); padding: var(--space-5); }
.br-acct-aside__title { font-size: var(--text-body); font-weight: 700; letter-spacing: var(--text-nav-track); text-transform: uppercase; margin-bottom: var(--space-3); }
.br-acct-aside__list { display: flex; flex-direction: column; gap: var(--space-3); }
.br-acct-aside__item { display: flex; align-items: flex-start; gap: var(--space-2); }
.br-acct-aside__check { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.125rem; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-bg); font-size: var(--text-badge); display: flex; align-items: center; justify-content: center; }
.br-acct-aside__item-title { font-size: var(--text-body); font-weight: 600; margin-bottom: var(--space-05); }
.br-acct-aside__item-text { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); }
.br-acct-aside__foot { border-top: 1px solid var(--color-line); margin-top: var(--space-4); padding-top: var(--space-3); font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); }
.br-acct-aside__foot a { font-weight: 600; }
/* ------------------------- Sekcje (70rem / 62.5rem) ----------------------- */
.br-acct-sec { max-width: 70rem; margin: 0 auto; padding: var(--space-6) var(--space-4) 0; }
.br-acct-sec--wide { padding-top: var(--space-7); }
.br-acct-sec--mid { padding-top: var(--space-4); }
.br-acct-sec--tight { padding-top: var(--space-3); }
.br-acct-sec--form { padding: var(--space-6) var(--space-4) var(--space-15x); }
.br-acct-sec--narrow { max-width: 62.5rem; }
.br-acct-sec--field { max-width: var(--container); padding: var(--space-12) var(--space-4) 0; }
.br-acct-sec--field-bottom { max-width: var(--container); padding: var(--space-12) var(--space-4) 7rem; }
.br-acct-sec--field-top { max-width: var(--container); padding: var(--space-5) var(--space-4) 0; }
/* Formularz projektu (makieta „Projekt anlegen"): nagłówek i sekcja formularza
   mają u góry var(--space-6) — bez dodatkowego, dużego odstępu między nimi. */
.br-acct-sec--pf-top { max-width: var(--container); padding: var(--space-6) var(--space-4) 0; }
.br-acct-sec--pf-form { max-width: var(--container); padding: var(--space-6) var(--space-4) var(--space-15x); }
.br-acct-sec--bottom { padding: var(--space-5) var(--space-4) 7rem; }
.br-acct-gap { height: 6.5rem; }
.br-acct-band { background: var(--color-surface); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); margin-top: var(--space-7); padding: var(--space-6) 0 var(--space-7); }

/* --------------------------------- Tekst --------------------------------- */
.br-acct-kicker { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--text-badge-track); text-transform: uppercase; color: var(--color-ink-3); }
.br-acct-kicker--lead { margin-bottom: var(--space-1); }
.br-acct-eyebrow { font-size: var(--text-body-sm); font-weight: 600; letter-spacing: var(--text-badge-track); text-transform: uppercase; color: var(--color-ink-2); }
.br-acct-eyebrow--top { margin: var(--space-3) 0 var(--space-2); }
.br-acct-eyebrow--lead { margin-bottom: var(--space-2); }
.br-acct-eyebrow--wide { letter-spacing: 0.1em; }
.br-acct-h1--editorial { letter-spacing: -0.035em; }
.br-acct-h1 { font-size: var(--text-h1); font-weight: 700; line-height: var(--text-h1-lh); letter-spacing: -0.03em; margin: 0; }
.br-acct-h1--tight { letter-spacing: -0.025em; }
.br-acct-h1--lead { margin: 0 0 var(--space-2); }
.br-acct-h2 { font-size: var(--text-h2); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.br-acct-h3 { font-size: var(--text-h3); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.br-acct-h3--bold { font-weight: 700; letter-spacing: -0.025em; }
.br-acct-tit { font-size: var(--text-body-lg); font-weight: 700; letter-spacing: -0.015em; }
.br-acct-tit--lead { margin-bottom: var(--space-3); }
.br-acct-tit--tight { margin-bottom: var(--space-1); }
.br-acct-sub { font-size: var(--text-body-sm); font-weight: 600; }
.br-acct-sub--lead { margin-bottom: var(--space-15); }
.br-acct-lead { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); margin: 0; max-width: 41.5rem; }
.br-acct-lead--serif { font-family: var(--font-serif); font-size: var(--text-lead); line-height: var(--text-lead-lh); color: var(--color-ink); margin: 0 0 var(--space-25); max-width: 30em; }
.br-acct-body { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); margin: 0; }
.br-acct-body--max { max-width: 34em; }
.br-acct-caption { font-size: var(--text-caption); color: var(--color-ink-2); }
.br-acct-caption--dim { color: var(--color-ink-3); }
.br-acct-caption--lead { margin-bottom: var(--space-1); }
.br-acct-note { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); color: var(--color-ink-3); margin: var(--space-25) 0 0; }
.br-acct-price { font-size: var(--text-body); font-weight: 600; }

/* ---------------------------- Układ / rzędy ------------------------------ */
.br-acct-row--end { align-items: flex-end; }
.br-acct-row--baseline { align-items: baseline; }
.br-acct-row--gap25 { gap: var(--space-25); }
.br-acct-row--top { align-items: flex-start; }
.br-acct-id { display: flex; align-items: center; gap: var(--space-25); min-width: 0; }
.br-acct-id__body { min-width: 0; }
.br-acct-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.br-acct-stack--15 { gap: var(--space-15); }
.br-acct-flex { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.br-acct-flex--15 { gap: var(--space-15); }
.br-acct-flex--end { justify-content: flex-end; }
.br-acct-flex--center { justify-content: center; }
.br-acct-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-25); flex-wrap: wrap; margin-bottom: var(--space-3); }
.br-acct-head--tight { margin-bottom: var(--space-2); }
.br-acct-avatar { flex: none; width: 4rem; height: 4rem; border-radius: var(--radius-pill); object-fit: cover; object-position: 50% 20%; background: var(--color-surface); display: block; }
.br-acct-divider { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
/* ---------------------------- Kafle statusu ------------------------------ */
.br-acct-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--color-line); border-radius: var(--radius-card-lg); margin-top: var(--space-4); overflow: hidden; }
.br-acct-status__item { padding: var(--space-25) var(--space-3); border-left: 1px solid var(--color-line); }
.br-acct-status__item:first-child { border-left: 0; }
.br-acct-status__label { font-size: var(--text-badge); line-height: var(--text-badge-lh); font-weight: 600; letter-spacing: var(--text-badge-track); text-transform: uppercase; color: var(--color-ink-3); margin-bottom: var(--space-1); }
.br-acct-status__value { font-size: var(--text-body-lg); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.br-acct-status__hint { font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-ink-2); margin-top: var(--space-05); }

/* --------------------------- Karty projektów ---------------------------- */
.br-acct-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.br-acct-card { display: flex; flex-direction: column; text-decoration: none; color: var(--color-ink); transition: transform 0.2s ease; }
.br-acct-card:hover { transform: translateY(-4px); }
.br-acct-card__media { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-field); overflow: hidden; background: var(--color-surface); margin-bottom: var(--space-2); }
.br-acct-card:hover .br-acct-card__media { box-shadow: var(--shadow-card-hover); }
.br-acct-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-acct-card__badge { position: absolute; top: 1rem; left: 1rem; background: var(--color-bg); border: 1px solid transparent; color: var(--color-ink); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill); }
.br-acct-card__badge--ad { background: rgba(255, 255, 255, 0.92); border-color: var(--color-disabled); color: var(--color-ink-2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; }
.br-acct-card__top { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1); justify-content: space-between; }
.br-acct-card__name { font-size: var(--text-body-lg); font-weight: 600; }
.br-acct-pill { display: inline-block; background: var(--color-surface); border-radius: var(--radius-pill); padding: 2px 8px; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--color-ink-2); }
.br-acct-card__meta { display: flex; gap: var(--space-25); flex-wrap: wrap; }
.br-acct-meta { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-caption); color: var(--color-ink-2); }
.br-acct-card__actions { display: flex; gap: var(--space-1); margin-top: var(--space-15); }
.br-acct-widget { display: flex; flex-direction: column; }

/* -------------------------------- Przyciski ------------------------------ */
.br-acct-btn { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--btn-height-sm); padding: 0 var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: none; color: var(--color-ink); font-family: var(--font-ui); font-size: var(--text-caption); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease; }
.br-acct-btn:hover { border-color: var(--color-action); color: var(--color-action-text); }
.br-acct-btn--primary { height: var(--btn-height); padding: 0 var(--space-4); border: 0; background: var(--color-action); color: var(--color-bg); font-size: var(--text-body); transition: background 0.18s ease; }
.br-acct-btn--primary:hover { background: var(--color-action-hover); color: var(--color-bg); }
.br-acct-btn--outline { height: var(--btn-height); padding: 0 var(--space-4); border: 1px solid var(--color-line); background: var(--color-bg); color: var(--color-ink); font-size: var(--text-body); }
.br-acct-btn--lg { height: 3rem; padding: 0 var(--space-25); font-size: var(--text-body-sm); }
.br-acct-btn--ink { height: 3rem; padding: 0 var(--space-3); border: 1px solid var(--color-ink); background: none; color: var(--color-ink); font-size: var(--text-body-sm); }
.br-acct-btn--danger:hover { border-color: var(--color-error); color: var(--color-error); }
.br-acct-btn--block { width: 100%; justify-content: center; }
.br-acct-btn--muted-plain { height: auto; padding: 0; border: 0; background: none; font-size: var(--text-body-sm); color: var(--color-ink-2); }
.br-acct-btn--plus { gap: var(--space-15); }
.br-acct-btn__plus { font-size: var(--text-body-lg); line-height: var(--text-body-lg-lh); }
.br-acct-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--color-line); border-radius: var(--radius-control); background: none; color: var(--color-ink); text-decoration: none; cursor: pointer; }
.br-acct-iconbtn:hover { border-color: var(--color-action); color: var(--color-action-text); }
.br-acct-linkrow { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.br-acct-back { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-body); font-weight: 600; color: var(--color-ink-2); text-decoration: none; }
.br-acct-back:hover { color: var(--color-action); }
.br-acct-form { margin: 0; }
/* --------------------------- Zakładki / toolbar -------------------------- */
.br-acct-tabs { display: flex; gap: var(--space-4); margin-top: var(--space-5); border-bottom: 1px solid var(--color-line); }
.br-acct-tab { border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 0.125rem var(--space-2); font-family: var(--font-ui); font-size: var(--text-body); font-weight: 600; color: var(--color-ink-2); text-decoration: none; }
.br-acct-tab:hover { color: var(--color-ink); }
.br-acct-tab.is-active { color: var(--color-ink); border-bottom-color: var(--color-action); }
.br-acct-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.br-acct-toolbar__right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.br-acct-switch { display: flex; gap: var(--space-1); border: 1px solid var(--color-line); border-radius: var(--radius-control); padding: var(--space-05); }
.br-acct-switch__btn { width: 1.875rem; height: 1.875rem; border-radius: var(--radius-control); display: flex; align-items: center; justify-content: center; background: transparent; }
.br-acct-switch__btn.is-active { background: var(--color-surface); }
.br-acct-selectpill { display: flex; align-items: center; gap: var(--space-1); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); margin: 0; }
.br-acct-selectpill__label { font-size: var(--text-caption); color: var(--color-ink-2); }
.br-acct-select { border: none; padding: 0; font-family: var(--font-ui); font-size: var(--text-caption); font-weight: 600; color: var(--color-ink); background: var(--color-bg); }

/* ---------------------------------- Lista -------------------------------- */
.br-acct-list { border: 1px solid var(--color-line); border-radius: var(--radius-card-lg); overflow: hidden; }
.br-acct-list__head { display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); padding: var(--space-15) var(--space-3); border-bottom: 1px solid var(--color-line); }
.br-acct-list__col { font-size: var(--text-badge); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-ink-3); }
.br-acct-list__col--main { flex: 1; min-width: 0; }
.br-acct-list__col--c { width: 3.5rem; text-align: center; }
.br-acct-list__col--r { width: 5.5rem; text-align: right; }
.br-acct-list__col--rw { width: 7.5rem; text-align: right; }
.br-acct-list__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); }
.br-acct-list__row:last-child { border-bottom: 0; }
.br-acct-list__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.br-acct-list__main--stack { flex-direction: column; align-items: flex-start; gap: var(--space-05); }
.br-acct-list__title { font-size: var(--text-body); font-weight: 600; color: var(--color-ink); text-decoration: none; }
.br-acct-list__sub { font-size: var(--text-caption); color: var(--color-ink-3); }
.br-acct-thumb { flex: none; width: 3rem; height: 2.25rem; border-radius: var(--radius-field); object-fit: cover; background: var(--color-surface); display: block; }
.br-acct-list__val { width: 5.5rem; text-align: right; font-size: var(--text-body); font-weight: 600; }
.br-acct-list__num { width: 5.5rem; text-align: right; font-size: var(--text-body); }
.br-acct-list__actions { width: 5.5rem; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.br-acct-list__actions--wide { width: 7.5rem; }
.br-acct-trend { width: 3.5rem; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: var(--text-caption); font-weight: 600; }
.br-acct-trend--up { color: var(--color-success); }
.br-acct-trend--down { color: var(--color-error); }
.br-acct-trend--flat { color: var(--color-ink-3); }
/* ------------------------------- Statystyki ------------------------------ */
.br-acct-pills { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; row-gap: var(--space-05); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: var(--space-05); }
.br-acct-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); font-size: var(--text-caption); font-weight: 600; text-decoration: none; color: var(--color-ink-2); }
.br-acct-pill.is-active { background: var(--color-ink); color: var(--color-bg); }
.br-acct-kpis { display: flex; flex-wrap: wrap; border: 1px solid var(--color-line); border-radius: var(--radius-card-lg); overflow: hidden; }
.br-acct-kpi { flex: 1; min-width: 9rem; padding: var(--space-25) var(--space-3); border-left: 1px solid var(--color-line); }
.br-acct-kpi:first-child { border-left: 0; }
.br-acct-chart { border: 1px solid var(--color-line); border-radius: var(--radius-card-lg); padding: var(--space-4); margin-top: var(--space-4); }
.br-acct-chart__bars { display: flex; align-items: flex-end; gap: var(--space-2); height: 8.75rem; }
.br-acct-chart__bar { flex: 1; min-width: 0; background: var(--color-action); border-radius: 6px 6px 0 0; }
.br-acct-chart__labels { display: flex; gap: var(--space-2); margin-top: var(--space-15); }
.br-acct-chart__label { flex: 1; min-width: 0; text-align: center; font-size: var(--text-badge); color: var(--color-ink-3); }
/* Wysokość słupka jako klasa (krok 5%) — bez atrybutu style. */
.br-acct-h5 { height: 5%; } .br-acct-h10 { height: 10%; } .br-acct-h15 { height: 15%; } .br-acct-h20 { height: 20%; }
.br-acct-h25 { height: 25%; } .br-acct-h30 { height: 30%; } .br-acct-h35 { height: 35%; } .br-acct-h40 { height: 40%; }
.br-acct-h45 { height: 45%; } .br-acct-h50 { height: 50%; } .br-acct-h55 { height: 55%; } .br-acct-h60 { height: 60%; }
.br-acct-h65 { height: 65%; } .br-acct-h70 { height: 70%; } .br-acct-h75 { height: 75%; } .br-acct-h80 { height: 80%; }
.br-acct-h85 { height: 85%; } .br-acct-h90 { height: 90%; } .br-acct-h95 { height: 95%; } .br-acct-h100 { height: 100%; }

/* ------------------------------ Zapytania -------------------------------- */
.br-acct-chips { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.br-acct-chips--top { margin-top: var(--space-3); }
.br-acct-chip { display: inline-flex; align-items: center; gap: var(--space-05); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-ink-2); font-size: var(--text-caption); font-weight: 600; text-decoration: none; }
.br-acct-chip.is-active { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
.br-acct-chip--neu { color: var(--color-action-text); }
.br-acct-chip--termin { color: var(--color-success); }
.br-acct-chip--done { color: var(--color-ink-3); }
.br-acct-search { display: flex; align-items: center; gap: var(--space-15); flex: 1; min-width: 12rem; max-width: 22.5rem; height: var(--field-height); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 0 var(--space-2); margin: 0; }
.br-acct-search__input { flex: 1; border: none; background: none; height: 100%; font-family: var(--font-ui); font-size: var(--text-body); color: var(--color-ink); outline: none; }
.br-acct-search__icon { color: var(--color-ink-2); flex: none; }
.br-acct-reqs { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.br-acct-req { border: 1px solid var(--color-line); border-radius: var(--radius-surface); padding: var(--space-3); }
.br-acct-req__head { display: flex; align-items: center; gap: var(--space-2); }
.br-acct-req__avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink-2); font-size: var(--text-body-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.br-acct-req__id { min-width: 0; }
.br-acct-req__name { font-weight: 600; }
.br-acct-req__date { font-size: var(--text-caption); color: var(--color-ink-3); }
.br-acct-req__status { margin-left: auto; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: 600; background: var(--color-surface); color: var(--color-ink-2); }
.br-acct-req__status--neu { background: var(--color-action-tint); color: var(--color-action-text); }
.br-acct-req__status--termin { background: var(--color-success-tint); color: var(--color-success); }
.br-acct-req__status--done { background: var(--color-surface); color: var(--color-ink-3); }
.br-acct-req__msg { margin: var(--space-2) 0; font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); }
.br-acct-req__actions { display: flex; gap: var(--space-3); }
.br-acct-req__actions a { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-action-text); text-decoration: none; }

/* ------------------------ Statystyki / zakres / wykres -------------------- */
.br-acct-range { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; row-gap: var(--space-05); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: var(--space-05); }
.br-acct-chart__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.br-acct-chart__title { font-size: var(--text-body); font-weight: 600; }
.br-acct-chart__toggle { display: flex; align-items: center; gap: var(--space-05); border: 1px solid var(--color-line); border-radius: var(--radius-control); padding: var(--space-1) var(--space-15); background: none; cursor: pointer; color: var(--color-ink-2); font-family: var(--font-ui); font-size: var(--text-caption); font-weight: 600; }
.br-acct-bench { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.br-acct-perf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.br-acct-perf__left { display: flex; align-items: baseline; gap: var(--space-1); }
.br-acct-metrics { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--color-line); }
/* Karty na stronie „Projekte verwalten” — metryki mniejsze niż w zakładce statystyk. */
.br-acct-metrics--compact { margin-top: 0; padding-top: 0; border-top: 0; gap: var(--space-3); }
.br-acct-metrics--compact .br-acct-metric__value { font-size: var(--text-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.br-acct-metrics--compact .br-acct-metric__label { font-size: var(--text-caption); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-ink-3); margin-top: 0; }
.br-acct-list--loading { opacity: 0.55; transition: opacity 0.15s ease; }
.br-acct-metric__value { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.03em; line-height: var(--text-h2-lh); }
.br-acct-metric__label { font-size: var(--text-badge); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-ink-3); margin-top: var(--space-05); }
.br-acct-warn { display: flex; align-items: center; gap: var(--space-05); font-size: var(--text-caption); font-weight: 600; color: var(--color-error); }
.br-acct-export { display: flex; align-items: center; gap: var(--space-1); background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: var(--space-15) var(--space-2); font-size: var(--text-caption); font-weight: 600; }
.br-acct-iconbtn--lg { width: 2rem; height: 2rem; }

/* --------------------------- Wiersze zapytań ----------------------------- */
.br-acct-reqrow { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-25) var(--space-3); border-bottom: 1px solid var(--color-line); }
.br-acct-reqrow:last-child { border-bottom: 0; }
.br-acct-reqrow__avatar { flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-size: var(--text-body-sm); font-weight: 600; color: var(--color-ink-2); }
.br-acct-reqrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-05); }
.br-acct-reqrow__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.br-acct-reqrow__id { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.br-acct-reqrow__name { font-size: var(--text-body); font-weight: 600; }
.br-acct-reqrow__date { font-size: var(--text-caption); color: var(--color-ink-3); flex-shrink: 0; }
.br-acct-reqrow__msg { font-size: var(--text-body-sm); color: var(--color-ink-2); }
.br-acct-reqrow__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-05); }
.br-acct-reqrow__actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.br-acct-metaitem { display: flex; align-items: center; gap: var(--space-05); font-size: var(--text-caption); color: var(--color-ink-3); }
.br-acct-statuspill { background: var(--color-surface); border-radius: var(--radius-pill); padding: 3px 9px; font-size: 11px; font-weight: 600; color: var(--color-ink-2); }
.br-acct-statuspill--neu { background: var(--color-action-tint); color: var(--color-action-text); }
.br-acct-statuspill--termin { background: var(--color-success-tint); color: var(--color-success); }
.br-acct-statuspill--done { background: var(--color-surface); color: var(--color-ink-3); }
.br-acct-empty { padding: var(--space-4) var(--space-3); text-align: center; font-size: var(--text-body); color: var(--color-ink-2); }
.br-acct-alert { border: 1px solid var(--color-line); border-radius: var(--radius-field); padding: var(--space-2) var(--space-3); font-size: var(--text-body); margin-bottom: var(--space-2); }
.br-acct-alert--error { border-left: 3px solid var(--color-error); color: var(--color-error); }
.br-acct-alert--success { color: var(--color-success); }
/* --------------------------------- Formularz ----------------------------- */
.br-acct-formgrid { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-5); align-items: start; }
/* Grid/flex item nie może wymuszać min-content większego niż tor siatki. */
.br-acct-formgrid > * { min-width: 0; }
.br-acct-formmain { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.br-acct-g2 > *, .br-acct-g3 > *, .br-acct-drops > *, .br-acct-repeat__row > * { min-width: 0; }
.br-acct-input { width: 100%; min-width: 0; }
.br-acct-textarea { width: 100%; min-width: 0; }
.br-acct-box { border: 1px solid var(--color-line); border-radius: var(--radius-surface); padding: var(--space-4); background: var(--color-bg); }
.br-acct-box--mt { margin-top: var(--space-3); }
.br-acct-box__step { font-size: var(--text-caption); font-weight: 700; letter-spacing: var(--text-badge-track); text-transform: uppercase; color: var(--color-ink-3); margin-bottom: var(--space-1); }
.br-acct-box__title { font-size: var(--text-body-lg); font-weight: 700; letter-spacing: -0.015em; margin-bottom: var(--space-3); }
.br-acct-box__title--tight { margin-bottom: var(--space-1); }
.br-acct-box__text { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); margin: 0 0 var(--space-3); }
.br-acct-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.br-acct-g2--wide { gap: var(--space-25); }
.br-acct-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-3); }
.br-acct-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-body-sm); font-weight: 600; margin-bottom: var(--space-2); }
.br-acct-field--flat { margin-bottom: 0; }
.br-acct-input { border: 1px solid var(--color-line); border-radius: var(--radius-field); height: var(--field-height); padding: 0 var(--space-2); font-family: var(--font-ui); font-size: var(--text-body); color: var(--color-ink); background: var(--color-bg); }
.br-acct-input--grow { flex: 1; }
.br-acct-textarea { border: 1px solid var(--color-line); border-radius: var(--radius-field); padding: var(--space-2); font-family: var(--font-ui); font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink); background: var(--color-bg); resize: vertical; }
.br-acct-choice { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); height: 2.5rem; padding: 0 var(--space-15); border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-bg); color: var(--color-ink); font-size: var(--text-caption); font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; }
.br-acct-choice:hover { border-color: var(--color-action); }
/* Zaznaczony chip (typ domu, status, dach) — tło czarne, jak w makiecie.
   `:has()` działa od razu po kliknięciu (bez JS); klasa `is-active` zostaje
   jako stan z serwera i fallback dla starszych przeglądarek. */
.br-acct-choice.is-active,
.br-acct-choice:has(input:checked) { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-bg); }
.br-acct-choice--pill { height: var(--btn-height-sm); padding: 0 var(--space-25); border-radius: var(--radius-pill); font-size: var(--text-body); }
.br-acct-choice:focus-within { box-shadow: var(--focus-ring); }
.br-acct-choice input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.br-acct-choice__icon { width: 17px; height: 17px; object-fit: contain; flex: none; }
/* Ikony (pliki SVG) na czarnym chipie mają być białe. */
.br-acct-choice.is-active .br-acct-choice__icon,
.br-acct-choice:has(input:checked) .br-acct-choice__icon { filter: brightness(0) invert(1); }
.br-acct-fieldhint { font-size: var(--text-body-sm); font-weight: 600; margin-bottom: var(--space-15); }
.br-acct-check { display: flex; align-items: flex-start; gap: var(--space-15); font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); margin-bottom: var(--space-2); }
.br-acct-check:last-child { margin-bottom: 0; }
.br-acct-check input { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; accent-color: var(--color-action); }
.br-acct-repeat { display: flex; flex-direction: column; gap: var(--space-15); }
.br-acct-repeat__row { display: flex; align-items: center; gap: var(--space-15); }
.br-acct-repeat__n { flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink-2); font-size: var(--text-badge); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.br-acct-repeat__remove { flex: none; border: 0; background: none; color: var(--color-ink-3); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.br-acct-repeat__add { margin-top: var(--space-2); }
/* -------------------------------- Dropzones ------------------------------- */
.br-acct-drops { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-25); }
.br-acct-drop { position: relative; border: 1px dashed var(--color-line); border-radius: var(--radius-card-lg); padding: var(--space-4) var(--space-3); background: var(--color-surface); text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.br-acct-drop:hover { border-color: var(--color-action); }
.br-acct-drop.is-dragover { border-style: solid; border-color: var(--color-action); background: var(--color-action-tint); box-shadow: var(--focus-ring); }
.br-acct-drop.is-uploading { border-color: var(--color-action); }
.br-acct-drop__state.is-error { color: var(--color-error); }
.br-acct-btn.is-disabled { opacity: 0.45; cursor: default; }
.br-acct-drop.is-dragover .br-acct-drop__title { color: var(--color-action-text); }
.br-acct-drop__title { font-size: var(--text-body); font-weight: 600; margin-bottom: var(--space-1); }
.br-acct-drop__hint { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); color: var(--color-ink-2); }
.br-acct-drop__cta { display: block; margin-top: var(--space-15); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-action-text); }
.br-acct-drop__input { display: none; }
.br-acct-drop__state { margin-top: var(--space-2); font-size: var(--text-caption); color: var(--color-ink-3); }
.br-acct-drop__list { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: center; margin-top: var(--space-2); }
.br-acct-drop__item { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 8px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-bg); font-size: 11px; color: var(--color-ink-2); }

/* ------------------------- Podgląd (aside formularza) --------------------- */
.br-acct-asideform { position: sticky; top: 2rem; border: 1px solid var(--color-line); border-radius: var(--radius-surface); overflow: hidden; }
.br-acct-preview__media { aspect-ratio: 16/10; background: var(--color-surface); display: flex; align-items: center; justify-content: center; }
.br-acct-preview__media span { font-size: var(--text-caption); color: var(--color-ink-3); }
.br-acct-preview__body { padding: var(--space-3); }
.br-acct-preview__label { font-size: var(--text-caption); font-weight: 700; letter-spacing: var(--text-badge-track); text-transform: uppercase; color: var(--color-ink-3); margin-bottom: var(--space-2); }
.br-acct-preview__name { font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-1); }
.br-acct-preview__meta { font-size: var(--text-body); color: var(--color-ink-2); margin-bottom: var(--space-3); }
.br-acct-preview__rows { display: flex; flex-direction: column; gap: var(--space-15); border-top: 1px solid var(--color-line); padding-top: var(--space-25); }
.br-acct-preview__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: var(--text-body); }
.br-acct-preview__row span:first-child { color: var(--color-ink-2); }
.br-acct-preview__row span:last-child { font-weight: 600; text-align: right; }
.br-acct-preview__actions { display: flex; flex-direction: column; gap: var(--space-15); margin-top: var(--space-3); }
.br-acct-formactions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* ------------------------------ Profil / hero ----------------------------- */
.br-acct-badge { display: inline-flex; align-items: center; gap: var(--space-1); border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-bg); border-radius: var(--radius-pill); padding: var(--space-05) var(--space-15); font-size: var(--text-badge); font-weight: 700; letter-spacing: var(--text-label-track); text-transform: uppercase; }
.br-acct-badge--outline { border-color: var(--color-disabled); background: none; color: var(--color-ink-2); }
.br-acct-badge-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-25); }
.br-acct-profile-grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5); align-items: start; }
.br-acct-portrait { aspect-ratio: 4/5; border-radius: var(--radius-card-lg); overflow: hidden; background: var(--color-surface); margin-bottom: var(--space-15); }
.br-acct-portrait--top { margin-bottom: 0; }
.br-acct-portrait__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.br-acct-portrait-actions { display: flex; align-items: center; gap: var(--space-15); flex-wrap: wrap; }
.br-acct-portrait-note { font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-ink-3); margin-top: var(--space-15); }
/* Miejsce na portret bez zdjęcia (po „Usuń”). */
.br-acct-portrait__empty { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); color: var(--color-ink-3); }
.br-acct-portrait__empty-text { font-size: var(--text-caption); line-height: var(--text-caption-lh); }

/* --------------------------------- Modale -------------------------------- */
.br-acct-modal { border: 1px solid var(--color-line); border-radius: var(--radius-card-lg); background: var(--color-bg); color: var(--color-ink); padding: 0; width: min(26rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); margin: auto; }
.br-acct-modal::backdrop { background: rgba(43, 38, 34, 0.45); }
.br-acct-modal__inner { padding: var(--space-4); }
.br-acct-modal--wide { width: min(34rem, calc(100vw - 2rem)); }
.br-acct-modal__title { font-size: var(--text-body-lg); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 var(--space-1); }
.br-acct-modal__text { font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-ink-2); margin: 0 0 var(--space-3); }
.br-acct-modal__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.br-acct-modal__done { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-success); }
.br-acct-modal .br-acct-drop { padding: var(--space-3); }
.br-acct-hero { display: grid; grid-template-columns: 0.85fr 1fr; gap: 4.5rem; align-items: start; }
.br-acct-hero__body { padding-top: var(--space-1); }
.br-acct-savebar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-25); flex-wrap: wrap; }
.br-acct-savebar__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.br-acct-plan { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.br-acct-plan__note { font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-ink-3); margin-top: var(--space-3); padding-top: var(--space-25); border-top: 1px solid var(--color-line); }
.br-acct-cta { border-top: 1px solid var(--color-line); padding-top: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

.br-acct-sec--inner { max-width: 62.5rem; margin: 0 auto; padding: 0 var(--space-4); }
.br-acct-band .br-acct-box--on-surface .br-acct-plan__note { border-top-color: var(--color-surface); }
.br-acct-portrait-remove { color: var(--color-ink-2); font-size: var(--text-caption); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.br-acct-portrait-remove:hover { color: var(--color-action); }

/* ----------------------------- Ikony (B2B) ------------------------------- */
.br-b2b-chevron-left { --icon: url('../img/icons/chevron-left.svg'); }
.br-b2b-chevron-down { --icon: url('../img/icons/chevron-down.svg'); }
.br-b2b-burger-close { --icon: url('../img/icons/close.svg'); }
.br-b2b-user-avatar { background-color: var(--color-surface); }
.br-b2b-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ------------------------------ Responsywność ----------------------------- */
@media (max-width: 1024px) {
	.br-acct-formgrid { grid-template-columns: 1fr; }
	/* Makieta „Projekt anlegen": na wąskim ekranie podgląd idzie NAD formularz. */
	.br-acct-asideform { order: -1; position: static; }
}
@media (max-width: 900px) {
	.br-acct-login__grid { grid-template-columns: 1fr; }
	.br-acct-aside { order: 2; }
	.br-acct-grid3 { grid-template-columns: repeat(2, 1fr); }
	.br-acct-status { grid-template-columns: 1fr 1fr; }
	.br-acct-profile-grid { grid-template-columns: 1fr; gap: var(--space-4); }
	.br-acct-g2, .br-acct-drops { grid-template-columns: 1fr; }
	.br-acct-hero { grid-template-columns: 1fr; gap: var(--space-4); }
	.br-acct-kpi { min-width: 8rem; }
}
@media (max-width: 768px) {
	.br-acct-grid3 { grid-template-columns: 1fr; }
	.br-acct-g2, .br-acct-g3 { grid-template-columns: 1fr; }
	.br-acct-search { max-width: none; width: 100%; }
}
@media (max-width: 640px) {
	.br-acct-login { padding-left: var(--space-3); padding-right: var(--space-3); }
	.br-acct-status { grid-template-columns: 1fr; }
	.br-acct-status__item { border-left: 0; border-top: 1px solid var(--color-line); }
	.br-acct-status__item:first-child { border-top: 0; }
	.br-acct-kpi { border-left: 0; border-top: 1px solid var(--color-line); }
	.br-acct-kpi:first-child { border-top: 0; }
}