/* ============================================================
   01. PODSTAWY STRONY
   - reset
   - Verdana
   - podstawowe kolory i tło
   ============================================================ */
* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    min-height:100vh;
    background-color:#050811;
    background-image:radial-gradient(circle at 8% 5%,rgba(128,64,235,.11),transparent 28rem),radial-gradient(circle at 90% 92%,rgba(32,230,126,.05),transparent 32rem);
    color:#ffffff;
    font-family:Verdana, Arial, sans-serif;
    line-height:1.45;
}

a {
    color:inherit;
    text-decoration:none;
}

button,input,select,textarea {
    font-family:Verdana, Arial, sans-serif;
}

button {
    font-size:13px;
}

input,select,textarea {
    font-size:13px;
}

svg {
    display:block;
}

/* ============================================================
   02. Główny układ aplikacji, sidebar i menu
   ============================================================ */
.app-shell {
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    min-height:100vh;
}

.sidebar {
    position:sticky;
    top:0;
    height:100vh;
    padding:18px 14px;
    border-right:1px solid rgba(148,163,184,.16);
    background:linear-gradient(180deg,rgba(8,10,21,.98),rgba(5,8,15,.99));
    overflow:auto;
}

.brand {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-bottom:18px;
}

.brand-logo {
    width:82px;
    height:82px;
    display:grid;
    place-items:center;
    margin-bottom:10px;
    border:3px solid transparent;
    border-radius:50%;
    background:linear-gradient(#0a0f19,#0a0f19) padding-box,linear-gradient(145deg,#25ef78,#a15cff) border-box;
    box-shadow:0 0 24px rgba(136,73,246,.12);
}

.brand-logo svg {
    width:38px;
    height:38px;
    color:#a15cff;
}

.brand-name {
    display:block;
    font-size:15px;
}

.brand-tagline {
    display:block;
    margin-top:3px;
    color:#25ef78;
    font-size:11px;
    font-weight:700;
    line-height:1.45;
}

.nav {
    display:grid;
    gap:12px;
}

.nav-group {
    display:grid;
    gap:5px;
}

.nav-label {
    padding:0 6px;
    color:#748198;
    font-size:9px;
    font-weight:800;
    letter-spacing:.18em;
}

.nav-item {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:39px;
    padding:8px 10px;
    border:1px solid transparent;
    border-radius:10px;
    color:#9aa6b8;
    font-size:12px;
    font-weight:700;
}

.nav-item svg {
    width:17px;
    height:17px;
    flex:0 0 17px;
}

.nav-item:hover {
    color:#fff;
    background:rgba(255,255,255,.025);
}

.nav-item.active {
    color:#fff;
    border-color:rgba(161,92,255,.38);
    background:linear-gradient(90deg,rgba(121,55,224,.23),rgba(121,55,224,.07));
}

/* ============================================================
   03. Górny pasek portalu i konto użytkownika
   ============================================================ */
.main {
    min-width:0;
    padding:0 24px 34px;
}

.topbar {
    height:66px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(148,163,184,.09);
}

.topbar-brand {
    font-size:14px;
    font-weight:700;
}

.online-dot {
    display:inline-block;
    width:6px;
    height:6px;
    margin-left:4px;
    border-radius:50%;
    background:#25ef78;
    box-shadow:0 0 8px rgba(37,239,120,.75);
}

.top-actions {
    display:flex;
    align-items:center;
    gap:8px;
}

.icon-button,.points-pill,.account-button {
    min-height:38px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:10px;
    background:#0a101b;
    color:#e5eaf1;
}

.icon-button {
    width:38px;
    display:grid;
    place-items:center;
    position:relative;
}

.icon-button svg {
    width:17px;
}

.icon-button.has-counter>span {
    position:absolute;
    right:3px;
    top:2px;
    min-width:15px;
    height:15px;
    padding:0 3px;
    border-radius:99px;
    background:#151d2b;
    color:#b8c3d3;
    font-size:9px;
    display:grid;
    place-items:center;
}


/* Animacja nowych wiadomości - jednoznacznie związana z klasą .has-counter.
   Kolorowy segment porusza się po obramowaniu przycisku wiadomości. */
@property --message-angle {
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}

.icon-button.has-counter {
    isolation:isolate;
    --message-angle:0deg;
}

.icon-button.has-counter::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    padding:1px;
    border-radius:10px;
    pointer-events:none;
    background:conic-gradient(
        from var(--message-angle),
        transparent 0deg,
        transparent 314deg,
        rgba(37,239,120,.16) 320deg,
        #25ef78 330deg,
        #8a5cff 342deg,
        #a15cff 351deg,
        rgba(161,92,255,.16) 357deg,
        transparent 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:message-border-lap 2400ms linear infinite;
}

.icon-button.has-counter>svg,
.icon-button.has-counter>span {
    position:relative;
    z-index:2;
}

.icon-button.has-counter>span {
    position:absolute;
}

@keyframes message-border-lap {
    0% {
        --message-angle:0deg;
        opacity:.35;
    }
    10% {
        opacity:1;
    }
    90% {
        opacity:1;
    }
    100% {
        --message-angle:360deg;
        opacity:.35;
    }
}

.points-pill {
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 11px;
    font-size:12px;
}

.points-pill svg {
    width:16px;
    color:#25ef78;
}

.account-menu {
    position:relative;
}

.account-button {
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 9px;
    cursor:pointer;
}

.account-avatar {
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:linear-gradient(135deg,#25ef78,#a15cff);
    font-weight:800;
}

.account-copy {
    text-align:left;
}


.account-name {
    display:block;
    font-family:Verdana, Arial, sans-serif;
    font-size:11px;
    font-weight:700;
    line-height:1.3;
    color:#ffffff;
}

.account-role {
    display:block;
    margin-top:2px;
    font-family:Verdana, Arial, sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:1.3;
    color:#8fa0b8;
}

.account-button>svg {
    width:14px;
}

.account-panel {
    position:absolute;
    right:0;
    top:44px;
    z-index:30;
    width:180px;
    padding:6px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:11px;
    background:#0a111d;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.account-panel a {
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px;
    border-radius:8px;
    color:#cfd7e3;
    font-size:12px;
}

.account-panel a:hover {
    background:rgba(161,92,255,.08);
}

.account-panel svg {
    width:15px;
}



/* ------------------------------------------------------------
   03.1. Rozwijane menu konta
   ------------------------------------------------------------ */
.account-panel[hidden] {
    display:none!important;
}

.account-panel.is-open {
    display:block!important;
}

/* ============================================================
   04. Kontener treści i pasek diagnostyczny wzorca
   ============================================================ */
.content {
    max-width:1480px;
    margin:0 auto;
    padding-top:22px;
}

.template-status {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
    padding:8px 10px;
    border:1px dashed rgba(161,92,255,.28);
    border-radius:10px;
    background:rgba(161,92,255,.035);
    color:#9ca9bb;
    font-size:12px;
}

.text-emphasis {
    color:#dfe6ef;
}

.js-state.ok {
    color:#25ef78;
    font-weight:800;
}

.js-state.fail {
    color:#ff5677;
    font-weight:800;
}

.js-state.pending {
    color:#f4c84b;
}

/* ============================================================
   05. Standardowy nagłówek strony i klasy tytułów
   ============================================================ */
.page-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.page-header-identity {
    display:flex;
    align-items:center;
    gap:14px;
}

.page-header-icon {
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(161,92,255,.32);
    border-radius:12px;
    background:rgba(161,92,255,.08);
    color:#a15cff;
}

.page-header-icon svg {
    width:22px;
}

.page-header-copy {
    min-width:0;
}

.eyebrow {
    display:inline-flex;
    align-items:center;
    min-height:22px;
    padding:0 8px;
    border:1px solid rgba(161,92,255,.28);
    border-radius:999px;
    background:rgba(161,92,255,.06);
    color:#c696ff;
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
	margin-bottom: 5px;
}

.text-page-title {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:23px;
    font-weight:700;
    line-height:1.2;
    color:#ffffff;
}

.text-section-title {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:18px;
    font-weight:700;
    line-height:1.25;
    color:#ffffff;
}

.text-card-title {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.3;
    color:#ffffff;
}

.text-body {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:13px;
    font-weight:400;
    line-height:1.55;
    color:#d7dee8;
}

.text-description {
    margin:6px 0 0;
    font-family:Verdana, Arial, sans-serif;
    font-size:13px;
    font-weight:400;
    line-height:1.55;
    color:#8fa0b8;
}

.text-meta {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.4;
    color:#8fa0b8;
}

.text-field-label {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:700;
    line-height:1.35;
    color:#ffffff;
}

.text-value {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:17px;
    font-weight:700;
    line-height:1.2;
    color:#ffffff;
}

.text-value-large {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:28px;
    font-weight:700;
    line-height:1;
    color:#ffffff;
}

/* Wyjątki typograficzne dotyczą wyłącznie komponentów interfejsu:
   menu, przyciski, badge, eyebrow, liczniki ikon i elementy jQuery UI. */

.page-header-actions {

    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.refresh-indicator {
    min-height:36px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 11px;
    border:1px solid rgba(37,239,120,.20);
    border-radius:10px;
    background:rgba(37,239,120,.045);
    color:#9bf6ba;
    font-size:11px;
    font-weight:700;
}

.refresh-indicator svg {
    width:15px;
}



/* ============================================================
   06. Panele oraz nagłówki sekcji
   ============================================================ */
.panel {
    border:1px solid rgba(148,163,184,.16);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(14,20,33,.96),rgba(8,13,23,.96));
}

.specimen {
    margin-top:16px;
    padding:16px;
}

.section-title {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:14px;
}

.section-title.outside {
    margin-bottom:12px;
}

.eyebrow + .text-section-title,
.eyebrow + .text-card-title {
    margin-top:4px;
}

.split-title {
    align-items:flex-start;
}

/* ============================================================
   07. TYPOGRAFIA
   Każdy typ tekstu ma własną klasę i konkretne wartości.
   Nie używamy H1/H2/H3 do sterowania wyglądem.
   Nie używamy zmiennych CSS do rozmiarów czcionek.
   ============================================================ */
.type-grid {
    overflow:hidden;
    border:1px solid rgba(148,163,184,.16);
    border-radius:12px;
}

.type-sample {
    display:grid;
    grid-template-columns:120px minmax(260px,1fr) minmax(260px,1fr);
    align-items:center;
    gap:18px;
    min-height:54px;
    padding:11px 12px;
    border-bottom:1px solid rgba(148,163,184,.16);
}

.type-sample:last-child {
    border-bottom:0;
}

.points-value {
    font-weight:700;
    color:#ffffff;
}


.brand-name {
    display:block;
    font-size:15px;
    font-weight:700;
    color:#ffffff;
}

.counter-value {
    margin-left:4px;
    color:#ffffff;
    font-weight:700;
}


/* ============================================================
   08. TEKSTY KOMPONENTÓW
   Każda klasa jest autonomiczna. Nie dziedziczymy typografii
   z klas ogólnych i nie nadpisujemy ich przez klasę rodzica.
   ============================================================ */

.metric-label {
    display:block;
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.4;
    color:#8594a9;
}

.metric-value {
    display:block;
    margin:4px 0 0;
    font-family:Verdana, Arial, sans-serif;
    font-size:17px;
    font-weight:700;
    line-height:1.2;
    color:#ffffff;
}

.profile-username {
    margin:3px 0 0;
    font-family:Verdana, Arial, sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:1.4;
    color:#8fa0b8;
}

.confidence-label {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.35;
    color:#cfd7e2;
    white-space:nowrap;
}

.confidence-value {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:28px;
    font-weight:700;
    line-height:1;
    color:#ffffff;
}

.field-label {
    display:block;
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    color:#ffffff;
}

.field-description {
    display:block;
    margin-top: 5px;
	margin-bottom: 5px;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.4;
    color:#8fa0b8;
}

.switch-title {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:13px;
    font-weight:400;
    line-height:1.55;
    color:#d7dee8;
}

.switch-description {
    margin:3px 0 0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.4;
    color:#8fa0b8;
}

.toolbar-meta {
    margin-left:auto;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.4;
    color:#8fa0b8;
    white-space:nowrap;
}

.score-label {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:700;
    line-height:1.35;
    color:#ffffff;
}

.score-value {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:17px;
    font-weight:700;
    line-height:1.2;
    color:#25ef78;
}

.score-card.negative .score-value {
    color:#ff5677;
}

.score-description {
    display:block;
    margin:8px 0 0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.4;
    color:#8fa0b8;
}

.table-primary {
    display:block;
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.4;
    color:#ffffff;
}

.table-meta {
    display:block;
    margin:3px 0 0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.4;
    color:#8fa0b8;
}

.table-footer-text {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:1.4;
    color:#8fa0b8;
}

.notice-title {
    display:block;
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:700;
    line-height:1.35;
    color:#ffffff;
}

.notice-description {
    margin:3px 0 0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.45;
    color:#8fa0b8;
}

.empty-title {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.35;
    color:#dce3ec;
}

.empty-description {
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.45;
    color:#8fa0b8;
}

.chart-placeholder-label {
    position:absolute;
    margin:0;
    font-family:Verdana, Arial, sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:1.4;
    color:#8fa0b8;
}

/* ============================================================
   09. Przyciski, badge, etykiety i przyciski pomocy
   ============================================================ */
.component-row {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
}

.component-row:first-of-type {
    margin-top:0;
}

.component-row.compact {
    margin-top:8px;
}

.component-row.align-center {
    align-items:center;
}

.btn {
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 12px;
    border:1px solid transparent;
    border-radius:9px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    transition:.15s;
}

.btn svg {
    width:15px;
}

.btn-primary {
    background:linear-gradient(135deg,#7635e8,#aa58ff);
    color:#fff;
    box-shadow:0 8px 20px rgba(123,55,226,.16);
}

.btn-green {
    border-color:rgba(37,239,120,.24);
    background:rgba(37,239,120,.07);
    color:#95f6b4;
}

.btn-dark {
    border-color:rgba(148,163,184,.16);
    background:#0a111d;
    color:#d6dee9;
}

.btn-danger {
    border-color:rgba(255,86,119,.26);
    background:rgba(255,86,119,.07);
    color:#ff91a7;
}

.btn:disabled {
    opacity:.42;
    cursor:not-allowed;
}

.btn.is-loading svg {
    animation:spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}

.badge {
    display:inline-flex;
    align-items:center;
    min-height:23px;
    padding:0 8px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:8px;
    background:#0a111d;
    color:#aeb8c7;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.badge-green {
    border-color:rgba(37,239,120,.23);
    background:rgba(37,239,120,.06);
    color:#77f3a0;
}

.badge-purple {
    border-color:rgba(161,92,255,.27);
    background:rgba(161,92,255,.07);
    color:#c69aff;
}

.badge-yellow {
    border-color:rgba(244,200,75,.24);
    background:rgba(244,200,75,.06);
    color:#f8d56c;
}

.badge-red {
    border-color:rgba(255,86,119,.24);
    background:rgba(255,86,119,.06);
    color:#ff879f;
}

.label-with-help {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#cfd7e2;
    font-size:12px;
}

.help-button {
    width:19px;
    height:19px;
    min-width:19px;
    padding:0;
    border:1px solid rgba(161,92,255,.34);
    border-radius:50%;
    background:rgba(161,92,255,.08);
    color:#c99eff;
    font-size:11px;
    font-weight:800;
    line-height:17px;
    text-align:center;
    cursor:help;
}

/* ============================================================
   10. Karty metryk oraz karta profilu
   ============================================================ */
.metric-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.metric-card {
    min-width:0;
    min-height:78px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:12px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:12px;
    background:#0a111c;
}

.metric-card > div:last-child {
    min-width:0;
}

.metric-icon {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
}

.metric-icon svg {
    width:19px;
}

.metric-icon.cyan {
    background:rgba(53,184,239,.08);
    color:#35b8ef;
}

.metric-icon.green {
    background:rgba(37,239,120,.08);
    color:#25ef78;
}

.metric-icon.purple {
    background:rgba(161,92,255,.09);
    color:#a15cff;
}

.metric-icon.yellow {
    background:rgba(244,200,75,.08);
    color:#f4c84b;
}

.profile-hero {
    margin-top:12px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:radial-gradient(circle at 0 0,rgba(161,92,255,.12),transparent 25rem),radial-gradient(circle at 100% 100%,rgba(37,239,120,.05),transparent 22rem),linear-gradient(145deg,#0d1321,#09101a);
}

.profile-identity {
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.profile-avatar {
    width:64px;
    height:64px;
    flex:0 0 64px;
    display:grid;
    place-items:center;
    border:1px solid rgba(161,92,255,.34);
    border-radius:50%;
    color:#a15cff;
}

.profile-avatar svg {
    width:28px;
}

.confidence-card {
    width:220px;
    min-width:220px;
    padding:12px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    border:1px solid rgba(37,239,120,.18);
    border-radius:13px;
    background:rgba(8,18,22,.72);
    text-align:center;
}

/* ============================================================
   11. Formularze i kontrolki
   ============================================================ */
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.field {
    display:block;
    min-width:0;
}

.field-wide {
    grid-column:1/-1;
}

.field input[type=text],.field input[type=password],.field input[type=search],.field textarea {
    width:100%;
    margin-top:7px;
    padding:0 10px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:9px;
    background:#070d16;
    color:#f3f6fb;
    outline:0;
}

.field input[type=text],.field input[type=password],.field input[type=search] {
    height:38px;
}

.field textarea {
    min-height:88px;
    padding-top:9px;
    padding-bottom:9px;
    resize:vertical;
}

.field input:focus,.field textarea:focus {
    border-color:rgba(161,92,255,.56);
    box-shadow:0 0 0 3px rgba(161,92,255,.08);
}

.field-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

/* ============================================================
   11.1. Przełączniki włącz / wyłącz
   ============================================================ */
.switch-list {
    display:grid;
    gap:8px;
    margin-top:8px;
}

.switch-row {
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:10px 12px;
    border:1px solid #202b3a;
    border-radius:10px;
    background:#0a111c;
}

.switch-row > div {
    min-width:0;
}

.switch-control {
    width:46px;
    height:24px;
    flex:0 0 46px;
    position:relative;
    padding:0;
    border:1px solid #334155;
    border-radius:999px;
    background:#131c28;
    cursor:pointer;
    transition:background .16s ease,border-color .16s ease;
}

.switch-control:hover {
    border-color:#46556b;
    background:#182330;
}

.switch-knob {
    width:18px;
    height:18px;
    position:absolute;
    top:2px;
    left:3px;
    border-radius:50%;
    background:#718096;
    box-shadow:0 1px 4px rgba(0,0,0,.35);
    transition:left .16s ease,background .16s ease,box-shadow .16s ease;
}

.switch-control.is-on {
    border-color:#0a6d4b;
    background:#073b2f;
}

.switch-control.is-on .switch-knob {
    left:23px;
    background:#22e58a;
    box-shadow:0 0 10px rgba(34,229,138,.45);
}

.switch-control:focus-visible {
    outline:0;
    box-shadow:0 0 0 3px rgba(161,92,255,.14);
}

/* ============================================================
   12. Toolbar, wyszukiwarka, filtry i zakładki
   ============================================================ */
.toolbar-row {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.search-box {
    min-width:260px;
    flex:1;
    display:flex;
    align-items:center;
    gap:7px;
    height:38px;
    padding:0 8px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:9px;
    background:#070d16;
}

.search-box>svg {
    width:16px;
    color:#8290a4;
}

.search-box input {
    min-width:0;
    flex:1;
    border:0;
    background:transparent;
    color:#f3f6fb;
    outline:0;
}

.search-box button {
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border:0;
    background:transparent;
    color:#718198;
    cursor:pointer;
}

.search-box button svg {
    width:13px;
}

.toolbar-row>.ui-selectmenu-button {
    width:210px!important;
    flex:0 0 210px;
}

/* ============================================================
   13. Oceny, paski postępu i liczniki
   ============================================================ */
.counter-pill {
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:0 9px;
    border:1px solid rgba(161,92,255,.20);
    border-radius:999px;
    background:rgba(161,92,255,.05);
    color:#aab6c7;
    font-size:12px;
    white-space:nowrap;
}

.counter-value {
    margin-left:4px;
    color:#fff;
}

.score-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.score-card {
    padding:12px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:11px;
    background:#09111c;
}

.score-card header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.score-card.negative .score-track {
    height:5px;
    margin-top:8px;
    border-radius:99px;
    background:#1b2738;
    overflow:hidden;
}

.score-track i {
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#25ef78,#64f5a5);
}

.score-card.negative .score-track i {
    background:linear-gradient(90deg,#ff5c7d,#ff86a1);
}

/* ============================================================
   14. Tabele i paginacja
   ============================================================ */
.table-scroll {
    overflow:auto;
}

.portal-table {
    width:100%;
    border-collapse:collapse;
}

.portal-table th,.portal-table td {
    padding:12px 9px;
    border-bottom:1px solid rgba(151,165,190,.10);
    text-align:left;
    white-space:nowrap;
}

.portal-table th {
    color:#8fa0b8;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.table-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top:12px;
}

.pagination {
    display:flex;
    gap:6px;
}

.pagination button {
    min-width:34px;
    height:34px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:8px;
    background:#0a111c;
    color:#ccd4df;
    cursor:pointer;
}

.pagination button.active {
    border-color:rgba(161,92,255,.45);
    background:rgba(126,61,235,.22);
    color:#fff;
}

/* ============================================================
   15. Komunikaty systemowe i pusty stan
   ============================================================ */
.notice {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:9px;
    padding:11px 12px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:10px;
    background:#09111c;
}

.notice>svg {
    width:18px;
    flex:0 0 18px;
}

.notice.success {
    border-color:rgba(37,239,120,.18);
    background:rgba(37,239,120,.04);
}

.notice.success>svg {
    color:#25ef78;
}

.notice.info>svg {
    color:#35b8ef;
}

.notice.warning {
    border-color:rgba(244,200,75,.18);
    background:rgba(244,200,75,.04);
}

.notice.warning>svg {
    color:#f4c84b;
}

.notice.danger {
    border-color:rgba(255,86,119,.18);
    background:rgba(255,86,119,.04);
}

.notice.danger>svg {
    color:#ff5677;
}

.empty-state {
    display:grid;
    justify-items:center;
    gap:7px;
    margin-top:12px;
    padding:24px;
    border:1px dashed rgba(148,163,184,.26);
    border-radius:11px;
    background:#08101a;
    color:#8fa0b8;
    text-align:center;
}

.empty-state svg {
    width:24px;
    color:#a15cff;
}

/* ============================================================
   16. Skeleton / stan ładowania
   ============================================================ */
.skeleton-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.skeleton-card {
    min-height:86px;
    padding:13px;
    border:1px solid rgba(148,163,184,.16);
    border-radius:11px;
    background:#09111c;
    overflow:hidden;
}

.skeleton-card span,.skeleton-card i {
    display:block;
    border-radius:6px;
    background:linear-gradient(90deg,#111a29 25%,#1a2638 45%,#111a29 65%);
    background-size:220% 100%;
    animation:skeleton 1.4s infinite;
}

.skeleton-card span {
    width:38%;
    height:11px;
}

.skeleton-card i {
    height:9px;
    margin-top:12px;
}

.skeleton-card i:last-child {
    width:72%;
}

@keyframes skeleton {
    to {
        background-position:-220% 0;
    }
}

/* ============================================================
   17. Karta wykresu / placeholder analityczny
   ============================================================ */
.chart-legend {
    display:flex;
    gap:12px;
}

.chart-legend span {
    display:flex;
    align-items:center;
    gap:6px;
}

.chart-legend i {
    width:9px;
    height:9px;
    border-radius:3px;
    background:#35aeea;
}

.chart-placeholder {
    height:280px;
    display:grid;
    place-items:center;
    position:relative;
    border:1px solid rgba(148,163,184,.16);
    border-radius:12px;
    background:linear-gradient(180deg,rgba(52,160,230,.04),rgba(7,13,22,.7));
    overflow:hidden;
}

.chart-y-axis {
    position:absolute;
    left:10px;
    top:20px;
    bottom:24px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:#5f6c80;
    font-size:9px;
}

.chart-bars {
    position:absolute;
    left:42px;
    right:18px;
    top:22px;
    bottom:24px;
    display:flex;
    align-items:flex-end;
    gap:8px;
}

.chart-bars i {
    flex:1;
    border-radius:5px 5px 0 0;
    background:linear-gradient(180deg,#42b7ed,#175b8e);
    opacity:.78;
}

/* ============================================================
   18. Stopka wzorca i toast
   ============================================================ */
.template-footer {
    padding:16px 0 4px;
    font-family:Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.4;
    color:#6f7e94;
    text-align:center;
}

.toast-container {
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:1000;
    width:min(340px,calc(100vw - 36px));
    display:flex;
    flex-direction:column-reverse;
    align-items:flex-end;
    gap:8px;
    pointer-events:none;
}

.toast {
    width:100%;
    position:relative;
    overflow:hidden;
    padding:13px 42px 13px 13px;
    border:1px solid rgba(37,239,120,.22);
    border-radius:10px;
    background:#0a1517;
    color:#bdf7cf;
    font-family:Verdana, Arial, sans-serif;
    font-size:11px;
    font-weight:400;
    line-height:1.45;
    box-shadow:0 16px 45px rgba(0,0,0,.35);
    pointer-events:auto;
}

.toast-progress {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:3px;
    overflow:hidden;
    border-radius:10px 10px 0 0;
    background:rgba(148,163,184,.08);
}

.toast-progress::before {
    content:"";
    position:absolute;
    left:-45%;
    top:0;
    width:45%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(37,239,120,.35),
        #25ef78,
        #8a5cff,
        #a15cff,
        rgba(161,92,255,.35),
        transparent
    );
    box-shadow:0 0 8px rgba(37,239,120,.35),0 0 10px rgba(161,92,255,.30);
    animation:toast-progress-travel 1350ms linear infinite;
}

.toast-close {
    width:24px;
    height:24px;
    position:absolute;
    right:7px;
    top:7px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(148,163,184,.16);
    border-radius:7px;
    background:#111925;
    color:#aeb8c7;
    font-size:15px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
}

.toast-close:hover,
.toast-close:focus {
    border-color:#69409b;
    background:#182131;
    color:#ffffff;
    outline:0;
}

.toast-text {
    display:block;
    margin:0;
}

@keyframes toast-progress-travel {
    from {
        left:-45%;
    }
    to {
        left:100%;
    }
}

/* ============================================================
   19. jQuery UI - wspólny ciemny motyw
   ============================================================ */

/* ------------------------------------------------------------
   19.1. Podstawy kontrolek jQuery UI
   ------------------------------------------------------------ */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family:Verdana, Arial, sans-serif!important;
    font-size:12px!important;
}

.ui-widget-content {
    color:#dde5ef!important;
    border-color:#222c3b!important;
    background:#09101b!important;
}

.ui-widget-header {
    color:#f4f7fa!important;
    border-color:#222c3b!important;
    background:#0c1421!important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    color:#cdd6e1!important;
    border-color:#283344!important;
    background:#111925!important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus {
    color:#ffffff!important;
    border-color:#69409b!important;
    background:#182131!important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    color:#ffffff!important;
    border-color:#7f4dbe!important;
    background:#2d1e46!important;
}

.ui-button {
    border-radius:9px!important;
}

/* ------------------------------------------------------------
   19.2. Tooltip
   ------------------------------------------------------------ */
.ui-tooltip {
    max-width:320px!important;
    padding:10px 12px!important;
    border:1px solid #543379!important;
    border-radius:10px!important;
    background:#0a111d!important;
    color:#dfe6ef!important;
    box-shadow:0 15px 40px rgba(0,0,0,.42)!important;
    font-size:12px!important;
    line-height:1.5!important;
}

.ui-tooltip strong {
    color:#ffffff;
}

/* ------------------------------------------------------------
   19.3. Lista wyboru - Selectmenu
   ------------------------------------------------------------ */
.ui-selectmenu-button.ui-button {
    width:100%!important;
    min-height:38px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 38px 0 11px!important;
    position:relative!important;
    border:1px solid #263143!important;
    border-radius:9px!important;
    background:#0c1420!important;
    color:#dce4ee!important;
    box-shadow:none!important;
}

.ui-selectmenu-button.ui-button:hover,
.ui-selectmenu-button.ui-button:focus {
    border-color:#65418e!important;
    background:#111b29!important;
    color:#ffffff!important;
}

.ui-selectmenu-button.ui-selectmenu-button-open {
    border-color:#7c4eb0!important;
    border-radius:9px 9px 0 0!important;
    background:#111b29!important;
}

.ui-selectmenu-button .ui-selectmenu-text {
    width:100%!important;
    margin:0!important;
    padding:0!important;
    line-height:36px!important;
    color:inherit!important;
}

.ui-selectmenu-button .ui-selectmenu-icon {
    position:absolute!important;
    right:12px!important;
    top:50%!important;
    margin-top:-8px!important;
    opacity:.8!important;
    filter:invert(1) grayscale(1)!important;
}

.ui-selectmenu-menu {
    z-index:1000!important;
}

.ui-selectmenu-menu .ui-menu {
    padding:5px!important;
    border:1px solid #263143!important;
    border-top:0!important;
    border-radius:0 0 9px 9px!important;
    background:#0b121e!important;
    box-shadow:0 14px 34px rgba(0,0,0,.35)!important;
}

.ui-selectmenu-menu .ui-menu-item {
    margin:0!important;
}

.ui-selectmenu-menu .ui-menu-item-wrapper {
    padding:9px 10px!important;
    border:0!important;
    border-radius:7px!important;
    color:#cfd8e5!important;
    background:transparent!important;
}

.ui-selectmenu-menu .ui-menu-item-wrapper.ui-state-active {
    color:#ffffff!important;
    background:#2b1d42!important;
}

/* ------------------------------------------------------------
   19.4. Wartość liczbowa - Spinner
   ------------------------------------------------------------ */
.ui-spinner {
    width:100%!important;
    height:38px!important;
    position:relative!important;
    display:block!important;
    overflow:hidden!important;
    border:1px solid #263143!important;
    border-radius:9px!important;
    background:#070d16!important;
    box-shadow:none!important;
}

.ui-spinner:hover {
    border-color:#344157!important;
}

.ui-spinner.ui-state-focus,
.ui-spinner:focus-within {
    border-color:#7549a8!important;
    box-shadow:0 0 0 3px rgba(161,92,255,.08)!important;
}

.ui-spinner-input {
    width:calc(100% - 62px)!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
    padding:0 11px!important;
    border:0!important;
    outline:0!important;
    color:#f3f6fb!important;
    background:transparent!important;
}

.ui-spinner-button {
    width:30px!important;
    height:18px!important;
    position:absolute!important;
    right:0!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-left:1px solid #263143!important;
    border-radius:0!important;
    background:#121a27!important;
    color:#aeb9c8!important;
    cursor:pointer!important;
}

.ui-spinner-up {
    top:0!important;
    border-bottom:1px solid #263143!important;
    border-radius:0 8px 0 0!important;
}

.ui-spinner-down {
    bottom:0!important;
    border-radius:0 0 8px 0!important;
}

.ui-spinner-button:hover {
    background:#1a2433!important;
    color:#ffffff!important;
}

.ui-spinner-button:active {
    background:#2b1d42!important;
}

.ui-spinner-button .ui-icon {
    display:none!important;
}

.ui-spinner-up::before {
    content:"+";
    display:block;
    font-size:13px;
    font-weight:700;
    line-height:1;
}

.ui-spinner-down::before {
    content:"−";
    display:block;
    font-size:13px;
    font-weight:700;
    line-height:1;
}

/* ------------------------------------------------------------
   19.6. Zakładki
   ------------------------------------------------------------ */
.ui-tabs {
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

.ui-tabs .ui-tabs-nav {
    display:flex!important;
    gap:6px!important;
    flex-wrap:wrap!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

.ui-tabs .ui-tabs-nav li {
    margin:0!important;
    border-radius:9px!important;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding:8px 11px!important;
    color:#aeb8c7!important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    color:#ffffff!important;
}

.ui-tabs .ui-tabs-panel {
    padding:14px 0 0!important;
}

/* ------------------------------------------------------------
   19.7. Akordeon
   ------------------------------------------------------------ */
.ui-accordion .ui-accordion-header {
    margin-top:7px!important;
    padding:10px 12px!important;
    border-radius:9px!important;
    font-weight:700!important;
}

.ui-accordion .ui-accordion-header.ui-state-active {
    border-color:#6c4298!important;
    background:#241936!important;
}

.ui-accordion .ui-accordion-content {
    padding:13px!important;
    border-radius:0 0 9px 9px!important;
}

/* ------------------------------------------------------------
   19.8. Dialog
   ------------------------------------------------------------ */
.ui-dialog {
    padding:0!important;
    border:1px solid #513372!important;
    border-radius:13px!important;
    background:#0a111d!important;
    box-shadow:0 24px 80px rgba(0,0,0,.55)!important;
    overflow:hidden!important;
}

.ui-dialog .ui-dialog-titlebar {
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 14px!important;
    border:0!important;
    border-bottom:1px solid #222c3b!important;
    background:#0c1421!important;
}

.ui-dialog .ui-dialog-title {
    margin:0!important;
    font-family:Verdana, Arial, sans-serif!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.3!important;
    color:#ffffff!important;
}

.ui-dialog .ui-dialog-titlebar-close {
    width:28px!important;
    height:28px!important;
    right:8px!important;
    top:50%!important;
    margin:0!important;
    padding:0!important;
    transform:translateY(-50%)!important;
    border:1px solid #283344!important;
    border-radius:8px!important;
    background:#111925!important;
    color:#cdd6e1!important;
}

.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
    border-color:#69409b!important;
    background:#182131!important;
    color:#ffffff!important;
}

.ui-dialog .ui-dialog-content {
    padding:14px!important;
    background:#0a111d!important;
    color:#dfe6ef!important;
}

.ui-dialog .ui-dialog-buttonpane {
    margin:0!important;
    padding:12px 14px 14px!important;
    border:0!important;
    border-top:1px solid #222c3b!important;
    background:#0a111d!important;
}

.ui-dialog .ui-dialog-buttonset {
    display:flex!important;
    justify-content:flex-end!important;
    gap:8px!important;
    float:none!important;
}

.ui-dialog .ui-dialog-buttonpane button {
    min-height:36px!important;
    margin:0!important;
    padding:0 12px!important;
    border:1px solid #283344!important;
    border-radius:9px!important;
    background:#0a111d!important;
    color:#d6dee9!important;
    font-family:Verdana, Arial, sans-serif!important;
    font-size:12px!important;
    font-weight:800!important;
    box-shadow:none!important;
}

.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog .ui-dialog-buttonpane button:focus {
    border-color:#69409b!important;
    background:#182131!important;
    color:#ffffff!important;
}

.ui-dialog .ui-dialog-buttonpane button:first-child {
    border-color:transparent!important;
    background:linear-gradient(135deg,#7635e8,#aa58ff)!important;
    color:#ffffff!important;
    box-shadow:0 8px 20px rgba(123,55,226,.16)!important;
}


/* Efekt "wejścia na antenę" uruchamiany tylko przy otwieraniu dialogu.
   Kolorowy segment porusza się dokładnie po obramowaniu i wykonuje jedno pełne okrążenie. */
@property --stream-angle {
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}

.ui-dialog.stream-dialog {
    isolation:isolate!important;
    --stream-angle:0deg;
}

.ui-dialog.stream-dialog::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:5;
    padding:2px;
    border-radius:13px;
    pointer-events:none;
    opacity:0;
    background:conic-gradient(
        from var(--stream-angle),
        transparent 0deg,
        transparent 318deg,
        rgba(37,239,120,.20) 324deg,
        #25ef78 332deg,
        #8a5cff 343deg,
        #a15cff 350deg,
        rgba(161,92,255,.20) 356deg,
        transparent 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
}

.ui-dialog.stream-dialog.stream-dialog-opening {
    animation:stream-dialog-soft-open 360ms ease-out;
}

.ui-dialog.stream-dialog.stream-dialog-live {
    animation:stream-dialog-glow 2200ms ease-out;
}

.ui-dialog.stream-dialog.stream-dialog-live::before {
    animation:stream-dialog-border-lap 2200ms linear;
}

.ui-dialog.stream-dialog.stream-dialog-closing {
    animation:stream-dialog-close-glow 820ms ease-in forwards;
}

.ui-dialog.stream-dialog.stream-dialog-closing::before {
    animation:stream-dialog-border-lap-close 820ms linear forwards;
}

@keyframes stream-dialog-soft-open {
    0% {
        transform:translateY(6px) scale(.985);
    }
    100% {
        transform:translateY(0) scale(1);
    }
}

@keyframes stream-dialog-border-lap {
    0% {
        --stream-angle:0deg;
        opacity:0;
    }
    6% {
        opacity:1;
    }
    94% {
        opacity:1;
    }
    100% {
        --stream-angle:360deg;
        opacity:0;
    }
}

@keyframes stream-dialog-glow {
    0% {
        box-shadow:0 24px 80px rgba(0,0,0,.55);
    }
    30% {
        box-shadow:0 24px 80px rgba(0,0,0,.55),
                   0 0 14px rgba(37,239,120,.08),
                   0 0 20px rgba(161,92,255,.09);
    }
    72% {
        box-shadow:0 24px 80px rgba(0,0,0,.55),
                   0 0 10px rgba(37,239,120,.05),
                   0 0 16px rgba(161,92,255,.06);
    }
    100% {
        box-shadow:0 24px 80px rgba(0,0,0,.55);
    }
}

@keyframes stream-dialog-border-lap-close {
    0% {
        --stream-angle:360deg;
        opacity:0;
    }
    10% {
        opacity:1;
    }
    90% {
        opacity:1;
    }
    100% {
        --stream-angle:0deg;
        opacity:0;
    }
}

@keyframes stream-dialog-close-glow {
    0% {
        transform:scale(1);
        opacity:1;
        box-shadow:0 24px 80px rgba(0,0,0,.55);
    }
    55% {
        transform:scale(.99);
        opacity:1;
        box-shadow:0 18px 55px rgba(0,0,0,.50),
                   0 0 14px rgba(161,92,255,.08);
    }
    100% {
        transform:translateY(4px) scale(.975);
        opacity:.35;
        box-shadow:0 12px 35px rgba(0,0,0,.42);
    }
}

/* ------------------------------------------------------------
   19.9. Suwak
   ------------------------------------------------------------ */
.ui-slider {
    height:6px!important;
    border:0!important;
    background:#1b2636!important;
}

.ui-slider-range {
    background:linear-gradient(90deg,#7a39e7,#a15cff)!important;
}

.ui-slider-handle {
    top:-6px!important;
    width:18px!important;
    height:18px!important;
    border:1px solid #31405a!important;
    border-radius:50%!important;
    background:#111927!important;
}

.ui-slider-handle:hover,
.ui-slider-handle:focus {
    border-color:#7549a8!important;
    background:#182235!important;
}

/* ------------------------------------------------------------
   19.10. Autocomplete
   ------------------------------------------------------------ */
.ui-autocomplete {
    max-height:220px!important;
    overflow:auto!important;
    border:1px solid #263143!important;
    border-radius:9px!important;
    background:#0a111d!important;
    box-shadow:0 16px 40px rgba(0,0,0,.35)!important;
}

.ui-autocomplete .ui-menu-item-wrapper {
    padding:8px 10px!important;
    color:#d5deea!important;
}

.ui-autocomplete .ui-state-active {
    margin:0!important;
    color:#ffffff!important;
    background:#2b1d42!important;
}

/* ============================================================
   20. Responsywność
   ============================================================ */
@media(max-width:1180px) {
    .type-sample {
        grid-template-columns:110px minmax(0,1fr);
    }

    .type-sample > :nth-child(3) {
        grid-column:2;
    }

    .metric-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .score-grid {
        grid-template-columns:1fr;
    }
    .profile-hero {
        align-items:flex-start;
        flex-direction:column;
    }
    .confidence-card {
        width:100%;
        min-width:0;
    }
    .skeleton-grid {
        grid-template-columns:1fr;
    }
    }

@media(max-width:900px) {
    .app-shell {
        grid-template-columns:1fr;
    }
    .sidebar {
        position:relative;
        height:auto;
    }
    .brand {
        flex-direction:row;
        justify-content:flex-start;
        text-align:left;
        gap:10px;
    }
    .brand-logo {
        width:54px;
        height:54px;
        margin:0;
    }
    .brand-logo svg {
        width:25px;
    }
    .nav {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .nav-group {
        min-width:0;
    }
    .main {
        padding:0 14px 26px;
    }
    .content {
        padding-top:18px;
    }
    .page-header {
        flex-direction:column;
    }
    .page-header-actions {
        justify-content:flex-start;
    }
    .form-grid {
        grid-template-columns:1fr;
    }
    .field-wide {
        grid-column:auto;
    }
    .toolbar-row {
        flex-wrap:wrap;
    }
    .toolbar-row>.ui-selectmenu-button {
        width:210px!important;
        flex:0 0 210px;
    }
}

@media(max-width:640px) {
.text-page-title {
        font-size:24px;
    }
    .text-section-title {
        font-size:18px;
    }
    .text-description {
        font-size:12px;
    }
    .topbar-brand,.account-copy,.points-pill {
        display:none;
    }
    .metric-grid {
        grid-template-columns:1fr;
    }
    .type-sample {
        grid-template-columns:1fr;
        gap:6px;
    }
    .toolbar-row>.ui-selectmenu-button {
        width:100%!important;
        flex:1 1 100%;
    }
    .search-box {
        min-width:100%;
    }
    .table-footer {
        align-items:flex-start;
        flex-direction:column;
    }
    .section-title,.split-title {
        flex-direction:column;
    }
    .counter-pill {
        white-space:normal;
    }
    .page-header-icon {
        width:42px;
        height:42px;
        flex-basis:42px;
    }
}