* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; color: #333; line-height: 1.7; padding: 0; }
body:has(.slide-header) { font-family: Arial, sans-serif; background-color: #f0f0f0; padding: 20px; }

.menu-bar { background-color: #243342; padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 1000; align-items: center; }
.menu-left { color: #ecf0f1; margin-right: 20px; padding-right: 20px; border-right: 1px solid rgba(255,255,255,0.2); display: flex; flex-direction: column; }
.menu-left .general-title { font-size: 0.7rem; text-transform: uppercase; opacity: 0.7; letter-spacing: 1px; line-height: 1.2; }
.menu-left .specific-title { font-size: 0.85rem; font-weight: bold; line-height: 1.3; }
.menu-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1; }
.menu-links a { color: #ecf0f1; text-decoration: none; padding: 6px 14px; font-size: 0.9em; transition: background-color 0.3s; white-space: nowrap; }
.menu-links a:hover { background-color: #e74c3c; }
.menu-links a.active { background-color: #e74c3c; font-weight: bold; }
.menu-links button { margin-left: auto; background: #e74c3c; color: #fff; border: none; padding: 6px 14px; cursor: pointer; font-size: 0.9em; white-space: nowrap; }

.slide:has(.header) { max-width: 1100px; margin: 30px auto; background: #f9f9f9; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; }

.slide:has(.slide-header) { background-color: white; border: 1px solid #ccc; margin: 0 0 40px 0; padding: 30px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; min-height: 400px; align-items: center; align-content: center; }

.header { background-color: #364d63; color: white; padding: 14px 24px; display: flex; align-items: center; gap: 16px; }

.slide-number { background-color: #e74c3c; padding: 4px 14px; font-weight: bold; font-size: 0.95em; white-space: nowrap; }
.slide-header .slide-number { font-size: 18px; color: #777; font-weight: bold; background-color: transparent; padding: 0; white-space: normal; }

.slide-title { font-size: 1.15em; font-weight: 600; border-bottom: 2px solid #e74c3c; padding-bottom: 4px; }

.content { display: flex; flex-wrap: wrap; padding: 24px; gap: 24px; }
.text { flex: 3; min-width: 300px; max-width: 100%; }
.illustration { flex: 2; min-width: 250px; display: flex; align-items: center; justify-content: center; }
.illustration img { max-width: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

h3 { color: #2c3e50; margin-bottom: 12px; font-size: 1.15em; }
p { margin-bottom: 10px; text-align: justify; }
ul, ol { margin: 10px 0 10px 20px; }
li { margin-bottom: 6px; }

pre.cli { background-color: #1e1e1e; color: #d4d4d4; padding: 16px; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 0.92em; line-height: 1.6; margin: 12px 0; border-left: 5px solid #e74c3c; }
.cmd { color: #569cd6; } .def { color: #dcdcaa; } .str { color: #ce9178; }
.comment { color: #6a9955; font-style: italic; } .num { color: #b5cea8; } .attr { color: #9cdcfe; }

.console { background-color: #1e1e1e; color: #d4d4d4; padding: 16px; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 0.92em; line-height: 1.6; margin: 12px 0; border-left: 5px solid #e74c3c; }
.c-prompt { color: #58a6ff; font-weight: bold; }
.c-dir { color: #3fb950; }
.c-git { color: #d73a49; }
.c-cmd { color: #79c0ff; }
.c-arg { color: #d29922; }
.c-path { color: #a5d6ff; }
.c-comment { color: #8b949e; font-style: italic; }
.c-out { color: #c9d1d9; }

.important-box { background-color: #fff3cd; border-left: 5px solid #ffc107; padding: 15px; margin: 12px 0; }

table { width: 100%; border-collapse: collapse; margin: 12px 0; }
table th, table td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
table th { background-color: #2c3e50; color: white; }
table tr:nth-child(even) { background-color: #f2f2f2; }

.slide-header { width: 100%; margin-bottom: 20px; border-bottom: 2px solid #0056b3; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.slide-header h2 { margin: 0; color: #0056b3; font-size: 24px; }
.slide-content { width: 65%; padding-right: 20px; box-sizing: border-box; }
.slide-content ul { list-style-type: disc; padding-left: 20px; }
.slide-content li { margin-bottom: 10px; line-height: 1.5; font-size: 18px; }
.slide-description { background-color: #e8f4f8; border-left: 4px solid #0056b3; padding: 15px 20px; margin: 20px 0; font-size: 16px; line-height: 1.6; }
.slide-description strong { color: #0056b3; }
.slide-image { width: 35%; display: flex; align-items: center; justify-content: center; min-height: 300px; box-sizing: border-box; }
.slide-image img { max-width: 100%; max-height: 100%; cursor: pointer; }
.highlight { background-color: #fff3cd; padding: 2px 6px; border-radius: 3px; font-weight: bold; }

.section-break .header { background-color: #e74c3c; }
.section-break .slide-title { border-bottom-color: #fff; }
strong { color: #24292e; }

.slide_ext { background-color: #eef5fa; padding: 24px 24px; padding-right: 20%; border-top: 2px solid #2c3e50; display: none; }
.slide_ext p { margin-bottom: 8px; font-size: 0.95em; }
.slide_ext.hidden { display: block; }
.slide:has(.slide-header) .slide_ext { width: 100%; margin-top: 20px; }

.cli-prompt { color: #7ee787; font-weight: bold; }
.slide:has(.header) div.cli { background-color: #1e1e1e; color: #d4d4d4; padding: 16px; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 0.92em; line-height: 1.6; margin: 12px 0; border-left: 5px solid #e74c3c; }
.slide:has(.header) .cli-cmd { color: #569cd6; }
.slide:has(.header) .cli-arg { color: #ce9178; }
.slide:has(.header) .cli-comment { color: #6a9955; font-style: italic; }

.slide:has(.slide-header) div.cli { background-color: #0d1117; color: #c9d1d9; font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace; padding: 15px; margin: 15px 0; font-size: 16px; line-height: 1.4; border: 1px solid #30363d; }
.slide:has(.slide-header) .cli-cmd { color: #79c0ff; font-weight: bold; }
.slide:has(.slide-header) .cli-arg { color: #ffa657; }
.slide:has(.slide-header) .cli-comment { color: #8b949e; font-style: italic; }

@media (max-width: 768px) { .content { flex-direction: column; } .illustration { order: -1; } }
@media (max-width: 768px) { .slide-content { width: 100%; padding-right: 0; } .slide-image { width: 100%; min-height: auto; } }



/* === image manipulation === */
	.hover-link {
		position: relative; /* Ważne: pozwala na pozycjonowanie obrazka względem linku */
		text-decoration: none;
		color: #007BFF;
		font-weight: bold;
	}

	/* Styl dla małego obrazka - domyślnie ukryty */
	.hover-link .hover-img {
		display: none;        /* Ukrywa obrazek na starcie */
		position: absolute;   /* Pozwala ustawić obrazek w dowolnym miejscu */
		top: 25px;            /* Przesunięcie w dół (poniżej tekstu) */
		left: 0;              /* Wyrównanie do lewej krawędzi linku */
		width: 80px;          /* Szerokość małego obrazka */
		height: auto;         /* Automatyczna wysokość, by zachować proporcje */
		border: 1px solid #ccc;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
		z-index: 10;          /* Gwarantuje, że obrazek pojawi się na wierzchu innych elementów */
	}

	/* Efekt po najechaniu myszką (hover) */
	.hover-link:hover .hover-img {
		display: block;       /* Pokazuje obrazek, gdy najedziesz na link */
	}
	
	/* Skrypt JS do pokazywania obrazka nad wszystkim */
	.maly-div {
		width: 150px;
		height: 50px;
		background-color: #f0f0f0;
		overflow: hidden; /* To tutaj blokowało poprzedni sposób! */
		border: 1px solid #333;
		padding: 10px;
	}

	/* Styl dla globalnego podglądu - ukryty i nad wszystkim */
	#global-preview {
		display: none;
		position: absolute; /* Pozycjonowanie względem całej strony */
		z-index: 99999;     /* Maksymalna wartość, obrazek będzie na samej górze */
		width: 120px;
		height: auto;
		border: 2px solid white;
		box-shadow: 0px 4px 15px rgba(0,0,0,0.5);
		pointer-events: none; /* Sprawia, że myszka "ignoruje" obrazek (brak migania) */
	}