@import url('https://fonts.googleapis.com/css?family=Lato:400');

/* common reset */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* END: common reset */

/* html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: 'Lato', sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.25);
} */
.logo {

    height: auto;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 999;
    max-width: 250px;
    width: 100%;
}

#logo {
    pointer-events: all;
    cursor: pointer;
}

body {

    background: #000033;

}

.is-hidden {
    display: none !important;
    visibility: hidden !important;
}


.flagController {
    position: fixed;
    top: 15%;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    pointer-events: all;
}

/* Współlny styl dla przycisków (używanych jako span) */
.flagController span {
    padding: 12px 20px;
    /* min-width: 180px; */
    text-align: center;
    border-radius: 0px;
    cursor: pointer;
    /* font-weight: bold; */
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    user-select: none;
    background: #001c48;
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    pointer-events: all;
}

/* Efekt najechania */
.flagController span:hover {
    background: rgba(60, 60, 60, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* Efekt kliknięcia */
.flagController span:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Style dla stanów aktywnych (klasa 'active' dodawana przez JS) */
.flagController span.active#stop {
    background: #d32f2f;
    /* Czerwony dla STOP */
    color: white;
    border-color: #ff5252;
    box-shadow: 0 0 15px rgba(211, 47, 47, 0.4);
}

.flagController span.active#packagePov {
    background: #1976d2;
    /* Niebieski dla POV */
    color: white;
    border-color: #448aff;
    box-shadow: 0 0 15px rgba(25, 118, 210, 0.4);
}

/* Kontener główny panelu */
.hmi-panel {
    z-index: 999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: all;
    width: 60vw;
    max-width: 1200px;
    background: #fff;
    /* Półprzezroczyste tło */
    backdrop-filter: blur(12px);
    /* Efekt rozmycia pod panelem */
    border: 1px solid #001c48;
    border-radius: 0px;
    overflow: hidden;
    color: #001c48;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    font-family: 'appfont', Tahoma, Geneva, Verdana, sans-serif;
}

/* Wymuszenie, aby pasek nawigacji był zawsze na wierzchu i klikalny */
.nav-tabs {
    display: flex;
    position: relative;
    /* Ważne! */
    z-index: 10;
    /* Wyższy niż treść poniżej */
    background: #001c48;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'appfont', Tahoma, Geneva, Verdana, sans-serif;
}

.nav-tabs button {
    font-family: 'appfont', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 0;
    position: cursor;
    padding: 4px;
    border: none;
}

/* Naprawa treści - dodanie odstępu, aby nagłówki nie wchodziły pod navbar */
.hmi-content {
    position: relative;
    z-index: 1;
    padding: 15px;
    background: #fff;
    /* Usuwamy ewentualne stare pozycjonowanie, które mogło psuć widok */
    margin-top: 0;
}

/* Reset nagłówków wewnątrz sekcji, aby nie latały swobodnie */
.screen h2,
.screen-title h2 {
    position: static;
    /* Powrót do normalnego przepływu dokumentu */
    margin-top: 10px;
    margin-bottom: 5px;
    display: block;
}

/* Jeśli napisy nadal blokują, to "przepuszcza" kliknięcia pod spodem, 
   ale lepiej naprawić pozycję jak wyżej */
.screen-title {
    pointer-events: none;
    /* Tekst nie będzie blokował myszki */
}

/* Ale przyciski wewnątrz muszą być klikalne, więc resetujemy dla nich: */
.input-wrapper,
input,
button {
    pointer-events: all;
}

.tab-btn.active {
    color: #fff;
    /* border-bottom: 3px solid #ffcc00; */
    /* Wyraźny żółty akcent na dole */
    background: rgba(255, 255, 255, 0.2);
}

.tab-btn:hover {
    color: #fff;
    background: #001c48;
}



/* Treść sekcji */
.hmi-content {
    padding: 25px;
    /* Zwiększony padding od góry */
    background: rgba(255, 255, 255, 0.95);
    /* Jasne tło panelu zgodnie ze zdjęciem */
}

.screen-title {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.screen-title h2 {
    font-size: 18px;
    color: #001c48;
    margin: 0;
    line-height: 1.2;
}

.screen-title p {
    font-size: 13px;
    color: #666;
    margin: 5px 0 0 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nagłówki sekcji */
.hmi-panel h2 {
    font-size: 14px;
    margin: 0 0 15px 0;
    color: #001c48;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 3px solid #001c48;
    padding-left: 10px;
    margin-bottom: 0;
}

/* Grupowanie elementĂłw */
.group {
    background: #99d0e5;
    border-radius: 0px;
    padding: 12px;
    margin-top: 15px;
    /* border: 1px solid rgba(255, 255, 255, 0.05); */
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
}

.row:last-child {
    margin-bottom: 0;
}

/* Wrapper dla inputĂłw i jednostek */
.input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pola edytowalne (Żółte - zgodnie z Twoim Excel) */
input[type="number"] {
    background: #fff;
    border: none;
    border-radius: 0px;
    padding: 4px 8px;
    width: 81px;
    font-weight: bold;
    color: #1a1a1a;
    text-align: right;
    outline: none;
    border: 1px solid #001c48
}

input[type="number"]:focus {
    box-shadow: 0 0 5px #001c48;
}

.note {
    font-size: 12px;
    margin-top: 5px;
}

/* Pola wynikowe (Zielone) */
.output {
    background: #001c48;
    color: #fff;
    padding: 8px 12px;
    border-radius: 0px;
    font-weight: bold;
    min-width: 75px;
    text-align: right;
    display: inline-block;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.output.large {
    font-size: 16px;
    background: #001c48;
    width: 120px;
}

.output.highlight {
    color: #FFDA3E;
}

/* OstrzeĹźenie (Czerwone) */
.output.warning {
    background: #e74c3c;
    animation: pulse 1.5s infinite;
}

/* --- BANER OSTRZEGAWCZY / HANDLOWY --- */
#len-warning,
.warning-msg {
    background-color: #fffed9 !important;
    /* Żółty rzucający się w oczy (ostrzegawczy) */
    color: #001c48 !important;
    /* Ciemnogranatowy tekst dla idealnego kontrastu */
    padding: 15px 20px;
    margin-top: 20px;
    font-weight: bold;
    font-size: 15px;
    text-align: center;

    /* Czerwona ramka wokół */
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
    /* Delikatna czerwona poświata */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    grid-column: 1 / -1;
    /* Jeśli to jest w siatce, rozciągnie na całą szerokość */
}

/* Opcjonalnie: lekka animacja pulsowania, żeby na 100% przykuło wzrok */
@keyframes pulse-banner {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

#len-warning:not(.is-hidden) {
    animation: pulse-banner 2s infinite;
}

/* Upewnienie się, że ukrywanie działa */
.is-hidden {
    display: none !important;
}

@keyframes redbgblink {
    0% {
        background-color: #001c48;
    }
    69% {
        background-color: #001c48;
    }
    70% {
        background-color: #D30000;
    }

    100% {
        background-color: #D30000;
    }
}@keyframes bgblink {
    0% {
        background-color: #001c48;
    }
    69% {
        background-color: #001c48;
    }
    70% {
        background-color: #99d0e5;
    }

    100% {
        background-color: #99d0e5;
    }
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* Jednostki i etykiety */
.unit {
    font-size: 11px;
    color: #777;
    width: 35px;
}

.gain-text {
    color: #2ecc71;
    font-weight: bold;
    font-size: 14px;
}


/* --- POPRAWKA UKŁADU SIATKI (GRID) --- */

.hmi-grid-layout {
    display: grid;
    /* Dzielimy na dwie kolumny: lewa na parametry, prawa na dane techniczne */
    grid-template-columns: 1.1fr 0.9fr;
    gap: 25px;
    align-items: start;
    /* margin-top: 20px; */
}

.hmi-grid-layout .column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Odstępy między boksami w kolumnie */
}

/* Stylizacja nagłówków wewnątrz grup, jeśli ich używamy */
.group header {
    font-size: 11px;
    font-weight: bold;
    color: #001c48;
    margin-bottom: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 28, 72, 0.2);
    padding-bottom: 5px;
}

/* Specyficzne dla Screen 1: Sekcja z właściwościami produktu */
.product-details-box {
    background: #e1eff6;
    /* Nieco jaśniejszy niebieski dla odróżnienia */
    border: 1px dashed #001c48;
}

/* Pola "Secondary" - te których operator nie wpisuje (tylko odczyt) */
.input-wrapper.secondary .output {
    background: #001c48;
    /* Ciemniejszy granat dla pól statycznych */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
}

/* --- POPRAWKA RESPONSYWNOŚCI --- */

@media (max-width: 1000px) {
    /* .hmi-panel {
        width: 90vw;
    } */

    
}

/* --- DODATKOWE STYLE DLA TABELI Z SCREEN #3 --- */
.hmi-table-simple {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.hmi-table-simple th {
    text-align: left;
    font-size: 11px;
    color: #555;
    padding-bottom: 8px;
}

.hmi-table-simple td {
    padding: 4px 0;
}

/* Selektor produktĂłw (Grid) */
.product-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 8px;
    margin-top: 10px;
}

.product-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #3498db;
    /* margin-top:10px; */
    padding: 8px;
    border-radius: 0px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    max-width: 120px;
    display: inline-block;
    text-align: center;


}



.product-card:hover {
    background: rgba(255, 255, 255, 0.1);
}

.product-card.selected {
    background: rgba(52, 152, 219, 0.3);
    border-color: #3498db;
    color: #001c48;
}

.navbar-nav ol,
.navbar-nav ul,
.navbar-nav li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;


}

b.headline {
    text-transform: uppercase;
    letter-spacing: 1pt;
}

.anno {
    font-size: 14px;
    width: 200px;
    background-color: rgba(0, 0, 0, 0.25);
    position: absolute;
    z-index: 999;
    padding: 10px;
    text-align: center;
    display: none;
    visibility: hidden;
    color: #ffffff;
}

.standard-annotation {
    font-family: "appfont", sans-serif;
    font-weight: normal;
}

#skipButton,
#replayButton,
#backButton,
#ctaButton {
    /* position:absolute;
    
    top: 50px;
    right: 10px;
    width: 60px;
    height: 60px; */
    z-index: 8;

    cursor: pointer;
    pointer-events: all;
}

/* #skipButton img,
#replayButton img,
#backButton img,
#ctaButton img {
    width: 100%;
    height: 100%;
} */

/* .backButton {
    height: 4%;
    width: 4%;
    cursor: pointer;
    pointer-events: all;
    position: fixed;
    right: 60px;
    top: 20px;

} */

/* .page-content{
    height: 100vh;
    padding: 0 10px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
} */
#ctaButton {
    bottom: 20px;
    width: 100%;
}

main .container {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;

}

#intro-text {
    font-family: "appfont", sans-serif;
    text-align: center;
    font-size: 48px;
    pointer-events: none;
    margin: 0 40px;
    animation: blink 5000ms infinite;
    color: white;
    text-shadow: 0px 0px 12px #63686e;
    /* text-shadow: 0px 0px 12px #ffffff; */
}

@keyframes blink {
    20% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }
}

.app-ui-wrapper {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
    font-family: "appfont", sans-serif;
    /* cursor: pointer; */
    /* pointer-events: all; */
}

/* Zakładki trybów */
.main-mode-nav {
    display: flex;
    background: #fff;
    border-radius: 0px;
    flex-wrap: wrap;
    padding: 4px;
    border: 1px solid #001c48;
    pointer-events: all;
    cursor: pointer;
    pointer-events: all;
}

.main-mode-nav.is-hidden {
    pointer-events: none;
}

.mode-tab {
    flex: 1;
    text-align: center;
    background: transparent;
    border: none;
    color: #001c48;
    padding: 8px;
    /* margin:4px; */
    font-size: 11px;
    cursor: pointer;
    border-radius: 0px;
    transition: 0.2s;
    pointer-events: all;
    text-transform: uppercase;
    z-index: 999;
    border-top: 3px solid transparent;
    border-bottom: 3px solid white;
}

.mode-tab.active {
    background: #001c48;
    border-bottom: 3px solid #001c48;
    color: #fff;
}

.mode-tab:hover {
    border-bottom: 3px solid #001c48;
}

/* Panele trybĂłw */
.mode-panel {
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #001c48;
    flex-direction: column;
    gap: 10px;
}

.mode-panel.visible {
    display: flex;
}

.group-title {
    color: #001c48;
    font-size: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

/* Przyciski akcji */
.action-btn {
    background: #333;
    color: #fff;
    border: 1px solid #444;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.action-btn:hover {
    background: #444;
}

.action-btn.active {
    border-color: #007bff;
    background: #004a99;
}

/* Display dla Step Mode */
.step-display {
    background: #000;
    padding: 10px;
    border-radius: 5px;
    border-left: 3px solid #007bff;
}

.step-display h4 {
    margin: 5px 0 0 0;
    font-size: 14px;
}

.step-display small {
    color: #666;
    font-size: 10px;
}


.app-ui-wrapper.is-intro {
    position: fixed;
    top: 40%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    /* Nadpisujemy 280px */
    height: 10vh;
    padding: 0;
    margin: 0;
    gap: 0;
    z-index: 9999;
}

/* 2. Nawigacja na pełny ekran */
.app-ui-wrapper.is-intro .main-mode-nav {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    gap: 0;
    background: transparent !important;
    /* To usunie biały pasek */
    border: none !important;
    /* To usunie granatową ramkę dookoła */
    box-shadow: none;
    color: white !important;
}

/* 3. Każdy tab jako gigantyczny przycisk */
.app-ui-wrapper.is-intro .mode-tab {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    /* Wielki napis */
    font-weight: bold;
    border: none;
    color: white !important;


}

.app-ui-wrapper.is-intro .mode-tab:last-child {
    border-right: none;
}

/* 4. Hover na wielkich kaflach */
.app-ui-wrapper.is-intro .mode-tab:hover {

    color: #001c48 !important;
}

/* 5. Ukrywamy panele, dopóki ktoś nie wybierze trybu */
.app-ui-wrapper.is-intro .flagController {
    display: none !important
}

/* simulation panels */
.simulation-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
}

/* flex panel on right in the middle*/
.panel-section {
    margin: 25px;
    background-color: #fff;
    min-width: 120px;
    min-height: 120px;
    /* display: flex; */
    justify-content: space-around;
    align-content: center;
    align-items: center;
    backdrop-filter: blur(12px);
    /* Efekt rozmycia pod panelem */
    border: 1px solid #001c48;
    border-radius: 0px;
    overflow: hidden;
    color: #001c48;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    vertical-align: top;
    pointer-events: all;
    cursor: default;
    text-align: center;
}

/* .input-section {
    


}

.output-section {
   
  
} */
.product-section {
    align-self: flex-end;

}

.simulation-panel h2 {
    margin: 12px;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    text-transform: uppercase;
}

.panel-section .btn {
    padding: 8px;
    max-width: 100px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    pointer-events: all;
    border-radius: 0px;
    text-align: center;
    color: #001c48;
    /* margin: 0 auto; */
    display: inline-block;
}

.panel-section .btn strong {
    font-weight: bold;
}

.panel-section .btn:hover {
    background-color: #001c48;
    color: #fff;
}
.panel-section .btn.highlighted {
    background-color: #001c48;
    color: #fff;
}

.panel-section .btn.inactive {
    pointer-events: none;
    cursor: default;
}


.panel-section .btn img {
    width: 80px;
    height: 80px;
    filter: none;

}

.panel-section .btn:hover img {
    
    filter: invert(100%) brightness(150%)
}

.panel-section .btn.inactive img {
    
    filter: invert(60%) saturate(0%)
}

.panel-section .btn.inactive.stopped img {
    
    filter: contrast(130%) saturate(500%) hue-rotate(130deg)
}

.panel-section .digitizer {
    margin: 0 auto 0 auto;
    padding: 8px 0;
    width: 100%;
    background-color: #001c48;
    /* width: 50px; */
    font-size: 10px;
    color: #fff;
    text-align: center;
    display: block;
}

.panel-section .counter {

    /* display: inline-block; */
    /* padding: 4px 8px; */
    /* border: 1px solid #000033; */
    font-size: 18px;
    width: 40px;
    text-align: right;
    font-weight: bold;
    margin-right: 4px;
}

.product-dropdown .product-option {
    width: 40px;
    height: auto;
    cursor: pointer;
    pointer-events: all;
    display: inline-block;
    margin: 4px;
    border: 4px solid transparent;
}

.product-dropdown .product-option:hover {
    background-color: #001c48;

}

.product-dropdown .product-option.active {
    background-color: #001c48;

}

.product-dropdown .product-option:hover img {
    filter: invert(100%) brightness(150%)
}

.product-dropdown .product-option.active img {

    filter: invert(100%) brightness(150%)
}

.speedResDiv {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    justify-content: space-evenly;
    padding-bottom: 2px;
}

.panel-section .btn.speedRes-btn {
    background-color: transparent;
    color: #001c48;
    border: 2px solid #001c48 !important;
    /* Tutaj brakowało słowa 'solid' w Twoim kodzie! */
    border-radius: 0px;
    /* Ostre kąty, aby pasowało do reszty Twojego UI */
    padding: 8px 15px;
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Płynne przejście kolorów */
    width: 100%;
    /* Przyciski będą równej szerokości */
    box-sizing: border-box;
}

.panel-section .btn.speedRes-btn:hover {
    background-color: #001c48;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 28, 72, 0.3);
    /* Dodaje głębi (cień) */
    transform: translateY(-2px);
    /* Przycisk lekko się "unosi", sugerując klikalność */
}

/* 4. Efekt wciśnięcia (Active) */
.panel-section .btn.speedRes-btn:active {
    transform: translateY(1px);
    /* Przycisk "zapada się" po kliknięciu */
    box-shadow: 0 1px 2px rgba(0, 28, 72, 0.3);
    /* Cień maleje */
}

/* MARK: Mobile Optimization */
/* Mobile Optimization */
@media screen and (max-width: 750px) {

    /* 1. Traktujemy wrapper jako pełnoekranowy kontener */
    .app-ui-wrapper:not(.is-intro) {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        transform: none;
        /* WAŻNE: usuwamy transform, by nie psuć position:fixed w dzieciach */
        pointer-events: none;
        /* Puszcza kliknięcia na model 3D pod spodem */
    }

    /* 2. Centrujemy SAMĄ nawigację (zakładki) na górze ekranu */
    .main-mode-nav {
        position: absolute;
        top: 36px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 350px;
        pointer-events: all;
        /* Przywracamy klikalność zakładek */
    }

    /* 3. Panel symulacji też na pełny ekran */
    .simulation-panel {
        display: block;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    /* 4. Sekcje: sztywne wymiary zamiast problematycznego "scale" */
  

    /* Dolny Panel (Settings) */
    

    .speedResDiv {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
        margin-top: 10px;
        justify-content: space-evenly;
    }

    /* 5. Skalowanie wewnętrznych elementów panelu */
    /* .panel-section .btn {
        padding: 4px;
    }

    .panel-section .btn img {
        width: 55px;
        height: 55px;
    } */

    .simulation-panel h2 {
        font-size: 11px;
        margin: 2px 0;
    }

    .panel-section .digitizer {
        font-size: 10px;
        padding: 4px 0;
        width: 100%;
    }

    .panel-section .counter {
        font-size: 14px;
    }

    /* 6. Ułożenie Ikon Produktów */
    .product-dropdown {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 8px;
    }

    .product-dropdown .product-option {
        width: 35px;
        height: 35px;
        margin: 0;
    }
}


.d-f {
    display: flex;
}

.j-c-c {
    justify-content: center;
}

.f-d-c {
    flex-direction: column;
}

.j-c-s-b {
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

.j-c-f-e {
    justify-content: flex-end;
}

.j-c-f-s {
    justify-content: flex-start;
}

.a-i-c {
    align-items: center;
}

.f-w-w {
    flex-wrap: wrap;
}

.header-content {
    padding-top: 10px;
}

.is-hidden {
    display: none !important;
    visibility: hidden !important;
}

.is-visible {
    display: block;
    visibility: visible;
}

.central {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

@font-face {
    font-family: icomoon;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/icomoon/icomoon.ttf?hfye7u) format("truetype"), url(/fonts/icomoon/icomoon.woff?hfye7u) format("woff"), url(/fonts/icomoon/icomoon.svg?hfye7u#icomoon) format("svg")
}

@font-face {
    font-family: "appfont";
    font-style: normal;
    font-weight: 400;
    src: local("Century Gothic"), local("Century-Gothic-Regular"), url(/fonts/century-gothic/century-gothic-regular.woff2) format("woff2"), url(/fonts/century-gothic/century-gothic-regular.woff) format("woff")
}

@font-face {
    font-family: "appfont";
    font-style: italic;
    font-weight: 400;
    src: local("Century Gothic Italic"), local("Century Gothic-Italic"), url(/fonts/century-gothic/century-gothic-italic.woff2) format("woff2"), url(/fonts/century-gothic/century-gothic-italic.woff) format("woff")
}

@font-face {
    font-family: "appfont";
    font-style: normal;
    font-weight: 700;
    src: local("Century Gothic Bold"), local("Century Gothic-Bold"), url(/fonts/century-gothic/century-gothic-bold.woff2) format("woff2"), url(/fonts/century-gothic/century-gothic-bold.woff) format("woff")
}

@font-face {
    font-family: "appfont";
    font-style: italic;
    font-weight: 700;
    src: local("Century Gothic Bold Italic"), local("Century Gothic-BoldItalic"), url(/fonts/century-gothic/century-gothic-bolditalic.woff2) format("woff2"), url(/fonts/century-gothic/century-gothic-bolditalic.woff) format("woff")
}

@font-face {
    font-family: Desyrel;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/desyrel/desyrel-webfont.woff) format("woff")
}

/* @font-face {
    font-family: "appfont";
    font-weight: normal;
    font-style: normal;
    src: url('media/scene.babylon/fonts/OpenSans-Regular.ttf');
}

@font-face {
    font-family: "appfont";
    font-weight: bold;
    font-style: normal;
    src: url('media/scene.babylon/fonts/OpenSans-Bold.ttf');

}

@font-face {
    font-family: "appfont";
    font-weight: normal;
    font-style: italic;
    src: url('media/scene.babylon/fonts/OpenSans-Italic.ttf');
}

@font-face {
    font-family: "appfont";
    font-weight: bold;
    font-style: italic;
    src: url('media/scene.babylon/fonts/OpenSans-BoldItalic.ttf');

}

 */



.intro {
    position: absolute;
    top: 70px;
    width: 450px;
    left: 55px;

    /* margin-left: -300px; */
    font: "appfont" #373335 bolder 14px;
    text-align: left;



}

/* b {font: "appfont" bold;} */

.colorpanel {
    /*background-color: #000;*/
    padding: 5px 25px;
    height: max-content;

    /* max-width: 150px; */
    z-index: 1;
    line-height: 40px;
    /*border-radius: 10px;*/
}

.coloritem {
    display: flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    align-items: center;
    /* margin-right: 25px;
    margin-top: 5px; */
    border: 3px solid #eee;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    justify-content: center;
    pointer-events: all;
    cursor: pointer;
}

#introHolder {
    position: absolute;
    bottom: 110px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 2vw;
    background-color: rgba(0, 0, 0, .7);

}

#introHolder p {
    color: white;
}

.mainAppContainer a {
    color: #ffffff;
    text-decoration: none;
    /* display: inline-block;  */
}

html body a:hover,
html body a:focus,
html body a:active,
html body a.active {
    color: #ffffff;
}

.mainAppContainer header,
.mainAppContainer footer,
.mainAppContainer,
html body footer {
    width: 100%;
}

.mainAppContainer header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.mainAppContainer main {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.mainAppContainer header .container {
    display: -ms-flexbox;
    display: flex;
    gap: 5vw;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: none;
}

.mainAppContainer header .container .logo {
    z-index: 999;
}

.arrow-back {
    /* max-width: 240px; */
    width: 5%;
    position: fixed;
    top: 5%;
    right: 10%;
    cursor: pointer;
    pointer-events: all;
}

/* .logo-box {
        max-width: 33vw;
    }
    .back-box {
        max-width: 66vw;
    } */


.mainAppContainer footer {
    /* pointer-events: none; */
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.qrIMG {

    z-index: 99999;
}

.qrWrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 180px;
    max-width: 180px;
    font-family: "appfont", sans-serif;
    color: #001c48;
    font-size: 20px;
    text-align: center;
    visibility: visible;
}

.qrWrapper h1 {
    margin-bottom: 5px;
    text-align: center;
}


/* GŁÓWNY KONTENER FOOTERA */
.mainAppContainer footer .container {
    width: 100%;
    min-height: 80px;
    /* Nieco niższy, bardziej techniczny wygląd */
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    /* Zmiana na białe tło pasujące do hmi-panel */
    background: #ffffff;

    /* Solidne obramowanie pasujące do stylu kalkulatora */
    border-top: 2px solid #001c48;
    gap: 0;
    flex-wrap: nowrap;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
}

/* PRZYCISKI NAWIGACJI (BOCZNE) */
.mainAppContainer footer .container .navigation {
    display: flex;
    flex-direction: column;
    /* Ikona nad tekstem (jeśli są) */
    justify-content: center;
    align-items: center;
    width: 140px;
    padding: 10px;
    cursor: pointer;

    /* Kolory spójne z przyciskami tab-btn */
    background-color: #9acbef;
    color: #001c48;

    transition: all 0.2s ease;
    pointer-events: all;
    border: none;
    border-right: 1px solid rgba(0, 28, 72, 0.1);
    border-left: 1px solid rgba(0, 28, 72, 0.1);

    font-family: 'appfont', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

/* EFEKTY HOVER (NAJECHANIE) */
.mainAppContainer footer .container .navigation:hover {
    /* Odwrócenie kolorów - styl przycisków HMI */
    background-color: #001c48;
    color: #ffffff;
}

/* PRZYCISK "BACK" (OPCJONALNIE) */
.mainAppContainer footer .container .navigation.back {
    border-right: 1px solid rgba(0, 28, 72, 0.1);
}

/* PRZYCISK "NEXT" (OPCJONALNIE) */
.mainAppContainer footer .container .navigation.next {
    border-left: 1px solid rgba(0, 28, 72, 0.1);
    background-color: #f8f8f8;
    /* Delikatne wyróżnienie przycisku Dalej */
}

/* STAN AKTYWNY / PODŚWIETLONY (np. NEXT) */
.mainAppContainer footer .container .navigation.lighted {
    background-color: #f58232;
    /* Twój pomarańcz */
    color: white;
}

.mainAppContainer footer .container .navigation.disabled {
    background-color: rgba(136, 136, 136, 0.2);
    cursor: not-allowed;
    opacity: 0.5;
}


/* ŚRODKOWA CZĘŚĆ - ADNOTACJA */
.mainAppContainer footer .container .description {
    flex-grow: 1;
    /* Zajmuje całą wolną przestrzeń między przyciskami */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 40px;
    text-align: center;
    color: #0d2c9b;
    font-family: 'Lato', sans-serif;
}

.mainAppContainer footer .container .description h1,
.mainAppContainer footer .container .description h2,
.mainAppContainer footer .container .description p,
.mainAppContainer footer .container .description span {
    color: #001c48;
    /* Spójny granat z kalkulatora */
    margin: 2px 0;
    /* Ciasny, techniczny układ */
    line-height: 1.2;
}

/* WEWNĘTRZNY HOLDER IKONY I TEKSTU */
.mainAppContainer footer .container .navigation .navi_holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.navi_ico {
    width: 24px !important;
    /* Standaryzacja wielkości ikon */
    height: auto;
    transition: transform 0.3s ease;
}

.navigation:hover .navi_ico {
    transform: scale(1.1);
}

.hmi-close-btn {
    position: absolute;
    top: -5px;
    right: 10px;
    z-index: 100;
    /* Musi być nad nav-tabs */
    background: transparent;
    border: none;
    color: #ffffff;
    /* Biały, aby kontrastował z ciemnym nav-tabs */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: transform 0.2s;
}

.hmi-close-btn:hover {
    transform: scale(1.2);
    color: #ffcc00;
    /* Żółty akcent przy najechaniu */
}

/* Dostosowanie dla mobile, jeśli nav-tabs staje się przewijalne */
@media (max-width: 750px) {
    .hmi-close-btn {
        top: 40px;
        right: 5px;
        font-size: 32px;
        /* Większy, łatwiejszy do dotknięcia kciukiem */
        background: rgba(0, 28, 72, 0.5);
        /* Lekkie tło, żeby nie zginął na grafice */
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .app-ui-wrapper.is-intro {
        top: 20%;
        /* Dajemy więcej miejsca od góry na mobile */
        height: auto;
        /* Pozwalamy, by zawartość rozciągnęła kontener */
    }

    .app-ui-wrapper.is-intro .main-mode-nav {
        display: flex;
        flex-direction: column;
        /* To kluczowa zmiana - elementy pod sobą */
        height: auto;
    }

    .app-ui-wrapper.is-intro .mode-tab {
        width: 100%;
        height: 80px;
        /* Stała wysokość zamiast 100%, żeby nie zniknęły */
        font-size: 30px;
        /* Zmniejszamy font, żeby nie wychodził poza ekran */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        /* Opcjonalna linia oddzielająca */
        padding: 20px 0;
    }

    .app-ui-wrapper.is-intro .mode-tab:last-child {
        border-bottom: none;
    }

    .qrWrapper {
        visibility: hidden;
    }
}


.mainAppContainer footer .container .navigation {

    animation: fade-in .3s ease-out;

}

.mainAppContainer footer .container .navigation:hover .navi_ico {

    animation: shake 2s ease;
    /* animation: fade-in 1s linear; */
}

.mainAppContainer footer .container #navi_next.lighted .navi_holder {

    animation: bounce-in-right 1s ease;
    /* animation: fade-in 1s linear; */
}

.mainAppContainer footer .container #navi_prev.lighted .navi_holder {

    animation: bounce-in-left 1s ease;
    /* animation: fade-in 1s linear; */
}

.mainAppContainer footer .container .navigation.lighted .navi_desc {

    animation: fade-in 1s ease;
    /* animation: fade-in 1s linear; */
}

.mainAppContainer footer .container .description {
    align-self: center;
    justify-self: center;
    width: 66%;

}

/* #navi_prev .navi_holder {
        justify-content: flex-start;
    }     */
.navi_holder {
    justify-content: space-evenly;
}



.navi_ico {

    width: 22%;
    /* margin: auto 5%;   */
    display: flex;
    align-self: center;
    /* height: auto;      */
}

.navi_desc {
    color: white;
    justify-self: center;
    text-align: center;
    display: flex;
    align-items: center;
    /* font-size: .8em; */
    font-size: clamp(8px, 2vh, 14px);
}


.disclaimer {
    max-width: 80%;
    width: 500px;
    margin-bottom: 5%;
    /* height: 300px; */
    /* max-height: 50%; */
    background-color: #133c8b;
    color: white;
    border-radius: 8px;
    padding: 3%;
    pointer-events: none;
    font-size: clamp(8px, 2vh, 14px);
    line-height: 1.2em;
    animation: fade-in .7s ease;
}

.disclaimer h1 {
    font-size: 1.6em;
    line-height: 2.2em;
}

.disclaimer ul {
    margin: 1em 0;
    text-align: left;
    font-style: italic;
}

.disclaimer li {
    padding: .5em 0;
}

.disclaimer_button {
    display: block;
    padding: 10px;
    background-color: #f58232;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    width: 150px;
    margin: auto;
    cursor: pointer;
    pointer-events: all;
    text-align: center;
}

.button-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.button_next {
    float: right;
}

.button_previous {
    float: left;
}

.disclaimer_button:hover {
    background-color: #d45a05;
}

.disclaimer_button.disabled {
    background-color: #99999999;
    pointer-events: none;
}

.quiz_content {
    text-align: left;
    margin: auto;
}

.quiz_content h1 {
    font-size: 1.1em;
    line-height: 1.2em;
    text-align: left;
}

.quiz_content h2 {
    font-size: 1.1em;
    line-height: 1.2em;
    text-align: center;
}

input[type="radio"] {

    pointer-events: all;
    accent-color: #d45a05;
}

.quiz-option {
    margin: 10px 0;
    padding-left: 20px;
}

.quiz-option input[type="radio"] {
    margin-right: 10px;
    position: absolute
}

.quiz-option label {
    cursor: pointer;
    position: relative;
    display: block;
    padding-left: 30px;
    pointer-events: all;
}

.cta-button {
    border-radius: 0px;
    width: 120px;
    /* aspect-ratio: 1/5; */
    font-family: "appfont";
    font-weight: bold;
    padding: 10px 0px;
    font-size: 18px;
    color: white;
    text-align: center;
    text-decoration: none;
    margin: 4px;
    display: inline-block;
}



.installation {
    pointer-events: all;
    /* position: absolute;
        bottom: 70%;
        left: 50%; */
    /* font-weight: bold; */
    /* padding: 12px 24px 12px 24px; */
    /* -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); */
}

.menu-list {
    width: 240px;
    padding: 5px;
    margin: 2px 0;
    border: 2px solid white;
    color: white;
    font-size: 15px;
    text-align: center;

    background-color: none;
    cursor: pointer;
}

.menu-list:hover {
    background-color: white;
    border-color: white;
    color: #DA291C;
}

.wireframe {
    background: none;
    border: 2px solid white;
}

.red {
    background-color: #DA291C;
    color: white;
    border: none;
}

.blue {
    background-color: #133C8B;
    color: white;
    border: none;
}


.gui {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    justify-content: right;
    align-content: center;
}

.sticky-annotation {

    width: 100%;
    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;
    animation: fade 1s;

}

.animContainer {
    display: flex;
    flex-direction: row;
    padding-bottom: 3px;
}

@keyframes fade {
    0% {
        opacity: 0;
        margin-top: -20px;
    }

    100% {
        opacity: 1;
        margin-top: 0;
    }
}

.gelatine {
    animation: gelatine 0.5s infinite;
}

@keyframes gelatine {

    from,
    to {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}

.spin {
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.elastic-spin {
    animation: elastic-spin 1s infinite ease;
}

@keyframes elastic-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(720deg);
    }
}

.pulse {
    animation: pulse 1s infinite ease-in-out alternate;
}
.blink {
    animation: bgblink 1s infinite;
}
.redblink {
    animation: redbgblink 1s infinite;
}

@keyframes pulse {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1.2);
    }
}

.flash {
    animation: flash 500ms ease infinite alternate;
}

@keyframes flash {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.hithere {
    animation: hithere 1s ease infinite;
}

@keyframes hithere {
    30% {
        transform: scale(1.2);
    }

    40%,
    60% {
        transform: rotate(-20deg) scale(1.2);
    }

    50% {
        transform: rotate(20deg) scale(1.2);
    }

    70% {
        transform: rotate(0deg) scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.grow {
    animation: grow 2s ease infinite;
}

@keyframes grow {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.fade-in {
    animation: fade-in 2s linear infinite;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-out {
    animation: fade-out 2s linear infinite;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.bounce {
    animation: bounce 2s ease infinite;
}

@keyframes bounce {
    70% {
        transform: translateY(0%);
    }

    80% {
        transform: translateY(-15%);
    }

    90% {
        transform: translateY(0%);
    }

    95% {
        transform: translateY(-7%);
    }

    97% {
        transform: translateY(0%);
    }

    99% {
        transform: translateY(-3%);
    }

    100% {
        transform: translateY(0);
    }
}

.bounce2 {
    animation: bounce2 2s ease infinite;
}

@keyframes bounce2 {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

.shake {
    animation: shake 2s ease infinite;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
}

.flip {
    backface-visibility: visible !important;
    animation: flip 2s ease infinite;
}

@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }

    100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
    }
}

.swing {
    transform-origin: top center;
    animation: swing 2s ease infinite;
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.wobble {
    animation: wobble 2s ease infinite;
}

@keyframes wobble {
    0% {
        transform: translateX(0%);
    }

    15% {
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        transform: translateX(-5%) rotate(-1deg);
    }

    100% {
        transform: translateX(0%);
    }
}

.fade-in-down {
    animation: fade-in-down 2s ease infinite;
}

@keyframes fade-in-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-left {
    animation: fade-in-left 2s ease infinite;
}

@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-out-down {
    animation: fade-out-down 2s ease infinite;
}

@keyframes fade-out-down {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

.fade-out-right {
    animation: fade-out-right 2s ease infinite;
}

@keyframes fade-out-right {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}

.bounce-in {
    animation: bounce-in 2s ease infinite;
}

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1);
    }
}

.bounce-in-right {
    animation: bounce-in-right 2s ease infinite;
}

@keyframes bounce-in-right {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    60% {
        opacity: 1;
        transform: translateX(-30px);
    }

    80% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes bounce-in-left {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }

    60% {
        opacity: 1;
        transform: translateX(30px);
    }

    80% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

.bounce-out {
    animation: bounce-out 2s ease infinite;
}

@keyframes bounce-out {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(.3);
    }
}

.bounce-out-down {
    animation: bounce-out-down 2s ease infinite;
}

@keyframes bounce-out-down {
    0% {
        transform: translateY(0);
    }

    20% {
        opacity: 1;
        transform: translateY(-20px);
    }

    100% {
        opacity: 0;
        transform: translateY(20px);
    }
}

.rotate-in-down-left {
    animation: rotate-in-down-left 2s ease infinite;
}

@keyframes rotate-in-down-left {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

.rotate-in-up-left {
    animation: rotate-in-up-left 2s ease infinite;
}

@keyframes rotate-in-up-left {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}

.hinge {
    animation: hinge 2s ease infinite;
}

@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    20%,
    60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    40% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    80% {
        transform: rotate(60deg) translateY(0);
        opacity: 1;
        transform-origin: top left;
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translateY(700px);
        opacity: 0;
    }
}

.roll-in {
    animation: roll-in 2s ease infinite;
}

@keyframes roll-in {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
}

.roll-out {
    animation: roll-out 2s ease infinite;
}

@keyframes roll-out {
    0% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translateX(100%) rotate(120deg);
    }
}



.sticky-annotation-content {
    /* position: absolute; */
    /* // background-color: #133C8B; */
    color: white;
    /* font-size: 15px; */
    line-height: 130%;
    font-size: clamp(10px, 2vh, 15px);
    /* box-shadow: 0px 5px 24px 0px rgba(0,0,0,0.33); */
    /* // display: none;
    // pointer-events: auto;
    // user-select: none;
    // line-height:140%;
    // -webkit-tap-highlight-color: rgba(0, 0, 0, 0.25);
    // border-bottom: 0.5px solid rgba(255, 255, 255, 0.904);
    // font-weight:normal; */
}

.sticky-annotation-content b {
    font-weight: bold;
}

.sticky-annotation-content h1 {
    font-weight: bold;
    font-size: 1.2em;
    display: block;
    margin-bottom: 10px;

}

.sticky-annotation-content h2 {
    font-weight: bold;
    font-size: 1.2em;
    display: block;
    margin-bottom: 10px;

}

.sticky-annotation-content h3 {
    font-weight: bold;
    font-size: 1.2em;
    display: inline-block;

}

.sticky-annotation-content h4 {
    font-weight: normal;
    font-size: .8em;
    display: inline-block;
    margin-bottom: 5px;

}

.sticky-annotation>.sticky-annotation-corner-line-svg {

    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

.sticky-annotation>.sticky-annotation-corner-line-svg2 {
    height: 30px;
    width: calc(100% + 30px);
    position: absolute;
    pointer-events: none;
    bottom: -30px;
    left: -30px;
}

.sticky-annotation-content.with-close-on-click-info::after {
    content: "×";
    display: block;
    margin: 4px 0 4px 0;
    font-size: 32px;
    text-decoration: none;
    position: absolute;
    top: 0;
    right: 8px;
}

.sticky-annotation-content.with-next-on-click-info::after {
    content: "→|";
    display: block;
    margin: 12px 0 8px 0;
    font-size: 25px;
    text-decoration: none;
}

.sticky-annotation-content .close-message {
    content: "×";
    display: block;
    margin: 4px 0 4px 0;
    font-size: 32px;
    text-decoration: none;
    position: absolute;
    top: 0;
    right: 8px;
    pointer-events: all;
    color: #ffffff;
    cursor: pointer;
}

.sticky-annotation svg {
    pointer-events: none !important;
}




/*#MARK: mobile*/
@media only screen and (max-width: 750px) {

    .mainAppContainer header .container {
    
        height: 40px;
        background: white;
        justify-content: space-between;
    }
    .gui {

        justify-content: center;
        align-content: flex-end;
    }


    .logo {

        height: auto;
        position: absolute;
        top: 4px;
        left: 50%;
        margin-left: -60px;
        width: 120px;

    }

    .qrWrapper {
        visibility: hidden;
    }

    .intro {
        position: absolute;
        top: 20px;
        max-width: 320px;
        width: 70%;
        left: 25px;

        /* margin-left: -300px; */
        font: "appfont" #373335 bold 10px;
        text-align: left;
    }

    .mainAppContainer footer .container {
        /* width: 100%; */
        /* height:136px; */
        gap: 0vw;

        /* justify-content: center;  */
        /* align-content: center; */
        /* -ms-flex-pack: justify; */

    }

    .mainAppContainer footer .container .navigation {

        max-width: 50%;
        /* height: 30%; */
        align-self: center;
        align-content: center;
        gap: 5%;
        column-gap: 5%;
        flex-wrap: wrap;
    }

    .mainAppContainer footer .container .description {
        align-self: center;
        justify-self: center;
        /* order:-1; */
        /* height: 70%; */
    }

    #navi_prev {
        justify-content: flex-start;
    }

    #navi_next {
        justify-content: flex-end;
    }

    #navi_prev .navi_ico {
        order: -1;
    }

    .navi_ico {
        /* height:60%; */
        width: 20%;
        /* margin: auto 5%;        */
    }

    .navi_desc {
        color: white;
        /* justify-self: center; */
        /* text-align: center; */
        /* display: flex; */
        /* align-items: center; */
    }


    .backButton {
        height: 12%;
        width: 12%;
        right: 10px
    }

    .CTAbtn {
        bottom: -40%;
        right: 10px;
    }
    #intro-text {
    
        font-size: 32px;
    
    }

    .hmi-panel {
   
    top: 120px;
    left: 50%;
    transform: translate(-50%, 0);
    /* transform: translate(-50%, -50%); */
    width: 100vw;
    /* max-width: 1200px; */
    background: #fff;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    font-family: 'appfont', Tahoma, Geneva, Verdana, sans-serif;
}

/* Wymuszenie, aby pasek nawigacji był zawsze na wierzchu i klikalny */
.nav-tabs {
   font-size: 10px;
}

.nav-tabs button {
   
    padding: 8px 8px;
}

/* Naprawa treści - dodanie odstępu, aby nagłówki nie wchodziły pod navbar */
.hmi-content {
    
    padding: 15px;
    margin-top: 0;
}

/* Reset nagłówków wewnątrz sekcji, aby nie latały swobodnie */
.screen h2,
.screen-title h2 {
    position: static;
    /* Powrót do normalnego przepływu dokumentu */
    margin-top: 10px;
    margin-bottom: 5px;
    display: block;
}

/* Jeśli napisy nadal blokują, to "przepuszcza" kliknięcia pod spodem, 
   ale lepiej naprawić pozycję jak wyżej */
.screen-title {
    pointer-events: none;
    /* Tekst nie będzie blokował myszki */
}

/* Ale przyciski wewnątrz muszą być klikalne, więc resetujemy dla nich: */
.input-wrapper,
input,
button {
    pointer-events: all;
}

.tab-btn{
font-size: 11px;
}




/* Treść sekcji */
.hmi-content {
    padding: 12px;
    /* Zwiększony padding od góry */
    background: rgba(255, 255, 255, 0.95);
    /* Jasne tło panelu zgodnie ze zdjęciem */
}

.screen-title {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.screen-title h2 {
    font-size: 18px;
    color: #001c48;
    margin: 0;
    line-height: 1.2;
}

.screen-title p {
    font-size: 13px;
    color: #666;
    margin: 5px 0 0 0;
}
.input-wrapper {
    flex-shrink: 2;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nagłówki sekcji */
.hmi-panel h2 {
    font-size: 12px;
    margin: 0 0 8px 0;
    color: #001c48;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 3px solid #001c48;
    padding-left: 10px;
    margin-bottom: 0;
}
.hmi-panel h3 {
    font-size: 12px;
}
.row {
    flex-direction: row;
    font-size: 12px;
    margin-bottom:4px;
}
/* Grupowanie elementĂłw */
.group {
    background: #99d0e5;
    border-radius: 0px;
    padding: 8px;
    margin-top: 4px;
    /* border: 1px solid rgba(255, 255, 255, 0.05); */
}
.product-grid {
    gap: 8px;
    margin-top: 4px;
}
.unit {
    font-size: 9px;
    flex-shrink: 3;
}
.product-card {
   
    padding: 8px;
    border-radius: 0px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    max-width: 120px;
    display: inline-block;
    text-align: center;


}
.hmi-grid-layout {
    gap:4px
}
.hmi-grid-layout .column {
    gap: 4px;
}
.output {
    font-size: 12px;
    padding: 6px 12px;
}


/* --- BANER OSTRZEGAWCZY / HANDLOWY --- */
#len-warning,
.warning-msg {
    background-color: #fffed9 !important;
    /* Żółty rzucający się w oczy (ostrzegawczy) */
    color: #001c48 !important;
    /* Ciemnogranatowy tekst dla idealnego kontrastu */
    padding: 10px;
    margin-top: 2px;
    font-weight: bold;
    font-size: 12px;
    text-align: center;

    /* Czerwona ramka wokół */
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(60, 183, 231, 0.3);
    /* Delikatna czerwona poświata */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    grid-column: 1 / -1;
    /* Jeśli to jest w siatce, rozciągnie na całą szerokość */
}
    .hmi-close-btn {
        top: -5px;
        right: 3px;
        font-size: 32px;
        background: rgba(0, 28, 72, 0);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main-mode-nav {
    max-width: none;
    width:100%;
    top:40px;
    /* background: none; */
    border-radius: 0px;
    padding: 0px;
    border: none;
    pointer-events: all;
    cursor: pointer;
    pointer-events: all;
}
  .panel-section {
        margin: 0 !important;
        min-width: unset;
        width: 90px;
        padding: 0;
        transform: none !important;
        scale: 1 !important;
        min-height:auto;
    }
    
.panel-section .btn:hover {
    background-color: #fff;
    color: #001c48
}
.panel-section .btn.highlighted {
    background-color: #001c48;
    color: #fff;
}

.panel-section .btn.inactive {
    pointer-events: none;
    cursor: default;
}


.panel-section .btn img {
   width:100%;
    filter: none;

}

.panel-section .btn:hover img {
    
    filter: none;
}

.panel-section .btn.inactive img {
   
    filter: invert(60%) saturate(0%)
}

.panel-section .btn.inactive.stopped img {
   
    filter: contrast(130%) saturate(500%) hue-rotate(130deg)
}

.panel-section .digitizer {
    margin: 0 auto 0 auto;
    padding: 8px 0;
    width: 100%;
    background-color: #001c48;
    /* width: 50px; */
    font-size: 10px;
    color: #fff;
    text-align: center;
    display: block;
}

.panel-section .counter {

    /* display: inline-block; */
    /* padding: 4px 8px; */
    /* border: 1px solid #000033; */
    font-size: 18px;
    width: 40px;
    text-align: right;
    font-weight: bold;
    margin-right: 4px;
}

    /* Panel Lewy (Downstream) */
    .output-section {
        position: absolute;
        top: 100px;
        /* Umiejscowione pod wyśrodkowaną nawigacją */
        left: -1px;
    }

    /* Panel Prawy (Upstream) */
    .input-section {
        position: absolute;
        top: 100px;
        right: -1px;
    }
    .product-section {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%) !important;
        width: 100%;
        /* max-width: 340px; */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hmi-grid-layout {
        grid-template-columns: 1fr;
        /* Powrót do jednej kolumny na tablecie/laptopie */
    }
}

/*MARK: mobile end*/
/* 
@media only screen and (max-width: 500px) {
    .backButton {
        height: 14%;
        width: 14%;
        right: 10px;
        top: 10px;

    }

    .CTAbtn {
        bottom: 40%;
        right: 10px;
    }

}
 */



/* DEV TOOLS */
#devtools {
    position: fixed;
    z-index: 666;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    border: 1px solid black;
    background-color: rgba(255, 255, 255, 0.61);
    width: 300px;
    height: 100%;
    font-family: sans-serif;
    font-size: 12px;
    color: black;

}

#tabs {
    text-align: center;
    border-bottom: 1px solid black;

}

.tab_button {
    width: 110px;
    padding: 5px;
    border: 1px solid black;
    margin: 5px 2px;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 12px;
    font-style: bold;
    color: black;
    background: none;
    cursor: pointer;

}

#tabs .active {
    background: black;
    color: white;
    border: 1px solid white;
    display: inline-block;
}

#position {
    display: block;
}

#devtools {
    pointer-events: none;
}

#devtools select,
#devtools input {
    pointer-events: all;
}

#devtools .button {
    width: 100px;
    padding: 5px;
    border: 1px solid black;
    margin: 5px 2px;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 12px;
    font-style: bold;
    cursor: pointer;
    background: black;
    color: white;
    border: 1px solid white;
    display: inline-block;
    pointer-events: all;
}

#devtools .title {
    padding: 5px;
    font-style: bold;
    text-transform: uppercase;
    margin-bottom: 10px;

    color: white;
    background-color: #00000099;
}

#devtools select {
    display: block;
    width: 90%;
}

#devtools input.range {
    display: inline-block;
    width: 60%;
    pointer-events: all;
}

#devtools .console {
    width: 90%;
    resize: none;
    pointer-events: all;
}

#devtools .valuegetter {
    cursor: pointer;
    background-color: white;
    padding: 0 4px;
    pointer-events: all;
}


.lang-selector {
    position: absolute;
    inset: 0;
    background: rgba(0, 10, 30, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    touch-action: auto;
    pointer-events: all;
    z-index: 10000000000000000;
}

.lang-selector h1 {
    color: #fff;
    margin-bottom: 24px;
    font-size: 24px;
}

.lang-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.lang-btn {
    min-width: 120px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.is-hidden {
    display: none !important;
}



/* 
#upstream-btn {
    display: none !important;
    visibility: hidden !important;
} */