@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');


@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Amatic+SC:wght@400;700&family=Arbutus&family=Are+You+Serious&family=Audiowide&family=Bad+Script&family=Bangers&family=Berkshire+Swash&family=Bilbo&family=Bitcount+Single+Ink:wght@100..900&family=Blaka+Ink&family=Bonbon&family=Bonheur+Royale&family=Bungee+Shade&family=Bungee+Spice&family=Caveat+Brush&family=Caveat:wght@400..700&family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Changa:wght@200..800&family=Charmonman:wght@400;700&family=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Upright:wght@300;400;500;600;700&family=Delicious+Handrawn&family=Eater&family=Faster+One&family=Festive&family=Gloria+Hallelujah&family=Grenze:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Hanalei&family=Hanalei+Fill&family=Honk&family=Indie+Flower&family=Jersey+25&family=Julee&family=Kablammo&family=Kalam:wght@300;400;700&family=Lemonada:wght@300..700&family=Libertinus+Keyboard&family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&family=Limelight&family=Lobster&family=Luckiest+Guy&family=Manufacturing+Consent&family=Merienda:wght@300..900&family=Modak&family=Mogra&family=Momo+Signature&family=Momo+Trust+Display&family=Monoton&family=Moo+Lah+Lah&family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=Nabla&family=Patrick+Hand&family=Pirata+One&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poiret+One&family=Protest+Revolution&family=Rammetto+One&family=Righteous&family=Rowdies:wght@300;400;700&family=Rubik+Moonrocks&family=Rubik+Puddles&family=Rubik:ital,wght@0,300..900;1,300..900&family=Ruslan+Display&family=Shadows+Into+Light&family=Shojumaru&family=Special+Elite&family=Spicy+Rice&family=Sriracha&family=Story+Script&family=Teko:wght@300..700&family=Titan+One&family=Tourney:ital,wght@0,100..900;1,100..900&family=Varela+Round&family=Zeyada&display=swap');



*{box-sizing:border-box; scroll-behavior: smooth; scrollbar-width: thin;   scrollbar-color: #d5d4d4 #7b7b7b; transition:all 0s linear;  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */  -ms-user-select: none;     /* Internet Explorer/Edge */  user-select: none;         /* Standardowa składnia */}
*::-webkit-scrollbar {width: 8px;}
*::-webkit-scrollbar-track { background: #7b7b7b;}
*::-webkit-scrollbar-thumb {background-color: #d5d4d4; border-radius: 4px; border: 8px none #d5d4d4;}



.dragENB{ transition:all 0s linear !important;outline:none;}




.OutlineBlokObiekt{outline:none !important;}
.OutlineBlokObiekt:hover{outline: rgb(255, 0, 0) dashed !important;  outline-offset: 2px; outline-width:1px !important;}

.AdMod{position:fixed; display:block; width:150px; height:auto; right:100px; top:200px; z-index:50000; text-align:center; display:none;}
.AdMod div{margin:3px; display:inline-block;}

body{background-color:#555555; box-sizing:border-box;   font-family: "Roboto Condensed", sans-serif;  font-optical-sizing: auto; color:#FFFFFF;}
hr {background-color: #FFFFFF;height: 1px;color: #FFFFFF;border: 0px; clear: both;width: 100%;}
h1{padding:10px 50px 10px 50px;}
h3{margin:2px 0px 3px 0px; font-size:20px; font-weight:200;}




.St1{display:block; background-color:#333333; border-radius:7px; margin:20px; padding:30px; line-height: 30px; clear:both;}
.St1 button{ margin:15px 0px 15px 0px;  padding:17px; box-sizing:border-box; display:inline-block; background-color:#977018; color:#FFFFFF; border-radius:7px; text-decoration:none; -moz-box-shadow: none;box-shadow:none; border:none;  -webkit-appearance: none; font-weight:300; width:250px; cursor:pointer; text-align:center;}
.St1 button:hover{ margin:15px 0px 15px 0px;  padding:17px; box-sizing:border-box; display:inline-block; background-color:#b78b2c; color:#FFFFFF; border-radius:7px; text-decoration:none; -moz-box-shadow: none;box-shadow:none; border:none;  -webkit-appearance: none; font-weight:300; width:250px; cursor:pointer; text-align:center;}

.St1 a{color:#977018; display:block; padding:15px; border:1px #FFFFFF solid; border-radius:7px; max-width:250px; text-align:center; margin-top:15px;}
.St1 a:hover{color:#b78b2c; display:block; padding:15px; border:1px #FFFFFF solid; border-radius:7px; max-width:250px; text-align:center; margin-top:15px;}

.St2{display:inline-block; width:30px; height:30px; margin-left:10px; font-size:1px; border:1px #FFFFFF solid; border-radius:7px;}

.St3{ margin:15px 0px 15px 0px;  padding:17px; box-sizing:border-box; display:inline-block; background-color:#977018; color:#FFFFFF; border-radius:7px; text-decoration:none; -moz-box-shadow: none;box-shadow:none; border:none;  -webkit-appearance: none; font-weight:300; font-size:14px; width:250px; cursor:pointer; text-align:center; float:right;}
.St3:hover{ margin:15px 0px 15px 0px;  padding:17px; box-sizing:border-box; display:inline-block; background-color:#b78b2c; color:#FFFFFF; border-radius:7px; text-decoration:none; -moz-box-shadow: none;box-shadow:none; border:none;  -webkit-appearance: none; font-weight:300; width:250px; cursor:pointer; text-align:center;  float:right;}


.BodySystemCL{overflow:hidden; height:100vh; width:100vw;}
.BodySystemCL div{}





.BOX1CL{position:absolute; border:none !important; left:25%; top:50px; z-index:1000;  color:white; transition:all 0s linear !important; overflow:hidden;  	filter: drop-shadow(rgb(130, 130, 130) 5px 5px 3px); scroll-behavior: auto !important; background-size: cover;  background-position: center center;  background-repeat: no-repeat;  outline:none;  white-space: nowrap;}


.LP1::before {
  content: "";
  position: absolute;
  /* Używamy zmiennych CSS, które będą ustawiane przez JavaScript */
  top: var(--lp1-top, 0);
  right: var(--lp1-right, 0);
  bottom: var(--lp1-bottom, 0);
  left: var(--lp1-left, 0);
  
  border-radius: inherit;
  /* Zmniejszyłem przezroczystość, aby linie były subtelniejsze */
  border: 1px dashed rgba(0,0,0,0.5); 
  pointer-events: none;
  /* z-index: -1; może powodować problemy, z-index: 1 jest bezpieczniejszy */
  z-index: 5000; 
}

.LP2::after {
  content: "";
  position: absolute;
  /* Używamy zmiennych CSS, które będą ustawiane przez JavaScript */
  top: var(--lp2-top, 0);
  right: var(--lp2-right, 0);
  bottom: var(--lp2-bottom, 0);
  left: var(--lp2-left, 0);
  
  border-radius: inherit;
  border: 1px dashed rgba(255,0,0,0.5);
  pointer-events: none;
  z-index: 5000;
}

.LabelLP{border:1px #A2A2A2 solid; padding:3px 5px 3px 5px; border-radius:5px; color:#FFFFFF; cursor:pointer;  display:flex; align-items: center; justify-content: center; font-size:14px;}
.LabelLP1graf{color: rgba(0,0,0,0.5); background-color:#FFFFFF; margin:0px 10px 0px 10px; padding: 0px 5px 0px 5px;}
.LabelLP2graf{color: rgba(255,0,0,0.5); background-color:#FFFFFF; margin:0px 2px 0px 10px; padding: 0px 5px 0px 5px;}

/*.PageMenuBtn1{gap: 5px;  display: inline-flex !important;  align-items: center;}
.PageMenuBtn1::before{  content: url('images/bankso1.png');   vertical-align: middle;   width: 14px;    height: 14px; }
.PageMenuBtn2{gap: 5px;  display: inline-flex !important;  align-items: center;}
.PageMenuBtn2::after{  content: ">"; display: flex;  align-items: center;  justify-content: center;  width: 14px;    height: 14px;  border: 2px solid #333;  border-radius: 7px; font-size: 8px;  font-weight: bold;  background: #fff;  color: #333;}
.PageMenuBtn3::before{content: "3";  font-weight: bold;  color: #ff6600;}
.PageMenuBtn4::before{content: "4";  font-weight: bold;  color: #ff6600;}
.PageMenuBtn5::before{content: "5";  font-weight: bold;  color: #ff6600;}
.PageMenuBtn6::before{content: "6";  font-weight: bold;  color: #ff6600;}
*/

.snap-line {
  position: absolute;
  background-color: #4a90e2; /* Kolor linii (np. niebieski) */
  display: none; /* Domyślnie ukryte */
  z-index: 10000; /* Nad większością elementów, pod kursorem? */
  pointer-events: none; /* Aby nie przeszkadzały w klikaniu */
}
#snap-line-h {
  width: 100%; /* Lub szerokość ActiveBox */
  height: 1px;
  left: 0; /* Względem rodzica */
}
#snap-line-v {
  width: 1px;
  height: 100%; /* Lub wysokość ActiveBox */
  top: 0; /* Względem rodzica */
}




.BOX2CL{position:absolute; width:calc(95vw - 100px); height:100vh; border:none !important; left:100px; top:0vh; background-color:#FF6FFF; overflow:hidden;   background-color: #f0f0f0; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 100px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 100px);}
 
 
.BOX3CL{position:absolute;  left:0px; bottom:0px;  text-align:center; color:#7D7A7A; border:none !important; z-index: 8000;  background-color: #333333; width:calc(95vw - 100px); display:flex; align-items: center; justify-content: end; flex-wrap:wrap; padding:5px;}

.BOX3CL span{background: linear-gradient(to bottom right, #ddd, #bbb); display:block; margin:10px 10px 10px 10px; padding:6px 15px 6px 15px; text-align:center; border-radius:7px; color:black; cursor:pointer; font-size:12px;}
.BOX3CL span:hover{background: linear-gradient(to bottom right, #eee, #ccc); display:block; margin:10px 10px 10px 10px; padding:6px 15px 6px 15px; text-align:center; border-radius:7px; color:#333333; cursor:pointer; font-size:12px;}


.BOX3CLSpanNum{background:#FFFFFF !important; display:block; margin:10px 10px 10px 10px; padding:6px 15px 6px 15px; text-align:center; border-radius:7px; color:black; cursor:initial !important; font-size:12px;}
.BOX3CLSpanNum:hover{background:#FFFFFF !important; display:block; margin:10px 10px 10px 10px; padding:6px 15px 6px 15px; text-align:center; border-radius:7px; color:#333333; cursor:initial !important; font-size:12px;}

.BOX4CL{position:absolute; width:100px; height:5vh; left:0vw; bottom:0vh; background-color:#333333;   display: flex;  align-items: center; justify-content: center; display:none;}

#TimerZapisu {
    position: relative;
    width: 40px;  /* Rozmiar tarczy zegara */
    height: 40px; /* Rozmiar tarczy zegara */
}

.clock-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #464646; /* Kolor "pustej" kropki */
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.clock-dot.filled {
    background-color: #FFFFFF; /* Kolor "zapełnionej" kropki */
}

.InfoZapisu {
    position: absolute;
    color: white;
    font-size: 14px;

	/* Ukrycie i animacja */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
	background-color: #0ea802;
  padding: 10px;
  border-radius: 7px;
  text-align:center;
	
}

.InfoZapisu.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease;
}





.BOX5CL{position:absolute; width:100px; height:10vh; left:0vw; top:0vh; display:flex; align-items: center; justify-content: center; display:none;}

.BOX18CL{position:absolute; width:calc(95vw - 100px); height:15px; border: 2px #b3b3b3 solid !important; left:0vw; top:0vh; background-color:#b3b3b3; overflow:hidden; z-index:5000; }
.BOX18CL::before{ content: "";  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-image:    linear-gradient(to right, #7d7b7b 1px, transparent 1px), linear-gradient(to right, #7d7b7b 1px, transparent 1px),  linear-gradient(to right, #7d7b7b 1px, transparent 1px); background-size:50px 100%,  10px 60%,   10px 60%;  background-position: 0 0, 0 100%, 5px 100%; background-repeat: repeat-x;}
.BOX19CL{position:absolute; width:15px; height:100vh; border: 2px #b3b3b3 solid !important; left:0vw; top:0vh; background-color:#b3b3b3; overflow:hidden; z-index:5000;}
.BOX19CL::before{  content: "";  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-image:linear-gradient(to bottom, #7d7b7b 1px, transparent 1px),linear-gradient(to bottom, #7d7b7b 1px, transparent 1px),linear-gradient(to bottom, #7d7b7b 1px, transparent 1px); background-size: 100% 50px,    60% 10px, 60% 10px; background-position: 0 0, 100% 0, 100% 5px; background-repeat: repeat-y;}

.BOX20CL{z-index:5001; height:15px; width:15px; left:0px; top:0px; position:absolute; background-color:#b3b3b3; border:none !important;}





/* MENU PROJEKTOWANIE */
.BOX6x12MenuContainer{border:none !important; position:absolute; width:100px; height:100vh; left:0vw; top:0vh; overflow-y:scroll;z-index: 10005;
  background-color: #575757;   display: flex;  flex-direction: column; }
.BOX6CL{position:fixed; width:20vw; height:80vh; left:120px;  top:10vh; overflow-y:scroll; overflow-x:hidden; padding:5px; border:none !important; background-color:#333333; border-radius:5px;  transition:all 0.2s linear;}
.przycisk-nowa-grupa{background-color:#007bff !important; color:#FFFFFF !important;}
.przycisk-nowa-grupa:hover{background-color:#737373 !important; color:#FFFFFF !important;}


/* Nowe, poprawione style dla paneli menu (wysuwane z lewej) */
.menu-panel {
    /* Ustawienia wizualne z Twojego kodu */
    width: 20vw;
    height: 80vh;
    top: 10vh;
    background-color: #333333;
    border-radius: 5px;
    padding: 5px;
    overflow-y: scroll;
    overflow-x: hidden;
	padding:20px;
	min-width: 482px;

    /* Kluczowe ustawienia pozycji i animacji */
    position: fixed;
    /* Pozycja początkowa (schowane) - całkowicie poza ekranem po lewej */
    left: calc(-100% - 20px); /* Można też użyć calc(-100% - 20px) dla pewności */
    transform: translateX(0); /* Resetujemy transform, będziemy animować 'left' */
    
    z-index: 10000;
    transition: left 0.3s ease-in-out; /* Animujemy teraz właściwość 'left' */
}

/* Stan, gdy menu jest otwarte */
.menu-panel.is-open {
    /* Pozycja docelowa (wysunięte) */
    left: 120px; 
}







.BOX7CL{position:relative; width:20vw; height:10vh; left:0vw; top:0vh; overflow:hidden; padding:5px; border:none !important;}
.BOX9CL{position:relative; width:20vw; height:10vh; left:0vw; top:0vh; overflow:hidden; padding:5px; border:none !important;}
.BOX17CL{position:relative; width:20vw; height:10vh; left:0vw; top:0vh; overflow:hidden; padding:5px; border:none !important;}
.BOX10CL{position:relative; width:20vw; height:10vh; left:0vw; top:0vh; overflow:hidden; padding:5px; border:none !important;}
.BOX11CL{position:relative; width:20vw; height:10vh; left:0vw; top:0vh; overflow:hidden; padding:5px; border:none !important;}
.BOX12CL{position:relative; width:20vw; height:10vh; left:0vw; top:0vh; overflow:hidden; padding:5px; border:none !important;}

.WczytajBtn1{position:absolute; left:40px; top:30px; cursor:pointer; z-index:8000;}
.WczytajBtn2{position:absolute; left:110px; top:30px; cursor:pointer; z-index:8000;}
.WczytajBtn3{position:absolute; left:180px; top:30px; cursor:pointer; z-index:8000;}

.ZapiszBtnAll{display:flex; align-items: center; justify-content: space-around; width: 100%;}
.ZapiszBtnAll img{cursor:pointer;}

.St4 {
    /* === Nowoczesny wygląd, dopasowany do reszty UI === */
    background: linear-gradient(to bottom right, #e74c3c, #c0392b); /* Czerwony gradient */
    color: white;
    font-size: 20px; /* Rozmiar ikony */
    font-weight: 900; /* Dla ikon FontAwesome */
    border-radius: 8px; /* Lekko mniejsze zaokrąglenie */
    width: 40px;
    height: 40px;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.4), -2px -2px 5px rgba(255, 255, 255, 0.2);
    border: none;
    transition: all 0.2s ease;

    /* Wyświetlanie i centrowanie ikony */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Pozycjonowanie "lepkie" (Twoje działające ustawienia) */
    position: sticky;
    top: 10px;
    float: right;
    z-index: 10;
    
    cursor: pointer;

}

/* Dodajemy efekt :hover */
.St4:hover {
    background: linear-gradient(to bottom right, #f16a5c, #d14f41);
    transform: translateY(-1px);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 255, 255, 0.2);
}

/* Dodajemy ikonę za pomocą pseudo-elementu */
.St4::before {
    content: '\f00d'; /* Ikona "X" (times) z FontAwesome */
    font-family: 'Font Awesome 6 Free';
}

.St6{ background-color: #333333; height: auto; /* Wysokość dopasuje się do zawartości */ width: 100px; display: flex; flex-direction: column; /* Ikona nad tekstem */ align-items: center; justify-content: center; color: #ccc; cursor: pointer; border: 10px #575757 solid; flex: 1; padding: 10px 0; /* Dodano padding */ transition: background-color 0.2s, color 0.2s; }
.St6:hover{ background-color: #464646; color: #fff; }
.St6 i{ font-size: 28px; margin-bottom: 8px; /* Odstęp między ikoną a tekstem */ }
.St6-label{ font-size: 12px; font-weight: 300; }

/* MENU PROJEKTOWANIE */

/* Plik: style.css - wklej na końcu pliku */

/* ==================================================================== */
/* === NOWY, ULEPSZONY WYGLĄD PANELU WŁAŚCIWOŚCI TEKSTU (v2) === */
/* ==================================================================== */
/* Plik: style.css - znajdź poprzednią sekcję i zastąp ją tą */

/* ==================================================================== */
/* === OSTATECZNY WYGLĄD PANELU WŁAŚCIWOŚCI TEKSTU (v3) === */
/* ==================================================================== */

/* 1. Zwiększenie szerokości panelu */
/* ==================================================================== */

/* Plik: style.css - wklej ten blok, zastępując poprzednie style panelu tekstu */

/* ==================================================================== */
/* === ZAAWANSOWANY PANEL WŁAŚCIWOŚCI TEKSTU (v6 - Multi-Shadow) === */
/* ==================================================================== */

#MenuObiektuBIG2 { width: 420px; }
#trescPanelu .property-group {
    display: flex; flex-direction: column; gap: 15px; clear: both;
}
#trescPanelu .LabelWlasciwosi { display: none; }
#trescPanelu .flex-row { display: flex; align-items: center; gap: 15px; }

/* --- NOWY, KOMPAKTOWY UKŁAD SUWAKÓW TEKSTU --- */
.text-range-container {
    display: flex; align-items: center; gap: 10px;
}
.text-range-container .text-range-label {
    font-size: 14px; color: #ccc; flex-basis: 110px;
    flex-shrink: 0;
}
.text-range-container .range-input-wrapper {
    display: flex; flex-grow: 1; align-items: center; gap: 10px;
}
.text-range-container .range-tooltip {
    font-weight: bold; color: white; background-color: #2b2b2b;
    padding: 3px 6px; border-radius: 4px; min-width: 55px;
    text-align: right; border: 1px solid #444;
}

/* --- Przełącznik trybu koloru --- */
.color-mode-switcher {
    display: flex; background-color: #2b2b2b; border-radius: 6px;
    padding: 3px; border: 1px solid #444; margin-bottom: 5px;
}
.color-mode-switcher button {
    flex: 1; padding: 6px; border: none; background: none; color: #ccc;
    cursor: pointer; border-radius: 4px; transition: all 0.2s;
}
.color-mode-switcher button.active {
    background-color: #007bff; color: white;
}

/* --- Kontrolki gradientu --- */
.gradient-controls {
    display: flex; gap: 10px; align-items: center;
}
.gradient-controls input[type="color"] {
    width: 40px; height: 34px; border: 2px solid #000;
    border-radius: 6px; cursor: pointer; padding: 0;
}
.gradient-controls .text-range-container { margin-top: 10px; }

/* --- DYNAMICZNY PANEL CIENI --- */
.shadow-manager {
    border-top: 1px solid #555; padding-top: 15px; margin-top: 5px;
}
.shadow-manager > label {
    font-size: 14px; color: #ccc; font-weight: bold; margin-bottom: 10px; display: block;
}
.shadow-list {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 250px; overflow-y: auto; padding-right: 5px;
}
.shadow-item {
    padding: 10px; background-color: #2b2b2b; border: 1px solid #444;
    border-radius: 6px;
}
.shadow-item-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.shadow-item-header span { font-weight: bold; color: #ddd; }
.shadow-item-header .delete-shadow-btn {
    cursor: pointer; color: #ff6b6b; font-size: 18px; line-height: 1;
}
.shadow-item .text-range-container { margin-bottom: 5px; }

#add-shadow-btn {
    width: 100%; padding: 8px; margin-top: 10px;
    background-color: #007bff; color: white; border: none;
    border-radius: 6px; cursor: pointer; font-weight: bold;
}
#add-shadow-btn:hover { background-color: #0056b3; }

/* --- Poprawione style dla starych elementów --- */
#trescPanelu #textPropColor {
    width: 40px; height: 34px; padding: 0; border: 2px solid #000;
    border-radius: 6px; cursor: pointer;
}
.style-buttons label, .style-buttons button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; background: linear-gradient(to bottom right, #ddd, #bbb);
    border-radius: 6px; cursor: pointer; transition: all 0.2s ease;
    font-size: 16px; color: black; border: none;
}
.style-buttons input[type="checkbox"] { display: none; }
.style-buttons input[type="checkbox"]:checked + label,
.style-buttons button.active {
    background: #007bff; color: white;
}
.style-buttons label:hover, .style-buttons button:hover:not(.active) {
    background: linear-gradient(to bottom right, #eee, #ccc);
}

/* --- Style dla niestandardowego selektora czcionek (bez zmian) --- */
.custom-font-select {
    position: relative; width: 100%; background-color: #2b2b2b;
    border: 1px solid #444; border-radius: 6px; padding: 8px 12px;
    cursor: pointer; color: #f0f0f0; font-size: 14px;
}
.custom-font-select .selected-font {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.custom-font-select::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    transition: transform 0.2s ease;
}
.custom-font-select.is-open::after { transform: translateY(-50%) rotate(180deg); }
.custom-font-select .font-options {
    position: absolute; top: calc(100% + 5px); left: 0; right: 0;
    background-color: #3c3c3c; border: 1px solid #555; border-radius: 6px;
    list-style: none; margin: 0; padding: 5px; z-index: 10;
    max-height: 200px; overflow-y: auto; display: none; opacity: 0;
    transform: translateY(-10px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.custom-font-select.is-open .font-options { display: block; opacity: 1; transform: translateY(0); }
.custom-font-select .font-options li {
    padding: 8px 12px; border-radius: 4px; transition: background-color 0.2s ease;
}
.custom-font-select .font-options li:hover { background-color: #555; }
.custom-font-select .font-options li.selected { background-color: #007bff; color: white; }













.font-master-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Odstęp między próbkami */
    margin-top: 15px;

}

.font-master-sample {
    display: block; /* Ważne, aby span zachowywał się jak blok */
    width: 100%;
    padding: 20px 15px; /* Zwiększony padding dla lepszego wyglądu */
    border-radius: 6px;
    border: 1px solid #555;
    background-color: #444;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.font-master-sample:hover {
    background-color: #505050;
    border-color: #777;
    transform: translateY(-2px); /* Lekkie uniesienie po najechaniu */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}








/* Plik: style.css - wklej na końcu pliku */

/* ======================================================= */
/* === NOWE STYLE DLA PRZEGLĄDARKI KLIPARTÓW === */
/* ======================================================= */

/* Plik: style.css - znajdź i ZASTĄP tę sekcję */

/* ======================================================= */
/* === NOWE STYLE DLA PRZEGLĄDARKI KLIPARTÓW (Wersja finalna) === */
/* ======================================================= */

.asset-browser-container {
    /* Ten kontener nie jest już potrzebny do pozycjonowania,
       więc usuwamy z niego wszystkie specjalne style. */
}

.clipart-header {
    /* Nagłówek jest "lepki" wewnątrz .menu-panel */
    position: sticky;
    /* Przyklejamy go idealnie do górnej krawędzi widocznego obszaru */
    top: -20px; 
    background-color: #333333;
    z-index: 9;

    /* Utrzymujemy wygląd, ale dodajemy padding, który wcześniej był na .menu-panel */
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    margin: -20px -20px 15px -20px; /* Sztuczka, aby header zajął całą szerokość i skasował padding rodzica */
    border-bottom: 1px solid #555;
}

.asset-back-btn {
    background: #555; color: white; border: none; padding: 8px 12px;
    border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 8px;
    flex-shrink: 0; /* Zapobiegaj kurczeniu się przycisku */
}
.clipart-header h3 { margin: 0; flex-grow: 1; }

.clipart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px;
    /* Siatka nie potrzebuje już własnego paddingu, bo .menu-panel go zapewnia */
}

.clipart-loader {
    width: 100%; text-align: center; color: #ccc; margin-top: 50px;
}

/* Kategoria (folder) */
.clipart-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;
    transition: background-color 0.2s;
}
.clipart-category:hover { background-color: #555; }
.clipart-category .icon { font-size: 48px; color: #f0ad4e; }
.clipart-category .name { font-size: 12px; color: #ddd; text-align: center; word-break: break-word; }

/* Kafelka klipartu */
.clipartfoto {
    width: 100%; /* Rozciągnij się do szerokości kolumny siatki */
    height: 100px;
    background-color: #555;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: 1px solid #666;
    margin: 0;
    cursor: pointer;
    transition: transform 0.2s;
}
.clipartfoto:hover { transform: scale(1.05); }


.tloclipartfoto {
    width: 100%; /* Rozciągnij się do szerokości kolumny siatki */
    height: 100px;
    background-color: #555;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: 1px solid #666;
    margin: 0;
    cursor: pointer;
    transition: transform 0.2s;
}
.tloclipartfoto:hover { transform: scale(1.05); }







.BOX8CL{position:fixed; width:400px; height:500px; bottom:140px; left:-450px; border-radius:10px 10px 10px 0px;  background-color:#314d00; color:#FFFFFF; font-size:14px; box-sizing:border-box; padding:20px; overflow: auto; opacity: 0.8; resize: both; border:none !important; z-index:4000; padding:20px; font-size:14px;}


.BOX13CL{position:fixed; width:225px; height:100px; bottom:145px; font-size:12px; right:130px; border-radius:10px 10px 10px 0px;  background-color:#314d00; color:#FFFFFF; font-size:14px; box-sizing:border-box; padding:0px; overflow: auto; opacity: 0.8;   resize: both; border:none !important; z-index:4000; display:none;}



.BOX14CL{position:absolute; width:75vw; height:10vh; left:20vw; top:0vh; border:none !important;
width: 22vw;
  height: 51vh;
  left: 19vw;
  top: 9vh;
  border: none !important;
  background-color: red;
  z-index: 20000;

}


.BOX21CL{position:absolute; width:5vw; height:5vh; left:95vw; top:0vh; background-color:#4c016f; border-left: 5px #9f9f9f solid;  display: flex; justify-content: center; align-items: center; }






.save-finish-button {
    /* Wygląd */
    width: 100%;
    height: 100%;
    border: none;
    background-color: #125732; /* Ciemniejszy, głębszy zielony */
    color: white;
    font-size: 14px;
    font-weight: 200;
    
    /* Układ ikony i tekstu */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    /* Pozycjonowanie dla animacji */
    position: relative; 
    overflow: hidden; /* Niezbędne, aby "błysk" nie wychodził poza przycisk */

    cursor: pointer;
    transition: background-color 0.2s;
}


/* === NOWA ANIMACJA: EFEKT BŁYSKU === */
.save-finish-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 20px; /* Szerokość błysku */
    height: 200%; /* Wysokość musi być duża, aby pokryć przycisk pod kątem */
    background-color: rgba(255, 255, 255, 0.3);
    
    /* Ustawienie pod kątem */
    transform: rotate(45deg);
    
    /* Ustawienie animacji */
    animation: button-shine 4s infinite linear;
}

/* Efekt :hover */
.save-finish-button:hover {
    background-color: #28a765;
}

/* Stan nieaktywny */
.save-finish-button:disabled {
    background-color: #555;
    cursor: not-allowed;
    /* Wyłącz animację dla nieaktywnego przycisku */
    animation: none;
}
/* Ukryj błysk, gdy przycisk jest nieaktywny */
.save-finish-button:disabled::after {
    display: none;
}


/* Definicja animacji "błysku" */
@keyframes button-shine {
    0% {
        /* Start daleko po lewej */
        transform: translateX(-200px) rotate(45deg);
    }
    100% {
        /* Koniec daleko po prawej */
        transform: translateX(450px) rotate(45deg); /* Ustaw dużą wartość, aby na pewno przeszedł przez cały przycisk */
    }
}







.BOX15CL{position:fixed; width:250px; height:50px; bottom:240px; right:120px; border-radius:10px 10px 10px 0px;  background-color:#314d00; color:#FFFFFF; font-size:14px; box-sizing:border-box; padding:20px; overflow: auto; opacity: 0.8;   resize: both; border:none !important; z-index:4000; display:none;}
.BOX16CL{position:absolute; width:5vw; height:95vh; right:0vw; top:5vh; background-color:#9f9f9f; border:10px #9f9f9f solid !important;}
.BOX16CL_1{position: relative; width: 100%; height: 95%; display: flex;  justify-content: center; border:none !important;}
.BOX16CL_2{width: 4px; height: 100%; background-color: white; position: absolute; left: 50%; transform: translateX(-50%); border: 5px #4a4a4a solid !important;
  border-radius: 50px;}

/*.BOX16CL_3{width: 40px;height: 40px; background-color: #b3b3b3; border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); cursor: pointer;  transition:all 0s linear; border:2px black solid !important; }*/
.BOX16CL_3 {width: 40px;  height: 40px;  background: linear-gradient(to bottom right, #ddd, #bbb);   border-radius: 50%;  position: absolute;  left: 50%;  transform: translateX(-50%);  cursor: pointer;  transition: all 0.1s ease-in-out;  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(255, 255, 255, 0.3);   border: none !important;   transition:all 0s linear; display:flex; align-items: center; justify-content: center; color:black;}
.BOX16CL_3:hover { background: linear-gradient(to bottom right, #eee, #ccc); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4), -3px -3px 6px rgba(255, 255, 255, 0.4); display:flex; align-items: center; justify-content: center; color:#333333;}

.BtnResetCL{background: linear-gradient(to bottom right, #ddd, #bbb); display:block; margin:5px; padding:15px 5px 15px 5px; text-align:center; border-radius:7px; color:black; cursor:pointer;}
.BtnResetCL:hover{background: linear-gradient(to bottom right, #eee, #ccc); display:block; margin:5px; padding:15px 5px 15px 5px; text-align:center; border-radius:7px; color:#333333; cursor:pointer;}


.St5{display:inline-block; width:15px; height:15px; background-color:#FFFFFF; margin:3px; border-radius:2px;}

.activeBoxDataDisplayCL{margin-bottom: 5px; font-family: monospace; color: #cacaca; top: 15px;  position: absolute;  left: 25px; font-size:10px;}

#PomocDiv {
    position: fixed;
    top: 2vh;
    right: 6vw;
    background: #333333;
    padding: 8px 12px;
    border-radius: 5px;
    max-width: 215px;
    border: 1px solid #555;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
	font-size:12px;
    /* Ustawienia do wyrównania ikony i tekstu */
    display: flex;
    align-items: center;
    gap: 10px; /* Odstęp między ikoną a tekstem */
    transition: opacity 0.2s ease-in-out;
	z-index:8000;
}

#PomocIcon {
    /* Wygląd ikony */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 10px;
    flex-shrink: 0; /* Zapobiega kurczeniu się ikony */
	
}

/* Klasa dodawana przez JS, aby ukryć ikonę, gdy nie ma pomocy */
#PomocDiv.no-help #PomocIcon {
    display: none;
}

/* Klasa dodawana przez JS do wyzwolenia animacji */
.animate-icon {
    animation: pulse-once 1s ease-out;
}

/* Definicja animacji */
@keyframes pulse-once {
    0% {
        background-color: #007bff;
        opacity: 1;
    }
    50% {
        background-color: #148603;
        opacity: 0.8;
    }
    100% {
        background-color: #007bff;
        opacity: 1;
    }
}



/* MENU OBIEKTU */

.St7_1{display:block; position: absolute; cursor:pointer; left:10px; top:-210px;z-index:3000; border:none !important; transition: all 0s linear !important;}
.St7_2{display:block; position: absolute; cursor:pointer; left:60px; top:-210px;z-index:3000; border:none !important; transition: all 0s linear !important;}
.St7_3{display:block; position: absolute; cursor:pointer; left:110px; top:-210px;z-index:3000; border:none !important; transition: all 0s linear !important;}
.St7_4{display:block; position: absolute; cursor:pointer; left:160px; top:-210px;z-index:3000; border:none !important; transition: all 0s linear !important;}
.St7_5{display:block; position: absolute; cursor:pointer; left:210px; top:-210px;z-index:3000; border:none !important; transition: all 0s linear !important;}
.St7_6{display:block; position: absolute; cursor:pointer; left:260px; top:-210px;z-index:3000; border:none !important; transition: all 0s linear !important;}
.St7_7{display:block; position: absolute; cursor:pointer; left:310px; top:-210px;z-index:3000; border:none !important; transition: all 0s linear !important;}
.St7_8{display:block; position: absolute; cursor:pointer; left:360px; top:-210px;z-index:3000; border:2px #333333 solid !important; transition: all 0s linear !important; color:#333333; width:30px; text-align:center; padding:5px 0px; background-color:#FFFFFF; border-radius:5px;}
.St7_9{display:block; position: absolute; cursor:pointer; left:310px; top:-210px;z-index:3000; border:none !important; transition: all 0s linear !important;  cursor:pointer;}
.St7_10{display:block; position: absolute;  left:400px; top:-210px;z-index:2999; border:none !important; transition: all 0s linear !important;   background-color: rgba(0, 150, 255, 1);     box-shadow: 0 0 5px rgba(0, 150, 255, 0.5); pointer-events: none;}


.hover-frame {
    position: absolute;
    background-color: rgba(0, 150, 255, 1); 
    display: none; 
    pointer-events: none;
    z-index: 2999; 
    box-shadow: 0 0 5px rgba(0, 150, 255, 0.5);
}


.hover-frame-background {
    position: absolute;
    background-color: rgba(0, 123, 255, 0.15); /* Półprzezroczysty niebieski */

    display: none; /* Domyślnie ukryte */
    pointer-events: none; /* Aby nie przeszkadzało w klikaniu */
    z-index: 9994; /* Nieco niżej niż linie ramki, ale nad resztą */
    box-sizing: border-box;
}





/* --- Style dla okna wyboru obrazu do grupy --- */
.image-picker-overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 100000; display: flex; justify-content: center; align-items: center; }
.image-picker-container{ width: 80vw; height: 80vh; background-color: #2c2c2c; border-radius: 8px; box-shadow: 0 5px 25px rgba(0,0,0,0.5); display: flex; flex-direction: column; padding: 15px; }
.image-picker-header{ display: flex; justify-content: space-between; align-items: center; color: white; padding-bottom: 15px; border-bottom: 1px solid #444; }
.image-picker-close-btn{ font-size: 24px; font-weight: bold; color: white; cursor: pointer; background: none; border: none; }
.image-picker-grid{ flex-grow: 1; overflow-y: auto; padding: 20px 5px; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 10px; }
.image-picker-thumb{ width: 100px; height: 100px; background-size: contain; background-position: center; background-repeat: no-repeat; border: 2px solid #555; cursor: pointer; transition: border-color 0.2s; }
.image-picker-thumb:hover{ border-color: #007bff; }



[id^="GrupaTekstow"] > .dragENB {
    transform-origin: 0 0 !important; 
}



/* Plik: style.css */

/* Plik: style.css */

/* Plik: style.css */

/* === Nowy, profesjonalny wygląd uchwytów grupy (Okrągłe, 28px, odsunięcie 70px) === */

.GTDots{ position: absolute; width: 28px; height: 28px; background-color: #f0f0f0; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: grab; border-radius: 50%; display: none; align-items: center; justify-content: center; transition: transform 0.2s ease-out; z-index:10; }
.GTDots::before{ content: ''; display: block; width: 14px; height: 14px; background-color: #0096ff; border-radius: 50%; }
.GTDots:hover{ transform: scale(1.1); }
.GTDots:active{ cursor: grabbing; }

/* Górny uchwyt */
.GTDots1{ top: -70px; left: calc(50% - 14px); }

/* Dolny uchwyt */
.GTDots2{ bottom: -70px; left: calc(50% - 14px); }

/* Lewy uchwyt */
.GTDots3{ top: calc(50% - 14px); left: -70px; }

/* Prawy uchwyt */
.GTDots4{ top: calc(50% - 14px); right: -70px; }


/* --- Etykieta "GRUPA" --- */
/* (top: -70px od krawędzi + 28px wysokości uchwytu + 4px marginesu) */
.GTLabel{ position: absolute; top: -102px; left: 50%; transform: translateX(-50%); background-color: #ffffff; border: 1px solid #cccccc; color: #555555; font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 3px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,0.15); display: none; }


/* --- Linie łączące --- */
.GTConnector{ position: absolute; background-color: #cccccc; pointer-events: none; display: none; }
/* (Wysokość/Szerokość = 70px - 28px wysokości/szerokości uchwytu) */
.GTConnector1{ top: -42px; left: calc(50% - 0.5px); width: 1px; height: 42px; /* Linia od góry */ }
.GTConnector2{ bottom: -42px; left: calc(50% - 0.5px); width: 1px; height: 42px; /* Linia od dołu */ }
.GTConnector3{ top: calc(50% - 0.5px); left: -42px; width: 42px; height: 1px; /* Linia od lewej */ }
.GTConnector4{ top: calc(50% - 0.5px); right: -42px; width: 42px; height: 1px; /* Linia od prawej */ }




.wave-box {
  position: relative;
  padding: 0px;

}

.wave-box::before {
  content: "";
  position: absolute;
  inset: 1px; /* rozmiar ramki */

  padding: 1px;
  background: 
    repeating-linear-gradient(127deg,
      orange 0 10px, black 10px 20px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, 
                 linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: wave-shift 2s linear infinite;
}

@keyframes wave-shift {
  from { background-position: 0 0; }
  to   { background-position: 50px 0; }
}









.safety-line {
    position: absolute;
    pointer-events: none; /* Aby nie przeszkadzały w klikaniu */
    z-index: 1000; /* Upewnij się, że są na wierzchu, ale pod menu */
    box-sizing: border-box; /* Ważne dla poprawnego renderowania */
}

.safety-line.lp1 {
    border: 1px dashed rgba(0, 0, 0, 0.7);
}

.safety-line.lp2 {
    border: 1px dashed rgba(255, 0, 0, 0.7);
}









#delete-confirm-button {
    position: absolute;
    z-index: 10002; /* Wyżej niż menu */
    background-color: red;
    color: white;
    padding: 2px 5px;
    font-size: 10px;
    border: 1px solid black;
    cursor: pointer;
    user-select: none;
	transition: all 0s linear !important;
	padding:20px;
}


/* MENU OBIEKTU */

/* linie centrujące */

 .snap-guideline {
    position: absolute;
    background-color: #FF007F; /* Różowy */
    z-index: 9998;
    pointer-events: none; /* Aby nie przechwytywały zdarzeń myszy */
}

.snap-guideline.horizontal {
    width: 100%; /* Rozciągnij na całą szerokość ActiveBox */
    height: 1px;
}

.snap-guideline.vertical {
    height: 100%; /* Rozciągnij na całą wysokość ActiveBox */
    width: 1px;
}




/* nawigator stron */

/* Nakładka (overlay) dla nawigatora */
.page-navigator-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Główny kontener nawigatora */
.page-navigator-container {
    width: 90%;
    height: 90%;
    background-color: #2c2c2c;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

/* Nagłówek nawigatora z przyciskiem zamknięcia */
.page-navigator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding-bottom: 15px;
    border-bottom: 1px solid #444;
}

.page-navigator-close-btn {
    font-size: 24px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    background: none;
    border: none;
}

/* Siatka z miniaturami */
.page-navigator-grid {
    flex-grow: 1;
    overflow-y: auto; /* Scroll, jeśli jest dużo stron */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px 5px;
	align-items: start; 
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
	 


/* Pojedyncza miniatura (kafelek) */
.page-navigator-thumbnail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
	overflow: hidden;
}

.page-navigator-thumbnail:hover {
    transform: scale(1.05);
}


.thumbnail{
    width: 100%; /* Rozciągnij się do szerokości kolumny siatki */
    height: 100px;
    background-color: #555;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: 1px solid #666;
    margin: 0;
    cursor: pointer;
    transition: transform 0.2s;
}

.thumbnail:hover { transform: scale(1.05); }
}


/* Kontener na podgląd (aby zachować proporcje) */
.page-navigator-preview-wrapper {
    /* height pozostaje, width będzie nadpisane inline */
    height: 150px; 
    width: 200px; /* Ta wartość będzie teraz domyślną/fallbackiem */
    border: 2px solid #555;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

/* Numer strony pod miniaturą */
.page-navigator-page-number {
    color: #ccc;
    font-size: 14px;
    font-weight: bold;
}


/* nawigator stron */


/* drag and drop */

.drag-over-highlight {
    outline: 2px dashed dodgerblue !important;
    outline-offset: -2px;
}
/* drag and drop */






















/* właściwości ---------------------------------------------------------- */

.reset-icon {
    display: inline-block;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    margin-left: 5px;
    vertical-align: middle;
    transition: transform 0.2s;
}
.reset-icon:hover {
    color: #609b3f;
    transform: rotate(-180deg);
}



.BoxWlObiektu{position:absolute; left:20px; top:20px; background-color:#575757; z-index:20000;  overflow-y: scroll; overflow-x: hidden; height:auto; width:350px; display:none; padding:20px; max-height:80vh; border-radius:5px;}





.mask-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.mask-button, .mask-image-button {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.mask-image-button {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.mask-button:hover, .mask-image-button:hover {
    border-color: #333;
}
.mask-button.active, .mask-image-button.active {
    border: 2px solid dodgerblue;
    box-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
}

.LabelWlasciwosi{margin:10px 0px 3px 0px; font-weight:300; display: block;  font-size: 18px;}


.BoxWlObiektu input,
.BoxWlObiektu select {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #f0f0f0;
  background-color: #2b2b2b;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 6px 10px;
  outline: none;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}

/* Hover i focus – czarny akcent */
.BoxWlObiektu input:hover,
.BoxWlObiektu select:hover {
  border-color: #000;
}
.BoxWlObiektu input:focus,
.BoxWlObiektu select:focus {
  border-color: #000;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Select */
.BoxWlObiektu select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
  cursor: pointer;
}

/* Input typu color */
.BoxWlObiektu input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 40px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  background: none;
  vertical-align: top;
}
.BoxWlObiektu input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.BoxWlObiektu input[type="color"]::-webkit-color-swatch {
  border: 2px solid #000;
  border-radius: 6px;
}

/* Input typu range */
.BoxWlObiektu input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: #FFFFFF;
  cursor: pointer;
}
.BoxWlObiektu input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: #444;
  border-radius: 3px;
}
.BoxWlObiektu input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #000;
  margin-top: -5px; /* centruje thumb na torze */
}
.BoxWlObiektu input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 6px rgba(0,0,0,0.8);
}

/* Firefox */
.BoxWlObiektu input[type="range"]::-moz-range-track {
  height: 6px;
  background: #444;
  border-radius: 3px;
}
.BoxWlObiektu input[type="range"]::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #000;
  border: none;
}

.ResetObiektuMenuBIG {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin: 8px 0;
  
  background: #1c1c1c;          /* ciemne tło */
  color: #f1f1f1;               /* jasny tekst */
  border: 1px solid #333;       /* subtelna ramka */
  border-radius: 8px;           /* miękkie krawędzie */
  
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  
  transition: all 0.25s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.ResetObiektuMenuBIG:hover {
  background: #000;             /* mocny czarny akcent */
  border-color: #555;           /* ciut jaśniejsza ramka */
  transform: translateY(-2px);  /* lekkie podniesienie */
  box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

.ResetObiektuMenuBIG:active {
  background: #111;
  transform: translateY(0);     /* powrót przy kliknięciu */
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}



/* właściwości ---------------------------------------------------------- */










/* ==========================================================================
   Style dla Panelu Warstw
   ========================================================================== */

.layers-container {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.layer-row {
    display: flex;
    align-items: center;
    background-color: #444;
    border-radius: 4px;
    padding: 5px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}

.layer-row:hover {
    background-color: #555;
    border-color: #777;
}

.layer-row.selected {
    border-color: #007bff; /* Podświetlenie wybranej warstwy */
    background-color: #3a4a5f;
}

.layer-preview {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background-color: #FFFFFF;
    border: 1px solid #666;
    display: flex;
align-items: center;
  justify-content: flex-start;
    overflow: hidden;
    flex-shrink: 0;
}

.layer-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.layer-preview-clone {
    /* Używane do klonowania DIVów i SPANów */
    transform-origin: top left;
    /* overflow: hidden; */
}

.layer-info {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ddd;
    font-size: 12px;
}

.layer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.layer-controls img {
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.layer-controls img:hover {
    opacity: 1;
}

/* ==========================================================================
   Efekt pulsowania dla podświetlenia warstwy
   ========================================================================== */

@keyframes pulse-animation {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 105px rgba(0,123,255,0.7); }
}

.pulsing-highlight {
  animation: pulse-animation 1s;
  animation-iteration-count: 3; /* tylko 3 razy */

}


 




/* ==========================================================================
   Style dla Panelu Warstw
   ========================================================================== */






















    /* Style dla paska postępu */
    .progress-container { width: 100%; background-color: #555; border-radius: 4px; margin: 10px 0; height: 10px; overflow: hidden; display: none; }
    .progress-bar { width: 0%; height: 100%; background-color: #4CAF50; border-radius: 4px; transition: width 0.2s ease-in-out; }
    
    /* Style dla wskaźnika jakości */
    .quality-indicator { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.5); box-shadow: 0 0 3px rgba(0,0,0,0.4); }
    
    /* Style dla licznika użyć */
    .usage-counter { position: absolute; bottom: 3px; left: 3px; min-width: 18px; height: 18px; padding: 0 4px; background-color: rgba(0, 0, 0, 0.7); color: white; border-radius: 9px; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 1px solid white; }

    /* NOWE STYLE: Przycisk "Podmień" */
    .replaceBtn {
        position: absolute;
        bottom: 2px;
        right: 2px;
        background-color: #007bff;
        color: white;
        border: 1px solid white;
        border-radius: 5px;
        cursor: pointer;
        font-size: 10px;
        padding: 2px 5px;
        display: none; /* Domyślnie ukryty */
    }
	
	
	
	
	
	
	
	
	
	
/* Style dla kontrolek z podglądem wartości */
.range-container {
    margin-bottom: 5px;
}
.range-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #ccc;
    margin-bottom: 2px;
}
.range-tooltip {
    font-weight: bold;
    color: white;
    background-color: #555;
    padding: 3px 5px;
    border-radius: 3px;
}
.range-input-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}
.range-input-wrapper input[type="range"] {
    flex-grow: 1; /* Suwak zajmuje całą dostępną przestrzeń */
}






/* ==========================================================================
   Nowoczesny styl dla Drop Zone
   ========================================================================== */

/* --- Styl Podstawowy --- */
#dropZone {
    /* Uklad i centrowanie */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Wygląd */
    padding: 40px;
    border: 2px dashed #cccccc; /* Delikatna, przerywana ramka */
    border-radius: 5px; /* Zaokrąglone rogi */
    background-color: #555555;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin:10px;
    /* Interaktywność */
    cursor: pointer;
    transition: all 0.3s ease; /* Płynne przejścia dla wszystkich efektów */
}

/* --- Ukrycie domyślnego inputu --- */
#dropZone input[type="file"] {
    display: none;
}

/* --- Efekt po najechaniu myszką (Hover) --- */
#dropZone:hover {
    border-color: #007bff; /* Podświetlenie ramki */
    background-color: #606060; /* Delikatne podświetlenie tła */
}

/* --- Efekt podczas przeciągania pliku nad polem (Drag Over) --- */
/* WAŻNE: W JS musisz dodawać i usuwać klasę "highlight" */
#dropZone.highlight {
    border-color: #28a745;
    border-style: solid; /* Zmiana na linię ciągłą */
    background-color: #e9f7ef;
    transform: scale(1.02); /* Lekkie powiększenie */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtelny cień */
}







/* Plik: style.css */
/* --- Style dla okna kadrowania --- */

/* Plik: style.css */
/* --- Style dla okna kadrowania (WERSJA ZNORMALIZOWANA) --- */

.cropper-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.cropper-container {
    position: relative;
    /* NOWOŚĆ: Te style ograniczają CAŁY obszar roboczy kadrowania */
    max-width: 80vw;
    max-height: 80vh;
    display: flex; /* Utrzymujemy flex do centrowania */
    justify-content: center;
    align-items: center;
}

.cropper-container img {
    /* USUNIĘTO max-width i max-height, teraz JS będzie ustawiał sztywne wymiary */
    user-select: none;
    pointer-events: none;
}

.cropper-box {
    position: absolute;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    border: 2px dashed #FFF;
    cursor: move;
}

.cropper-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #FFF;
    border: 1px solid #333;
    border-radius: 2px;
}
.cropper-handle.handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.cropper-handle.handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.cropper-handle.handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.cropper-handle.handle-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.cropper-handle.handle-n { top: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.cropper-handle.handle-s { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.cropper-handle.handle-w { top: 50%; left: -7px; transform: translateY(-50%); cursor: ew-resize; }
.cropper-handle.handle-e { top: 50%; right: -7px; transform: translateY(-50%); cursor: ew-resize; }

.cropper-btn.ratio { background-color: #007bff; }
.cropper-btn.ratio:hover { background-color: #0056b3; }

.cropper-btn.save { background-color: #4CAF50; }


.cropper-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100001;
    display: flex;
    gap: 15px;
}

.cropper-btn {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cropper-btn.save { background-color: #4CAF50; }
.cropper-btn.save:hover { background-color: #5cb85c; }
.cropper-btn.cancel { background-color: #f44336; font-size: 24px; padding: 5px 15px; }
.cropper-btn.cancel:hover { background-color: #d9534f; }
/* --- Style dla okna kadrowania --- */





/* Plik: style.css - DODAJ NA KOŃCU PLIKU */

/* ======================================================= */
/* === NOWE STYLE DLA STRONY STARTOWEJ (index.html) === */
/* ======================================================= */

.start-page-body {
    background-color: #333;
    color: #f0f0f0;
    font-family: "Roboto Condensed", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.start-container {
    max-width: 500px;
    width: 100%;
    padding: 20px;
}

.start-form-wrapper {
    background-color: #444;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    text-align: center;
}

.start-form-wrapper h1 {
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 500;
}

.start-form-wrapper p {
    margin-bottom: 30px;
    color: #ccc;
    line-height: 1.6;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 300;
    color: #ddd;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #666;
    background-color: #2b2b2b;
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 16px;
    box-sizing: border-box;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 6px;
    background-color: #007bff;
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.submit-btn:hover {
    background-color: #0056b3;
}

/* Plik: style.css - ZNAJDŹ I ZASTĄP starą regułę `.error-message` */

/* Wspólny kontener na wiadomości */
.message-container {
    padding: 15px;
    border-radius: 6px;
    margin-top: 20px;
    font-weight: 200;
    text-align: center;
    opacity: 0; /* Domyślnie ukryty */
    transition: opacity 0.3s ease;
font-size: 26px;

}

/* Styl dla wiadomości o błędzie */
.message-container.error {
    background-color: #5c2c2c;
    color: #ffb8b8;
    border: 1px solid #8c4a4a;
}

/* Styl dla wiadomości o sukcesie */
.message-container.success {
    background-color: #2c5c3b;
    color: #b8ffcf;
    border: 1px solid #4a8c5f;
	position: absolute;
  width: 98%;
  left: 1%;
  top: 50px;
}

/* Klasa do pokazywania wiadomości */
.message-container.visible {
    opacity: 1;
}


/* Plik: style.css - DODAJ NA KOŃCU PLIKU */

/* Plik: style.css - ZASTĄP CAŁĄ SEKCJĘ */

/* Plik: style.css - ZASTĄP CAŁĄ SEKCJĘ */

/* ======================================================= */
/* === NOWE STYLE DLA STRONY WYBORU PRODUKTU (v3) === */
/* ======================================================= */

.product-choice-container {
    max-width: 1000px;
    width: 100%;
    padding: 20px;
    text-align: center;
}
.product-choice-container h1 { font-weight: 500; margin-bottom: 10px; }
.product-choice-container p { color: #ccc; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    perspective: 1000px;
}

/* === NOWY STYL: Nagłówek kategorii === */
.grid-category-header {
    /* Rozciągnij na całą szerokość siatki */
    grid-column: 1 / -1; 
    text-align: left;
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    margin: 20px 0 5px 0;
    padding-bottom: 10px;
    /* Używamy zmiennej CSS zdefiniowanej w HTML */
    border-bottom: 2px solid var(--category-color, #007bff);
}
.grid-category-header:first-of-type {
    margin-top: 0;
}

.product-card {
    position: relative;
    min-height: 150px;
    border-radius: 8px;
    text-decoration: none;
    color: #f0f0f0;
    cursor: pointer;
    transition: transform 0.8s, box-shadow 0.3s;
    transform-style: preserve-3d;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.product-card:hover { box-shadow: 0 12px 20px rgba(0,0,0,0.3); }

/* Logika "odwracania" karty */
.product-card.is-open { transform: rotateY(180deg); cursor: default; }

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 25px;
    box-sizing: border-box;
    border-radius: 8px;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #444;
    border: 1px solid #555;
}
.card-back { transform: rotateY(180deg); background-color: #4f4f4f; border-color: #777; }

/* === NOWY STYL: Kolor ikony oparty o kategorię === */
.card-icon {
    font-size: 48px;
    margin-bottom: 15px;
    color: var(--category-color, #007bff); /* Używamy zmiennej CSS */
}

.card-title { margin: 0; font-size: 20px; font-weight: 400; }
.back-title { font-size: 14px; color: #ccc; margin-bottom: 15px; }

.orientation-choice { display: flex; gap: 10px; width: 100%; }
.orientation-btn {
    flex: 1;
    background-color: var(--category-color, #007bff); /* Używamy zmiennej CSS */
    color: white;
    text-decoration: none;
    padding: 10px;
    border-radius: 4px;
    transition: opacity 0.2s;
    font-size: 16px;
    font-weight: bold;
}
.orientation-btn:hover { opacity: 0.8; }





/* Plik: style.css - DODAJ NA KOŃCU */

/* Nowe style dla listy projektów w panelu */
#project-list .nick-header {
    font-size: 20px;
    font-weight: 500;
    color: #90c1f4; /* Niebieski kolor dla wyróżnienia */
    margin-top: 25px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #555;
}
#project-list .nick-header:first-of-type {
    margin-top: 0;
}

#project-list a {
    display: flex; /* Używamy flexbox do ułożenia elementów */
    justify-content: space-between;
    align-items: center;
}

#project-list .project-id {
    flex-grow: 1; /* Główna nazwa zajmuje dostępną przestrzeń */
    font-size: 14px;
	}

#project-list .project-date {
    font-size: 20px;
    color: #aaa;
    font-style: italic;
    flex-shrink: 0; /* Data nie będzie się kurczyć */
    margin-left: 20px;
	float: right;
}