/*
 * SerwisApp — wspólna tożsamość wizualna (ładowana zaraz po Tablerze we wszystkich układach: strona produktu,
 * logowanie, aplikacja, kreator, portal klienta, strona zdjęć na telefonie, panel platformy).
 * Jeden kolor główny dla całego produktu: Tabler wylicza z --tblr-primary wszystkie odcienie (przyciski, linki,
 * tła -lt), więc wystarczy go nadpisać. Gradient marki — ten sam w panelu logowania, hero strony i zachętach.
 */
:root, [data-bs-theme] {
    --brand-blue: #2563eb;
    --brand-blue-dark: #1d4ed8;
    --brand-navy: #1e3a8a;
    --brand-indigo: #4f46e5;
    --brand-violet: #7c3aed;
    --brand-sky: #0ea5e9;
    --brand-gradient: radial-gradient(900px 500px at 110% 110%, rgba(124, 58, 237, .55), transparent 60%),
        radial-gradient(700px 400px at -10% -10%, rgba(14, 165, 233, .45), transparent 60%),
        linear-gradient(135deg, var(--brand-navy), var(--brand-blue-dark) 55%, #4338ca);
    --brand-dots: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);

    --tblr-primary: #2563eb;
    --tblr-primary-rgb: 37, 99, 235;
    --tblr-primary-lt-rgb: 233, 240, 253;
}

/* Powierzchnia w gradiencie marki (panel logowania, hero strony, zachęty) z delikatnym wzorem kropek. */
.brand-surface { position: relative; overflow: hidden; color: #fff; background: var(--brand-gradient); }
.brand-surface::after { content: ""; position: absolute; inset: 0; background-image: var(--brand-dots); background-size: 22px 22px; pointer-events: none; }
.brand-surface > * { position: relative; z-index: 1; }

/* Znak marki na ciemnym tle: logo w białym kafelku (jak w panelu logowania). */
.brand-mark { display: inline-block; padding: .3rem; border-radius: .6rem; background: rgba(255, 255, 255, .95); }