/* KLASY STANU
   .ukryty            = element schowany (display: none)
   .active / .aktywna = aktywna ikona / zakładka
   .aktywne           = narzędzie włączone (np. lupka)
   .zuzyte            = narzędzie wyłączone z użycia
   .tryb-lupa         = lupka włączona (na .ekran lub .obszar-roboczy)
   .zaznaczone        = element zaznaczony lupką
   .skanuje           = animacja skanera AI trwa (na #skaner-ai)
   .otwarte           = notes rozłożony (na #okno-notesu) */

* {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #0a0014;
    font-family: Segoe UI, Helvetica, Arial, sans-serif;
}

.gra {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.ukryty {
    display: none !important;
}

[data-otworz] {
    cursor: pointer;
}

.warstwa-tla {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    border: none;
    outline: none;
    -webkit-user-drag: none;
}

.tlo {
    flex: 1;
    min-height: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.gra-kontener {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    max-width: calc(100vh * (16 / 9));
    max-height: 100%;
    container-type: size;
}

/* HUD */

.hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6cqh;
    padding: 0 2cqw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a0033;
    border-bottom: 0.2cqw solid rgba(124, 58, 237, 0.6);
    box-shadow: 0 0.4cqw 2cqw rgba(124, 58, 237, 0.4);
    z-index: 10;
}

.przycisk {
    color: blueviolet;
    text-decoration: none;
    border: 0.15cqw solid #7c3aed;
    border-radius: 0.8cqw;
    padding: 0.5cqh 1cqw;
    font-size: 1.2cqw;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.5cqw;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.przycisk:hover {
    background-color: rgba(124, 58, 237, 0.8);
    color: white;
    transform: translateY(-0.1cqw);
}

.hud-punkty {
    color: #c4a5ff;
    font-size: 1.3cqw;
    display: inline-flex;
    align-items: center;
    gap: 0.6cqw;
}

/* MONITOR / PULPIT */

.monitor {
    position: absolute;
    top: 8%;
    left: 10%;
    width: 80%;
    height: 55%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ekran {
    flex: 1;
    min-height: 0;
    background: rgba(0, 0, 0, 0.8);
    border: 0.3cqw solid #333;
    font-size: 1.2cqw;
    color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.pulpit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding: 0;
    border: none;
}

.obszar-roboczy {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.obszar-postu {
    position: absolute;
    inset: 0;
}

/* PANEL NARZĘDZI */

.panel-narzedzi-prawy {
    flex: 0 0 6cqw;
    width: 6cqw;
    height: 100%;
    background-color: rgba(20, 10, 35, 0.95);
    border-left: 0.15cqw solid #7c3aed;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.5cqw 0.3cqw;
    z-index: 5;
}

.narzedzie-item {
    background: #121316;
    border: 0.08cqw solid #332255;
    border-radius: 0.5cqw;
    width: 5.2cqw;
    height: 5.2cqw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #c4a5ff;
    flex-shrink: 0;
}

.narzedzie-item i {
    font-size: 1.4cqw;
    margin-bottom: 0.3cqw;
}

.narzedzie-item span {
    font-size: 0.9cqw;
    font-weight: bold;
    text-align: center;
    line-height: 1.15;
}

.narzedzie-item:hover {
    background: #7c3aed;
    color: white;
    transform: scale(1.03);
    border-color: #a78bfa;
}

.narzedzie-item.aktywne {
    background: #7c3aed;
    color: white;
    border-color: #a78bfa;
    box-shadow: 0 0 1cqw rgba(124, 58, 237, 0.6);
}

.narzedzie-item:disabled,
.narzedzie-item.zuzyte {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    background: #121316;
    color: #c4a5ff;
    border-color: #332255;
}

/* FACEBOOK */

.fb-interfejs {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background-color: #f0f2f5;
    color: #050505;
    font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;
}

.fb-pasek-nawigacyjny {
    flex: 0 0 3.2cqw;
    height: 3.2cqw;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background-color: #ffffff;
    border-bottom: 0.1cqw solid #e4e6eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1cqw;
    box-shadow: 0 0.06cqw 0.2cqw rgba(0, 0, 0, 0.1);
}

.fb-gora-lewa {
    display: flex;
    align-items: center;
    gap: 0.5cqw;
}

.fb-logo {
    color: #1877f2;
    font-size: 2cqw;
}

.fb-wyszukiwarka {
    background: #f0f2f5;
    width: 14cqw;
    height: 2cqw;
    padding: 0 0.8cqw;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.4cqw;
    color: #65676b;
    font-size: 0.8cqw;
}

.fb-wyszukiwarka i {
    flex-shrink: 0;
}

.fb-wyszukiwarka input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 1cqw;
}

.fb-gora-srodek {
    display: flex;
    height: 100%;
}

.fb-nawigacyjna-ikonka {
    background: none;
    border: none;
    padding: 0 1.5cqw;
    font-size: 1.2cqw;
    color: #65676b;
    cursor: pointer;
    border-bottom: 0.2cqw solid transparent;
}

.fb-nawigacyjna-ikonka.active {
    color: #1877f2;
    border-bottom-color: #1877f2;
}

.fb-gora-prawa {
    display: flex;
    align-items: center;
    gap: 0.5cqw;
}

.fb-circle-btn,
.fb-avatar-small {
    width: 2cqw;
    height: 2cqw;
    background: #e4e6eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1cqw;
    color: #050505;
}

.fb-tlo {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1cqw;
    display: block;
}

.fb-kontener-posta,
.fb-kontener-profil,
.fb-kontener-komentarze {
    display: flow-root;
    background: #ffffff;
    width: 100%;
    max-width: 30cqw;
    height: auto;
    margin: 0 auto;
    border-radius: 0.5cqw;
    box-shadow: 0 0.06cqw 0.2cqw rgba(0, 0, 0, 0.2);
}

.fb-naglowek {
    display: flex;
    align-items: center;
    padding: 0.8cqw;
}

.fb-awatar {
    position: relative;
    width: 2.5cqw;
    height: 2.5cqw;
    font-size: 1.2cqw;
    line-height: 1;
    background: #e4e6eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.6cqw;
    color: #65676b;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.fb-awatar:hover {
    filter: brightness(0.92);
}

.fb-info {
    display: flex;
    flex-direction: column;
}

.fb-autor {
    font-weight: 600;
    font-size: 1.15cqw;
    color: #050505;
}

.fb-czas {
    font-size: 0.9cqw;
    color: #65676b;
}

.fb-opcje {
    margin-left: auto;
    color: #65676b;
    cursor: pointer;
}

.fb-tekst-posta {
    padding: 0 0.8cqw 0.8cqw 0.8cqw;
    font-size: 1.1cqw;
    color: #050505;
    overflow-wrap: anywhere;
}

/* ZDJĘCIE POSTA */

.zdjecie-posta {
    background: #000000;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zdjecie-posta img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fb-kontener-posta .zdjecie-posta {
    aspect-ratio: 16 / 10;
}

.fb-statystyki {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6cqw 0.8cqw;
    font-size: 1cqw;
    color: #65676b;
    border-bottom: 0.1cqw solid #ced0d4;
    margin: 0 0.8cqw;
}

.fb-reakcje-ikony {
    display: flex;
    align-items: center;
    gap: 0.3cqw;
}

.fb-ikona-like {
    background: #1877f2;
    color: white;
    border-radius: 50%;
    padding: 0.2cqw;
    font-size: 0.75cqw;
}

.fb-ikona-heart {
    background: #fa383e;
    color: white;
    border-radius: 50%;
    padding: 0.2cqw;
    font-size: 0.75cqw;
}

.fb-akcje {
    display: flex;
    justify-content: space-between;
    padding: 0.2cqw 0.8cqw;
}

.fb-akcje button {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0.5cqh 0;
    color: #65676b;
    font-family: inherit;
    font-weight: 600;
    font-size: 1.05cqw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4cqw;
    border-radius: 0.3cqw;
}

.fb-akcje button:hover {
    background: #f2f2f2;
}

/* PROFIL FB */

.fb-profil-okladka {
    height: 8cqw;
    background: linear-gradient(135deg, #c9ccd1, #e4e6eb);
    border-radius: 0.5cqw 0.5cqw 0 0;
}

.fb-profil-awatar {
    position: relative;
    width: 6cqw;
    height: 6cqw;
    margin: -3cqw 0 0 1cqw;
    background: #e4e6eb;
    border: 0.3cqw solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5cqw;
    color: #65676b;
}

.fb-profil-dane {
    padding: 0.5cqw 1cqw 1cqw;
}

.fb-profil-nazwa {
    margin: 0.5cqw 0 0.2cqw;
    font-size: 1.6cqw;
    font-weight: 700;
    color: #050505;
}

.fb-profil-opis {
    margin: 0 0 0.8cqw;
    font-size: 1.1cqw;
    color: #65676b;
}

.fb-profil-lista {
    list-style: none;
    margin: 0 0 1cqw;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5cqw;
    font-size: 1.1cqw;
    color: #050505;
}

.fb-profil-lista i {
    width: 1.5cqw;
    color: #65676b;
}

.fb-profil-powrot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4cqw;
    width: 100%;
    padding: 0.6cqw 0;
    background: #e4e6eb;
    border: none;
    border-radius: 0.4cqw;
    font-family: inherit;
    font-size: 1.05cqw;
    font-weight: 600;
    color: #050505;
    cursor: pointer;
}

.fb-profil-powrot:hover {
    background: #d8dadf;
}

/* KOMENTARZE FB */

.fb-komentarze-naglowek {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8cqw 3cqw;
    border-bottom: 0.1cqw solid #e4e6eb;
}

.fb-komentarze-tytul {
    font-size: 1.2cqw;
    font-weight: 700;
    color: #050505;
}

.fb-komentarze-powrot {
    position: absolute;
    right: 0.8cqw;
    width: 1.8cqw;
    height: 1.8cqw;
    border: none;
    border-radius: 50%;
    background: #e4e6eb;
    color: #050505;
    font-size: 0.9cqw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fb-komentarze-powrot:hover {
    background: #d8dadf;
}

.fb-komentarze-sortuj {
    padding: 0.7cqw 0.8cqw 0;
    font-size: 1cqw;
    font-weight: 600;
    color: #65676b;
}

.fb-komentarze-pole {
    display: flex;
    align-items: center;
    gap: 0.5cqw;
    padding: 0.6cqw 0.8cqw;
    border-top: 0.1cqw solid #e4e6eb;
}

.fb-komentarze-input {
    flex: 1;
    padding: 0.6cqw 0.9cqw;
    background: #f0f2f5;
    border-radius: 1.2cqw;
    font-size: 1cqw;
    color: #65676b;
}

.fb-komentarze {
    padding: 0.4cqw 0.8cqw 0.8cqw;
    display: flex;
    flex-direction: column;
    gap: 0.6cqw;
}

.fb-komentarz {
    display: flex;
    align-items: flex-start;
    gap: 0.5cqw;
}

.fb-komentarz-awatar {
    flex-basis: 2.3cqw;
    width: 2.3cqw;
    height: 2.3cqw;
    background: #e4e6eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1cqw;
    color: #65676b;
}

.fb-komentarz-tresc {
    min-width: 0;
}

.fb-komentarz-babelek {
    display: inline-flex;
    flex-direction: column;
    padding: 0.4cqw 0.7cqw;
    background: #f0f2f5;
    border-radius: 1cqw;
    font-size: 1cqw;
    overflow-wrap: anywhere;
}

.fb-komentarz-autor {
    font-weight: 600;
    font-size: 1cqw;
    color: #050505;
}

.fb-komentarz-tekst {
    color: #050505;
}

.fb-komentarz-akcje {
    display: flex;
    gap: 0.7cqw;
    padding: 0.15cqw 0.7cqw 0;
    font-size: 0.9cqw;
    font-weight: 600;
    color: #65676b;
}

/* PASEK ZADAŃ */

.pasek-zadan {
    background-color: #232323;
    height: 10%;
    width: 100%;
    flex-shrink: 0;
    margin-top: auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1cqw;
    z-index: 5;
}

.pasek-zadan i {
    color: white;
}

.przypiete {
    display: flex;
    gap: 0.8cqw;
    margin-right: auto;
    margin-left: 1.5cqw;
}

.ikona-paska {
    background: none;
    border: none;
    padding: 0.3cqw 0.6cqw;
    border-radius: 0.3cqw;
    font-size: 1.3cqw;
    cursor: pointer;
}

.ikona-paska:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ikona-paska.aktywna {
    background: rgba(255, 255, 255, 0.18);
    border-bottom: 0.15cqw solid #7c3aed;
}

.zasobnik-systemowy {
    display: flex;
    align-items: center;
    gap: 1cqw;
    height: 100%;
}

.losowe-ikonki {
    display: flex;
    gap: 0.8cqw;
    font-size: 1.2cqw;
    align-items: center;
}

.czas-kontener {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    font-size: 1cqw;
    line-height: 1.2;
    width: max-content;
    padding: 0 0.5cqw;
}

.wlacznik {
    display: flex;
    align-items: center;
    padding: 0.3cqw 0.6cqw;
    background: none;
    border: none;
    border-radius: 0.3cqw;
    font-size: 1.3cqw;
    cursor: pointer;
}

.wlacznik:hover {
    background: rgba(255, 255, 255, 0.12);
}

.godzina {
    font-weight: normal;
    color: white;
    text-align: right;
    align-self: flex-end;
}

.data {
    text-align: right;
    align-self: flex-end;
    color: white;
}

/* BLAT + PRZYCISKI DECYZJI */

.blat {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 23%;
}

.guziki {
    position: absolute;
    top: 65%;
    left: 30%;
    width: 42%;
    height: 20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1cqw;
    z-index: 5;
}

.przycisk-fizyczny {
    flex: 1;
    height: 100%;
    background: #121316;
    border: 0.15cqw solid #1f2226;
    border-radius: 0.6cqw;
    box-shadow:
        inset 0 0 1.5cqw rgba(0, 0, 0, 0.8),
        0 0.4cqw 1cqw rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1.5cqh 0.8cqw;
    text-align: center;
}

.przycisk-fizyczny button {
    width: 65%;
    height: 30%;
    border: none;
    border-radius: 0.4cqw;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.1s ease;
}

.przycisk-fizyczny button:hover {
    filter: brightness(1.12);
}

.przycisk-fizyczny button:focus-visible {
    outline: 0.2cqw solid #ffffff;
    outline-offset: 0.2cqw;
}

.przycisk-fizyczny button i {
    font-size: 1.8cqw;
    color: rgba(0, 0, 0, 0.6);
    text-shadow: 0 0.1cqw 0 rgba(255, 255, 255, 0.3);
}

#zatwierdz button {
    background: #2ecc71;
    box-shadow:
        0 0.5cqh 0 #27ae60,
        0 0.8cqh 1cqw rgba(46, 204, 113, 0.3);
}

#dalej button {
    background: #f39c12;
    box-shadow:
        0 0.5cqh 0 #d35400,
        0 0.8cqh 1cqw rgba(243, 156, 18, 0.3);
}

#usun button {
    background: #e74c3c;
    box-shadow:
        0 0.5cqh 0 #c0392b,
        0 0.8cqh 1cqw rgba(231, 76, 60, 0.3);
}

.przycisk-fizyczny button:active {
    transform: translateY(0.4cqh);
}

#zatwierdz button:active {
    box-shadow: 0 0.1cqh 0 #27ae60;
}

#dalej button:active {
    box-shadow: 0 0.1cqh 0 #d35400;
}

#usun button:active {
    box-shadow: 0 0.1cqh 0 #c0392b;
}

.przycisk-fizyczny .etykieta {
    display: block;
    margin: 1.5cqh 0 0.5cqh 0;
    font-size: 1cqw;
    font-weight: 900;
    letter-spacing: 0.05cqw;
    text-transform: uppercase;
}

#zatwierdz .etykieta {
    color: #2ecc71;
    text-shadow: 0 0 1cqw rgba(46, 204, 113, 0.2);
}

#dalej .etykieta {
    color: #f39c12;
    text-shadow: 0 0 1cqw rgba(243, 156, 18, 0.2);
}

#usun .etykieta {
    color: #e74c3c;
    text-shadow: 0 0 1cqw rgba(231, 76, 60, 0.2);
}

.przycisk-fizyczny .opis {
    display: block;
    margin: 0;
    font-size: 1cqw;
    color: #7f8c8d;
    font-weight: normal;
    line-height: 1.3;
    padding: 0 0.2cqw;
}

/* NOTES (książka z zasadami) */

.notes {
    position: absolute;
    left: 14%;
    bottom: 12%;
    height: 100%;
    width: 14%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notes .obiekt {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: filter 0.2s ease, transform 0.2s ease;
    rotate: 10deg;
}

.notes:hover .obiekt {
    filter: drop-shadow(0 0 12px #7c3aed) brightness(1.2);
    transform: translateY(-4px);
}

.okno-notesu {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}

.notes-nawigacja {
    position: absolute;
    bottom: 1cqw;
    width: 2.2cqw;
    height: 2.2cqw;
    border: 0.15cqw solid #7c3aed;
    border-radius: 50%;
    background: #1a0033;
    color: #c4a5ff;
    font-size: 1cqw;
    cursor: pointer;
    z-index: 2;
}

.notes-nawigacja:hover {
    background: #7c3aed;
    color: #fff;
}

.notes-nawigacja:disabled {
    opacity: 0.3;
    cursor: default;
}

.notes-wstecz {
    left: 1.2cqw;
}

.notes-dalej {
    right: 1.2cqw;
}

.notes-numer {
    position: absolute;
    bottom: 1.2cqw;
    left: 50%;
    transform: translateX(-50%);
    font: 700 1.5cqw "Caveat", cursive;
    color: #1f2a44;
    z-index: 2;
}

.notes-rozlozony {
    position: absolute;
    left: 0;
    top: 33cqh;
    width: 29cqw;
    height: 65cqh;
    padding: 2.4cqw 0.9cqw 0.9cqw 0.9cqw;
    background: #3a3a40;
    border-radius: 0 1cqw 1cqw 0;
    box-shadow: 0.5cqw 0 3cqw rgba(0, 0, 0, 0.7), 0 0 3cqw rgba(124, 58, 237, 0.35);
    pointer-events: auto;
    transform: translateX(-105%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.okno-notesu.otwarte .notes-rozlozony {
    transform: translateX(0);
}

.notes-rozlozony::after {
    display: block;
    content: "";
    position: absolute;
    left: 1.2cqw;
    right: 1.2cqw;
    top: 0.5cqw;
    height: 1.6cqw;
    width: auto;
    bottom: auto;
    transform: none;
    background: radial-gradient(circle at 50% 50%, #c9ccd1 0 0.45cqw, transparent 0.5cqw) 0 0 / 2.2cqw 100% repeat-x;
    filter: drop-shadow(0 0.15cqw 0.1cqw rgba(0, 0, 0, 0.6));
    z-index: 3;
    pointer-events: none;
}

.notes-strona {
    height: 100%;
    flex: 1;
    min-width: 0;
    font-family: "Caveat", "Segoe Print", cursive;
    color: #1f2a44;
    background:
        linear-gradient(90deg, transparent 3.2cqw, rgba(200, 60, 60, 0.55) 3.2cqw 3.3cqw, transparent 3.3cqw),
        repeating-linear-gradient(to bottom, #fbf8ee 0 1.9cqw, #cdd8ec 1.9cqw 2cqw);
    padding: 1.2cqw 1.6cqw 5cqw 4.2cqw;
    border-radius: 0.6cqw;
    box-shadow: none;
    transform-origin: top center;
    overflow-y: auto;
}

.notes-naglowek {
    display: flex;
    align-items: center;
    gap: 0.7cqw;
    margin: 0 0 0.4cqw;
    padding-bottom: 0.6cqw;
    font-size: 2.2cqw;
    font-weight: 700;
    border-bottom-width: 0.2cqw;
    border-bottom-style: wavy;
    border-bottom-color: currentColor;
}

.notes-naglowek-usun {
    color: #a8281c;
}

.notes-naglowek-norma {
    color: #1e7a3e;
}

.notes-wstep {
    margin: 0 0 0.2cqw;
    font-size: 1.5cqw;
    font-style: normal;
}

.notes-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 1.55cqw;
    line-height: 2cqw;
}

.notes-lista li {
    position: relative;
    padding-left: 1.8cqw;
    margin-bottom: 0.1cqw;
}

.notes-lista li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    font-size: 1.5cqw;
}

.notes-strona-usun .notes-lista li::before {
    content: "✗";
    color: #a8281c;
}

.notes-strona-norma .notes-lista li::before {
    content: "✓";
    color: #1e7a3e;
}

.notes-uwaga {
    margin-top: 1cqw;
    padding: 0.7cqw 0.9cqw;
    background: #ffe66d;
    border-left: none;
    border-radius: 0.2cqw;
    font-size: 1.4cqw;
    line-height: 1.7cqw;
    transform: rotate(-1.5deg);
    box-shadow: 0.15cqw 0.25cqw 0.5cqw rgba(0, 0, 0, 0.3);
}

.notes-zamknij {
    position: absolute;
    right: -1.1cqw;
    top: -1.1cqw;
    z-index: 2;
    width: 2.4cqw;
    height: 2.4cqw;
    border: 0.2cqw solid #7c3aed;
    border-radius: 50%;
    background: #1a0033;
    color: #c4a5ff;
    font-size: 1.1cqw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notes-zamknij:hover {
    background: #7c3aed;
    color: #ffffff;
}

@keyframes kartka-wchodzi {
    from {
        transform: perspective(120cqw) rotateX(-70deg);
        opacity: 0;
    }

    to {
        transform: perspective(120cqw) rotateX(0);
        opacity: 1;
    }
}

.notes-strona:not(.ukryty) {
    animation: kartka-wchodzi 0.4s ease-out;
}

/* ZNACZNIK AI (ikonka robota na zdjęciu profilowym) */

.znacznik-ai {
    position: absolute;
    right: -0.35cqw;
    bottom: -0.35cqw;
    width: 1.3cqw;
    height: 1.3cqw;
    border-radius: 50%;
    background: #7c3aed;
    color: #ffffff;
    border: 0.12cqw solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65cqw;
    line-height: 1;
    box-shadow: 0 0 0.6cqw rgba(124, 58, 237, 0.8);
    animation: znacznik-pojawienie 0.35s ease-out;
}

.znacznik-ai i {
    font-size: inherit;
    line-height: 1;
    color: #ffffff;
}

.fb-profil-awatar .znacznik-ai,
.ig-profil-awatar .znacznik-ai {
    width: 2.2cqw;
    height: 2.2cqw;
    font-size: 1.1cqw;
    right: 0.1cqw;
    bottom: 0.1cqw;
    border-width: 0.2cqw;
}

@keyframes znacznik-pojawienie {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* SKANER AI */

.skaner-ai {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 12, 0, 0.6);
    overflow: hidden;
}

.skaner-terminal {
    width: 70%;
    height: 72%;
    display: flex;
    flex-direction: column;
    background: #040a04;
    border: 0.15cqw solid #2ecc71;
    border-radius: 0.6cqw;
    box-shadow: 0 0 2cqw rgba(46, 204, 113, 0.35);
    overflow: hidden;
    font-family: Consolas, "Courier New", monospace;
}

.skaner-terminal-pasek {
    flex: 0 0 2cqw;
    display: flex;
    align-items: center;
    gap: 0.5cqw;
    padding: 0 0.8cqw;
    background: #0c1f0c;
    border-bottom: 0.1cqw solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    font-size: 0.95cqw;
}

.skaner-kod {
    flex: 1 1 0;
    min-height: 0;
    margin: 0;
    padding: 0.8cqw 1cqw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #2ecc71;
    font: inherit;
    font-size: 1cqw;
    line-height: 1.35;
    white-space: pre;
    text-shadow: 0 0 0.4cqw rgba(46, 204, 113, 0.6);
}

.skaner-status {
    flex: 0 0 2.2cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c1f0c;
    border-top: 0.1cqw solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
    font-size: 1.1cqw;
    font-weight: 700;
    letter-spacing: 0.1cqw;
}

.skaner-status-ai {
    color: #e74c3c;
    background: #2a0c0c;
}

.skaner-status-ok {
    color: #2ecc71;
}

.skaner-linia {
    position: absolute;
    left: 0;
    right: 0;
    top: -14%;
    height: 14%;
    pointer-events: none;
    background: linear-gradient(to bottom,
            rgba(46, 204, 113, 0),
            rgba(46, 204, 113, 0.35) 80%,
            rgba(182, 255, 208, 0.95) 100%);
    box-shadow: 0 0.4cqw 2cqw rgba(46, 204, 113, 0.7);
}

.skaner-ai.skanuje .skaner-linia {
    animation: skaner-przejscie 1.8s linear forwards;
}

@keyframes skaner-przejscie {
    from {
        top: -14%;
    }

    to {
        top: 100%;
    }
}

/* LUPKA */

.tryb-lupa [data-zaznaczalne] {
    cursor: crosshair;
}

.tryb-lupa [data-zaznaczalne]:hover {
    outline: 0.15cqw dashed rgba(231, 76, 60, 0.85);
    outline-offset: 0.1cqw;
}

[data-zaznaczalne].zaznaczone,
.tryb-lupa [data-zaznaczalne].zaznaczone:hover {
    outline: 0.2cqw solid #e74c3c;
    outline-offset: 0.1cqw;
    border-radius: 0.2cqw;
    background-image: linear-gradient(rgba(231, 76, 60, 0.28), rgba(231, 76, 60, 0.28));
}

/* KOMUNIKAT  */

.komunikat {
    position: absolute;
    left: 50%;
    bottom: 1cqw;
    transform: translateX(-50%);
    z-index: 6;
    max-width: 80%;
    display: flex;
    align-items: center;
    gap: 0.6cqw;
    padding: 0.6cqw 1.1cqw;
    background: rgba(20, 10, 35, 0.95);
    color: #ffffff;
    border: 0.12cqw solid #7c3aed;
    border-radius: 0.6cqw;
    font-size: 1.05cqw;
    box-shadow: 0 0.3cqw 1cqw rgba(0, 0, 0, 0.5);
}

.komunikat i {
    color: #c4a5ff;
}

.komunikat-ostrzezenie {
    border-color: #e74c3c;
}

.komunikat-ostrzezenie i {
    color: #e74c3c;
}

.komunikat-ok {
    border-color: #2ecc71;
}

.komunikat-ok i {
    color: #2ecc71;
}

/* OKNO PRZEGLĄDARKI: skaner zdjęć */

.okno-przegladarka {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #202124;
    font-family: Segoe UI, Helvetica, Arial, sans-serif;
    overflow: hidden;
}

.przegladarka-zakladki {
    flex: 0 0 2cqw;
    display: flex;
    align-items: flex-end;
    gap: 0.3cqw;
    padding: 0.3cqw 0.6cqw 0;
    background: #202124;
}

.przegladarka-karta {
    display: flex;
    align-items: center;
    gap: 0.5cqw;
    height: 100%;
    max-width: 14cqw;
    padding: 0 0.9cqw;
    background: #35363a;
    border-radius: 0.5cqw 0.5cqw 0 0;
    font-size: 0.95cqw;
    color: #e8eaed;
}

.przegladarka-karta i {
    font-size: 0.8cqw;
    color: #9aa0a6;
}

.okno-zamknij {
    margin-left: auto;
    align-self: center;
    width: 1.4cqw;
    height: 1.4cqw;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #bdc1c6;
    font-size: 0.85cqw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.okno-zamknij:hover {
    background: #e74c3c;
    color: #ffffff;
}

.przegladarka-pasek {
    flex: 0 0 2.4cqw;
    display: flex;
    align-items: center;
    gap: 0.8cqw;
    padding: 0 0.8cqw;
    background: #35363a;
    color: #bdc1c6;
    font-size: 0.85cqw;
}

.przegladarka-adres {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5cqw;
    height: 1.7cqw;
    padding: 0 0.9cqw;
    background: #202124;
    border-radius: 1cqw;
    font-size: 1cqw;
    color: #e8eaed;
}

.przegladarka-adres i {
    font-size: 0.7cqw;
    color: #9aa0a6;
}

.przegladarka-tresc {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    gap: 1.2cqw;
    padding: 1cqw 1.4cqw;
    background: #f8f9fa;
    overflow: hidden;
}

.lens-panel-zdjecia {
    flex: 0 0 17cqw;
    display: flex;
    flex-direction: column;
    gap: 0.6cqw;
}

.lens-tytul {
    margin: 0;
    font-size: 1.15cqw;
    font-weight: 600;
}

.lens-zdjecie {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000000;
    border-radius: 0.6cqw;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lens-zdjecie img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lens-podpis {
    margin: 0;
    font-size: 0.95cqw;
    color: #5f6368;
}

.lens-wyniki {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.lens-stan {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7cqw;
}

.lens-stan-pusty,
.lens-stan-szukanie,
.lens-stan-brak {
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.05cqw;
    color: #5f6368;
}

.lens-stan-pusty strong,
.lens-stan-szukanie strong,
.lens-stan-brak strong {
    font-size: 1.3cqw;
    color: #202124;
}

.lens-stan-ikona {
    font-size: 2.6cqw;
    color: #9aa0a6;
}

.lens-stan-ikona-ok {
    color: #1e8e3e;
}

.lens-naglowek-wynikow {
    display: flex;
    align-items: center;
    gap: 0.6cqw;
    font-size: 1.2cqw;
    font-weight: 600;
    color: #b3261e;
}

.lens-karta {
    display: flex;
    align-items: center;
    gap: 0.9cqw;
    padding: 0.7cqw;
    background: #ffffff;
    border: 0.1cqw solid #dadce0;
    border-radius: 0.6cqw;
}

.lens-miniatura {
    flex: 0 0 6.5cqw;
    height: 4.8cqw;
    background: #dadce0;
    border-radius: 0.4cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4cqw;
    color: #9aa0a6;
}

.lens-karta-dane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25cqw;
    font-size: 1cqw;
}

.lens-karta-tytul {
    font-size: 1.15cqw;
    font-weight: 600;
    color: #1a0dab;
}

.lens-karta-domena {
    color: #188038;
}

.lens-karta-data {
    font-size: 0.95cqw;
    color: #5f6368;
}

.lens-podobienstwo {
    flex-shrink: 0;
    padding: 0.2cqw 0.7cqw;
    background: #fce8e6;
    color: #b3261e;
    border-radius: 1cqw;
    font-size: 1cqw;
    font-weight: 600;
}

/* NOTATNIK */

.okno-notatnik {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    background: #fffdf5;
}

.notatnik-pole {
    flex: 1;
    width: 100%;
    padding: 1cqw 1.4cqw;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: #202124;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.2cqw;
    line-height: 1.6;
    user-select: text;
    -webkit-user-select: text;
}

/* INSTAGRAM */

.ig-interfejs {
    display: flex;
    flex-direction: row;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background-color: #ffffff;
    color: #262626;
    font-family: -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
}

.ig-pasek-boczny {
    flex: 0 0 4.2cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.8cqw 0;
    background: #ffffff;
    border-right: 0.1cqw solid #dbdbdb;
}

.ig-pasek-ikonek {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3cqw;
}

.ig-pasek-ikona {
    position: relative;
    width: 2.6cqw;
    height: 2.2cqw;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0.5cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25cqw;
    color: #262626;
    cursor: pointer;
}

.ig-pasek-ikona:hover {
    background: #f2f2f2;
}

.ig-pasek-ikona i {
    font-size: inherit;
    line-height: 1;
}

.ig-avatar-mini {
    width: 1.5cqw;
    height: 1.5cqw;
    background: #dbdbdb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7cqw;
    color: #737373;
}

.ig-tlo {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1cqw 1cqw 2cqw;
    background: #ffffff;
    display: block;
}

.ig-kontener-posta,
.ig-kontener-profil,
.ig-kontener-komentarze {
    display: flow-root;
    position: relative;
    width: 100%;
    max-width: 26cqw;
    margin: 0 auto;
    background: #ffffff;
}

.ig-naglowek {
    display: flex;
    align-items: center;
    gap: 0.6cqw;
    padding: 0.4cqw 0.2cqw 0.6cqw;
}

.ig-awatar {
    position: relative;
    flex-shrink: 0;
    width: 2.6cqw;
    height: 2.6cqw;
    padding: 0.15cqw;
    border: none;
    border-radius: 50%;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
    cursor: pointer;
}

.ig-awatar:hover {
    filter: brightness(0.92);
}

.ig-awatar-wnetrze {
    width: 100%;
    height: 100%;
    background: #efefef;
    border: 0.12cqw solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8e8e8e;
    font-size: 1.1cqw;
    line-height: 1;
}

.ig-info {
    display: flex;
    flex-direction: column;
    gap: 0.1cqw;
    min-width: 0;
}

.ig-info-wiersz {
    display: flex;
    align-items: center;
    gap: 0.35cqw;
    font-size: 1.05cqw;
}

.ig-autor {
    font-weight: 600;
    color: #262626;
}

.ig-odznaka {
    font-size: 0.95cqw;
    color: #0095f6;
}

.ig-czas-naglowek {
    color: #737373;
}

.ig-podtytul {
    font-size: 0.9cqw;
    color: #737373;
}

.ig-opcje {
    margin-left: auto;
    color: #262626;
    cursor: pointer;
}

/* Ramka zdjęcia IG  */
.ig-zdjecie-posta {
    aspect-ratio: 3 / 2;
    border: 0.1cqw solid #dbdbdb;
    border-radius: 0.5cqw;
}

.ig-akcje {
    display: flex;
    align-items: center;
    gap: 1.1cqw;
    padding: 0.6cqw 0.2cqw;
    font-size: 1.4cqw;
    color: #262626;
}

.ig-akcja {
    display: flex;
    align-items: center;
    gap: 0.4cqw;
    cursor: pointer;
}

.ig-akcja b {
    font-size: 1cqw;
    font-weight: 600;
}

.ig-akcje-prawa {
    margin-left: auto;
    cursor: pointer;
}

.ig-opis {
    padding: 0 0.2cqw;
    font-size: 1.05cqw;
    overflow-wrap: anywhere;
}

.ig-hashtagi {
    color: #00376b;
}

/* PROFIL IG */

.ig-kontener-profil {
    max-width: 48cqw;
    overflow: hidden;
}

.ig-profil-naglowek {
    display: flex;
    align-items: flex-start;
    gap: 2.5cqw;
    padding: 1cqw 2cqw 0.8cqw;
}

.ig-profil-awatar {
    position: relative;
    flex-shrink: 0;
    width: 8cqw;
    height: 8cqw;
    background: #efefef;
    border: 0.1cqw solid #dbdbdb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2cqw;
    color: #8e8e8e;
}

.ig-profil-dane {
    flex: 1;
    min-width: 0;
}

.ig-profil-wiersz {
    display: flex;
    align-items: center;
    gap: 0.6cqw;
    margin-bottom: 0.2cqw;
}

.ig-profil-nazwa {
    margin: 0;
    font-size: 1.5cqw;
    font-weight: 700;
    color: #262626;
}

.ig-profil-opcje {
    font-size: 0.9cqw;
    color: #737373;
}

.ig-profil-imie {
    display: block;
    margin-bottom: 0.6cqw;
    font-size: 1cqw;
    color: #262626;
}

.ig-profil-statystyki {
    display: flex;
    gap: 1.4cqw;
    margin-bottom: 0.8cqw;
    font-size: 1cqw;
}

.ig-profil-bio {
    display: flex;
    flex-direction: column;
    gap: 0.2cqw;
    font-size: 1cqw;
}

.ig-profil-kategoria {
    color: #737373;
}

.ig-profil-opis {
    margin: 0;
}

.ig-profil-link {
    color: #00376b;
    font-weight: 600;
}

.ig-profil-lista {
    list-style: none;
    margin: 0.7cqw 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3cqw;
    font-size: 1cqw;
    color: #262626;
}

.ig-profil-lista i {
    width: 1.3cqw;
    color: #8e8e8e;
}

.ig-profil-obserwuj {
    display: block;
    margin: 0 2cqw 0.9cqw;
    padding: 0.7cqw 0;
    background: #0095f6;
    border-radius: 0.5cqw;
    text-align: center;
    font-size: 1.05cqw;
    font-weight: 600;
    color: #ffffff;
    cursor: default;
}

.ig-profil-zakladki {
    display: flex;
    align-items: center;
    padding: 0 1.2cqw;
    border-top: 0.1cqw solid #dbdbdb;
}

.ig-profil-zakladka {
    padding: 0.7cqw 2cqw;
    margin-top: -0.1cqw;
    font-size: 1.1cqw;
    color: #8e8e8e;
    border-bottom: 0.15cqw solid transparent;
    cursor: default;
}

.ig-profil-zakladka.aktywna {
    color: #262626;
    border-bottom-color: #262626;
}

.ig-profil-powrot {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4cqw;
    padding: 0.5cqw 0.9cqw;
    background: #efefef;
    border: none;
    border-radius: 0.4cqw;
    font-family: inherit;
    font-size: 1cqw;
    font-weight: 600;
    color: #262626;
    cursor: pointer;
}

.ig-profil-powrot:hover {
    background: #dbdbdb;
}

.ig-profil-siatka {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2cqw;
    padding: 0.2cqw;
}

.ig-profil-miniatura {
    flex: 0 0 calc((100% - 0.8cqw) / 5);
    aspect-ratio: 3 / 4;
    background: #efefef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6cqw;
    color: #c7c7c7;
}

.ig-profil-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* KOMENTARZE IG */

.ig-komentarze {
    padding: 0.5cqw 0.2cqw;
    display: flex;
    flex-direction: column;
    gap: 0.35cqw;
    font-size: 1.05cqw;
}

.ig-komentarze-wszystkie {
    color: #737373;
    font-size: 1cqw;
    display: block;
    padding: 0.5cqw 0.2cqw 0;
    cursor: pointer;
}

.ig-komentarze-naglowek {
    display: flex;
    align-items: center;
    padding: 0.6cqw 0.2cqw;
    border-bottom: 0.1cqw solid #dbdbdb;
}

.ig-komentarze-tytul {
    font-size: 1.2cqw;
    font-weight: 700;
}

.ig-komentarz {
    display: flex;
    align-items: flex-start;
    gap: 0.6cqw;
}

.ig-komentarz-awatar {
    flex-basis: 2.6cqw;
    width: 2.6cqw;
    height: 2.6cqw;
    background: #efefef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1cqw;
    color: #8e8e8e;
}

.ig-komentarz-tresc {
    flex: 1;
    min-width: 0;
}

.ig-komentarz-tekst {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ig-komentarz-autor {
    font-weight: 600;
    margin-right: 0.2cqw;
}

.ig-komentarz-meta {
    display: flex;
    gap: 0.7cqw;
    margin-top: 0.15cqw;
    font-size: 0.9cqw;
    font-weight: 600;
    color: #737373;
}

.ig-komentarz-serce {
    flex-shrink: 0;
    margin-top: 0.15cqw;
    font-size: 0.9cqw;
    color: #8e8e8e;
}

.ig-komentarze-pole {
    display: flex;
    align-items: center;
    gap: 0.7cqw;
    padding: 0.7cqw 0.2cqw;
    border-top: 0.1cqw solid #dbdbdb;
    font-size: 1.05cqw;
    color: #737373;
}

.ig-komentarze-pole span {
    flex: 1;
}

.ig-komentarze-pole b {
    color: #0095f6;
    font-weight: 600;
}

/* Awatary komentarzy ze zdjęciem */
.fb-komentarz-awatar img,
.ig-komentarz-awatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* KONIEC DNIA */

.koniec-dnia {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 0, 15, 0.88);
    animation: koniec-wejscie 0.5s ease-out;
}

@keyframes koniec-wejscie {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.koniec-karta {
    width: 38cqw;
    padding: 2.4cqw 2.6cqw;
    background: #1a0033;
    border: 0.2cqw solid #7c3aed;
    border-radius: 1cqw;
    box-shadow: 0 0 4cqw rgba(124, 58, 237, 0.5);
    text-align: center;
    color: #fff;
}

.koniec-tytul {
    margin: 0;
    font-size: 2.2cqw;
    color: #c4a5ff;
}

.koniec-podtytul {
    margin: 0.3cqw 0 1.6cqw;
    font-size: 1.1cqw;
    color: #9d8bc4;
}

.koniec-statystyki {
    display: flex;
    flex-direction: column;
    gap: 0.6cqw;
    margin-bottom: 1.4cqw;
}

.koniec-wiersz {
    display: flex;
    justify-content: space-between;
    padding: 0.7cqw 1cqw;
    background: rgba(124, 58, 237, 0.12);
    border-radius: 0.5cqw;
    font-size: 1.3cqw;
}

.koniec-wiersz b {
    font-size: 1.5cqw;
}

.koniec-ok b {
    color: #2ecc71;
}

.koniec-zle b {
    color: #e74c3c;
}

.koniec-ocena {
    margin: 0 0 1.6cqw;
    font-size: 1.2cqw;
    font-style: italic;
    color: #d9ccf5;
}

.koniec-przyciski {
    display: flex;
    gap: 1cqw;
    justify-content: center;
}

.koniec-przycisk {
    padding: 0.7cqw 1.4cqw;
    background: transparent;
    border: 0.15cqw solid #7c3aed;
    border-radius: 0.6cqw;
    color: #c4a5ff;
    font-family: inherit;
    font-size: 1.2cqw;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.koniec-przycisk:hover,
.koniec-przycisk-glowny {
    background: #7c3aed;
    color: #fff;
}
/* Mechanika gry: oznaczenia lupki i komunikat zwrotny decyzji */
[data-zaznaczalne].podejrzane { outline: 2px solid #f59e0b !important; outline-offset: 2px; cursor: help; }
[data-zaznaczalne].zaznaczone { outline: 2px solid #8b5cf6; }
.wynik-decyzji { position: relative; z-index: 30; margin: 12px; padding: 14px 16px; border: 1px solid rgba(139,92,246,.7); border-radius: 12px; background: rgba(20,18,35,.96); color: #fff; font-size: 14px; line-height: 1.5; box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.narzedzie-item.zuzyte { opacity: .8; }

/* Kolejka moderacji i przyciski dodatkowe */
.przycisk-kolejki{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(167,139,250,.65);border-radius:10px;background:rgba(25,18,42,.96);color:#f4edff;font:600 12px/1.2 Segoe UI,Arial,sans-serif;cursor:pointer;box-shadow:0 5px 18px #0005}
.przycisk-kolejki b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#7c3aed;color:white}
.przycisk-kolejki:hover{background:#38205f}
.przycisk-zapisz{top:56px}
.kolejka-panel{position:absolute;z-index:40;top:10px;right:10px;bottom:10px;width:min(340px,52%);display:flex;flex-direction:column;overflow:hidden;border:1px solid #8b5cf6;border-radius:14px;background:rgba(15,12,26,.98);color:#f5f3ff;box-shadow:0 18px 55px #000b;font:12px/1.4 Segoe UI,Arial,sans-serif}
.kolejka-naglowek{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid #38245a;background:#201631}
.kolejka-naglowek strong{display:block;font-size:15px}.kolejka-naglowek small{display:block;margin-top:3px;color:#b9a8d8}
#kolejka-zamknij{border:0;background:transparent;color:white;font-size:26px;cursor:pointer}
.kolejka-lista{display:flex;flex-direction:column;gap:7px;padding:10px;overflow:auto;min-height:0}
.kolejka-wpis{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:10px;border:1px solid #332747;border-radius:9px;background:#171321;color:#eee8ff;text-align:left;cursor:pointer}
.kolejka-wpis:hover,.kolejka-wpis.wybrany{border-color:#a78bfa;background:#2a1e40}
.kolejka-wpis.do-weryfikacji{border-left:3px solid #fbbf24}
.kolejka-wpis-gora{color:#bca8e4;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.kolejka-autor{font-size:12px}.kolejka-fragment{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#c9c2d8;font-size:11px}
.kolejka-stopka{padding:10px 13px;border-top:1px solid #38245a;color:#b9a8d8;font-size:10px}
.wynik-decyzji{position:absolute;z-index:25;left:12%;right:12%;bottom:14px;margin:0;padding:12px 14px;border:1px solid #8b5cf6;border-radius:10px;background:rgba(20,18,35,.97);color:#fff;font:12px/1.5 Segoe UI,Arial,sans-serif;box-shadow:0 8px 28px #0008;pointer-events:none}
.tryb-lupa [data-zaznaczalne]{cursor:crosshair!important}
@media(max-width:700px){.kolejka-panel{width:calc(100% - 20px)}.przycisk-kolejki{font-size:10px;padding:7px}.wynik-decyzji{left:5%;right:5%;font-size:11px}}


/* Przyciski zamykania okien narzędzi — widoczne i dostępne także na mniejszych ekranach. */
.skaner-terminal-pasek {
    position: relative;
    justify-content: flex-start;
    padding-right: 2.8rem;
}
.skaner-ai-zamknij {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid rgba(46, 204, 113, 0.65);
    border-radius: 0.25rem;
    background: #102310;
    color: #b9ffc9;
    cursor: pointer;
    font-size: 1rem;
    flex: 0 0 auto;
}
.skaner-ai-zamknij:hover, .skaner-ai-zamknij:focus-visible {
    background: #2ecc71;
    color: #061006;
    outline: 2px solid #b9ffc9;
    outline-offset: 2px;
}
#przegladarka-zamknij {
    margin-left: auto;
    position: relative;
    z-index: 2;
    cursor: pointer;
}


/* Poprawki dostępności i zamykania okna skanera zdjęć. */
#okno-przegladarka .przegladarka-zakladki { position: relative; z-index: 1000; min-height: 42px; flex-basis: max(42px, 2cqw); }
#przegladarka-zamknij { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 18px; color: #fff; background: #45464b; border: 1px solid #777; border-radius: 6px; z-index: 1001; pointer-events: auto; }
#przegladarka-zamknij:hover, #przegladarka-zamknij:focus-visible { background: #e74c3c; color: #fff; outline: 2px solid #fff; outline-offset: 1px; }
#okno-przegladarka[aria-hidden="true"] { display: none !important; }
#notes { cursor: pointer; pointer-events: auto; }
#notes .obiekt { pointer-events: none; }


/* Poprawki UX v6: widoczny i klikalny przycisk zamykania książki zasad. */
#okno-notesu .notes-rozlozony .notes-zamknij {
    top: 0.7cqw;
    right: 0.7cqw;
    z-index: 20;
    pointer-events: auto;
    width: clamp(28px, 2.4cqw, 42px);
    height: clamp(28px, 2.4cqw, 42px);
    font-size: clamp(14px, 1.1cqw, 20px);
}
#okno-notesu .notes-rozlozony::after { z-index: 3; pointer-events: none; }
#okno-notesu { pointer-events: none !important; }
#okno-notesu .notes-rozlozony { pointer-events: auto !important; }
#okno-notesu .notes-rozlozony * { pointer-events: auto; }


/* Fix v7: przezroczysta warstwa książki nie może blokować całej gry. */
#okno-notesu { pointer-events: none !important; }
#okno-notesu .notes-rozlozony { pointer-events: auto !important; }
#okno-notesu .notes-rozlozony::before,
#okno-notesu .notes-rozlozony::after { pointer-events: none !important; }
#okno-notesu.ukryty { display: none !important; }


/* Przyciski po decyzji moderatora */
.wynik-decyzji { pointer-events: auto !important; }
.wynik-decyzji-tresc { margin-bottom: 10px; }
.wynik-decyzji-nastepny { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid rgba(167,139,250,.85); border-radius: 9px; background: linear-gradient(135deg,#7c3aed,#5b21b6); color: #fff; font: 600 13px/1.2 Segoe UI,Arial,sans-serif; cursor: pointer; pointer-events: auto; }
.wynik-decyzji-nastepny:hover { filter: brightness(1.12); transform: translateY(-1px); }
.wynik-decyzji-nastepny:focus-visible { outline: 2px solid #ddd6fe; outline-offset: 3px; }

/* Pewne zamykanie obu okien notatek/zasad */
#notatnik-zamknij { position: relative; z-index: 1002; pointer-events: auto !important; cursor: pointer; }
#okno-notesu .notes-zamknij { position: absolute; z-index: 9999 !important; pointer-events: auto !important; cursor: pointer; }

/* Przyciski kolejki i zapisu przeniesione z prawego górnego rogu,
   aby nie zasłaniały przycisków zamykania notatnika i innych okien. */
#przycisk-kolejki,
.przycisk-kolejki:not(.przycisk-zapisz) {
    left: 12px;
    right: auto;
    top: auto;
    bottom: 12px;
}
#zapisz-gre,
.przycisk-zapisz {
    left: 12px;
    right: auto;
    top: auto;
    bottom: 56px;
}
@media(max-width:700px) {
    #przycisk-kolejki,
    .przycisk-kolejki:not(.przycisk-zapisz) { left: 8px; bottom: 8px; }
    #zapisz-gre,
    .przycisk-zapisz { left: 8px; bottom: 48px; }
}


/* Feed zdjęciowy: obraz ma być widoczny, responsywny i nie może znikać po błędzie źródła. */
.zdjecie-posta, .ig-zdjecie-posta { display:flex; width:100%; overflow:hidden; background:#e9edf3; }
.zdjecie-posta img, .ig-zdjecie-posta img { display:block; width:100%; max-height:560px; min-height:180px; object-fit:cover; }
.fb-kontener-posta .zdjecie-posta { margin-top:10px; border-radius:3px; }
.fb-kontener-posta .zdjecie-posta img { aspect-ratio: 1.5 / 1; }
.ig-zdjecie-posta img { aspect-ratio:1 / 1; }