/*!
Theme Name: Hardware Museum 2026
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hardware-museum-2026
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Hardware Museum 2026 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* ==========================================================================
   MOJE VLASTNÍ ÚPRAVY - TADY MŮŽU EXPERIMENTOVAT
   ========================================================================== */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/








/* Vynucené skrytí tlačítka den/noc na celém webu */
#dark-mode-toggle,
.mode-switch-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}







/* =================================================================================
   Příspěvky a platí pro soubor index.php
   ================================================================================= */


/* CSS Mřížka - ZÁKLADNÍ NASTAVENÍ (Desktop pro 3 sloupce) */
.hw-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-bottom: 40px;
}

/* Na tabletech (menší obrazovky) se to přepne do 2 sloupců */
@media (max-width: 1024px) {
    .hw-post-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Na mobilních telefonech se to přepne do 1 sloupce pod sebe */
@media (max-width: 768px) {
    .hw-post-grid {
        grid-template-columns: 1fr;
    }
}

/* Vzhled jedné karty - ZÁKLADNÍ STAV */
.hw-post-card {
    background-color: #2a2a2a;
    border: 2px solid #3a3d46; /* Šedý rámeček v klidu */
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Plynulá animace všech změn */
}

/* Vzhled jedné karty - HOVER STAV (po najetí myší) */
.hw-post-card:hover {
    transform: translateY(-8px); /* Karta se zvedne o 8px */
    border-color: #f6c344; /* Rámeček zezlátne */
    box-shadow: 
        0 15px 25px rgba(0, 0, 0, 0.5),         /* Spodní tmavý stín pro pocit hloubky */
        0 0 15px rgba(246, 195, 68, 0.4),       /* První vrstva zlaté záře */
        0 0 35px rgba(246, 195, 68, 0.2);       /* Druhá, širší vrstva zlaté záře */
}

/* Nadpis */
.hw-post-card-title {
    text-align: center;
    margin: 0 0 10px 0;
}
.hw-post-card-title a {
    color: #ffcc00;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
    transition: color 0.3s ease;
}
.hw-post-card-title a:hover {
    color: #ff9900;
}

/* Datum a rubrika */
.hw-post-meta {
    text-align: center;
    color: #ffcc00;
    font-size: 13px;
    margin-bottom: 20px;
}

/* Náhledový obrázek s oranžovými rámečky */
.hw-post-image {
    margin-bottom: 20px;
    border-top: 3px solid #ff6600;
    border-bottom: 3px solid #ff6600;
    padding: 5px 0;
}
.hw-post-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text a odkaz číst dál */
.hw-post-excerpt {
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* Zatlačí tlačítko "Číst celé" vždy dolů */
}
.hw-read-more {
    color: #ff4400;
    font-weight: bold;
    text-decoration: none;
}
.hw-read-more:hover {
    text-decoration: underline;
}




















/* =================================================================================
   LAYOUT: CONTAINER + SIDEBARS
   ================================================================================= */

/* 1. CELKOVÝ KONTEJNER */
.hw-container {
    display: flex;
    max-width: 95%;
    margin: 20px auto;
    gap: 20px;
    align-items: flex-start; /* Zásadní pro fungování sticky */
}

/* SPOLEČNÝ ZÁKLAD PRO OBA SLOUPCE */
.hw-sidebar {
    width: 250px;
    min-width: 250px;
    flex-shrink: 0;
}

/* LEVÝ SLOUPEC (STICKY) */
.hw-left {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

/* PRAVÝ SLOUPEC (STATIC) */
.hw-right {
    position: static;
}

/* PROSTŘEDNÍ OBSAH */
.site-main {
    flex: 1;
    background: var(--panel);
    color: var(--text);
    padding: 30px;
    border-radius: 8px;
    transition: background-color 0.5s ease;
}

/* =================================================================================
   SCROLLBAR (DARK)
   ================================================================================= */

body.dark-mode::-webkit-scrollbar { width: 12px; }
body.dark-mode::-webkit-scrollbar-track { background: #0b0b0b; }
body.dark-mode::-webkit-scrollbar-thumb {
    background-color: var(--zlata);
    border-radius: 10px;
    border: 3px solid #0b0b0b;
}

/* =================================================================================
   RESPONSIVE: SIDEBARS
   ================================================================================= */

@media (max-width: 1024px) {
    .hw-container {
        flex-direction: column;
        max-width: 100%;
    }

    .hw-sidebar {
        width: 100%;
        min-width: 100%;
        position: static;
    }
}

/* =================================================================================
   UNIVERSAL TOPBAR COLOR RULES (MOVED OUT OF @media – FIXED)
   Pozn.: ponechávám logiku jak máš, jen opravuju chybnou strukturu.
   ================================================================================= */

.hw-card-topbar {
    /* používá proměnnou --hw-text, která se v noci mění */
    color: var(--hw-text) !important;
    transition: color 0.3s ease;
}

/* Výjimky – barevné brandy (obsah nechávám, jen je to už validní CSS) */
[data-brand*="intel"]  .hw-card-topbar { color: #0071C5 !important; }
[data-brand*="nvidia"] .hw-card-topbar { color: #76B900 !important; }
[data-brand*="ati"]    .hw-card-topbar { color: #ED1C24 !important; }
[data-brand*="3dfx"]   .hw-card-topbar { color: #F27F11 !important; }
[data-brand*="amd"]    .hw-card-topbar { color: #009645 !important; }

/* =================================================================================
   MAIN NAVIGATION (TILES)
   ================================================================================= */

.main-navigation ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    gap: 15px;
    justify-content: center;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.main-navigation li { width: 180px; }

.main-navigation a {
    display: block;
    background: #000000;
    color: var(--zlata) !important;
    text-align: center;
    padding: 15px 10px;
    text-decoration: none;
    border: 1px solid var(--zlata);
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    box-shadow: 0 6px 12px rgba(0,0,0,0.6);
}

.main-navigation a:hover {
    background: #111;
    color: var(--zlata) !important;
    transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.8);
    border-color: #fff;
}

body.dark-mode .main-navigation a:hover {
    box-shadow: 0 0 25px var(--zlata), 0 5px 15px rgba(255, 192, 0, 0.4);
    background: #050505;
}

/* =================================================================================
   HEADINGS CENTER (FIXED COMMENTS)
   ================================================================================= */

/* Nadpisy do prostřed */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
    text-align: center !important;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

h1, 
.entry-title,
.site-title,
.hw-post-card-title a {
    text-transform: none !important;
}

.hw-left h3,
.hw-right h3 {
    text-align: center !important;
}

/* =================================================================================
   STICKY FOOTER + FOOTER STYLE
   ================================================================================= */

#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content { flex: 1; }

.site-footer {
    text-align: center;
    padding: 40px 0;
    width: 100%;
    background-color: var(--panel);
    color: var(--text);
    border-top: 1px solid var(--zlata);
    transition: background-color 0s;
}

.site-footer .site-info,
.site-footer ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 30px;
}

.site-footer a {
    color: var(--zlata);
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s ease;
}
.site-footer a:hover { opacity: 0.7; }

/* =================================================================================
   CPU/VGA/RAM/MOBO GRID CARDS – BASE TOKENS
   (ponechávám jak máš; upozornění: máš dvě definice :root později v detailu,
   ale to je pro jiný scope; nesahám na to)
   ================================================================================= */

:root {
    --hw-bg: #ffffff;
    --hw-text: #000000;
    --hw-border: #000000;
    --hw-gold: #FFC000;
    --hw-alt: #f4f4f4;
    --hw-shadow: rgba(0, 0, 0, 0.9);
}

/* NOC */
html.dark-mode, body.dark-mode {
    --hw-bg: #1a1a1a;
    --hw-text: #ffffff;
    --hw-border: #ffffff;
    --hw-alt: #2a2a2a;
    --hw-shadow: rgba(255, 192, 0, 1.0);
}

/* =================================================================================
   CARD ITEM (ARCHIVE GRID)
   ================================================================================= */

.hw-card-item {
    background: var(--hw-bg);
    border: 1px solid var(--hw-border) !important;
    border-bottom: 6px solid var(--hw-gold) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 6px;
    overflow: hidden;
}

.hw-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px -5px var(--hw-shadow) !important;
}

.hw-card-link {
    text-decoration: none !important;
    color: inherit;
}

/* ---- TEXTS IN CARD ---- */

.hw-card-topbar {
    padding: 10px;
    background: var(--hw-alt);
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--hw-text) !important;
    border-bottom: 1px solid var(--hw-border) !important;
    transition: color 0.3s ease;
}

.hw-card-info {
    padding: 5px;
    text-align: center;
}

.hw-card-info h3 {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--hw-text) !important;
}

.hw-card-specs {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.hw-card-specs small {
    display: block;
    color: var(--hw-text) !important;
    font-weight: 700;
    text-transform: uppercase !important;
    font-size: 9px;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-bottom: 2px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hw-card-specs b {
    color: var(--hw-text) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase !important;
}

/* DARK MODE FIX – ponechávám, ale ODSTRAŇUJU topbar, aby se nepral s brand barvami */
body.dark-mode .hw-card-info h3,
body.dark-mode .hw-card-specs small,
body.dark-mode .hw-card-specs b {
    color: #eeeeee !important;
}

/* ---- PHOTO ---- */

.hw-card-photo {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: var(--hw-alt);
    transition: background 0.3s ease;
    border-bottom: 1px solid var(--hw-border) !important;
}

.hw-card-photo img {
    max-height: 100%;
    object-fit: contain;
    padding: 1px;
    background: var(--hw-bg);
    box-shadow: 5px 5px 0 rgba(0,0,0,0.1);
    border: 1px solid var(--hw-border) !important;
}

/* =================================================================================
   BRAND COLORS (TOPBAR) – EXISTING (ponechávám)
   Pozn.: tohle se může “zdvojovat” s [data-brand*="..."] výše, ale nechávám to,
   protože to je vědomé “krásno” u různých modulů.
   ================================================================================= */

/* A) Text v horní liště */
[data-brand="intel"] .hw-card-topbar { color: #0071C5 !important; }
[data-brand="amd"]   .hw-card-topbar { color: #ED1C24 !important; }
[data-brand="cyrix"] .hw-card-topbar { color: #00A651 !important; }
[data-brand="idp"]   .hw-card-topbar { color: #FFC000 !important; }

/* =================================================================================
   BRAND PHOTO BACKGROUND (DAY + NIGHT) – DEDUPED
   (Tady byla duplicita; nechávám to jen jednou, sjednocené i s is-dark-theme.)
   ================================================================================= */

/* DAY – jemné barvy */
[data-brand="intel"] .hw-card-photo { background: #e6f2ff; }
[data-brand="amd"]   .hw-card-photo { background: #fff0f0; }
[data-brand="cyrix"] .hw-card-photo { background: #e6ffe6; }

/* NIGHT – tmavé barvy (sjednocené selektorem :is) */
:is(html.dark-mode, body.dark-mode, body.is-dark-theme) [data-brand="intel"] .hw-card-photo { background: #001a33 !important; }
:is(html.dark-mode, body.dark-mode, body.is-dark-theme) [data-brand="amd"]   .hw-card-photo { background: #2b0000 !important; }
:is(html.dark-mode, body.dark-mode, body.is-dark-theme) [data-brand="cyrix"] .hw-card-photo { background: #002200 !important; }

/* =================================================================================
   ARCHIVE LAYOUT (GRID + YEARS)
   ================================================================================= */

.hw-archive-block { margin-bottom: 60px; }

.hw-year-heading,
.hw-category-header h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 10px auto !important;
    padding: 0 !important;
    border: none !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    color: var(--hw-muted) !important;
    display: block !important;
}

.hw-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .hw-grid-layout {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .hw-year-heading { font-size: 14px !important; }
}

/* =================================================================================
   CPU DETAIL [cpu_detail] – YOUR “BIG” STYLES (UNCHANGED CONTENT)
   ================================================================================= */

/* RESET */
.hw-archive-detail * { box-sizing: border-box; }
.hw-archive-detail img { max-width: 100%; height: auto; display: block; }

/* TOKENS / VARIABLES (ponechávám jak máš) */
:root{
  --hw-max: 1250px;
  --hw-pad: clamp(16px, 2.2vw, 30px);

  --hw-font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --hw-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --hw-bg: #f7f7fb;
  --hw-surface: #ffffff;
  --hw-surface-2: #f3f4f7;
  --hw-text: #0f1115;
  --hw-muted: rgba(15,17,21,.62);
  --hw-border: rgba(15,17,21,.12);

  --hw-gold: #ffc000;
  --hw-gold-2: #ffdd66;
  --hw-blue: #4da6ff;
  --hw-red: #ff4d4d;
  --hw-green: #2ee59d;

  --hw-radius: 18px;
  --hw-radius-sm: 14px;

  --hw-shadow-card: 0 22px 60px rgba(0,0,0,.14);
  --hw-shadow-card2: 0 10px 26px rgba(0,0,0,.10);
  --hw-shadow-pop: 0 34px 90px rgba(0,0,0,.18);

  --hw-zebra: rgba(15,17,21,.022);
  --hw-row-hover: rgba(255,192,0,.10);

  --hw-ease: cubic-bezier(.2,.9,.2,1);
  --hw-speed: .22s;

  --hw-glow: 0 0 0 2px rgba(255,192,0,.22), 0 18px 60px rgba(255,192,0,.12);
}

/* Dark palette (toggle) */
html.dark-mode,
body.dark-mode{
  --hw-bg: #08090b;
  --hw-surface: #101216;
  --hw-surface-2: #0b0d10;
  --hw-text: #f2f4f7;
  --hw-muted: rgba(242,244,247,.66);
  --hw-border: rgba(255,255,255,.12);

  --hw-shadow-card: 0 28px 90px rgba(0,0,0,.72);
  --hw-shadow-card2: 0 16px 44px rgba(0,0,0,.62);
  --hw-shadow-pop: 0 40px 120px rgba(0,0,0,.78);

  --hw-zebra: rgba(255,255,255,.032);
  --hw-row-hover: rgba(255,192,0,.12);

  --hw-glow: 0 0 0 2px rgba(255,192,0,.22), 0 22px 80px rgba(255,192,0,.16);
}

/* Fallback dark if OS prefers dark but no toggle */
@media (prefers-color-scheme: dark){
  :root{
    --hw-bg: #08090b;
    --hw-surface: #101216;
    --hw-surface-2: #0b0d10;
    --hw-text: #f2f4f7;
    --hw-muted: rgba(242,244,247,.66);
    --hw-border: rgba(255,255,255,.12);

    --hw-shadow-card: 0 28px 90px rgba(0,0,0,.72);
    --hw-shadow-card2: 0 16px 44px rgba(0,0,0,.62);
    --hw-shadow-pop: 0 40px 120px rgba(0,0,0,.78);

    --hw-zebra: rgba(255,255,255,.032);
    --hw-row-hover: rgba(255,192,0,.12);

    --hw-glow: 0 0 0 2px rgba(255,192,0,.22), 0 22px 80px rgba(255,192,0,.16);
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .hw-archive-detail *{ transition: none !important; animation: none !important; }
}

/* PAGE WRAPPER */
.hw-archive-detail{
  max-width: var(--hw-max);
  margin: 0 auto;
  padding: var(--hw-pad);
  font-family: var(--hw-font);
  color: var(--hw-text);
  line-height: 1.75;
  background:
    radial-gradient(900px 360px at 16% -12%, rgba(255,192,0,.18), transparent 62%),
    radial-gradient(800px 320px at 86% 0%, rgba(77,166,255,.12), transparent 58%),
    linear-gradient(transparent 23px, rgba(0,0,0,.03) 24px),
    linear-gradient(90deg, transparent 23px, rgba(0,0,0,.03) 24px),
    var(--hw-bg);
  background-size: auto, auto, 24px 24px, 24px 24px, auto;
  border-radius: calc(var(--hw-radius) + 4px);
}

/* TITLES (ponechávám) */
.hw-detail-title,
.hw-section-title{
  font-weight: 900;
  letter-spacing: .02em;
  text-wrap: balance;
  display: none !important;
}

.hw-section-title{
  position: relative;
  padding-bottom: 12px;
}
.hw-section-title::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  width: 64%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hw-gold), transparent);
  opacity: .95;
}
.hw-section-title span,
.hw-section-title em{
  font-family: var(--hw-mono);
  font-style: normal;
}

/* DETAIL WRAPPER / CARD */
.hw-detail-wrapper{
  position: relative;
  background: linear-gradient(180deg, var(--hw-surface), var(--hw-surface-2));
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius);
  box-shadow: var(--hw-shadow-card2);
  overflow: hidden;
}

.hw-detail-wrapper::before{
  content:"";
  position:absolute;
  left: 16px;
  right: 16px;
  top: 10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,192,0,.65), transparent);
  opacity: .65;
  pointer-events:none;
}

/* Brand vibe in toggle dark mode */
html.dark-mode .hw-detail-wrapper[data-brand="intel"],
body.dark-mode .hw-detail-wrapper[data-brand="intel"]{
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(77,166,255,.22), transparent 60%),
    linear-gradient(180deg, var(--hw-surface), var(--hw-surface-2));
  border-color: rgba(77,166,255,.22);
}
html.dark-mode .hw-detail-wrapper[data-brand="amd"],
body.dark-mode .hw-detail-wrapper[data-brand="amd"]{
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(255,77,77,.18), transparent 60%),
    linear-gradient(180deg, var(--hw-surface), var(--hw-surface-2));
  border-color: rgba(255,77,77,.18);
}
html.dark-mode .hw-detail-wrapper[data-brand="cyrix"],
body.dark-mode .hw-detail-wrapper[data-brand="cyrix"]{
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(46,229,157,.14), transparent 60%),
    linear-gradient(180deg, var(--hw-surface), var(--hw-surface-2));
  border-color: rgba(46,229,157,.14);
}

/* PHOTOS */
.hw-visual-stack{
  display: flex;
  flex-direction: column;
  gap: 16px !important;
  margin-bottom: 56px;
  max-width: 100% !important;
  width: 100%;
}

.hw-photo-box{
  position: relative;
  border-radius: var(--hw-radius-sm);
  overflow: hidden;
  max-width: 100% !important;
  margin: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.78));
  border: 1px solid rgba(15,17,21,.10);
  box-shadow: var(--hw-shadow-card);
  transition: transform var(--hw-speed) var(--hw-ease),
              box-shadow var(--hw-speed) var(--hw-ease),
              filter var(--hw-speed) var(--hw-ease);
  transform: translateZ(0);
}

.hw-photo-box::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), transparent 40%),
    radial-gradient(520px 240px at 30% 0%, rgba(255,192,0,.18), transparent 55%);
  opacity: .9;
}

.hw-photo-box:hover{
  transform: translateY(-9px) rotate(-.15deg);
  box-shadow: var(--hw-shadow-pop);
  filter: saturate(1.08) contrast(1.02);
}
.hw-photo-box:hover::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: var(--hw-radius-sm);
  box-shadow: var(--hw-glow);
}

.hw-photo-box figcaption,
.hw-photo-box .caption,
.hw-photo-box .wp-caption-text{
  display: none !important;
}

html.dark-mode .hw-photo-box,
body.dark-mode .hw-photo-box{
  background: linear-gradient(180deg, rgba(18,18,22,.92), rgba(10,10,12,.92));
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--hw-shadow-card);
}

/* GALLERY ITEMS */
.hw-detail-gallery{ gap: 22px !important; }

.hw-gallery-item{
  position: relative;
  border-radius: var(--hw-radius-sm);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.78));
  border: 1px solid rgba(15,17,21,.10);
  box-shadow: var(--hw-shadow-card);
  transition: transform var(--hw-speed) var(--hw-ease),
              box-shadow var(--hw-speed) var(--hw-ease),
              filter var(--hw-speed) var(--hw-ease);
}

.hw-gallery-item:hover{
  transform: translateY(-9px) rotate(.15deg);
  box-shadow: var(--hw-shadow-pop);
  filter: saturate(1.08) contrast(1.02);
}
.hw-gallery-item:hover::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: var(--hw-radius-sm);
  box-shadow: var(--hw-glow);
}

html.dark-mode .hw-gallery-item,
body.dark-mode .hw-gallery-item{
  background: linear-gradient(180deg, rgba(18,18,22,.92), rgba(10,10,12,.92));
  border-color: rgba(255,255,255,.12);
}

/* FIX GALERIE: vedle sebe + zlatý stín (ponechávám) */
.hw-detail-gallery{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    width: 100%;
}

.hw-gallery-item:hover,
.hw-photo-box:hover{
    border-color: #FFC000 !important;
    box-shadow: 0 0 35px rgba(255, 192, 0, 0.8) !important;
    transform: translateY(-5px) !important;
    z-index: 100 !important;
}

/* PARAMS CARD + TABLE */
.hw-params-card{
  position: relative;
  background: linear-gradient(180deg, var(--hw-surface), var(--hw-surface-2));
  border: 1px solid var(--hw-border);
  border-radius: var(--hw-radius);
  padding: clamp(18px, 2vw, 30px);
  box-shadow: var(--hw-shadow-card2);
  overflow: hidden;
}

.hw-params-card::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: calc(var(--hw-radius) - 8px);
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,192,0,.18);
  opacity: .95;
}

.hw-params-card::after{
  content:"";
  position:absolute;
  left: 10px;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--hw-gold), rgba(255,192,0,.12));
  box-shadow: 0 0 0 1px rgba(255,192,0,.12);
  opacity: .95;
}

.hw-spec-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--hw-border);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  box-shadow:
    0 18px 46px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.hw-spec-table th,
.hw-spec-table td{
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15,17,21,.10);
  background: transparent;
}

.hw-spec-table th{
  width: 58%;
  text-align: left;
  font-size: 1.0rem;
  letter-spacing: .14em;
  font-weight: 900;
  font-family: var(--hw-mono);
  color: var(--hw-muted);
  background-image: linear-gradient(90deg, rgba(0,0,0,.02), transparent 55%);
}

.hw-spec-table td{
  width: 42%;
  text-align: right;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: .01em;
  color: var(--hw-text);
}

.hw-spec-table tr:nth-child(even) th,
.hw-spec-table tr:nth-child(even) td{ background: var(--hw-zebra); }

.hw-spec-table tr:hover th,
.hw-spec-table tr:hover td{ background: var(--hw-row-hover); }

.hw-spec-table tr:last-child th,
.hw-spec-table tr:last-child td{ border-bottom: 0; }

.hw-spec-table tr:hover th{
  box-shadow: inset 3px 0 0 rgba(255,192,0,.55);
}

html.dark-mode .hw-spec-table,
body.dark-mode .hw-spec-table{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.12);
  box-shadow:
    0 22px 70px rgba(0,0,0,.74),
    inset 0 1px 0 rgba(255,255,255,.06);
}

html.dark-mode .hw-spec-table th,
body.dark-mode .hw-spec-table th{
  color: rgba(255,214,90,.92);
  border-bottom-color: rgba(255,255,255,.12);
  background-image: linear-gradient(90deg, rgba(255,192,0,.06), transparent 55%);
}

html.dark-mode .hw-spec-table td,
body.dark-mode .hw-spec-table td{
  color: rgba(242,244,247,.92);
  border-bottom-color: rgba(255,255,255,.12);
}

/* TEXT CONTENT POLISH */
.hw-text-content{ color: var(--hw-text); }
.hw-text-content p{
  color: color-mix(in srgb, var(--hw-text) 92%, transparent);
}
.hw-text-content a{
  color: inherit;
  text-decoration: none;
  background: linear-gradient(90deg, rgba(255,192,0,.35), rgba(255,192,0,.10));
  padding: 0 .18em;
  border-radius: .35em;
}
.hw-text-content a:hover{
  box-shadow: 0 0 0 2px rgba(255,192,0,.22);
}

.tech-params-title,
.hw-params-title{
  color: var(--hw-gold);
  text-shadow: 0 10px 26px rgba(255,192,0,.18);
}

.hw-text-block h3.hw-section-title { display: none !important; }

/* =================================================================================
   COMPARE CARDS (CPU/RAM/VGA/MOBO compare blocks) – UNCHANGED
   ================================================================================= */

.hw-compare-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.hw-card {
    background: var(--hw-bg-card);
    border: 1px solid var(--hw-border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    position: relative;
    box-shadow: var(--hw-shadow);
    transition: transform 0.3s ease;
}

.hw-card.main-cpu { border: 2px solid var(--hw-gold); }

.hw-card-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hw-gold);
    color: #000;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.hw-change-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    filter: grayscale(1);
    transition: filter 0.2s;
}

.hw-change-btn:hover { filter: grayscale(0); }

.hw-card img {
    max-width: 80px;
    height: auto;
    margin-bottom: 15px;
}

.hw-card h4 {
    font-size: 0.9rem;
    margin: 0;
    font-weight: 700;
}




/* =================================================================================
   VGA TOOL – HLAVNÍ STYLY
   ================================================================================= */

/* Hlavní kontejner pro karty */
#vga-tool-wrapper .vga-main-container {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    align-items: stretch; /* Aby byly všechny karty stejně vysoké */
}

/* Karta (VGA i Slot) */
.vga-card {
    background: var(--hw-bg, #ffffff);
    border: 1px solid var(--hw-border, #ddd);
    color: var(--hw-text, #000);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    /* Layout fixy pro obsah karty */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Specifické šířky pro karty */
.vga-card.main {
    flex: 0 0 260px; /* Hlavní karta má fixní šířku */
    max-width: 300px;
}

.vga-card.slot {
    flex: 1; /* Sloty se roztahují */
    min-width: 200px;
}

/* Tabulka parametrů - vždy přilepená dolů */
.vga-specs-box {
    margin-top: auto; 
    width: 100%;
}

/* Tabulky uvnitř */
.vga-specs-table td {
    color: var(--hw-text) !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2) !important;
}
.vga-specs-table td:first-child { color: #777; }

/* Obrázky v kartách */
.vga-card img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* =================================================================================
   MODÁLNÍ OKNA A VÝBĚR
   ================================================================================= */

#vga-modal-card, #vga-modal-cpu, #vga-modal-tests {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(5px);
    z-index: 99999;
}

.vga-picker-item {
    background: var(--panel, #f9f9f9);
    border: 1px solid var(--hw-border, #ddd);
    color: var(--hw-text);
    transition: all 0.2s ease;
    position: relative; /* Nutné pro nápis */
}

/* === STYL PRO JIŽ VYBRANÉ POLOŽKY (Zářivý štítek) === */
.vga-picker-item.already-selected {
    /* Odebrali jsme opacity a grayscale odsud z hlavního obalu */
    pointer-events: none !important; 
    border: 1px dashed #555 !important;
    box-shadow: none !important;
    transform: none !important;
    position: relative;
}

/* Zšednutí a zprůhlednění aplikujeme jen na vnitřní obsah karty (divy uvnitř) */
.vga-picker-item.already-selected > div {
    opacity: 0.3; /* Ještě víc zprůhledníme texty za štítkem, ať nezavazí */
    filter: grayscale(100%);
}

/* Samotný štítek (Konečně bude opravdu svítit zlatě a nepřekrývat tolik textu) */
.vga-picker-item.already-selected::after {
    content: "JIŽ VYBRÁNO";
    position: absolute;
    bottom: 8px;      /* Sedí vlevo dole */
    left: 8px;
    background: #111111; /* Sytě černé pozadí */
    color: #FFC000;      /* Tvoje zářivá zlatá */
    padding: 3px 8px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #FFC000; /* Zlatý rámeček */
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.9);
}

/* Panel filtrů */
#vga-tool-wrapper .vga-filter-panel {
    background: #f4f7f9;
    border: 1px solid #dce4ec;
    border-radius: 8px;
}

/* =================================================================================
   DARK MODE
   ================================================================================= */
body.dark-mode .vga-card,
body.dark-mode .vga-filter-panel {
    background: #111111 !important;
    color: #eeeeee !important;
    border-color: #333333 !important;
    background-image: none !important;
}

body.dark-mode .vga-picker-item {
    background: #111111 !important;
    color: #eeeeee !important;
    background-image: none !important;
    border-top: 1px solid #333333 !important;
    border-right: 1px solid #333333 !important;
    border-bottom: 1px solid #333333 !important;
}

body.dark-mode #vga-tool-wrapper div[style*="background:#f4f7f9"],
body.dark-mode #vga-modal-card > div,
body.dark-mode #vga-modal-cpu > div,
body.dark-mode #vga-modal-tests > div {
    background: #111111 !important;
    border-color: var(--zlata, #FFC000) !important;
}

body.dark-mode .vga-specs-table td {
    border-bottom-color: #222 !important;
    color: #cccccc !important;
}
body.dark-mode .vga-specs-table td:first-child { color: #888888 !important; }

body.dark-mode .vga-card-interactive:hover {
    box-shadow: 0 0 20px rgba(255, 192, 0, 0.2) !important;
    border-color: var(--zlata, #FFC000) !important;
}

body.dark-mode #vga-tool-wrapper label { color: #aaaaaa !important; }

/* =================================================================================
   RESPONSIVE
   ================================================================================= */
@media (max-width: 768px) {
    #vga-tool-wrapper .vga-main-container {
        flex-direction: column !important;
    }

    .vga-card {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important; /* Reset pro hlavní kartu */
    }

    #vga-tool-wrapper div[style*="flex-wrap:wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #vga-modal-card > div, #vga-modal-cpu > div, #vga-modal-tests > div {
        width: 95% !important;
        margin: 2vh auto !important;
    }
}

/* =================================================================================
   CPU COMPARE – UNCHANGED
   ================================================================================= */

.hw-compare-container > div:first-child {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.vga-filter-panel {
    background-color: #f4f7f9 !important;
    border: 1px solid #dce4ec !important;
    border-radius: 8px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.hw-card, .hw-picker-item-cpu {
    background-color: var(--hw-bg, #ffffff);
    color: var(--hw-text, #000000);
    border: 1px solid var(--hw-border, #ddd);
}


/* =======================================================
   SKRYTÍ VYBRANÝCH (CPU i VGA) - ULTRA SILNÉ
   ======================================================= */

/* 1. Skrýt celý box */
.hw-picker-item-cpu.je-v-grafu,
.vga-picker-item.je-v-grafu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. POJISTKA: Zabít fajfku (pokud by se box nezavřel) */
.hw-picker-item-cpu.je-v-grafu::after,
.vga-picker-item.je-v-grafu::after {
    content: none !important;
    display: none !important;
}







/* DARK MODE unify */
body.dark-mode .hw-card,
body.dark-mode .vga-filter-panel,
body.dark-mode #hw-results-dynamic,
body.dark-mode #hw-cpu-picker-overlay > div,
body.dark-mode #hw-test-picker-overlay > div {
    background-color: #111111 !important;
    color: #eeeeee !important;
    border-color: #333333 !important;
    background-image: none !important;
}

body.dark-mode .hw-picker-item-cpu {
    background-color: #111111 !important;
    color: #eeeeee !important;
    background-image: none !important;
    border-top: 1px solid #333333 !important;
    border-right: 1px solid #333333 !important;
    border-bottom: 1px solid #333333 !important;
}



body.dark-mode .hw-card h3,
body.dark-mode .name-target {
    color: #ffffff !important;
}

body.dark-mode .info-target { color: #cccccc !important; }

body.dark-mode .vga-filter-panel label { color: #dddddd !important; }

body.dark-mode select {
    background-color: #222 !important;
    color: #fff !important;
    border-color: #444 !important;
}

body.dark-mode .hw-benchmark-row,
body.dark-mode .hw-spec-table td,
body.dark-mode .hw-spec-table th,
body.dark-mode .hw-sep-solid,
body.dark-mode .hw-sep-dashed {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    border-right-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .hw-sep-dashed { color: #aaaaaa !important; }


body.dark-mode #hw-cpu-picker-overlay > div,
body.dark-mode #hw-test-picker-overlay > div {
    border-color: var(--zlata) !important;
    box-shadow: 0 0 20px rgba(255, 192, 0, 0.2);
}

/* Hover/interactive */
.hw-card-interactive {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.hw-card-interactive:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
    border-color: #333 !important;
    z-index: 10;
}

.hw-card-interactive:hover .hw-btn-change {
    background-color: #333 !important;
    color: #fff !important;
    transform: scale(1.05);
}

body.dark-mode .hw-card-interactive:hover {
    box-shadow: 0 0 30px rgba(255, 192, 0, 0.4) !important;
    border-color: #FFC000 !important;
}

body.dark-mode .hw-card-interactive:hover .hw-btn-change {
    background-color: #FFC000 !important;
    color: #000 !important;
}

.hw-picker-item-cpu {
    transition: all 0.2s ease-in-out;
    position: relative;
    z-index: 1;
}

.hw-picker-item-cpu:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255,255,255,0.3);
    border-color: #fff !important;
    z-index: 2;
}

body.dark-mode .hw-picker-item-cpu:hover {
    box-shadow: 0 0 15px rgba(255, 192, 0, 0.3);
    border-color: #FFC000 !important;
}

.hw-btn-hover {
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.hw-btn-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(255,255,255,0.25);
    filter: brightness(1.1);
    z-index: 5;
}
.hw-btn-hover:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(255,255,255,0.1);
}

/* MOBILE compare */
@media (max-width: 768px) {
    .hw-compare-container > div:first-child {
        flex-direction: column !important;
    }
    .hw-card {
        width: 100% !important;
        flex: none !important;
    }
    .hw-table-wrapper {
        overflow-x: auto !important;
        background: inherit;
    }
}

/* =================================================================================
   FOOTER “RESTART FIX” – UNCHANGED
   ================================================================================= */

#colophon.site-footer {
    text-align: center !important;
    padding: 40px 0 !important;
    width: 100% !important;
    background-color: var(--panel) !important;
    border-top: 1px solid var(--zlata) !important;
    display: block !important;
}

.site-footer .site-info {
    display: block !important;
    margin: 0 auto !important;
    gap: 0 !important;
}

.custom-footer-content {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--hw-text) !important;
    display: block !important;
}

.custom-footer-content::after {
    content: "";
    display: block !important;
    width: 60px;
    height: 3px;
    background-color: var(--zlata) !important;
    margin: 15px auto 0 !important;
    border-radius: 2px;
}

/* =================================================================================
   “DARK MODE - JEMNĚJŠÍ EDICE” – UNCHANGED (ponechávám úplně jak máš)
   Pozn.: tady je hodně přepisů (h3, label), ale není to duplicita, je to design.
   ================================================================================= */

html.dark-mode .hw-card,
html.dark-mode .vga-card {
    background-color: #161616 !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

html.dark-mode .hw-card:not(.main-card):hover,
html.dark-mode .vga-card:not(.main):hover {
    transform: translateY(-5px) !important;
    border-color: #FFC000 !important;
    box-shadow: 0 0 25px rgba(255, 192, 0, 0.4) !important;
    cursor: pointer;
    z-index: 10;
}

html.dark-mode .hw-card.main-card,
html.dark-mode .vga-card.main {
    background-color: #000000 !important;
    border: 2px solid #FFC000 !important;
    box-shadow: 0 0 25px rgba(255, 192, 0, 0.15) !important;
    transform: none !important;
    cursor: default !important;
}

html.dark-mode .hw-card.main-card:hover,
html.dark-mode .vga-card.main:hover {
    transform: none !important;
    box-shadow: 0 0 25px rgba(255, 192, 0, 0.15) !important;
    border-color: #FFC000 !important;
}

html.dark-mode .hw-specs-container,
html.dark-mode .hw-specs-container div,
html.dark-mode .vga-specs-box td {
    color: #dddddd !important;
}

html.dark-mode .hw-specs-container strong,
html.dark-mode .hw-specs-container b,
html.dark-mode .vga-specs-box td:first-child {
    color: #888888 !important;
    font-weight: bold !important;
}

html.dark-mode .hw-specs-container div[style*="background"] {
    background-color: #222 !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
}

html.dark-mode .hw-specs-container div[style*="background"] * {
    color: #e0e0e0 !important;
}

html.dark-mode .hw-picker-item-cpu,
html.dark-mode .vga-picker-item {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-top: 1px solid #333 !important;
    border-right: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
}

html.dark-mode .hw-picker-item-cpu:hover,
html.dark-mode .vga-picker-item:hover {
    background-color: #2a2a2a !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

html.dark-mode .vga-filter-panel,
html.dark-mode .hw-filter-panel,
html.dark-mode #vga-tool-wrapper > div,
html.dark-mode .hw-compare-container + div,
html.dark-mode #hw-results-dynamic {
    background-color: #111111 !important;
    border: 1px solid #333 !important;
    color: #cccccc !important;
}

/* nadpisy */
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode .vga-name,
html.dark-mode .hw-card h3,
html.dark-mode .name-target {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    font-weight: 900 !important;
}

html.dark-mode .hw-specs-container strong,
html.dark-mode .hw-specs-container b,
html.dark-mode .vga-specs-box td:first-child {
    color: #959595 !important;
    font-weight: normal !important;
}

html.dark-mode .hw-specs-container,
html.dark-mode .hw-specs-container div,
html.dark-mode .vga-specs-box td {
    color: #ffffff !important;
}

html.dark-mode .info-target,
html.dark-mode .vga-meta {
    color: #ffffff !important;
}

html.dark-mode select {
    background-color: #000 !important;
    border: 1px solid #555 !important;
    color: #ffffff !important;
}

html.dark-mode label {
    color: #FFC000 !important;
    opacity: 1 !important;
}

html.dark-mode .hw-change-btn,
html.dark-mode .vga-change-btn,
html.dark-mode button {
    color: #FFC000 !important;
}

/* ČERNÝ OBRYS PRO ČÍSLA */
html.dark-mode td strong,
html.dark-mode .vga-specs-val,
html.dark-mode .hw-specs-container div {
    text-shadow:
       -1px -1px 0 #000,
        1px -1px 0 #000,
       -1px  1px 0 #000,
        1px  1px 0 #000;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
}

html.dark-mode h3,
html.dark-mode h4 {
    text-shadow: 2px 2px 0 #000;
}

/* =================================================================================
   RESPONSIVE DETAIL (ALL MODULES) – UNCHANGED
   ================================================================================= */

.hw-detail-wrapper {
    max-width: 2000px !important;
    width: 98% !important;
    margin: 20px auto;
    background-color: var(--hw-bg, #ffffff) !important;
    color: var(--hw-text, #000000) !important;
    padding: 30px;
    box-sizing: border-box;
    display: block;
}

.hw-detail-content {
    display: grid !important;
    grid-template-columns: 48% 50% !important;
    gap: 2%;
    align-items: start;
}

.hw-detail-gallery img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .hw-detail-content {
        grid-template-columns: 48% 48% !important;
        gap: 4%;
    }
    .hw-detail-title { font-size: 32px !important; }
}

@media screen and (max-width: 768px) {
    .hw-detail-wrapper {
        width: 100% !important;
        padding: 15px;
        margin: 10px 0;
        border: none !important;
    }

    .hw-detail-content {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
    }

    .hw-detail-gallery,
    .hw-detail-info {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hw-spec-table td,
    .hw-spec-table th small {
        font-size: 13px !important;
    }

    .hw-spec-table th { width: 35%; }
}






/* =================================================================================
   9. HW WIDGET POČÍTADLA - SLADĚNÝ STYL (Vycentrováno)
   ================================================================================= */

/* --- DENNÍ VZHLED --- */
.hw-counter-wrapper {
    /* Centrování */
    display: table;           /* Změna: Aby se choval jako blok, ale jen na šířku obsahu */
    margin: 20px auto;        /* Změna: "auto" na bocích ho vycentruje */
    
    background: #ffffff;      /* Čistě bílá pro den, nebo #f9f9f9 */
    border: 1px solid #e0e0e0; /* Velmi jemný rámeček (světle šedý) */
    border-radius: 8px;       /* Trochu kulatější rohy */
    padding: 15px 25px;       /* Větší "vzduch" uvnitř rámečku */
    text-align: center;       /* Zarovná text i číslice na střed */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Velmi jemný stín */
    transition: all 0.3s ease;
}

.hw-counter-label {
    color: #555;              /* Decentní šedá */
    font-size: 10px;
    letter-spacing: 3px;      /* Roztaženější písmo vypadá elegantněji */
    margin-bottom: 10px;
    font-family: sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    transition: color 0.3s ease;
    display: block;           /* Jistota, že je na vlastním řádku */
}

.hw-counter-box {
    display: inline-flex;     /* Aby se krabička s čísly centrovala */
    justify-content: center;
    gap: 4px;                 /* Mezera mezi čísly */
    background: #1a1a1a;      /* Tmavé pozadí pod čísly */
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5); /* Vnitřní stín pro hloubku */
}

/* Číslice */
.hw-counter-box .digit {
    background: linear-gradient(to bottom, #333 0%, #111 50%, #333 100%);
    color: #f0f0f0;
    font-family: 'Courier New', monospace;
    font-size: 22px;
    font-weight: bold;
    width: 24px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #000;
    position: relative;
    box-shadow: inset 0 0 2px rgba(255,255,255,0.1);
}

/* Linka přes střed (mechanický efekt) */
.hw-counter-box .digit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.8);
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 2;
}

/* --- NOČNÍ VZHLED (POČÍTADLO) --- */
:is(html.dark-mode, body.dark-mode) .hw-counter-wrapper {
    background-color: #161616 !important; /* Tmavé pozadí widgetu */
    border: 1px solid #333 !important;    /* Tmavší rámeček */
    box-shadow: none !important;
}

:is(html.dark-mode, body.dark-mode) .hw-counter-wrapper:hover {
    border-color: #FFC000 !important;     /* Zlatý rámeček při najetí */
    box-shadow: 0 0 20px rgba(255, 192, 0, 0.15) !important;
    transform: translateY(-2px);
}

:is(html.dark-mode, body.dark-mode) .hw-counter-label {
    color: #FFC000 !important;            /* Zlatý nápis */
    text-shadow: 0 0 10px rgba(255, 192, 0, 0.2);
}

:is(html.dark-mode, body.dark-mode) .hw-counter-box {
    background-color: #000000 !important;
    border: 1px solid #444 !important;
}

:is(html.dark-mode, body.dark-mode) .hw-counter-box .digit {
    background: linear-gradient(to bottom, #222 0%, #000 50%, #222 100%) !important;
    color: #ddd !important;
    border-color: #333 !important;
    /* Černý obrys číslic pro ostrost */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}





/* =================================================================================
   NÁSTĚNKA NÁVŠTĚVNÍKŮ (Simple Ajax Chat - RESTYLE)
   ================================================================================= */

/* 1. Hlavní kontejner chatu */
div#sac-content {
    border: 1px solid #333 !important;
    border-radius: 4px;
    padding: 0 !important;
    font-family: 'Courier New', monospace; /* Terminálové písmo */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    background: #f4f4f4; /* Denní pozadí */
}

/* 2. Oblast se zprávami (Displej) */
div#sac-output {
    height: 300px !important; /* Výška okna */
    background-color: #000000 !important; /* Vždy černé pozadí zpráv */
    color: #00ff00; /* Zelený text jako starý monitor (nebo dej #ccc) */
    padding: 10px !important;
    border-bottom: 2px solid var(--zlata) !important;
}

/* Jednotlivá zpráva */
div.sac-chat-message {
    border-bottom: 1px dashed #333;
    padding: 5px 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Jméno autora */
span.sac-chat-name {
    color: var(--zlata) !important; /* Zlaté jméno */
    font-weight: bold;
    text-transform: uppercase;
}

/* Datum/Čas */
span.sac-chat-date {
    color: #666 !important;
    font-size: 0.7rem;
}

/* Text zprávy */
div.sac-chat-text {
    color: #e0e0e0 !important; /* Světle šedý text */
    margin-top: 2px;
}

/* 3. Vstupní pole (Kde se píše) */
div#sac-panel {
    background: #222 !important;
    padding: 10px !important;
    border-top: 1px solid #444;
}

/* Inputy (Jméno, Zpráva) */
div#sac-panel input#sac-name,
div#sac-panel input#sac-message {
    background: #000 !important;
    border: 1px solid #555 !important;
    color: var(--zlata) !important;
    font-family: 'Courier New', monospace;
    margin-bottom: 5px;
    border-radius: 2px;
}

div#sac-panel label {
    color: #aaa !important;
    font-size: 10px;
    text-transform: uppercase;
}

/* Tlačítko Odeslat */
div#sac-panel #sac-submit {
    background: #333 !important;
    color: var(--zlata) !important;
    border: 1px solid var(--zlata) !important;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

div#sac-panel #sac-submit:hover {
    background: var(--zlata) !important;
    color: #000 !important;
}

/* --- DARK MODE INTEGRACE --- */
:is(html.dark-mode, body.dark-mode) div#sac-content {
    border-color: #444 !important;
    background: #111 !important; /* Tmavé okolí */
}

/* Skrytí loga pluginu (pokud tam je) */
#sac-credit { display: none !important; }







/* =================================================================================
   WIDGET VZKAZY (ID #text-3) - JEMNÝ RÁMEČEK (Styl Počítadlo)
   ================================================================================= */

/* 1. Hlavní rámeček (Světlý režim - Den) */
#text-3 {
    background: #ffffff;           /* Čistá bílá */
    border: 1px solid #e0e0e0;     /* Velmi jemný šedý rámeček */
    border-radius: 8px;            /* Kulaté rohy jako u počítadla */
    padding: 20px;                 /* Vzdušnost uvnitř */
    text-align: center;            /* Všechno hezky na střed */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Decentní stín */
    margin-bottom: 20px;
    font-family: sans-serif;       /* Normální čitelné písmo */
}

/* 2. Nadpis "Napište nový záznam" */
#text-3 h3, 
#text-3 .widget-title {
    color: #555;                   /* Decentní šedá */
    font-size: 11px !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px !important;
    border: none !important;       /* Žádné podtrhávání */
    padding: 0 !important;
}

/* 3. Tlačítko "Napište nový záznam" - Elegantní verze */
#text-3 .gwolle-gb-write-button input,
#text-3 .gwolle-gb-write-button a {
    background: #f4f4f4 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    padding: 8px 15px !important;
    border-radius: 4px !important; /* Jemně kulaté */
    font-size: 12px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-decoration: none !important;
    display: inline-block;
}

/* Hover tlačítka (ve dne) */
#text-3 .gwolle-gb-write-button input:hover,
#text-3 .gwolle-gb-write-button a:hover {
    background: #fff !important;
    border-color: #999 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 4. Texty "(žádné záznamy)" */
#text-3 .gwolle-gb-widget-list {
    margin-top: 15px;
    color: #777;
    font-size: 12px;
    font-style: italic;
}


/* =================================================================================
   TMAVÝ REŽIM (DARK MODE) - Líbivý styl
   ================================================================================= */
:is(html.dark-mode, body.dark-mode) #text-3 {
    background-color: #161616 !important; /* Stejné pozadí jako karty HW */
    border: 1px solid #444 !important;    /* Tmavý rámeček */
    color: #e0e0e0 !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* Efekt při najetí na celý widget (jako u počítadla) */
:is(html.dark-mode, body.dark-mode) #text-3:hover {
    border-color: #FFC000 !important;     /* Zlatý okraj */
    box-shadow: 0 0 20px rgba(255, 192, 0, 0.15) !important;
}

/* Nadpis v noci */
:is(html.dark-mode, body.dark-mode) #text-3 h3, 
:is(html.dark-mode, body.dark-mode) #text-3 .widget-title {
    color: #FFC000 !important;            /* Zlatý nadpis */
    text-shadow: 0 0 5px rgba(255, 192, 0, 0.2);
}

/* Tlačítko v noci - Černé se zlatým rámečkem */
:is(html.dark-mode, body.dark-mode) #text-3 .gwolle-gb-write-button input,
:is(html.dark-mode, body.dark-mode) #text-3 .gwolle-gb-write-button a {
    background: #000000 !important;
    color: #FFC000 !important;
    border: 1px solid #FFC000 !important;
    box-shadow: none !important;
}

/* Hover tlačítka v noci */
:is(html.dark-mode, body.dark-mode) #text-3 .gwolle-gb-write-button input:hover,
:is(html.dark-mode, body.dark-mode) #text-3 .gwolle-gb-write-button a:hover {
    background: #FFC000 !important;       /* Zlaté pozadí */
    color: #000 !important;               /* Černý text */
    box-shadow: 0 0 15px rgba(255, 192, 0, 0.6) !important;
}





/* =================================================================================
   10. WIDGET: LABORATOŘ (FINAL FIX - ULTRA SILNÝ SELEKTOR)
   ================================================================================= */

/* Container */
.hw-lab-widget {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--hw-bg, #ffffff);
    margin-bottom: 30px;
    font-family: sans-serif;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Header - Vždy tmavý */
.hw-lab-header {
    background: #222 !important;
    padding: 10px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* --- NADPIS: EXTRÉMNĚ SILNÝ SELEKTOR --- */
/* Používám .hw-lab-widget .hw-lab-header h3, aby to přebilo šablonu */
.hw-lab-widget .hw-lab-header h3 {
    color: #FFC000 !important;          /* VŽDY ZLATÁ */
    font-size: 16px !important;         /* Pevná velikost */
    font-family: sans-serif !important; /* Pevný font */
    font-weight: 700 !important;        /* Extra tučné */
    text-transform: uppercase !important;
    text-shadow: 2px 2px 0px #000 !important;
    
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* POJISTKA PRO NOČNÍ REŽIM - NADPIS MUSÍ ZŮSTAT ZLATÝ */
:is(html.dark-mode, body.dark-mode) .hw-lab-widget .hw-lab-header h3 {
    color: #FFC000 !important; 
    text-shadow: 2px 2px 0px #000 !important;
}

/* Warning Stripe */
.hw-lab-stripe {
    position: absolute; top: 0; left: 0; width: 100%; height: 5px;
    background: repeating-linear-gradient(45deg, #FFC000, #FFC000 10px, #000 10px, #000 20px);
}

.hw-lab-content { padding: 15px; }

/* -----------------------------------------------------------
   TEXTY (DATUM + POPIS) - DEN: ČERNÁ / NOC: BÍLÁ
   ----------------------------------------------------------- */

/* 1. Datum v hlavičce */
.hw-lab-last-update {
    font-size: 10px !important;
    color: #cccccc !important; /* Světle šedá (aby byla vidět na černém) */
    margin-top: 5px !important;
    font-family: monospace !important;
    letter-spacing: 1px;
    text-shadow: none !important;
    font-weight: bold !important;
    display: block !important;
}

/* 2. Popisný text */
.hw-lab-content p, 
.hw-lab-desc {
    color: #000000 !important;  /* DEN: ČERNÁ */
    font-weight: normal !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    font-size: 14px !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
}

/* --- NOČNÍ REŽIM PRO TEXTY (BÍLÁ) --- */
:is(html.dark-mode, body.dark-mode) .hw-lab-last-update,
:is(html.dark-mode, body.dark-mode) .hw-lab-content p,
:is(html.dark-mode, body.dark-mode) .hw-lab-desc {
    color: #ffffff !important; /* NOC: BÍLÁ */
    text-shadow: 0 1px 2px rgba(0,0,0,1) !important; /* Černý stín pro čitelnost */
}

/* ----------------------------------------------------------- */

/* Grid Layout */
.hw-lab-grid { display: flex; gap: 10px; margin-bottom: 15px; }

.hw-lab-item {
    flex: 1;
    background: rgba(0,0,0,0.03);
    border: 1px dashed #ccc;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    position: relative;
}

/* Badges & Images */
.hw-lab-badge {
    position: absolute; top: -5px; right: -5px;
    background: #FFC000; color: #000;
    font-size: 9px; font-weight: bold;
    padding: 2px 6px; border-radius: 4px; border: 1px solid #000;
}
.hw-lab-img {
    width: 60px; height: 60px; object-fit: contain;
    margin: 0 auto 5px; display: block;
    filter: grayscale(100%); opacity: 0.7;
}
.hw-lab-noimg {
    width: 60px; height: 60px; line-height: 60px;
    margin: 0 auto; background: #eee; color: #aaa;
    font-weight: bold; border-radius: 50%;
}
.hw-lab-name {
    font-weight: bold; font-size: 13px; line-height: 1.2;
    margin-bottom: 3px; color: var(--hw-text);
}
.hw-lab-status {
    font-size: 11px; color: #FFC000; font-style: italic;
    background: #333; display: inline-block;
    padding: 2px 6px; border-radius: 3px;
}

/* --- ZLATÁ DĚLÍCÍ ČÁRA --- */
.hw-gold-line {
    width: 100%;
    height: 1px; /* Výška čáry */
    /* Magie gradientu: Transparentní -> Zlatá (#FFC000) -> Transparentní */
    background: linear-gradient(90deg, rgba(255,192,0,0) 0%, rgba(255,192,0,1) 50%, rgba(255,192,0,0) 100%);
    margin-bottom: 25px; /* Mezera pod čárou k nadpisu */
    margin-top: 10px;    /* Mezera nad čárou */
    opacity: 0.8;        /* Lehká průhlednost pro elegantnější vzhled */
}

/* Logs */
.hw-lab-logs {
    background: #f4f4f4; padding: 10px;
    border-radius: 4px; font-family: monospace;
    font-size: 12px; color: #333; text-align: left;
}
.hw-lab-log-entry { margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* DARK MODE OVERRIDES (Boxy a pozadí) */
:is(html.dark-mode, body.dark-mode) .hw-lab-widget {
    background: #1a1a1a !important; border-color: #444 !important;
}
:is(html.dark-mode, body.dark-mode) .hw-lab-item {
    background: rgba(255,255,255,0.05) !important; border-color: #555 !important;
}
:is(html.dark-mode, body.dark-mode) .hw-lab-logs {
    background: #111 !important; color: #ccc !important;
}
:is(html.dark-mode, body.dark-mode) .hw-lab-last-update {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,1) !important;
}


/* ----------------------------------------------------------- */

/* ==========================================================================
   SÍŇ SLÁVY (PARŤÁCI PRO CPU) - OPRAVA POZADÍ
   ========================================================================== */

/* 1. ZÁKLADNÍ KONTEJNER - Bez pozadí a rámečku */
.hw-partners-wrapper {
    margin: 40px 0;
    padding: 0;
    background: transparent !important; /* Průhledné */
    border: none !important;            /* Žádný rámeček */
    box-shadow: none !important;        /* Žádný stín */
}

/* Nadpis sekce */
.hw-partners-heading {
    text-align: center;
    color: #FFC000 !important; /* ZLATÁ */
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 30px !important;
    text-shadow: 2px 2px 0px #000;
}

/* Grid pro karty */
.hw-partners-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

/* 2. KARTA SAMOTNÁ */
.hw-partner-card {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    border: 2px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover efekt */
.hw-partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 2;
}

/* Barevné rozlišení okrajů */
.hw-partner-card.game-winner { border-color: #2ee59d; } /* Zelená */
.hw-partner-card.synth-winner { border-color: #4da6ff; } /* Modrá */

/* Odznak nahoře */
.hw-partner-badge {
    text-align: center;
    color: #000;
    font-weight: bold;
    font-size: 11px;
    padding: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.game-winner .hw-partner-badge { background: #2ee59d; }
.synth-winner .hw-partner-badge { background: #4da6ff; }

/* Obrázek */
.hw-partner-visual {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9f9f9;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.hw-partner-visual img {
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
}

/* Informace dole */
.hw-partner-info {
    padding: 15px;
    text-align: center;
}
.hw-partner-info h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 800;
    color: #333;
    text-transform: uppercase;
}
.hw-partner-stat {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
}
.hw-partner-stat strong {
    color: #000;
    font-size: 16px;
}
.hw-partner-note {
    font-size: 11px;
    color: #999;
    font-style: italic;
    margin: 0;
}

/* Styl pro odkaz */
.hw-partner-link {
    text-decoration: none !important;
    display: block;
    flex: 1;
    max-width: 350px;
    color: inherit !important;
}
.hw-partner-link:hover .hw-partner-card {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    border-style: solid; 
}
.hw-partner-link h4, .hw-partner-link div {
    text-decoration: none !important;
}

/* --- DARK MODE (ZDE BYLA CHYBA) --- */

/* Tady musíme vynutit průhlednost i pro noční režim */
:is(html.dark-mode, body.dark-mode) .hw-partners-wrapper {
    background: transparent !important; /* Bylo #111 -> Musí být transparent */
    border: none !important;            /* Žádný rámeček */
    box-shadow: none !important;
}

:is(html.dark-mode, body.dark-mode) .hw-partner-card {
    background: #1a1a1a;
    border-color: #333;
}
:is(html.dark-mode, body.dark-mode) .hw-partner-card.game-winner { border-color: #2ee59d; }
:is(html.dark-mode, body.dark-mode) .hw-partner-card.synth-winner { border-color: #4da6ff; }

:is(html.dark-mode, body.dark-mode) .hw-partner-visual {
    background: #222;
    border-bottom-color: #333;
}
:is(html.dark-mode, body.dark-mode) .hw-partner-info h4 { color: #fff; }
:is(html.dark-mode, body.dark-mode) .hw-partner-stat { color: #ccc; }
:is(html.dark-mode, body.dark-mode) .hw-partner-stat strong { color: #FFC000; }




/* ==========================================================================
   WIDGET: LIVE FEED (3 ŘÁDKY: VGA -> HRA -> CPU)
   ========================================================================== */

/* --- 1. DENNÍ REŽIM (DEFAULT) --- */
.hw-mini-feed {
    background: #ffffff;
    border: 1px solid #000;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 20px;
    font-family: sans-serif;
    font-size: 10px;
}

/* Hlavička */
.hw-mini-header {
    color: #FFC000;
    background: #000;
    padding: 5px 8px;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 10px;
    margin-bottom: 8px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hw-mini-list {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Zvětšeno pro oddělení bloků */
}

.hw-mini-item {
    border-bottom: 1px dashed #000;
    padding-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px; /* Mezery mezi řádky v jedné položce */
}
.hw-mini-item:last-child { border-bottom: none; padding-bottom: 0; }

/* 1. Řádek: VGA (Dlouhý text nahoře) */
.hw-mini-vga {
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
}
.hw-mini-brand { font-weight: 400; }
.hw-mini-model { color: #000000; font-weight: 400; }

/* 2. Řádek: Hra + FPS */
.hw-mini-mid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Pro jistotu, aby flexbox zabral celou šířku */
}

.hw-mini-game {
    color: #000000;
    font-weight: 400;
    font-size: 11px; 
    /* --- PŘIDÁNO: Zkrácení dlouhého textu --- */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; /* Extrémně dlouhý název zkrátí tečkami */
    margin-right: 10px; /* Ochranná mezera, ať se text nenalepí přímo na čísla */
}

.hw-mini-val {
    color: #d00000;
    font-weight: 400;
    font-family: monospace;
    font-size: 11px;
    /* --- PŘIDÁNO: Zákaz zalamování a mačkání --- */
    white-space: nowrap !important; /* Striktně drží "FPS" vedle čísla */
    flex-shrink: 0; /* Zabrání tomu, aby dlouhý název hry tento blok zmáčkl */
    text-align: right; 
}

/* 3. Řádek: CPU + Datum */
.hw-mini-bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hw-mini-cpu {
    color: #444444; /* Ve dne tmavší šedá pro odlišení */
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65%;
}
.hw-mini-date {
    color: #444444;
    font-size: 9px;
    font-family: monospace;
    font-weight: 400;
}

/* --- 2. NOČNÍ REŽIM (DARK MODE - STRIKTNĚ BEZ ŠEDÉ) --- */
:is(html.dark-mode, body.dark-mode) .hw-mini-feed {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
}

:is(html.dark-mode, body.dark-mode) .hw-mini-header {
    background: transparent !important;
    color: #FFC000 !important;
    border-bottom: 1px solid #333;
}

:is(html.dark-mode, body.dark-mode) .hw-mini-item {
    border-bottom-color: #444 !important;
}

:is(html.dark-mode, body.dark-mode) .hw-mini-game,
:is(html.dark-mode, body.dark-mode) .hw-mini-model,
:is(html.dark-mode, body.dark-mode) .hw-mini-cpu,
:is(html.dark-mode, body.dark-mode) .hw-mini-date {
    color: #ffffff !important; /* V noci vše striktně bílé, žádná šedá */
}

:is(html.dark-mode, body.dark-mode) .hw-mini-val {
    color: #FFC000 !important;
}





/* ==========================================================================
   SÍŇ SLÁVY (DESIGN MATCHING LABORATORY)
   ========================================================================== */

/* Grid pro karty roků */
.hw-hof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

/* KARTA ROKU */
.hw-hof-card {
    background: rgba(0,0,0,0.03); /* Jemné pozadí ve dne */
    border: 1px dashed #ccc;      /* Čárkovaný rámeček */
    border-radius: 6px;
    padding: 15px;
    position: relative;
    padding-top: 5px; /* Místo pro rok */
}

/* Rok jako malý "badge" */
.hw-hof-year-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFC000;
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 5;
}

/* Obsah karty - řádek s ikonou a daty */
.hw-hof-row {
    display: flex;
    gap: 6px;
    margin-bottom: 2px;
}

.hw-hof-icon {
    font-size: 14px;
    padding-top: 2px;
}

.hw-hof-data {
    flex: 1;
    overflow: hidden; /* Aby text neutíkal */
}

/* Řádky textu (CPU/VGA) */
.hw-hof-line {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}

.hw-hof-brand { font-weight: 900; margin-right: 3px; }

/* MODEL (Barva textu CPU/GPU) */
.hw-hof-model {
    color: #000; /* Den: Černá */
    font-weight: 600;
}

/* Oddělovač sekcí */
.hw-hof-divider {
    height: 1px;
    background: #ccc;
    margin: 6px 0;
    opacity: 0.5;
}

/* ==========================================================================
   NOVÉ ZAROVNÁNÍ VÝSLEDKŮ (Flexbox & Positioning)
   ========================================================================== */

/* Hlavní kontejner pro blok výsledku */
.hw-hof-result-container {
    display: flex;
    justify-content: flex-end; /* Zarovnat doprava */
    align-items: baseline;     /* Zarovnat na účaří textu (aby text a číslo seděly) */
    margin-top: 15px;          /* Místo nahoře pro "plovoucí" rozlišení */
    position: relative;
}

/* Název testu (QUAKE 2) */
.hw-hof-bench-name {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #222; /* Den: Tmavě šedá */
}

/* Pomlčka */
.hw-hof-separator {
    margin: 0 6px;
    color: #444; /* Den: Tmavě šedá */
}

/* Obal pro samotné skóre (nutný pro pozicování rozlišení) */
.hw-hof-score-wrapper {
    position: relative;
}

/* Rozlišení (visí nad výsledkem) */
.hw-hof-meta {
    position: absolute;
    bottom: 100%;
    right: 0;
    font-size: 9px;
    white-space: nowrap;
    margin-bottom: 2px;    
    color: #d00000;      /* <--- ZMĚNA: ČERVENÁ PRO DEN */
    font-weight: normal;
}

/* Samotná hodnota skóre */
.hw-hof-score-value {
    font-size: 12px;
   
    line-height: 1;
    white-space: nowrap;
    /* Barva je definována v PHP (inline) podle výrobce, nebo fallback níže */
}

/* ==========================================================================
   ŠACHOVNICE (STRIPE)
   ========================================================================== */
.hw-hof-widget .hw-lab-stripe {
    background: conic-gradient(
        #000000 90deg, 
        #FFC000 90deg 180deg, 
        #000000 180deg 270deg, 
        #FFC000 270deg
    ) !important;
    background-size: 6px 6px !important; 
    height: 6px !important;
    opacity: 1 !important;
}

/* ==========================================================================
   NOČNÍ REŽIM (DARK MODE)
   ========================================================================== */

:is(html.dark-mode, body.dark-mode) .hw-hof-card {
    background: rgba(255,255,255,0.05) !important;
    border-color: #555 !important;
}

:is(html.dark-mode, body.dark-mode) .hw-hof-model {
    color: #ffffff !important; /* Model bíle */
}

:is(html.dark-mode, body.dark-mode) .hw-hof-divider {
    background: #555 !important;
}

/* Úpravy nového bloku výsledků pro noc */
:is(html.dark-mode, body.dark-mode) .hw-hof-bench-name {
    color: #ffffff !important; /* Název testu bíle */
}

:is(html.dark-mode, body.dark-mode) .hw-hof-separator {
    color: #ffffff !important; /* Pomlčka bíle */
}

:is(html.dark-mode, body.dark-mode) .hw-hof-meta {
    color: #ffffff !important; /* <--- ZMĚNA: BÍLÁ PRO NOC */
    opacity: 1 !important;     /* Plná viditelnost */
}

/* Skóre má barvu od výrobce (z PHP), takže to nemusíme řešit, 
   bude svítit zeleně/červeně i v noci. */






















/* ==========================================================================
   VELKÁ SÍŇ SLÁVY (KARTY + OBŘÍ FOTKY 250px + CENTROVÁNÍ + FANCYBOX)
   ========================================================================== */

/* --- HLAVNÍ OBAL A ROK --- */
.hw-year-section {
    margin: 50px 0;
    width: 100%;
    position: relative;
    border-top: 2px solid #FFC000;
    padding-top: 40px;
}

.hw-year-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFC000;
    color: #000000 !important;
    font-size: 20px;
    font-weight: 900;
    padding: 4px 20px;
    border-radius: 4px;
    z-index: 2;
}

/* --- MŘÍŽKA KARET (2 VEDLE SEBE) --- */
.hw-kosticky-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.hw-kosticka {
    display: flex;
    flex-direction: column;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.k-header {
    text-align: center; /* Opraveno: Zarovnání přesně na střed */
    font-weight: 900;
    padding: 0 0 15px 0; /* Trošku víc místa pod nadpisem, ať to dýchá */
    color: #ffffff; /* Opraveno: Čistě bílá barva, aby nadpis svítil */
    text-transform: uppercase;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2); /* Jemná světlá dělící čára */
    font-size: 18px; /* Mírně zvětšeno pro větší dominanci */
    letter-spacing: 1px; /* Profi detail: lehce zvětšené mezery mezi písmeny */
}

/* --- FOTOGALERIE HARDWARU (Zarovnání na střed a fluidní šířka) --- */
.k-hw-photos-grid {
    display: grid;
    gap: 20px;
    padding: 20px 0;
    justify-content: center; /* TOTO VYCENTRUJE TY 3 POLOŽKY (i 4 položky) PŘESNĚ NA STŘED */
}

/* 4 sloupce (Herní král) - roztáhnou se až na 250px */
.k-hw-photos-grid.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 250px));
}

/* 3 sloupce (Syntetický král) - roztáhnou se až na 250px */
.k-hw-photos-grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 250px));
}

.k-hw-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* Obal pro fotku - Zmenšena spodní mezera pro sražení k textu */
.k-hw-img-wrap {
    width: 100%;
    max-width: 250px;
    aspect-ratio: 250 / 167; 
    height: auto;
    margin-bottom: 8px; /* TADY zmenšeno z 15px na 8px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    padding: 5px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Efekt najetí myší */
.k-hw-img-wrap:hover {
    transform: scale(1.05); /* Zvětšení o něco menší, protože fotky už jsou samy o sobě velké */
    border-color: #FFC000;
}

/* Oprava pro Fancybox odkaz */
.k-hw-img-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.k-hw-img-wrap.no-img { background: rgba(0,0,0,0.03); color: #aaa; font-size: 11px; }

/* Samotná fotka */
.k-hw-img-wrap img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    display: block;
}

/* Texty pod fotkou - Složeno do jedné věty */
.k-hw-desc { 
    line-height: 1.4; 
    width: 100%; 
}

/* Typ HW (CPU, MB atd.) zůstane odsazený na vlastním řádku nahoře */
.k-hw-desc strong { 
    display: block; 
    font-size: 12px; 
    color: #FFC000; 
    text-transform: uppercase; 
    margin-bottom: 5px; 
}

/* Výrobce, model a doplněk už nebudou "block", ale hezky vedle sebe */
.k-hw-desc span:nth-of-type(1) { 
    display: inline; 
    font-size: 13px; 
    color: #666; 
    font-weight: normal; 
}
.k-hw-desc span:nth-of-type(2) { 
    display: inline; 
    font-size: 13px; 
    color: #000; 
    font-weight: bold; 
    margin-left: 3px; /* Drobná mezera mezi výrobcem a modelem */
}
.k-hw-desc small { 
    display: inline; 
    font-size: 12px; 
    color: #888; 
    margin-left: 4px; /* Drobná mezera před frekvencí/kapacitou */
}

/* --- SEZNAM TESTŮ --- */
.k-header {
    border-bottom: 1px dashed rgba(0,0,0,0.15); /* Světlejší čára pod nadpisem */
}

.k-tests-list {
    border-top: 1px dashed rgba(0,0,0,0.15); /* Světlejší hlavní dělící čára */
    padding-top: 10px; /* Sraženo z 15px */
    flex-grow: 1;
}

.k-test-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0; /* Sraženo z 8px na 5px */
    border-bottom: 1px solid rgba(0,0,0,0.03); /* Velmi jemná čárka mezi testy */
}
.k-test-row:last-child { border-bottom: none; }

.k-test-row .t-name { font-weight: bold; color: #000000; font-size: 12px; }
.k-test-row .t-name small { display: block; font-weight: normal; font-size: 10px; color: #666666; margin-top: 2px; }
.k-test-row .t-score { font-size: 15px; font-weight: 900; color: #FFC000; text-align: right; }
.k-test-row .t-score small { font-weight: normal; font-size: 10px; color: #000000; margin-left: 4px; }
.k-empty { padding: 30px 0; font-style: italic; color: #888888; }

/* --- MOBIL --- */
@media (max-width: 800px) {
    .hw-kosticky-grid { grid-template-columns: 1fr; gap: 40px; }
    /* Na mobilu se všechny moduly složí do 2 sloupců */
    .k-hw-photos-grid.grid-4,
    .k-hw-photos-grid.grid-3 { grid-template-columns: repeat(2, minmax(0, 250px)); }
}

/* --- NOČNÍ REŽIM (STRIKTNĚ ČERNÁ/BÍLÁ/ZLATÁ) --- */
:is(html.dark-mode, body.dark-mode) .k-header { border-bottom-color: rgba(255, 255, 255, 0.1); }
:is(html.dark-mode, body.dark-mode) .k-tests-list { border-top-color: rgba(255, 255, 255, 0.1); }
:is(html.dark-mode, body.dark-mode) .k-test-row { border-bottom-color: rgba(255, 255, 255, 0.03); }
:is(html.dark-mode, body.dark-mode) .k-test-row .t-name { color: #ffffff; }
:is(html.dark-mode, body.dark-mode) .k-test-row .t-name small { color: #aaaaaa; }
:is(html.dark-mode, body.dark-mode) .k-test-row .t-score small { color: #ffffff; }
:is(html.dark-mode, body.dark-mode) .k-empty { color: #aaaaaa; }

:is(html.dark-mode, body.dark-mode) .k-hw-img-wrap { background: transparent; border-color: rgba(255, 255, 255, 0.2); }
:is(html.dark-mode, body.dark-mode) .k-hw-img-wrap.no-img { background: rgba(255,255,255,0.05); color: #555; }
:is(html.dark-mode, body.dark-mode) .k-hw-desc span:nth-of-type(1), 
:is(html.dark-mode, body.dark-mode) .k-hw-desc small { color: #aaaaaa; }
:is(html.dark-mode, body.dark-mode) .k-hw-desc span:nth-of-type(2) { color: #ffffff; }
















/* ==========================================================================
   STATISTIKA: VÝVOJ VÝKONU V ČASE (TIMELINE) - DENNÍ I NOČNÍ REŽIM
   ========================================================================== */
/* --- ZLATÁ ODDĚLOVACÍ ČÁRA (Základ = Denní světlý režim) --- */
.hw-golden-sep-wrap {
    background-color: transparent; /* Zrušen šedý podklad, obal bude průhledný */
    border: 1px solid transparent; /* Zrušen viditelný rámeček */
    padding: 5px 0;
    margin: 10px 0 25px 0;
    width: 100%;
    border-radius: 2px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hw-golden-sep-line {
    height: 2px;
    background: linear-gradient(90deg, #b88a00 0%, #ffd700 50%, #b88a00 100%);
    transition: background 0.3s ease;
}
/* ----------------------------------------------------------- */

/* Hlavní mřížka pro 2 sloupce */
.hw-progression-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; 
    margin: 50px 0;
    font-family: inherit;
    align-items: start; 
}

/* Jeden svislý sloupec */
.hw-prog-col {
    display: flex;
    flex-direction: column;
    gap: 30px; 
}

/* Samotný box jednoho testu (Základ = Denní světlý režim) */
.hw-prog-box {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Hlavička testu (Základ = Denní světlý režim) */
.prog-header {
    background: #f7f7f7; 
    color: #000000;
    padding: 15px;
    font-weight: 900;
    text-align: center;
    border-bottom: 2px solid #FFC000;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 1px;
}

/* Obal pro časovou osu */
.prog-timeline {
    padding: 15px 20px;
    flex-grow: 1;
}

/* Jeden řádek (Základ = Denní světlý režim) */
.prog-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dotted rgba(0,0,0,0.15); 
}
.prog-row:last-child {
    border-bottom: none;
}

/* Odznak s rokem */
.prog-year {
    font-weight: 900;
    background: #FFC000;
    color: #000000;
    padding: 5px 12px;
    border-radius: 4px;
    margin-right: 15px;
    font-size: 14px;
    flex-shrink: 0;
}

/* Informace o hardwaru */
.prog-hw {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px; 
}

/* Položka hardwaru (Základ = Denní světlý režim) */
.p-hw-item {
    display: flex;
    align-items: baseline;
    font-size: 13px;
    color: #000000; 
}

.p-hw-label {
    color: #FFC000;
    font-weight: 900;
    font-size: 10px;
    width: 35px; 
}

.p-hw-val {
    font-weight: normal; 
}

/* Blok pro zobrazení skóre */
.prog-score-wrap {
    text-align: right;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.prog-score-val {
    font-size: 18px;
    font-weight: 900;
    color: #FFC000;
    line-height: 1;
}

.prog-score-unit {
    font-size: 10px;
    color: #666666;
    margin-top: 3px;
    text-transform: uppercase;
}

.prog-empty {
    padding: 20px;
    text-align: center;
    font-style: italic;
    color: #888888;
}

/* --- MOBILNÍ ZOBRAZENÍ --- */
@media (max-width: 800px) {
    .hw-progression-wrap { grid-template-columns: 1fr; }
    .prog-row { flex-wrap: wrap; }
    .prog-score-wrap { width: 100%; align-items: flex-start; margin-top: 10px; padding-left: 60px; }
}

/* --- NOČNÍ REŽIM (AUTOMATICKÝ PŘEPÍNAČ) --- */
:is(html.dark-mode, body.dark-mode) .hw-prog-box { border-color: rgba(255, 255, 255, 0.2); }
:is(html.dark-mode, body.dark-mode) .prog-header { background: #111111; color: #ffffff; }
:is(html.dark-mode, body.dark-mode) .prog-row { border-bottom-color: rgba(255, 255, 255, 0.15); }
:is(html.dark-mode, body.dark-mode) .p-hw-item { color: #ffffff; }
:is(html.dark-mode, body.dark-mode) .prog-score-unit { color: #aaaaaa; }

/* Zlatá čára pro noční režim */
:is(html.dark-mode, body.dark-mode) .hw-golden-sep-wrap { background-color: #151515; border-color: #000000; }
:is(html.dark-mode, body.dark-mode) .hw-golden-sep-line { background: linear-gradient(90deg, #6b4c05 0%, #ffbb00 50%, #6b4c05 100%); }









/* ==========================================================================
   OPRAVA LAYOUTU PŘI PŘIBLÍŽENÍ / NA MENŠÍM MONITORU (Mizení pravého panelu)
   ========================================================================== */

/* 1. ZÁCHRANNÁ BRZDA PRO PROSTŘEDNÍ ČÁST */
/* Přikáže hlavnímu bloku, aby se uměl zmenšit a netlačil pravý sloupec z obrazovky */
.site-main {
    min-width: 0 !important; 
}

/* 2. ZRUŠENÍ NEVIDITELNÉ ZDI VLEVO */
/* Pokud je levý (nebo pravý) sloupec prázdný, okamžitě zmizí a uvolní místo */
.hw-sidebar:empty,
.hw-left:empty,
.hw-right:empty {
    display: none !important;
}

/* 3. POVOLENÍ POSUVNÍKU PRO ŠIROKÉ TABULKY */
/* Pokud je tabulka moc široká, neproboří web, ale udělá se pod ní posuvník */
.hw-table-wrapper, 
.vga-specs-box {
    max-width: 100%;
    overflow-x: auto;
}

/* Úplné zničení tlačítka den/noc na mobilech */
@media (max-width: 800px) {
    button#dark-mode-toggle,
    .mode-switch-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }
}



/* ==========================================================================
   VIDITELNÝ HORIZONTÁLNÍ POSUVNÍK PRO TABULKY NA MOBILU (Nápověda pro posun)
   ========================================================================== */

@media (max-width: 800px) {
    /* Cílíme na všechny obaly, které se mohou posouvat do stran */
    .hw-table-wrapper, 
    .vga-specs-box,
    #vga-results-container > div:first-child,
    .wp-list-table {
        /* Pro jistotu ještě jednou zapneme plynulé scrollování pro iPhone */
        -webkit-overflow-scrolling: touch;
        /* Trochu místa dole, aby posuvník nelezl do textu */
        padding-bottom: 10px !important; 
    }

    /* 1. Viditelná drážka (kolejnice) posuvníku */
    .hw-table-wrapper::-webkit-scrollbar,
    .vga-specs-box::-webkit-scrollbar,
    #vga-results-container > div:first-child::-webkit-scrollbar,
    .wp-list-table::-webkit-scrollbar {
        height: 6px !important; /* Výška posuvníku */
        background-color: rgba(255, 255, 255, 0.1) !important; /* Tmavě průhledná drážka */
        border-radius: 4px;
        display: block !important; /* Vynucení zobrazení */
    }

    /* 2. Samotný "jezdec" (Ten bude zářit zlatě) */
    .hw-table-wrapper::-webkit-scrollbar-thumb,
    .vga-specs-box::-webkit-scrollbar-thumb,
    #vga-results-container > div:first-child::-webkit-scrollbar-thumb,
    .wp-list-table::-webkit-scrollbar-thumb {
        background-color: #FFC000 !important; /* Tvoje HW zlatá */
        border-radius: 4px;
    }
}


/* ==========================================================================
   ZVÝRAZNĚNÍ TAHÁTKA PRO ZVĚTŠENÍ TABULKY (RESIZE ÚCHOP)
   ========================================================================== */

/* Zacílí na ten malý rožek úplně dole vpravo */
::-webkit-resizer {
    background-color: #FFC000 !important; /* Tvoje zářivá zlatá */
    border-left: 2px solid #111 !important; /* Oddělení od tabulky */
    border-top: 2px solid #111 !important;
    
    /* Přidá přes tu zlatou černé šrafování, aby každý hned poznal, že se za to dá tahat */
    background-image: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.5) 3px,
        rgba(0, 0, 0, 0.5) 6px
    ) !important;
}



/* ==========================================================================
   EXTRA VELKÝ TAHACÍ ROH PRO MOBILY (Experimentální zvětšení)
   ========================================================================== */

@media (max-width: 800px) {
    /* Zacílíme na ten zlatý růžek jen na mobilech */
    ::-webkit-resizer {
        /* Drastické zvětšení (3x) */
        transform: scale(3) !important; 
        /* Kotva vpravo dole, aby se zvětšoval směrem "dovnitř" do tabulky */
        transform-origin: 100% 100% !important; 
        /* Pro jistotu posuneme trochu od kraje, aby nebyl uříznutý */
        margin-right: 2px !important;
        margin-bottom: 2px !important;
    }
}


/* ==========================================================================
   ZLATÝ POSUVNÍK PRO CELÝ WEB A TABULKY (NOČNÍ REŽIM)
   ========================================================================== */

/* 1. Hlavní posuvník celého webu (prohlížeče založené na Chrome/Edge/Opera) */
:is(html.dark-mode, body.dark-mode)::-webkit-scrollbar {
    width: 14px !important; /* Trochu širší pro lepší úchop */
}

:is(html.dark-mode, body.dark-mode)::-webkit-scrollbar-track {
    background: #0b0b0b !important; /* Velmi tmavé pozadí drážky */
}

:is(html.dark-mode, body.dark-mode)::-webkit-scrollbar-thumb {
    background-color: #FFC000 !important; /* Tvoje zlatá */
    border-radius: 10px !important;
    border: 3px solid #0b0b0b !important; /* Dělá efekt "plovoucího" posuvníku v drážce */
}

:is(html.dark-mode, body.dark-mode)::-webkit-scrollbar-thumb:hover {
    background-color: #FFD700 !important; /* Při najetí ještě víc zazáří */
}

/* 2. Posuvník pro tabulky a grafy (všechny vnořené prvky s overflow) */
:is(html.dark-mode, body.dark-mode) *::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important; /* Pro horizontální posun u tabulek */
}

:is(html.dark-mode, body.dark-mode) *::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3) !important;
}

:is(html.dark-mode, body.dark-mode) *::-webkit-scrollbar-thumb {
    background-color: #FFC000 !important;
    border-radius: 6px !important;
    border: 2px solid #1a1a1a !important;
}

/* Firefox podpora (ten má bohužel omezené možnosti, ale aspoň barvy nastavíme) */
:is(html.dark-mode, body.dark-mode) {
    scrollbar-width: auto;
    scrollbar-color: #FFC000 #0b0b0b;
}





/* ==========================================================================
   TLAČÍTKO ZPĚT NAHORU (BACK TO TOP)
   ========================================================================== */
#hw-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: #111; /* Tmavé pozadí */
    color: #FFC000; /* Zlatá šipka */
    border: 2px solid #FFC000; /* Zlatý rámeček */
    border-radius: 50%; /* Kulatý tvar */
    cursor: pointer;
    z-index: 99999;
    
    /* Výchozí stav (skryté a posunuté dolů) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
    
    /* Centrování šipky */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Třída, která se přidá, když uživatel odscroluje dolů */
#hw-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover efekt (Rozsvítí se) */
#hw-back-to-top:hover {
    background-color: #FFC000;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 192, 0, 0.4);
    transform: translateY(-5px); /* Povyskočí */
}

/* Na mobilu ho dáme trochu menší a blíž k okraji */
@media (max-width: 800px) {
    #hw-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}













/* --- Kontejner --- */
.hw-compare-wrapper {
    max-width: 1300px; /* Zlatá střední cesta */
    width: 100%;
    margin: 0 auto;
    font-family: sans-serif;
    color: #ddd;
}

.hw-cards-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap; 
    justify-content: center;
    margin-bottom: 25px;
}

/* --- Karta --- */
.hw-card {
    flex: 1 1 230px !important; /* Dovolí zmenšení na 230px, aby se jich vešlo víc */
    min-width: 230px !important;
    
    background: #222;
    border-radius: 6px;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden; /* DŮLEŽITÉ: Ořízne vyčuhující zlatý štítek! */
}

/* Hlavní karta */
.hw-card.main-card {
    background: #1a1a1a;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    z-index: 5;
}

/* Zlatý štítek */
.hw-card-badge {
    background: #FFC000;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    padding: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%; /* Roztažení na 100% šířky karty */
    box-sizing: border-box;
}

/* Vnitřní obsah karty (díky tomuto nebude štítek ujetý) */
.hw-card-inner {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Rival karta */
.hw-card.rival-card {
    cursor: pointer;
    transition: background 0.2s;
}
.hw-card.rival-card:hover {
    background: #2a2a2a;
    border-color: #777;
}

.hw-btn-change {
    background: #333;
    color: #FFC000;
    border: 1px solid #555;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    align-self: center;
}

/* Nadpis Notebooku */
.name-target {
    font-size: 1.1rem;
    color: #fff;
    margin: 5px 0 15px 0;
    line-height: 1.3;
}

/* --- Sekce Rok + Obrázek vedle sebe --- */
.hw-card-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
}

.meta-year {
    color: #aaa;
    font-size: 0.9rem;
    font-weight: normal;
    text-align: left;
}

.meta-img {
    width: 60px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.meta-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    background: #fff;
    border-radius: 3px;
    padding: 2px;
}


.hw-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 0;
    border-bottom: 1px solid #333;
    font-size: 0.75rem; 
    line-height: 1.3;
    font-weight: normal;
}
.hw-spec-row:last-child { border-bottom: none; }

.hw-spec-label {
    color: #777;
    margin-right: 10px;
    white-space: nowrap;
    min-width: 50px;
    font-weight: normal;
}

.hw-spec-value {
    color: #ccc;
    text-align: right;
    font-weight: normal !important; 
    word-break: break-word;
    flex: 1; /* Natahuje text po celé šířce! Už nebude prázdná díra vpravo. */
}

/* Jemné obarvení jen pro CPU/GPU, ale ne tučně */
.hw-spec-row:nth-child(1) .hw-spec-value { color: #509ad6; font-weight: normal !important; }
.hw-spec-row:nth-child(2) .hw-spec-value { color: #d65050; font-weight: normal !important; }


/* --- Ostatní (Filtry atd.) --- */
.hw-filters-bar {
    background: #222;
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.hw-filters-bar select {
    background: #111; color: #fff; border: 1px solid #555; padding: 5px;
}

/* --- Výsledková tabulka --- */
.hw-table-scroll {
    overflow: auto; /* ZMĚNĚNO: Povolí scrollování oběma směry */
    border: 1px solid #444;
    resize: vertical; /* PŘIDÁNO: Umožní tahat myší za spodní okraj */
    min-height: 150px; /* PŘIDÁNO: Aby nešla zmenšit úplně do ztracena */
	height: 300px;
}
.hw-compare-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: #222; color: #fff; }
.hw-compare-table th, .hw-compare-table td { padding: 10px; border: 1px solid #333; text-align: center; }
.hw-compare-table th:first-child { text-align: center; font-weight: bold; border-right: 2px solid #444; }
.hw-compare-table td:first-child { text-align: left; font-weight: bold; border-right: 2px solid #444; }
.hw-group-row td { background: #111; color: #FFC000; text-align: center !important; font-weight: bold; text-transform: uppercase; font-size: 0.8rem; padding: 6px 10px; border-right: none !important; }
.hw-data-row:hover { background: #333; cursor: pointer; }
.hw-nodata { color: #555; }

/* --- Graf --- */
#laptop-chart-box { margin-top: 20px; padding: 12px 15px; background: #1a1a1a; border: 1px solid #444; border-radius: 6px; }
.chart-wrap { height: 300px; position: relative; }

/* --- Modal --- */
#hw-laptop-picker-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; display: flex; justify-content: center; align-items: center; }
.hw-modal-window { width: 95%; max-width: 1000px; height: 85vh; background: #222; border: 1px solid #FFC000; display: flex; flex-direction: column; padding: 20px; border-radius: 8px; }
.hw-modal-header { border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 10px; }
.hw-modal-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.hw-modal-filters input, .hw-modal-filters select { background: #000; color: #fff; border: 1px solid #555; padding: 8px; }
.hw-btn-close { background: #d63638; color: #fff; border: none; padding: 0 15px; cursor: pointer; }
.hw-modal-grid { overflow-y: auto; flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-content: start; }
.hw-picker-item { background: #333; border: 1px solid #444; border-left-width: 4px; padding: 10px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.hw-picker-item:hover { background: #444; }
.hw-picker-img { width: 50px; height: 40px; background: #000; display: flex; align-items: center; justify-content: center; }

/* --- PŘIDÁNO: EFEKT JIŽ VYBRÁNO --- */
.hw-picker-item { position: relative; } 
.hw-picker-item.already-selected {
    background: #1a1a1a !important;
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    border-left-color: #444 !important;
}
.hw-picker-item.already-selected::after {
    content: "JIŽ VYBRÁNO";
    position: absolute;
    right: 8px;
    bottom: 8px;
    color: #FFC000;
    font-weight: bold;
    font-size: 10px;
    background: #000;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #FFC000;
    letter-spacing: 1px;
    z-index: 10;
}
.hw-picker-img img { max-width: 100%; max-height: 100%; }
.hw-picker-info strong { display: block; color: #fff; font-size: 0.9rem; }
.hw-picker-info small { color: #aaa; font-size: 0.8rem; }














/* --- Profil a Parametry Notebooku --- */
.hw-laptop-profile { color: #cccccc; line-height: 1.6; font-size: 0.95rem; }
.hw-desc { margin: 20px 0; }
.hw-specs-table-wrap { margin: 30px 0; border: 1px solid #444; border-radius: 6px; overflow: hidden; }
.hw-specs-table { width: 100%; border-collapse: collapse; background: #1a1a1a; margin: 0; }
.hw-specs-table th, .hw-specs-table td { padding: 12px 15px; border-bottom: 1px solid #333; text-align: left; }
.hw-specs-table tr:last-child th, .hw-specs-table tr:last-child td { border-bottom: none; }
.hw-specs-table th { width: 35%; background: #111; color: #FFC000; font-weight: bold; border-right: 1px solid #333; }

/* Klady a Zápory */
.hw-pros-cons { display: flex; gap: 20px; margin: 30px 0; }
.hw-pros, .hw-cons { flex: 1; padding: 20px; border-radius: 6px; background: #1a1a1a; }
.hw-pros { border-left: 4px solid #46b450; }
.hw-cons { border-left: 4px solid #d63638; }
.hw-pc-title { font-weight: bold; font-size: 1.1rem; margin-bottom: 10px; }
.hw-pros .hw-pc-title { color: #46b450; }
.hw-cons .hw-pc-title { color: #d63638; }

/* Galerie (mřížka fotek) */
.hw-gallery-wrap { display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0; }
.hw-gallery-wrap a { display: block; border: 1px solid #444; border-radius: 4px; overflow: hidden; transition: border-color 0.2s; background: #111; }
.hw-gallery-wrap a:hover { border-color: #FFC000; }
.hw-gallery-wrap img { display: block; max-width: 250px; height: 180px; object-fit: cover; }



/* --- Fancy Polaroid Galerie --- */
.hw-fancy-gallery { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; /* Tohle zaručí dokonalý střed */
    gap: 15px; 
    margin: 30px 0; 
    padding: 10px;
}

/* Samotný obal s tenkým 1px rámečkem */
.hw-gal-item { 
    position: relative !important; 
    display: block !important; 
    width: 300px !important;  /* Zvětšeno pro lepší detail */
    height: 200px !important; /* Poměr 4:3 */
    border: 1px solid #444 !important; /* Tenký tmavý rámeček */
    border-radius: 4px !important; 
    box-shadow: 2px 4px 10px rgba(0,0,0,0.5) !important;
    background: #111 !important;
    padding: 0 !important; /* Žádná tlustá mezera */
    box-sizing: border-box !important; 
    overflow: hidden !important; /* MAGIE: ořízne fotku přesně k okraji rámečku */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Plynulý efekt */
}

/* Obrázek uvnitř - přesně od okraje k okraji */
.hw-gal-item img { 
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    display: block !important; 
    margin: 0 !important;
    border: none !important;
    transition: transform 0.4s ease-in-out !important; /* Plynulé zvětšení fotky uvnitř */
}

/* Skrytí 5. a dalších fotek, Fancybox je ale pořád vidí! */
.hw-gal-item.hw-hidden-item { display: none !important; }

/* Lehké natočení prvních 4 fotek, aby nevypadaly uměle rovně */
.hw-gal-item:nth-child(1) { transform: rotate(-3deg); }
.hw-gal-item:nth-child(2) { transform: rotate(2deg) translateY(4px); }
.hw-gal-item:nth-child(3) { transform: rotate(-1deg); }
.hw-gal-item:nth-child(4) { transform: rotate(4deg) translateY(-2px); }

/* Najetí myší: Fotka se plynule narovná, zvětší a rozzáří zlatě */
.hw-gal-item:hover { 
    transform: scale(1.08) rotate(0deg) !important; 
    z-index: 10 !important; 
    box-shadow: 0 8px 20px rgba(255, 192, 0, 0.4) !important;
    border-color: #FFC000 !important;
}

/* Průhledná vrstva s číslem +X na 4. fotce */
.hw-more-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.75) !important;
    color: #FFC000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 2rem !important;
    font-weight: bold !important;
    transition: background 0.4s ease !important;
    z-index: 5 !important;
}

.hw-gal-item:hover .hw-more-overlay {
    background: rgba(0,0,0,0.4) !important; /* Při najetí se vrstva trošku zprůhlední */
}

/* --- Zámek barvy při psaní do políčka (Focus) --- */
.hw-modal-filters input:focus, 
.hw-modal-filters select:focus,
.hw-filters-bar select:focus {
    color: #ffffff !important;
    background-color: #000000 !important;
    outline: none !important;
}





/* ========================================= */
/* HW RETRO PŘEHRÁVAČ STYLY                  */
/* ========================================= */
.hw-player-wrapper { display: flex; flex-wrap: wrap; gap: 15px; background: #1a1a1a; padding: 20px; border-radius: 8px; border: 2px solid #333; box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); font-family: 'Courier New', Courier, monospace; width: 100%; max-width: 100%; box-sizing: border-box; margin: 20px auto; }
.hw-module { background: #2a2a2a; border: 1px solid #111; border-radius: 6px; box-shadow: inset 0 2px 5px rgba(255,255,255,0.05), 0 5px 10px rgba(0,0,0,0.4); padding: 15px; }
.hw-cover-module { flex: 0 0 300px !important; display: flex; align-items: center; justify-content: center; background: #000; }
.hw-cover-module img { width: 100%; height: auto; max-height: 450px; object-fit: contain; border: 1px solid #444; }
.hw-control-module { flex: 1 1 300px; margin-left: 25px; display: flex; flex-direction: column; justify-content: center; gap: 35px; }
.hw-vu-seg { flex: 1; background: #1a1a1a; border-radius: 2px; box-shadow: inset 0 0 3px rgba(0,0,0,0.9); transition: background 0.05s ease, box-shadow 0.05s ease; }
.hw-vu-seg.c-green.on { background: #00ff00; box-shadow: 0 0 8px #00ff00; }
.hw-vu-seg.c-yellow.on { background: #ffcc00; box-shadow: 0 0 8px #ffcc00; }
.hw-vu-seg.c-red.on { background: #ff0000; box-shadow: 0 0 8px #ff0000; }
.hw-display { background: #051005; border: 2px inset #222; padding: 10px; border-radius: 4px; height: 50px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; white-space: nowrap; }
.hw-marquee { color: #4ade80; font-weight: bold; font-size: 16px; display: inline-block; width: max-content; animation: bounceText 4s ease-in-out infinite alternate; }
@keyframes bounceText { 0% { transform: translateX(0); } 100% { transform: translateX(var(--travel, 0px)); } }
.hw-artist-display { color: #4ade80; font-size: 13px; opacity: 0.9; margin-top: 5px; text-align: center; width: 100%; }
.hw-controls { display: flex; gap: 10px; align-items: center; margin-top: 15px; }
.hw-btn { background: linear-gradient(to bottom, #555, #333); border: 1px solid #111; color: #ccc; padding: 10px 15px; border-radius: 4px; cursor: pointer; box-shadow: 0 3px 0 #111, 0 4px 5px rgba(0,0,0,0.5); transition: all 0.1s; }
.hw-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #111; }
.hw-timeline-wrapper { display: flex; align-items: center; gap: 10px; color: #ffffff; font-size: 12px; margin-top: 15px; }
.hw-progress-bar, .hw-volume-bar { background: #111; border-radius: 4px; border: 1px inset #333; appearance: none; }
.hw-progress-bar { flex: 1; height: 8px; }
.hw-volume-bar { width: 80px; height: 6px; border-radius: 3px; }
.hw-progress-bar::-webkit-slider-thumb, .hw-volume-bar::-webkit-slider-thumb { appearance: none; background: #ffffff; border-radius: 50%; cursor: pointer; }
.hw-progress-bar::-webkit-slider-thumb { width: 15px; height: 15px; }
.hw-volume-bar::-webkit-slider-thumb { width: 12px; height: 12px; }
#hw-mute-btn:hover { color: #ffffff; transform: scale(1.1); }
.hw-playlist-module { flex: 1 1 450px; background: #222; max-height: 450px; overflow-y: auto; border: 2px inset #111; }
.hw-playlist-module ul { list-style: none; margin: 0; padding: 0; }
.hw-playlist-module li { padding: 8px 12px; border-bottom: 1px solid #333; color: #ffffff; font-size: 13px; cursor: pointer; transition: background 0.2s; display: flex; justify-content: space-between; }
.hw-playlist-module li:hover { background: #333; color: #fff; }
.hw-playlist-module li.active { background: #000; color: #4ade80; border-left: 3px solid #4ade80; }


/* OPRAVA PŘEHRÁVAČE PRO MOBILY */
@media (max-width: 800px) {
    .hw-player-wrapper {
        padding: 10px !important; /* Méně místa okolo na malém displeji */
        flex-direction: column !important; /* Moduly půjdou striktně pod sebe */
    }

    .hw-module {
        margin-left: 0 !important; /* Zrušíme ty boční mezery u všech modulů */
        width: 100% !important;   /* Každý modul zabere celou šířku */
        box-sizing: border-box;
    }

    .hw-cover-module {
        flex: none !important; /* Zrušíme to fixní 300px */
        width: 100% !important;
        max-height: 300px; /* Aby cover na mobilu nebyl obří přes celou obrazovku */
    }

    .hw-control-module {
        flex: none !important;
        margin-left: 0 !important; /* Klíčové: zrušíme ten margin-left: 25px */
        width: 100% !important;
    }

    .hw-playlist-module {
        flex: none !important;
        width: 100% !important;
        max-height: 300px !important; /* Na mobilu stačí kratší seznam skladeb */
    }

    /* Úprava tlačítek, aby nebyla na mobilu moc nalepená */
    .hw-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
}













/* --- Responzivní ladění pro mobil (OPRAVENO) --- */
@media (max-width: 600px) {
    .hw-detail-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .hw-polaroid-gallery {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important;
        width: 100% !important;
        max-width: 400px !important; 
        margin-bottom: 30px !important;
    }

    .hw-polaroid-card {
        width: 100% !important; 
        margin: 0 !important; 
        padding: 5px !important; 
    }

    .hw-polaroid-card:nth-child(odd) { transform: rotate(-2deg) !important; }
    .hw-polaroid-card:nth-child(even) { transform: rotate(2deg) !important; }

    .hw-spec-table {
        table-layout: fixed; 
        width: 100% !important;
        word-wrap: break-word; 
    }
} /* <--- TADY CHYBĚLA TATO ZÁVORKA!!! OPRAVENO. */






/* ==========================================
   ROZCESTNÍK HUDBA (Samo-responzivní + Den/Noc)
   ========================================== */

.hw-music-dashboard {
    display: grid;
    /* Karty se skládají automaticky. Pod 280px skočí pod sebe. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
    margin: 20px 0;
}

/* --- VÝCHOZÍ STAV (DENNÍ REŽIM) --- */
.hw-music-card {
    background: #ffffff; /* Bílé pozadí */
    border: 1px solid #e0e0e0; /* Jemný šedý rámeček */
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    color: #333333 !important; /* Tmavý text */
    text-decoration: none !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Lehký stín pro hloubku */
}

.hw-music-card:hover {
    transform: translateY(-5px);
    border-color: #FFC000; /* Zlatý rámeček při najetí */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.hw-music-icon {
    font-size: 40px;
    margin-bottom: 15px;
    display: block;
}

.hw-music-title {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
    color: #000000; /* Černý nadpis ve dne */
    display: block;
    text-transform: uppercase;
}

.hw-music-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #666666; /* Tmavší šedá pro dobrou čitelnost ve dne */
    display: block;
}


/* --- NOČNÍ REŽIM (DARK MODE) - ULTRA SILNÝ FIX --- */
:is(html.dark-mode, body.dark-mode) .hw-music-card {
    background: #111111 !important; /* Vynucení temného pozadí */
    border-color: #333333 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

:is(html.dark-mode, body.dark-mode) .hw-music-card:hover {
    border-color: #FFC000 !important;
    box-shadow: 0 10px 25px rgba(255, 192, 0, 0.15) !important;
}

:is(html.dark-mode, body.dark-mode) .hw-music-title {
    color: #FFC000 !important;
}

:is(html.dark-mode, body.dark-mode) .hw-music-desc {
    color: #aaaaaa !important;
}












/* ==========================================================================
   MOBILNÍ RESPONZIVITA – SJEDNOCENÝ BLOK
   Vše pod 800px / 768px / 600px na jednom místě
   ========================================================================== */


/* --------------------------------------------------------------------------
   GLOBÁLNÍ OPRAVY (všechny šířky)
   -------------------------------------------------------------------------- */

/* Hlavní obsah se umí zmenšit a nepřetéká */
.site-main {
    min-width: 0 !important;
}

/* Prázdné sidebary zmizí a uvolní místo */
.hw-sidebar:empty,
.hw-left:empty,
.hw-right:empty {
    display: none !important;
}

/* Tabulky s posuvníkem místo přetékání */
.hw-table-wrapper,
.vga-specs-box {
    max-width: 100%;
    overflow-x: auto;
}


/* --------------------------------------------------------------------------
   MAX-WIDTH: 1024px  (tablety na šířku, malé notebooky)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    /* Layout: sidebary pod sebe */
    .hw-container {
        flex-direction: column;
        max-width: 100%;
    }

    .hw-sidebar {
        width: 100%;
        min-width: 100%;
        position: static;
    }

    /* Detail CPU/VGA: 2 sloupce těsněji */
    .hw-detail-content {
        grid-template-columns: 48% 48% !important;
        gap: 4%;
    }

    .hw-detail-title {
        font-size: 32px !important;
    }
}


/* --------------------------------------------------------------------------
   MAX-WIDTH: 800px  (tablety na výšku, velké mobily)
   -------------------------------------------------------------------------- */

@media (max-width: 800px) {

    /* Tlačítko den/noc – skryto na mobilech */
    button#dark-mode-toggle,
    .mode-switch-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /* Posuvník u tabulek – plynulý scroll + zlatý jezdec */
    .hw-table-wrapper,
    .vga-specs-box,
    #vga-results-container > div:first-child,
    .wp-list-table {
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px !important;
    }

    .hw-table-wrapper::-webkit-scrollbar,
    .vga-specs-box::-webkit-scrollbar,
    #vga-results-container > div:first-child::-webkit-scrollbar,
    .wp-list-table::-webkit-scrollbar {
        height: 6px !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px;
        display: block !important;
    }

    .hw-table-wrapper::-webkit-scrollbar-thumb,
    .vga-specs-box::-webkit-scrollbar-thumb,
    #vga-results-container > div:first-child::-webkit-scrollbar-thumb,
    .wp-list-table::-webkit-scrollbar-thumb {
        background-color: #FFC000 !important;
        border-radius: 4px;
    }

    /* Tahací roh tabulky – 3× větší na mobilu */
    ::-webkit-resizer {
        transform: scale(3) !important;
        transform-origin: 100% 100% !important;
        margin-right: 2px !important;
        margin-bottom: 2px !important;
    }

    /* Tlačítko zpět nahoru – menší a blíž k okraji */
    #hw-back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }

    /* VGA nástroj: karty pod sebe */
    #vga-tool-wrapper .vga-main-container {
        flex-direction: column !important;
    }

    .vga-card {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
    }

    #vga-tool-wrapper div[style*="flex-wrap:wrap"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* VGA / CPU modální okna */
    #vga-modal-card > div,
    #vga-modal-cpu > div,
    #vga-modal-tests > div {
        width: 95% !important;
        margin: 2vh auto !important;
    }

    /* CPU compare: karty pod sebe */
    .hw-compare-container > div:first-child {
        flex-direction: column !important;
    }

    .hw-card {
        width: 100% !important;
        flex: none !important;
    }

    .hw-table-wrapper {
        overflow-x: auto !important;
        background: inherit;
    }

    /* Detail CPU/VGA: 1 sloupec */
    .hw-detail-wrapper {
        width: 100% !important;
        padding: 15px;
        margin: 10px 0;
        border: none !important;
    }

    .hw-detail-content {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
    }

    .hw-detail-gallery,
    .hw-detail-info {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hw-spec-table td,
    .hw-spec-table th small {
        font-size: 13px !important;
    }

    .hw-spec-table th {
        width: 35%;
    }

    /* Galerie vedle sebe → 2 sloupce */
    .hw-detail-gallery {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Progressie (timeline) → 1 sloupec */
    .hw-progression-wrap {
        grid-template-columns: 1fr;
    }

    .prog-row {
        flex-wrap: wrap;
    }

    .prog-score-wrap {
        width: 100%;
        align-items: flex-start;
        margin-top: 10px;
        padding-left: 60px;
    }

    /* Síň slávy (velká) → 1 sloupec */
    .hw-kosticky-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .k-hw-photos-grid.grid-4,
    .k-hw-photos-grid.grid-3 {
        grid-template-columns: repeat(2, minmax(0, 250px));
    }

    /* Laptop modal */
    #hw-laptop-picker-overlay .hw-modal-window {
        width: 95%;
        height: 90vh;
        padding: 10px;
    }
}


/* --------------------------------------------------------------------------
   MAX-WIDTH: 768px  (standardní mobil na šířku / malý tablet)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Mřížka archivu → 1 sloupec */
    .hw-grid-layout {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hw-year-heading {
        font-size: 14px !important;
    }

    /* Compare grid → pod sebe */
    .hw-compare-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* --------------------------------------------------------------------------
   MAX-WIDTH: 600px  (malé mobily – iPhone SE, Galaxy A apod.)
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

    /* Mřížka archivu → 1 sloupec (pojistka) */
    .hw-grid-layout {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Compare grid → 1 sloupec */
    .hw-compare-grid {
        grid-template-columns: 1fr;
    }

    /* Detail: vše pod sebe + polaroid galerie 2×2 */
    .hw-detail-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .hw-polaroid-gallery {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 400px !important;
        margin-bottom: 30px !important;
    }

    .hw-polaroid-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 5px !important;
    }

    .hw-polaroid-card:nth-child(odd)  { transform: rotate(-2deg) !important; }
    .hw-polaroid-card:nth-child(even) { transform: rotate(2deg)  !important; }

    /* Tabulka specifikací na plnou šířku */
    .hw-spec-table {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Klady a zápory pod sebe */
    .hw-pros-cons {
        flex-direction: column;
    }

    /* Přehrávač: vše pod sebe */
    .hw-player-wrapper {
        flex-direction: column;
    }

    .hw-cover-module {
        flex: none !important;
        width: 100% !important;
    }

    .hw-control-module {
        margin-left: 0 !important;
    }

    /* Partneři (síň slávy) pod sebe */
    .hw-partners-grid {
        flex-direction: column;
        align-items: center;
    }

    .hw-partner-link,
    .hw-partner-card {
        max-width: 100% !important;
        min-width: unset !important;
    }
}





/* ==========================================================================
   WIDGET: NEJNOVĚJŠÍ HUDBA (Sidebar Widget)
   ========================================================================== */

.hw-latest-music-widget {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
    font-family: sans-serif;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

/* Hlavička alá Laboratoř */
.hlmw-header {
    background: #111111 !important;
    padding: 10px;
    position: relative;
    text-align: center;
}

.hlmw-stripe {
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 4px;
    background: repeating-linear-gradient(45deg, #FFC000, #FFC000 10px, #000 10px, #000 20px);
}

.hlmw-header h3 {
    color: #FFC000 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    text-shadow: 1px 1px 0px #000 !important;
}

/* Tělo widgetu (Klikací část) */
.hlmw-body {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none !important;
    color: inherit !important;
    position: relative;
    background: transparent;
}

/* Interakce (Hover efekt) */
.hw-latest-music-widget:hover {
    border-color: #FFC000;
    box-shadow: 0 10px 25px rgba(255, 192, 0, 0.15);
    transform: translateY(-3px);
}

.hw-latest-music-widget:hover .hlmw-play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Cover obrázek */
.hlmw-cover {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
    background: #111;
}

.hlmw-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease;
}

.hw-latest-music-widget:hover .hlmw-cover img {
    filter: brightness(0.5); /* Ztmavne fotku při najetí, aby vyniklo Play */
}

/* Ikonka Play (Skrytá, objeví se při najetí) */
.hlmw-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    color: #FFC000;
    font-size: 24px;
    opacity: 0;
    transition: all 0.2s ease;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

/* Textové informace */
.hlmw-info {
    padding-left: 15px;
    flex-grow: 1;
    overflow: hidden;
}

.hlmw-date {
    display: block;
    font-size: 9px;
    color: #888888;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}

/* ÚPRAVA ZDE: Povoleno zalamování textu (white-space: normal) */
.hlmw-title {
    font-size: 14px !important;
    font-weight: bold !important;
    margin: 0 0 2px 0 !important;
    border: none !important;
    
    /* TYTO 3 ŘÁDKY ZAJISTÍ, ŽE SE TO NIKDY NEOŘÍZNE: */
    white-space: normal !important; /* Povolí zalamování na další řádek */
    overflow: visible !important;   /* Dovolí textu roztáhnout se dolů */
    text-overflow: clip !important; /* Úplně zakáže tři tečky (...) */
    line-height: 1.3 !important;
}

.hlmw-artist {
    font-size: 11px;
    color: #555555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

.hlmw-source {
    font-size: 10px;
    color: #FFC000;
    background: #111;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


/* ==========================================================================
   NOČNÍ REŽIM (DARK MODE)
   ========================================================================== */
:is(html.dark-mode, body.dark-mode) .hw-latest-music-widget {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

:is(html.dark-mode, body.dark-mode) .hlmw-title {
    color: #ffffff !important;
}

:is(html.dark-mode, body.dark-mode) .hlmw-artist {
    color: #aaaaaa !important;
}

:is(html.dark-mode, body.dark-mode) .hlmw-date {
    color: #666666 !important;
}

:is(html.dark-mode, body.dark-mode) .hlmw-cover {
    border-color: #444444 !important;
}





/* ==========================================================================
   CSS PRO SHORTCODY: GRAFY, SROVNÁVACÍ TABULKA A INFO-BOX
   ========================================================================== */

/* -----------------------------------------
   1. GRAFY ([hw_graf_*])
   ----------------------------------------- */
.hw-graf-thumb { 
    width: 140px; 
    height: 110px; 
    border-radius: 4px; 
    border: 1px solid #FFC000; 
    overflow: hidden; 
    cursor: zoom-in; 
    transition: transform 0.2s, box-shadow 0.2s; 
    background: #111; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.hw-graf-thumb:hover { 
    transform: scale(1.1); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.8); 
}
.hw-graf-thumb img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
}


/* ==========================================================================
   2. SROVNÁVACÍ MATICE / TABULKA ([hw_tabulka])
   ========================================================================== */

/* --- ZÁKLAD (DENNÍ REŽIM) --- */
.hw-matrix-wrapper { 
    width: 100%; 
    max-width: 100%; /* ZMĚNĚNO Z 100vw NA 100% */
    box-sizing: border-box; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    padding: 0 !important; 
    border: 1px solid #FFC000; 
    margin: 1px 0; 
    border-radius: 8px; 
    background: #ffffff; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    display: block; 
}

.hw-matrix-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-family: sans-serif; 
    font-size: 13px; 
    text-align: center; 
    white-space: nowrap; 
	margin-bottom: 0 !important; /* Odstraní případnou mezeru pod tabulkou */
    border: none !important;     /* Odstraníme vnější border tabulky, protože ho teď drží wrapper */
}


.hw-matrix-table th, 
.hw-matrix-table td { 
    padding: 4px 15px; 
    border-right: 1px solid #e0e0e0; 
    border-bottom: none !important;
    color: #333333;
    background-color: #ffffff; /* Ochrana proti prosvítání pozadí webu */
    background-clip: border-box !important; /* Fixuje oříznutí pozadí z šablony */
    box-shadow: none !important; /* Odstraní "divné" stíny ze šablony */
}
.hw-matrix-table th:last-child, 
.hw-matrix-table td:last-child { 
    border-right: none; 
}
.hw-matrix-head,
.hw-matrix-corner,
.hw-matrix-row-title { 
    background: #f7f7f7 !important; /* Jemná šedá, aby se oddělila od bílých dat */
    color: #111111 !important; 
    font-weight: bold; 
    background-image: none !important;
}
.hw-matrix-head {
    border-bottom: 2px solid #FFC000 !important; 
    vertical-align: bottom; 
}
.hw-matrix-corner { 
    position: sticky; 
    left: 0; 
    z-index: 3;
    border-bottom: 2px solid #FFC000 !important; 
    border-right: 2px solid #e0e0e0 !important;
}
.hw-matrix-row-title { 
    position: sticky; 
    left: 0; 
    z-index: 2; 
    text-align: left; 
    border-right: 2px solid #e0e0e0 !important;
}

/* Náhledový obrázek v hlavičce */
.hw-matrix-thumb { 
    width: 80px; 
    height: 60px; 
    background: transparent !important; 
    border-radius: 6px; 
    margin: 0 auto 8px auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
    padding: 2px; 
    cursor: zoom-in; 
    transition: transform 0.2s; 
}
.hw-matrix-thumb:hover { 
    transform: scale(1.1); 
}
.hw-matrix-thumb img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    border: 1px solid #FFC000; 
    box-shadow: none !important; 
    background: transparent !important;
}

/* Hover efekt na řádky (Denní režim) */
.hw-matrix-table tbody tr { transition: background 0.2s; }
.hw-matrix-table tbody tr:hover td { background-color: #f0f0f0 !important; }
.hw-matrix-table tbody tr:hover .hw-matrix-row-title { background-color: #e8e8e8 !important; }

/* Scrollbar matice */
.hw-matrix-wrapper::-webkit-scrollbar { height: 10px; }
.hw-matrix-wrapper::-webkit-scrollbar-track { background: #f1f1f1; }
.hw-matrix-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 5px; }
.hw-matrix-wrapper::-webkit-scrollbar-thumb:hover { background: #FFC000; }

/* --- NOČNÍ REŽIM PRO TABULKU --- */
:is(html.dark-mode, body.dark-mode) .hw-matrix-wrapper {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
}
:is(html.dark-mode, body.dark-mode) .hw-matrix-table th,
:is(html.dark-mode, body.dark-mode) .hw-matrix-table td {
    border-color: #333333 !important;
    background-color: #1a1a1a !important;
    color: #eeeeee !important;
}
:is(html.dark-mode, body.dark-mode) .hw-matrix-head,
:is(html.dark-mode, body.dark-mode) .hw-matrix-corner,
:is(html.dark-mode, body.dark-mode) .hw-matrix-row-title {
    background: #222222 !important;
    color: #FFC000 !important;
}
:is(html.dark-mode, body.dark-mode) .hw-matrix-corner,
:is(html.dark-mode, body.dark-mode) .hw-matrix-row-title {
    border-right-color: #444444 !important;
}
:is(html.dark-mode, body.dark-mode) .hw-matrix-table tbody tr:hover td { 
    background-color: #333333 !important; 
}
:is(html.dark-mode, body.dark-mode) .hw-matrix-table tbody tr:hover .hw-matrix-row-title { 
    background-color: #3a3a3a !important; 
    color: #ffffff !important;
}
:is(html.dark-mode, body.dark-mode) .hw-matrix-wrapper::-webkit-scrollbar-track { background: #111111; }
:is(html.dark-mode, body.dark-mode) .hw-matrix-wrapper::-webkit-scrollbar-thumb { background: #555555; }
:is(html.dark-mode, body.dark-mode) .hw-matrix-wrapper::-webkit-scrollbar-thumb:hover { background: #FFC000; }



/* ==========================================================================
   3. INFO-BOX ([hw_box])
   ========================================================================== */

/* --- ZÁKLAD (DENNÍ REŽIM) --- */
.hw-hero-box { 
    display: flex; 
    flex-wrap: wrap; 
    background: #ffffff; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    margin: 30px 0; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    overflow: hidden; 
    font-family: sans-serif; 
}
.hw-hero-img-col { 
    flex: 0 0 320px; 
    background: #f7f7f7; 
    padding: 15px; 
    display: grid; 
    gap: 10px; 
    border-right: 1px solid #e0e0e0; 
    position: relative; 
    align-content: center; 
}

.hw-hero-img-col::after { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: radial-gradient(circle, rgba(255,192,0,0.05) 0%, rgba(0,0,0,0) 70%); 
    pointer-events: none; 
}



/* Vynucení borderů pro test */
.hw-matrix-table, 
.hw-matrix-table th, 
.hw-matrix-table td {
    border: 1px solid #FFC000 !important;
}

/* Odstranění zlatého přechodu z hlavičky tabulky */
.hw-matrix-head a {
    background-image: none !important;
    background-color: transparent !important;
}


/* Definitivní odstranění rámečku/stínu při najetí na odkaz v hlavičce */
.hw-matrix-head a, 
.hw-matrix-head a:hover, 
.hw-matrix-head a:focus, 
.hw-matrix-head a:active {
    outline: none !important;         /* Odstraní rámeček prohlížeče */
    box-shadow: none !important;      /* Odstraní stín/záři šablony */
    text-decoration: none !important; /* Odstraní případné podtržení */
    border: none !important;          /* Odstraní případný border na odkazu */
}

/* Zajištění, že se ani buňka (th) nepohne nebo nezmění */
.hw-matrix-table th:hover {
    box-shadow: none !important;
    outline: none !important;
}





.hw-hero-img-col[data-count="1"] { grid-template-columns: 1fr; }
.hw-hero-img-col[data-count="2"] { grid-template-columns: 1fr; }
.hw-hero-img-col[data-count="3"] { grid-template-columns: 1fr 1fr; }
.hw-hero-img-col[data-count="3"] .img-0 { grid-column: span 2; }
.hw-hero-img-wrap { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.hw-hero-img-wrap a { 
    display: block; 
    outline: none; 
}
.hw-hero-img-wrap img { 
    max-width: 100%; 
    max-height: 220px; 
    object-fit: contain; 
    cursor: zoom-in; 
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15)); 
    position: relative; 
    z-index: 1; 
    transition: transform 0.2s ease, filter 0.2s ease; 
}
.hw-hero-img-wrap img:hover { 
    transform: scale(1.05); 
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.25)) brightness(1.05); 
}
.hw-hero-img-col[data-count="3"] .img-1 img, 
.hw-hero-img-col[data-count="3"] .img-2 img { 
    max-height: 100px; 
}
.hw-hero-content-col { 
    flex: 1; 
    padding: 15px 20px; 
    min-width: 300px; 
    display: flex; 
    flex-direction: column; 
}
.hw-hero-title { 
    color: #000000; 
    font-size: 18px; 
    font-weight: bold; 
    margin: 0 0 10px 0; 
    padding-bottom: 8px; 
    border-bottom: 1px solid #e0e0e0; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}
.hw-hero-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 13px; 
}
.hw-hero-th { 
    text-align: left; 
    padding: 5px 10px; 
    color: #555555; 
    font-weight: normal; 
    border-bottom: 1px solid #e0e0e0; 
    width: 45%; 
}
.hw-hero-td { 
    text-align: right; 
    padding: 5px 10px; 
    color: #111111; 
    font-weight: bold; 
    border-bottom: 1px solid #e0e0e0; 
}
.hw-hero-table tr:last-child th, 
.hw-hero-table tr:last-child td { 
    border-bottom: none; 
}

/* Responsivita pro hw_box */
@media (max-width: 700px) { 
    .hw-hero-img-col { 
        flex: 1 1 100%; 
        border-right: none; 
        border-bottom: 1px solid #e0e0e0; 
    } 
    .hw-hero-content-col { 
        padding: 15px; 
    } 
}

/* --- NOČNÍ REŽIM PRO INFO-BOX --- */
:is(html.dark-mode, body.dark-mode) .hw-hero-box {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
:is(html.dark-mode, body.dark-mode) .hw-hero-img-col {
    background: #222222 !important;
    border-color: #333333 !important;
}
:is(html.dark-mode, body.dark-mode) .hw-hero-img-wrap img {
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.6));
}
:is(html.dark-mode, body.dark-mode) .hw-hero-img-wrap img:hover {
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.8)) brightness(1.1);
}
:is(html.dark-mode, body.dark-mode) .hw-hero-title {
    color: #FFC000 !important;
    border-color: #333333 !important;
}
:is(html.dark-mode, body.dark-mode) .hw-hero-th {
    color: #aaa !important;
    border-color: #2a2a2a !important;
}
:is(html.dark-mode, body.dark-mode) .hw-hero-td {
    color: #fff !important;
    border-color: #2a2a2a !important;
}
@media (max-width: 700px) {
    :is(html.dark-mode, body.dark-mode) .hw-hero-img-col { 
        border-bottom-color: #333333 !important; 
    }
}


/* Dokonalé vycentrování nadpisů při scrollování tabulky */
.hw-sticky-nadpis {
    position: sticky;
    left: 0;
    width: 100vw; /* Obal si vezme šířku displeje mobilu */
    max-width: 100%;
    box-sizing: border-box;
    z-index: 5;
}

/* Pojistka pro počítače: tam to necháme chovat se normálně */
@media (min-width: 801px) {
    .hw-sticky-nadpis {
        position: static;
        width: auto;
    }
}


/* ==========================================================================
   TLAČÍTKA ZÁLOŽEK (TABS) U MULTIGRAFU
   ========================================================================== */
.hw-chart-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Mezery mezi tlačítky */
    margin: 15px 0 20px 0;
    justify-content: flex-start; /* Zarovnání doleva (můžeš dát center) */
}

/* Základní styl neaktivního tlačítka */
.hw-chart-tabs .hw-tab-btn {
    background: #222 !important; /* Tmavě šedé pozadí */
    color: #fff !important;      /* Světle šedý text */
    border: 1px solid #FFC000 !important; /* Tmavší rámeček */
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    font-family: sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important; /* Plynulá změna barev */
    text-transform: uppercase !important; /* Všechna písmena velká, vypadá to víc herně */
}

/* Efekt při najetí myší (Hover) */
.hw-chart-tabs .hw-tab-btn:hover {
    background: #333 !important; /* Lehce se zesvětlí */
    color: #fff !important;      /* Text zjasní na bílou */
    border-color: #666 !important;
}

/* Aktivní (vybraná) záložka */
.hw-chart-tabs .hw-tab-btn.active {
    background: #FFC000 !important; /* Tvůj typický žlutý / zlatý akcent */
    color: #000 !important;         /* Černý text pro maximální kontrast */
    border-color: #FFC000 !important;
    box-shadow: 0 0 10px rgba(255, 192, 0, 0.4) !important; /* Jemná záře */
}

/* Optimalizace na telefony */
@media (max-width: 768px) {
    .hw-chart-tabs .hw-tab-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
        flex-grow: 1; /* Na mobilu se tlačítka roztáhnou, aby vyplnila řádek */
        text-align: center;
    }
}







/*-------------kody z modulů-------------------------------------*/





/* ==========================================================================
   MODUL: CPU (Detail, Srovnávač, Fotogalerie)
   ========================================================================== */

/* 1. Detail CPU - Pevná velikost tabulky */
.hw-spec-table {
    table-layout: fixed;
    width: 100% !important;
    word-wrap: break-word;
}

.hw-spec-table th {
    width: 40%;
}

/* Závěr a Verdikt (Dříve inline style) */
.hw-zaver-verdikt {
    padding: 20px;
    border-left: 3px solid var(--hw-gold);
    background: var(--hw-zebra);
}

.hw-zaver-verdikt-nadpis {
    color: var(--hw-gold);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Chybové hlášky hw-error */
.hw-error {
    padding: 15px;
    background-color: #ffcccc;
    color: #cc0000;
    border-left: 4px solid #cc0000;
    margin-bottom: 20px;
}

/* 2. Responzivita (Mobil) */
@media (max-width: 600px) {
    .hw-detail-wrapper {
        padding: 15px 10px !important;
    }
    .hw-spec-table th, 
    .hw-spec-table td {
        font-size: 13px;
        padding: 8px 5px !important;
    }
}








/* ==========================================================================
   ARCHIV KARET – BAREVNÉ ZNAČKY A POZADÍ
   ========================================================================== */

/* 1) Default (unknown brands) */
.hw-card-photo {
  background: rgba(0,0,0,0.03) !important; /* den: neutrální */
}
html.dark-mode .hw-card-photo,
body.dark-mode .hw-card-photo {
  background: rgba(255,255,255,0.06) !important; /* noc: neutrální */
}

/* 2) Per-brand photo background (DAY - Světlé pozadí) */
:is([data-brand="intel"] .hw-card-photo, .hw-card-photo[data-brand="intel"], a[data-brand="intel"] .hw-card-photo) { background: #e6f2ff !important; }
:is([data-brand="matrox"] .hw-card-photo, .hw-card-photo[data-brand="matrox"], a[data-brand="matrox"] .hw-card-photo) { background: #e6f0ff !important; }
:is([data-brand="via"] .hw-card-photo, .hw-card-photo[data-brand="via"], a[data-brand="via"] .hw-card-photo) { background: #d1b9d5!important; }
:is([data-brand="amd"] .hw-card-photo, .hw-card-photo[data-brand="amd"], a[data-brand="amd"] .hw-card-photo) { background: #fff0f0 !important; }
:is([data-brand="ati"] .hw-card-photo, .hw-card-photo[data-brand="ati"], a[data-brand="ati"] .hw-card-photo) { background: #fff0f0 !important; }
:is([data-brand="trident"] .hw-card-photo, .hw-card-photo[data-brand="trident"], a[data-brand="trident"] .hw-card-photo) { background: #fff2f2 !important; }
:is([data-brand="nvidia"] .hw-card-photo, .hw-card-photo[data-brand="nvidia"], a[data-brand="nvidia"] .hw-card-photo) { background: #e6ffe6 !important; }
:is([data-brand="3dfx"] .hw-card-photo, .hw-card-photo[data-brand="3dfx"], a[data-brand="3dfx"] .hw-card-photo) { background: #fff5e6 !important; }
:is([data-brand="cyrix"] .hw-card-photo, .hw-card-photo[data-brand="cyrix"], a[data-brand="cyrix"] .hw-card-photo) { background: #fff6da !important; }
:is([data-brand="ibm"] .hw-card-photo, .hw-card-photo[data-brand="ibm"], a[data-brand="ibm"] .hw-card-photo) { background: #fff6da !important; }
:is([data-brand="sis"] .hw-card-photo, .hw-card-photo[data-brand="sis"], a[data-brand="sis"] .hw-card-photo) { background: #fff8ee !important; }
:is([data-brand="s3"] .hw-card-photo, .hw-card-photo[data-brand="s3"], a[data-brand="s3"] .hw-card-photo) { background: #e0ffff !important; }
:is([data-brand="powervr"] .hw-card-photo, .hw-card-photo[data-brand="powervr"], a[data-brand="powervr"] .hw-card-photo) { background: #fce6ff !important; }
:is([data-brand="tseng"] .hw-card-photo, .hw-card-photo[data-brand="tseng"], a[data-brand="tseng"] .hw-card-photo) { background: #fdf5e6 !important; }
:is([data-brand="3dlabs"] .hw-card-photo, .hw-card-photo[data-brand="3dlabs"], a[data-brand="3dlabs"] .hw-card-photo) { background: #eef2f5 !important; }
	
/* DOPLNĚNÍ BAREVNÝCH POZADÍ PRO NOTEBOOKY A PC */
:is([data-brand="dell"] .hw-card-photo, [data-brand="hp"] .hw-card-photo, [data-brand="hewlett-packard"] .hw-card-photo, [data-brand="asus"] .hw-card-photo) { background: #e6f2ff !important; }
html.dark-mode :is([data-brand="dell"] .hw-card-photo, [data-brand="hp"] .hw-card-photo, [data-brand="hewlett-packard"] .hw-card-photo, [data-brand="asus"] .hw-card-photo) { background: #001a33 !important; }
:is([data-brand="toshiba"] .hw-card-photo, [data-brand="compaq"] .hw-card-photo) { background: #fff0f0 !important; }
html.dark-mode :is([data-brand="toshiba"] .hw-card-photo, [data-brand="compaq"] .hw-card-photo) { background: #2b0000 !important; }
:is([data-brand="acer"] .hw-card-photo) { background: #e6ffe6 !important; }
html.dark-mode :is([data-brand="acer"] .hw-card-photo) { background: #002200 !important; }
:is([data-brand="ibm"] .hw-card-photo, [data-brand="lenovo"] .hw-card-photo) { background: #fff8ee !important; }
html.dark-mode :is([data-brand="ibm"] .hw-card-photo, [data-brand="lenovo"] .hw-card-photo) { background: #2b1f00 !important; }
:is([data-brand="sony"] .hw-card-photo, [data-brand="apple"] .hw-card-photo) { background: #f2f2f2 !important; }
html.dark-mode :is([data-brand="sony"] .hw-card-photo, [data-brand="apple"] .hw-card-photo) { background: #1a1a1a !important; }	

/* 3) Per-brand photo background (DARK - Tmavé pozadí) */
html.dark-mode :is([data-brand="intel"] .hw-card-photo, .hw-card-photo[data-brand="intel"], a[data-brand="intel"] .hw-card-photo), body.dark-mode :is([data-brand="intel"] .hw-card-photo, .hw-card-photo[data-brand="intel"], a[data-brand="intel"] .hw-card-photo) { background: #001a33 !important; }
html.dark-mode :is([data-brand="matrox"] .hw-card-photo, .hw-card-photo[data-brand="matrox"], a[data-brand="matrox"] .hw-card-photo), body.dark-mode :is([data-brand="matrox"] .hw-card-photo, .hw-card-photo[data-brand="matrox"], a[data-brand="matrox"] .hw-card-photo) { background: #001022 !important; }
html.dark-mode :is([data-brand="via"] .hw-card-photo, .hw-card-photo[data-brand="via"], a[data-brand="via"] .hw-card-photo), body.dark-mode :is([data-brand="via"] .hw-card-photo, .hw-card-photo[data-brand="via"], a[data-brand="via"] .hw-card-photo) { background: #52005d !important; }
html.dark-mode :is([data-brand="amd"] .hw-card-photo, .hw-card-photo[data-brand="amd"], a[data-brand="amd"] .hw-card-photo), body.dark-mode :is([data-brand="amd"] .hw-card-photo, .hw-card-photo[data-brand="amd"], a[data-brand="amd"] .hw-card-photo) { background: #2b0000 !important; }
html.dark-mode :is([data-brand="ati"] .hw-card-photo, .hw-card-photo[data-brand="ati"], a[data-brand="ati"] .hw-card-photo), body.dark-mode :is([data-brand="ati"] .hw-card-photo, .hw-card-photo[data-brand="ati"], a[data-brand="ati"] .hw-card-photo) { background: #2b0000 !important; }
html.dark-mode :is([data-brand="trident"] .hw-card-photo, .hw-card-photo[data-brand="trident"], a[data-brand="trident"] .hw-card-photo), body.dark-mode :is([data-brand="trident"] .hw-card-photo, .hw-card-photo[data-brand="trident"], a[data-brand="trident"] .hw-card-photo) { background: #2b0a0a !important; }
html.dark-mode :is([data-brand="nvidia"] .hw-card-photo, .hw-card-photo[data-brand="nvidia"], a[data-brand="nvidia"] .hw-card-photo), body.dark-mode :is([data-brand="nvidia"] .hw-card-photo, .hw-card-photo[data-brand="nvidia"], a[data-brand="nvidia"] .hw-card-photo) { background: #002200 !important; }
html.dark-mode :is([data-brand="3dfx"] .hw-card-photo, .hw-card-photo[data-brand="3dfx"], a[data-brand="3dfx"] .hw-card-photo), body.dark-mode :is([data-brand="3dfx"] .hw-card-photo, .hw-card-photo[data-brand="3dfx"], a[data-brand="3dfx"] .hw-card-photo) { background: #2e1800 !important; }
html.dark-mode :is([data-brand="cyrix"] .hw-card-photo, .hw-card-photo[data-brand="cyrix"], a[data-brand="cyrix"] .hw-card-photo), body.dark-mode :is([data-brand="cyrix"] .hw-card-photo, .hw-card-photo[data-brand="cyrix"], a[data-brand="cyrix"] .hw-card-photo) { background: #2b2200 !important; }
html.dark-mode :is([data-brand="ibm"] .hw-card-photo, .hw-card-photo[data-brand="ibm"], a[data-brand="ibm"] .hw-card-photo), body.dark-mode :is([data-brand="ibm"] .hw-card-photo, .hw-card-photo[data-brand="ibm"], a[data-brand="ibm"] .hw-card-photo) { background: #2b2200 !important; }
html.dark-mode :is([data-brand="sis"] .hw-card-photo, .hw-card-photo[data-brand="sis"], a[data-brand="sis"] .hw-card-photo), body.dark-mode :is([data-brand="sis"] .hw-card-photo, .hw-card-photo[data-brand="sis"], a[data-brand="sis"] .hw-card-photo) { background: #2b1f00 !important; }
html.dark-mode :is([data-brand="s3"] .hw-card-photo, .hw-card-photo[data-brand="s3"], a[data-brand="s3"] .hw-card-photo), body.dark-mode :is([data-brand="s3"] .hw-card-photo, .hw-card-photo[data-brand="s3"], a[data-brand="s3"] .hw-card-photo) { background: #002b2b !important; }
html.dark-mode :is([data-brand="powervr"] .hw-card-photo, .hw-card-photo[data-brand="powervr"], a[data-brand="powervr"] .hw-card-photo), body.dark-mode :is([data-brand="powervr"] .hw-card-photo, .hw-card-photo[data-brand="powervr"], a[data-brand="powervr"] .hw-card-photo) { background: #1a002b !important; }
html.dark-mode :is([data-brand="tseng"] .hw-card-photo, .hw-card-photo[data-brand="tseng"], a[data-brand="tseng"] .hw-card-photo), body.dark-mode :is([data-brand="tseng"] .hw-card-photo, .hw-card-photo[data-brand="tseng"], a[data-brand="tseng"] .hw-card-photo) { background: #2b1400 !important; }
html.dark-mode :is([data-brand="3dlabs"] .hw-card-photo, .hw-card-photo[data-brand="3dlabs"], a[data-brand="3dlabs"] .hw-card-photo), body.dark-mode :is([data-brand="3dlabs"] .hw-card-photo, .hw-card-photo[data-brand="3dlabs"], a[data-brand="3dlabs"] .hw-card-photo) { background: #1c2024 !important; }

/* 4) Brand Variables (Text colors matching PHP) */
:is(
  [data-brand="intel"],   .hw-card-topbar[data-brand="intel"],
  [data-brand="amd"],     .hw-card-topbar[data-brand="amd"],
  [data-brand="nvidia"],  .hw-card-topbar[data-brand="nvidia"],
  [data-brand="ati"],     .hw-card-topbar[data-brand="ati"],
  [data-brand="3dfx"],    .hw-card-topbar[data-brand="3dfx"],
  [data-brand="matrox"],  .hw-card-topbar[data-brand="matrox"],
  [data-brand="s3"],      .hw-card-topbar[data-brand="s3"],
  [data-brand="sis"],     .hw-card-topbar[data-brand="sis"],
  [data-brand="powervr"], .hw-card-topbar[data-brand="powervr"],
  [data-brand="trident"], .hw-card-topbar[data-brand="trident"],
  [data-brand="tseng"],   .hw-card-topbar[data-brand="tseng"],
  [data-brand="via"],     .hw-card-topbar[data-brand="via"],
  [data-brand="3dlabs"],  .hw-card-topbar[data-brand="3dlabs"],
  [data-brand="cyrix"],   .hw-card-topbar[data-brand="cyrix"],
  [data-brand="ibm"]      .hw-card-topbar[data-brand="ibm"]
) .hw-card-topbar,
.hw-card-topbar:is([data-brand]) 
{
  color: var(--brand) !important;
}

/* DEFINE COLORS */
[data-brand="nvidia"],  .hw-card-topbar[data-brand="nvidia"]  { --brand:#76B900; }
[data-brand="ati"],     .hw-card-topbar[data-brand="ati"]     { --brand:#E31937; }
[data-brand="amd"],     .hw-card-topbar[data-brand="amd"]     { --brand:#E31937; }
[data-brand="3dfx"],    .hw-card-topbar[data-brand="3dfx"]    { --brand:#F27F11; }
[data-brand="intel"],   .hw-card-topbar[data-brand="intel"]   { --brand:#0071C5; }
[data-brand="matrox"],  .hw-card-topbar[data-brand="matrox"]  { --brand:#0057B8; }
[data-brand="s3"],      .hw-card-topbar[data-brand="s3"]      { --brand:#24B6B8; }
[data-brand="sis"],     .hw-card-topbar[data-brand="sis"]     { --brand:#D4B57E; }
[data-brand="powervr"], .hw-card-topbar[data-brand="powervr"] { --brand:#660099; }
[data-brand="trident"], .hw-card-topbar[data-brand="trident"] { --brand:#A52A2A; }
[data-brand="tseng"],   .hw-card-topbar[data-brand="tseng"]   { --brand:#8B4513; }
[data-brand="via"],     .hw-card-topbar[data-brand="via"]     { --brand:#b34fc8; }
[data-brand="3dlabs"],  .hw-card-topbar[data-brand="3dlabs"]  { --brand:#708090; }
[data-brand="cyrix"],   .hw-card-topbar[data-brand="cyrix"]   { --brand:#D4A017; }
[data-brand="ibm"],     .hw-card-topbar[data-brand="ibm"]     { --brand:#D4A017; }
	
/* Barvy pro Notebooky a PC */
[data-brand="toshiba"], .hw-card-topbar[data-brand="toshiba"] { --brand:#FF0000; }
[data-brand="compaq"],  .hw-card-topbar[data-brand="compaq"]  { --brand:#E31937; }
[data-brand="dell"],    .hw-card-topbar[data-brand="dell"]    { --brand:#007db8; }
[data-brand="hp"],      .hw-card-topbar[data-brand="hp"]      { --brand:#0096D6; }
[data-brand="hewlett-packard"], .hw-card-topbar[data-brand="hewlett-packard"] { --brand:#0096D6; }
[data-brand="acer"],    .hw-card-topbar[data-brand="acer"]    { --brand:#83B81A; }
[data-brand="asus"],    .hw-card-topbar[data-brand="asus"]    { --brand:#00539B; }
[data-brand="sony"],    .hw-card-topbar[data-brand="sony"]    { --brand:#404040; }
[data-brand="apple"],   .hw-card-topbar[data-brand="apple"]   { --brand:#777777; }
[data-brand="lenovo"],  .hw-card-topbar[data-brand="lenovo"]  { --brand:#E2231A; }	

/* Záře v tmavém režimu */
html.dark-mode [data-brand] .hw-card-photo {
  box-shadow:
    0 0 20px color-mix(in srgb, var(--brand) 60%, transparent),
    0 0 40px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* ==========================================================================
   SPOTLIGHT WIDGET STYLES
   ========================================================================== */
.hw-spotlight-box {
    position: relative;
    background: var(--hw-bg, #fff); 
    border: 1px solid var(--hw-border, #ccc);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 25px;
    font-family: sans-serif;
    box-shadow: 0 10px 30px -10px var(--hw-shadow, rgba(0,0,0,0.2));
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hw-spotlight-box:hover {
    transform: translateY(-5px);
}

.hw-spotlight-ribbon {
    position: absolute; top: 15px; right: -30px;
    background: var(--hw-gold, #FFC000); 
    color: #000;
    font-weight: 900; font-size: 10px; padding: 5px 30px;
    transform: rotate(45deg); z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    pointer-events: none !important;
}

.hw-spotlight-content {
    padding: 20px;
    background: linear-gradient(180deg, var(--hw-bg) 0%, var(--hw-alt) 100%);
}

.hw-spotlight-title {
    margin: 5px 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.hw-spotlight-title a {
    color: var(--hw-text, #000) !important; 
    text-decoration: none;
    transition: opacity 0.2s;
}
.hw-spotlight-title a:hover { opacity: 0.7; }

.hw-spotlight-img-wrap {
    display: flex; align-items: center; justify-content: center;
    position: relative; height: 140px; margin: 15px 0; z-index: 1;
    color: var(--hw-text);
}

.hw-spotlight-img-wrap img {
    max-height: 100%; max-width: 100%; object-fit: contain;
    position: relative; z-index: 2;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
}
.hw-spotlight-box:hover .hw-spotlight-img-wrap img { transform: scale(1.1) translateY(-5px); }

.hw-spotlight-glow {
    position: absolute; top: 50%; left: 50%;
    width: 80px; height: 80px; transform: translate(-50%, -50%);
    border-radius: 50%; filter: blur(40px);
    opacity: 0.15; 
    z-index: 1; transition: opacity 0.3s;
    pointer-events: none !important;
}
html.dark-mode .hw-spotlight-glow, body.dark-mode .hw-spotlight-glow { opacity: 0.4; }
.hw-spotlight-box:hover .hw-spotlight-glow { opacity: 0.5; }

.hw-spotlight-specs {
    display: flex; justify-content: center; gap: 8px; margin-bottom: 15px;
    font-size: 10px; 
    border-top: 1px solid var(--hw-border, #eee); 
    padding-top: 15px; flex-wrap: wrap;
}

.hw-spotlight-specs span {
    background: var(--hw-bg); 
    color: var(--hw-text);
    border: 1px solid var(--hw-border, #ddd); 
    padding: 3px 6px; border-radius: 4px; font-weight: bold;
}

.hw-spotlight-btn {
    display: block; 
    width: 100%; 
    padding: 10px 0;
    background: transparent !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
    text-decoration: none; font-weight: bold; font-size: 11px;
    border-radius: 4px; transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px;
}

html.dark-mode .hw-spotlight-btn,
body.dark-mode .hw-spotlight-btn {
    border-color: #FFC000 !important; 
    color: #FFC000 !important; 
    background: transparent !important;
}

.hw-spotlight-btn:hover,
html.dark-mode .hw-spotlight-btn:hover,
body.dark-mode .hw-spotlight-btn:hover {
    background: #FFC000 !important; 
    color: #000000 !important;      
    border-color: #FFC000 !important;
    box-shadow: 0 0 15px rgba(255, 192, 0, 0.6);
}










/* ==========================================================================
   MODUL: NEJLEPŠÍ PARŤÁCI (CPU PARTNERS)
   ========================================================================== */

/* Chybějící fotka */
.hw-no-img {
    font-size: 40px;
    font-weight: 900;
    color: var(--hw-border);
    opacity: 0.3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Modifikátor pro Dobového Šampiona */
.hw-partner-card.period-winner {
    border-color: #ff9800;
}
.hw-partner-card.period-winner .hw-partner-badge {
    background: #ff9800;
}
html.dark-mode .hw-partner-card.period-winner,
body.dark-mode .hw-partner-card.period-winner {
    border-color: #ff9800 !important;
}













/* ==========================================================================
   WIDGETY: LABORATOŘ, SÍŇ SLÁVY, LIVE FEED
   ========================================================================== */

/* --- 1. LABORATOŘ A SÍŇ SLÁVY (Společné obaly) --- */
.hw-lab-widget {
    border: 2px solid var(--hw-border, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--hw-bg, #ffffff);
    margin-bottom: 30px;
    font-family: sans-serif;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
html.dark-mode .hw-lab-widget, body.dark-mode .hw-lab-widget {
    background: #1a1a1a !important; 
    border-color: #444 !important;
}

.hw-lab-header {
    background: #222 !important;
    padding: 10px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.hw-lab-header h3 {
    color: #FFC000 !important;          
    font-size: 16px !important;         
    font-family: sans-serif !important; 
    font-weight: 700 !important;        
    text-transform: uppercase !important;
    text-shadow: 2px 2px 0px #000 !important;
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    display: block !important;
}

.hw-lab-stripe {
    position: absolute; top: 0; left: 0; width: 100%; height: 5px;
    background: repeating-linear-gradient(45deg, #FFC000, #FFC000 10px, #000 10px, #000 20px);
}

.hw-lab-content { 
    padding: 15px; 
}

/* --- 2. LABORATOŘ SPECIFIKA (Drafty) --- */
.hw-lab-last-update {
    font-size: 10px !important;
    color: #cccccc !important; 
    margin-top: 5px !important;
    font-family: monospace !important;
    letter-spacing: 1px;
    font-weight: bold !important;
    display: block !important;
}

.hw-lab-desc {
    color: #000000 !important; 
    font-weight: normal !important;
    margin-bottom: 15px !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
html.dark-mode .hw-lab-desc, body.dark-mode .hw-lab-desc,
html.dark-mode .hw-lab-last-update, body.dark-mode .hw-lab-last-update {
    color: #ffffff !important; 
}

.hw-lab-grid { 
    display: flex; gap: 10px; margin-bottom: 15px; 
}

.hw-lab-item {
    flex: 1;
    background: rgba(0,0,0,0.03);
    border: 1px dashed #ccc;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    position: relative;
}
html.dark-mode .hw-lab-item, body.dark-mode .hw-lab-item {
    background: rgba(255,255,255,0.05) !important; 
    border-color: #555 !important;
}

.hw-lab-badge {
    position: absolute; top: -5px; right: -5px;
    background: #FFC000; color: #000;
    font-size: 9px; font-weight: bold;
    padding: 2px 6px; border-radius: 4px; border: 1px solid #000;
}

.hw-lab-img {
    width: 60px; height: 60px; object-fit: contain;
    margin: 0 auto 5px; display: block;
    filter: grayscale(100%); opacity: 0.7;
}

.hw-lab-noimg {
    width: 60px; height: 60px; line-height: 60px;
    margin: 0 auto 5px; background: #eee; color: #aaa;
    font-weight: bold; border-radius: 50%;
}

.hw-lab-name {
    font-weight: bold; font-size: 13px; line-height: 1.2;
    margin-bottom: 3px; color: var(--hw-text);
}

.hw-lab-status {
    font-size: 11px; color: #FFC000; font-style: italic;
    background: #333; display: inline-block;
    padding: 2px 6px; border-radius: 3px;
}

.hw-lab-logs {
    background: #f4f4f4; padding: 10px;
    border-radius: 4px; font-family: monospace;
    font-size: 12px; color: #333; text-align: left;
}
html.dark-mode .hw-lab-logs, body.dark-mode .hw-lab-logs {
    background: #111 !important; color: #ccc !important;
}

.hw-lab-log-title {
    display:block; border-bottom:1px solid #ccc; 
    padding-bottom:5px; margin-bottom:5px; 
    font-size:11px; color:#888; font-weight: bold;
}

.hw-lab-log-entry { 
    margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}
.hw-lab-log-entry span { color: var(--hw-gold, #FFC000); }
.hw-lab-log-entry b { font-weight: bold; }
.hw-lab-log-entry small { font-size: smaller; opacity: 0.8; }


/* --- 3. SÍŇ SLÁVY (Hall of Fame) --- */
.hw-hof-widget .hw-lab-stripe {
    background: conic-gradient( #000000 90deg, #FFC000 90deg 180deg, #000000 180deg 270deg, #FFC000 270deg ) !important;
    background-size: 6px 6px !important; 
    height: 6px !important;
}

.hw-hof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.hw-hof-card {
    background: rgba(0,0,0,0.03); 
    border: 1px dashed #ccc;      
    border-radius: 6px;
    padding: 15px;
    position: relative;
    padding-top: 5px; 
}
html.dark-mode .hw-hof-card, body.dark-mode .hw-hof-card {
    background: rgba(255,255,255,0.05) !important;
    border-color: #555 !important;
}

.hw-hof-year-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFC000;
    color: #000;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 5;
}

.hw-hof-row {
    display: flex; gap: 6px; margin-bottom: 2px;
}

.hw-hof-icon {
    font-size: 14px; padding-top: 2px;
}

.hw-hof-data {
    flex: 1; overflow: hidden; 
}

.hw-hof-line {
    font-size: 10px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 1px;
}

.hw-hof-brand { font-weight: 900; margin-right: 3px; }
.hw-hof-model { color: #000; font-weight: 600; }
html.dark-mode .hw-hof-model, body.dark-mode .hw-hof-model { color: #ffffff !important; }

.hw-hof-divider {
    height: 1px; background: #ccc; margin: 6px 0; opacity: 0.5;
}
html.dark-mode .hw-hof-divider, body.dark-mode .hw-hof-divider { background: #555 !important; }

.hw-hof-result-container {
    display: flex; justify-content: flex-end; align-items: baseline;      
    margin-top: 15px; position: relative;
}

.hw-hof-bench-name {
    font-size: 11px; font-weight: bold; text-transform: uppercase; color: #222; 
}
html.dark-mode .hw-hof-bench-name, body.dark-mode .hw-hof-bench-name { color: #ffffff !important; }

.hw-hof-separator {
    margin: 0 6px; color: #444; 
}
html.dark-mode .hw-hof-separator, body.dark-mode .hw-hof-separator { color: #ffffff !important; }

.hw-hof-score-wrapper { position: relative; }

.hw-hof-meta {
    position: absolute; bottom: 100%; right: 0;
    font-size: 9px; white-space: nowrap; margin-bottom: 2px;  
    color: #d00000; font-weight: normal;
}
html.dark-mode .hw-hof-meta, body.dark-mode .hw-hof-meta { color: #ffffff !important; opacity: 1 !important; }

.hw-hof-score-value {
    font-size: 12px; line-height: 1; white-space: nowrap; font-weight: bold;
}
.hw-hof-na { font-size: 12px; color: #aaa; }


/* --- 4. LIVE FEED WIDGET --- */
.hw-mini-feed {
    background: #ffffff;
    border: 1px solid #000;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 20px;
    font-family: sans-serif;
    font-size: 10px;
}
html.dark-mode .hw-mini-feed, body.dark-mode .hw-mini-feed {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
}

.hw-mini-header {
    color: #FFC000;
    background: #000;
    padding: 5px 8px;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 10px;
    margin-bottom: 8px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}
html.dark-mode .hw-mini-header, body.dark-mode .hw-mini-header {
    background: transparent !important;
    border-bottom: 1px solid #333;
}

.hw-mini-list {
    display: flex; flex-direction: column; gap: 8px; 
}

.hw-mini-item {
    border-bottom: 1px dashed #000;
    padding-bottom: 6px;
    display: flex; flex-direction: column; gap: 3px; 
}
.hw-mini-item:last-child { border-bottom: none; padding-bottom: 0; }
html.dark-mode .hw-mini-item, body.dark-mode .hw-mini-item { border-bottom-color: #444 !important; }

.hw-mini-vga {
    text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px;
}
.hw-mini-brand { font-weight: 400; }
.hw-mini-model { color: #000000; font-weight: 400; }

.hw-mini-mid {
    display: flex; justify-content: space-between; align-items: center; width: 100%; 
}

.hw-mini-game {
    color: #000000; font-weight: 400; font-size: 11px; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; 
}

.hw-mini-val {
    color: #d00000; font-weight: 400; font-family: monospace; font-size: 11px;
    white-space: nowrap !important; flex-shrink: 0; text-align: right; 
}
html.dark-mode .hw-mini-val, body.dark-mode .hw-mini-val { color: #FFC000 !important; }

.hw-mini-bot {
    display: flex; justify-content: space-between; align-items: center;
}
.hw-mini-cpu {
    color: #444444; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 65%;
}
.hw-mini-date {
    color: #444444; font-size: 9px; font-family: monospace; font-weight: 400;
}

html.dark-mode .hw-mini-model, body.dark-mode .hw-mini-model,
html.dark-mode .hw-mini-game, body.dark-mode .hw-mini-game,
html.dark-mode .hw-mini-cpu, body.dark-mode .hw-mini-cpu,
html.dark-mode .hw-mini-date, body.dark-mode .hw-mini-date {
    color: #ffffff !important; 
}










/* ==========================================================================
   MODUL: VGA SROVNÁVAČ A TABULKA SPECIFIKACÍ
   ========================================================================== */

/* --- 1. Tabulka specifikací uvnitř karet --- */
.vga-specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.4;
    table-layout: fixed;
}
.vga-specs-table .vga-spec-lbl {
    width: 42%;
    text-align: left;
    color: #777;
    padding: 2px 0;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}
.vga-specs-table .vga-spec-val {
    width: 58%;
    text-align: right;
    font-weight: bold;
    color: #000;
    padding: 2px 0;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Noční režim pro tabulku */
:is(html.dark-mode, body.dark-mode) .vga-specs-table .vga-spec-lbl { color: #aaa; border-color: #444; }
:is(html.dark-mode, body.dark-mode) .vga-specs-table .vga-spec-val { color: #fff; border-color: #444; }

/* --- 2. Interaktivní karty a hover efekty --- */
.vga-card-interactive { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer; }
.vga-card-interactive:hover { transform: translateY(-7px); box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important; border-color: #FFC000 !important; z-index: 10; }
.vga-card-interactive:hover button { background-color: #FFC000 !important; color: #000 !important; transform: scale(1.05); }

.vga-picker-item { transition: all 0.2s ease-in-out; position: relative; z-index: 1; }
.vga-picker-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(255,255,255,0.3); border-color: #fff !important; z-index: 2; }

.vga-btn-hover { transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.vga-btn-hover:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(255,255,255,0.25); filter: brightness(1.1); z-index: 5; }
.vga-btn-hover:active { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(255,255,255,0.1); }

/* --- 3. Přepínač módů (VGA / CPU) --- */
.vga-mode-switch {
    display: inline-flex;
    background: #e1e8ed;
    padding: 4px;
    border-radius: 20px;
    border: 1px solid #dce4ec;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;
}
:is(html.dark-mode, body.dark-mode) .vga-mode-switch { background: #222; border-color: #444; }

.vga-mode-opt {
    padding: 6px 16px;
    cursor: pointer;
    border-radius: 16px;
    color: #7f8c8d;
    transition: all 0.2s ease;
}
:is(html.dark-mode, body.dark-mode) .vga-mode-opt { color: #888; }

.vga-mode-opt:hover {
    color: #333;
    background: rgba(255,255,255,0.5);
}
:is(html.dark-mode, body.dark-mode) .vga-mode-opt:hover { color: #ccc; background: rgba(255,255,255,0.1); }

.vga-mode-opt.active {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: default;
    pointer-events: none; 
}
:is(html.dark-mode, body.dark-mode) .vga-mode-opt.active { background: #444; color: #fff; }

/* Specifické barvy pro aktivní stav */
#btn-mode-vga.active { color: #000; border: 1px solid #FFC000; }
:is(html.dark-mode, body.dark-mode) #btn-mode-vga.active { color: #FFC000; background: #222; }

#btn-mode-cpu.active { color: #fff; background: #0071C5; border: 1px solid #005a9e; }

/* --- Přepínač módů (VGA / CPU) --- */
.vga-mode-switch {
    display: inline-flex;
    background: #e1e8ed;
    padding: 4px;
    border-radius: 20px;
    border: 1px solid #dce4ec;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;
}
:is(html.dark-mode, body.dark-mode) .vga-mode-switch { background: #222; border-color: #444; }

.vga-mode-opt {
    padding: 6px 16px;
    cursor: pointer;
    border-radius: 16px;
    color: #000000; /* ZDE: Přes den černé (původně bylo #7f8c8d) */
    transition: all 0.2s ease;
}

:is(html.dark-mode, body.dark-mode) .vga-mode-opt { 
    color: #ffffff; /* ZDE: V noci bílé (původně bylo #888) */
}

.vga-mode-opt:hover {
    color: #333;
    background: rgba(255,255,255,0.5);
}
:is(html.dark-mode, body.dark-mode) .vga-mode-opt:hover { color: #ccc; background: rgba(255,255,255,0.1); }

.vga-mode-opt.active {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: default;
    pointer-events: none; 
}
:is(html.dark-mode, body.dark-mode) .vga-mode-opt.active { background: #444; color: #fff; }

#btn-mode-vga.active { color: #000; border: 1px solid #FFC000; }
:is(html.dark-mode, body.dark-mode) #btn-mode-vga.active { color: #FFC000; background: #222; }

#btn-mode-cpu.active { color: #fff; background: #0071C5; border: 1px solid #005a9e; }















/* ==========================================================================
   FOOTER: MODÁLNÍ OKNA, ROLETKY A SCROLLBARY
   ========================================================================== */

/* --- 1. Hlavičky skupin v roletkách (např. ── Intel ──) --- */
.lb-group-header {
    padding: 6px 15px;
    font-size: 14px;
    font-weight: bold;
    background: #f0f0f0; /* Denní režim */
    margin-top: 5px;
}
:is(html.dark-mode, body.dark-mode) .lb-group-header { background: #222 !important; }

/* --- 2. Položky v seznamu (např. Pentium II) --- */
.lb-item {
    padding: 8px 15px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #ddd;
    background: transparent;
    color: #333; /* Denní režim */
    transition: background 0.2s;
}
.lb-item:hover { background: #e9ecef; }
.lb-item.active { background: #dce4ec; }

:is(html.dark-mode, body.dark-mode) .lb-item { color: #fff !important; border-bottom-color: #333 !important; }
:is(html.dark-mode, body.dark-mode) .lb-item:hover { background: #444 !important; }
:is(html.dark-mode, body.dark-mode) .lb-item.active { background: #333 !important; }

/* --- 3. Posuvníky (Scrollbary) pro roletky a modaly --- */
.hw-scroll-box { 
    max-height: 800px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-right: 10px; 
}
.hw-scroll-box::-webkit-scrollbar { width: 12px; }
.hw-scroll-box::-webkit-scrollbar-track { background: #f4f4f4; border-left: 1px solid #ddd; }
.hw-scroll-box::-webkit-scrollbar-thumb { background: #ccc; border-radius: 6px; border: 3px solid #f4f4f4; }
.hw-scroll-box::-webkit-scrollbar-thumb:hover { background: #aaa; }

:is(html.dark-mode, body.dark-mode) .hw-scroll-box::-webkit-scrollbar-track { background: #111 !important; border-color: #333 !important; }
:is(html.dark-mode, body.dark-mode) .hw-scroll-box::-webkit-scrollbar-thumb { background: #555 !important; border-color: #111 !important; }
:is(html.dark-mode, body.dark-mode) .hw-scroll-box::-webkit-scrollbar-thumb:hover { background: #777 !important; }

/* --- 4. Tlačítka pro Roky v levém sloupci (TOC) --- */
.hw-toc-year-btn {
    display: block; padding: 10px; margin: 5px 0;
    background: #FFC000; color: #000 !important; font-weight: bold;
    text-decoration: none; border-radius: 4px; text-align: center;
    transition: transform 0.2s, filter 0.2s;
}
.hw-toc-year-btn:hover { filter: brightness(1.1); transform: scale(1.02); }

/* --- 5. Přehrávač: VU Meter Power Button --- */
.vu-power-btn {
    transition: all 0.2s;
    font-size: 10px; padding: 2px 6px; border-radius: 3px; cursor: pointer; border: 1px solid;
}
.vu-power-btn.vu-active { background: #cc0000; color: #fff; border-color: #ff6666; box-shadow: 0 0 5px #ff0000; }
.vu-power-btn.vu-inactive { background: #e0e0e0; color: #666; border-color: #ccc; box-shadow: none; }
:is(html.dark-mode, body.dark-mode) .vu-power-btn.vu-inactive { background: #222 !important; color: #666 !important; border-color: #111 !important; }














/* =========================================
   HW CHART SECTION (Základní layout grafu)
   ========================================= */
#hw-chart-section {
    display: none;
    width: 100%;
    max-width: 1000px;
    margin: 10px auto;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
}

.hw-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

#chart-title {
    margin: 0;
    color: #FFC000;
    font-family: sans-serif;
    font-size: 14px;
}

.hw-chart-subtitle {
    color: #888;
}

.hw-chart-canvas-container {
    height: 150px;
    position: relative;
}

/* =========================================
   DYNAMICKÉ TŘÍDY Z JAVASCRIPTU (Stavy a specifikace)
   ========================================= */
.hw-loading-opacity {
    opacity: 0.5;
}

.hw-cpu-model-title {
    color: #ffffff;
}

.hw-title-unknown {
    color: #FFC000;
}


.hw-spec-img-wrapper {
    float: right;
    margin-left: 5px;
    margin-bottom: 5px;
}

.hw-spec-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border: 1px solid #eee;
    padding: 2px;
    background: #fff;
}

.hw-spec-row-dashed {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #eee;
    color: #666;
    font-size: 0.7rem;
    line-height: 1.2;
}

.hw-spec-setup-row {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 2px solid #ccc;
    color: #444;
}

.hw-spec-setup-item {
    font-size: 0.7rem;
    margin-bottom: 2px;
}

.hw-spec-flex-row {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}


/* Výběry a tlačítka */
.hw-row-selected {
    background-color: #444 !important;
    color: #fff !important;
}

.hw-btn-success {
    border-color: #FFC000 !important;
    color: #FFC000 !important;
}







/* =========================================
   VGA TOOL - Tlačítka a stavy
   ========================================= */

/* Aktivní tlačítko pro režim VGA */
.vga-btn-active-vga {
    background: #FFC000 !important;
    color: #000 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Aktivní tlačítko pro režim CPU */
.vga-btn-active-cpu {
    background: #0071C5 !important;
    color: #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Neaktivní tlačítko pro změnu režimu */
.vga-btn-inactive {
    background: transparent !important;
    color: #666 !important;
    box-shadow: none !important;
}

/* Efekt při ukládání obrázku do schránky */
.vga-btn-success {
    border-color: #FFC000 !important;
    color: #FFC000 !important;
}

/* =========================================
   VGA TOOL - Zástupné ikony a obrázky
   ========================================= */

/* Zástupné ikony (přesýpací hodiny, otazník atd.) */
.vga-icon-placeholder {
    color: #eee;
    font-size: 30px;
}

/* Velká varianta ikony pro náhled */
.vga-icon-placeholder.vga-icon-large {
    font-size: 40px;
}

/* Obrázek VGA/CPU přizpůsobený kontejneru */
.vga-fluid-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Avatary pro procesory (když nemají obrázek) */
.vga-cpu-avatar {
    width: 60px;
    height: 60px;
    background: #444;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    margin: 0 auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.vga-cpu-avatar-large {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    border: 3px solid rgba(255,255,255,0.3);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* =========================================
   VGA TOOL - Dynamické třídy
   ========================================= */

/* Překrytí při načítání AJAXem */
.vga-loading-opacity {
    opacity: 0.5;
}

/* Zvýraznění aktuálně vybraného řádku v grafu */
.vga-row-selected {
    background: #444 !important;
}














/* =========================================
   SCROLL NAHORU TLAČÍTKO
   ========================================= */
.hw-btt-icon {
    width: 20px;
    height: 20px;
}

/* =========================================
   NOTEBOOKY (LAPTOPS) - Modály a UI
   ========================================= */
.lap-filter-input-cpu {
    width: 110px;
}

.lap-filter-input-ram {
    width: 90px;
}

.lap-filter-input-search {
    width: 120px;
}

/* Průhlednost při načítání */
.lap-loading-opacity {
    opacity: 0.5;
}

/* Vypnutí prokliku při načítání/neaktivitě */
.lap-disabled-opacity {
    opacity: 0.5;
    pointer-events: none;
}

/* Pokud je už notebook vybrán */
.lap-item-already-selected {
    opacity: 1; /* Musí být 1 kvůli štítku, který ztmavuje JS */
    background-color: #151515;
    cursor: not-allowed;
    position: relative;
    border-color: #333;
}

.lap-item-text-dimmed {
    opacity: 0.6;
}

/* Zářivý štítek JIŽ VYBRÁNO */
.hw-already-lbl {
    position: absolute;
    right: 4px;
    bottom: 4px;
    color: #FFC000;
    font-weight: bold;
    font-size: 10px;
    background: rgba(0,0,0,0.9);
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid #FFC000;
    box-shadow: 0 0 10px rgba(255, 192, 0, 0.4);
    z-index: 10;
    letter-spacing: 1px;
}

/* Aktivní řádek v tabulce výsledků */
.lap-row-selected {
    background-color: #444 !important;
    color: #fff !important;
}

/* =========================================
   NOTEBOOKY - Legenda grafu
   ========================================= */
.lap-custom-legend-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #444;
}

.lap-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lap-legend-color-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.lap-legend-text {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
}

/* =========================================
   SCROLLBOXY
   ========================================= */
.hw-scroll-box {
    max-height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
}

.hw-scroll-box::-webkit-scrollbar {
    width: 12px;
}

.hw-scroll-box::-webkit-scrollbar-track {
    background: #111;
    border-left: 1px solid #333;
}

.hw-scroll-box::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 6px;
    border: 3px solid #111;
}

.hw-scroll-box::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* =========================================
   ŽEBŘÍČKY HER (LEADERBOARDS)
   ========================================= */
/* Neonový tooltip struktura */
.lb-neon-tooltip {
    position: absolute;
    z-index: 9999;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.lb-neon-tooltip-inner {
    background: #0a0a0a;
    border: 2px solid; /* Barvu určuje JS */
    border-radius: 8px;
    padding: 15px;
    color: #fff;
    font-family: sans-serif;
    min-width: 250px;
}

.lb-neon-tooltip-title {
    text-align: center;
    margin: 0 0 15px 0;
    border-bottom: 1px solid; /* Barvu určuje JS */
    padding-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
}

.lb-neon-tooltip-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.lb-neon-tooltip-key {
    padding: 5px 10px 5px 0;
    border-bottom: 1px solid #222;
    color: #aaa;
}

.lb-neon-tooltip-val {
    padding: 5px 0 5px 0;
    border-bottom: 1px solid #222;
    text-align: right;
    font-weight: bold;
}

/* Seznam CPU v žebříčku */
.lb-cpu-list-header {
    padding: 6px 15px;
    font-size: 14px;
    font-weight: bold;
    background: #222;
    margin-top: 5px;
}

.lb-cpu-list-item {
    padding: 8px 15px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    border-bottom: 1px solid #333;
}

.lb-cpu-list-count {
    color: #FFC000;
    font-size: 11px;
}

/* Tlačítka pro filtrování podle roku (vlastní stylování s !important kvůli překrytí v JS) */
.lb-year-filter-btn {
    padding: 4px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: 0.2s;
    outline: none;
    border: none !important;
}

.lb-year-filter-btn.active {
    background: #FFC000 !important;
    color: #000000 !important;
}

.lb-year-filter-btn.inactive {
    background: #444444 !important;
    color: #aaaaaa !important;
}









/* =========================================
   SPOLEČNÉ TŘÍDY PRO VŠECHNY LEADERBOARDY
   ========================================= */

/* Deaktivované/načítající se roletky */
.hw-dropdown-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Hlavičky výrobců v seznamech */
.hw-lb-list-header {
    padding: 6px 15px;
    font-size: 14px;
    font-weight: bold;
    background: #222;
    margin-top: 5px;
}

/* Jednotlivé položky procesorů/grafik v seznamu */
.hw-lb-list-item {
    padding: 8px 15px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;
    border-bottom: 1px solid #333;
}

/* Počítadla grafických karet a CPU v seznamech */
.hw-lb-list-item-count-cpu { color: #0071C5; font-size: 11px; }
.hw-lb-list-item-count-vga { color: #FFC000; font-size: 11px; }

/* Položky pro Aplikace (Mají lehce jiný formát než CPU/VGA) */
.hw-lb-list-item-app {
    padding: 8px 15px;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    background: transparent;
}

/* Oddělovač (čára) mezi testy */
.hw-lb-list-divider {
    border: 0;
    border-top: 1px solid #444;
    margin: 5px 0;
}

/* =========================================
   TLAČÍTKA PRO FILTROVÁNÍ ROKŮ (Společný layout)
   ========================================= */
.hw-year-filter-btn {
    padding: 4px 12px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    transition: 0.2s;
    outline: none;
    border: none !important;
}

/* Neaktivní stav (Stejný pro všechny moduly) */
.hw-year-filter-btn.inactive {
    background: #444444 !important;
    color: #aaaaaa !important;
}

/* Aktivní stavy (Barevné rozlišení podle modulů) */
.hw-year-btn-cpu.active    { background: #0071C5 !important; color: #ffffff !important; } /* Modrá - CPU Scaling */
.hw-year-btn-3dmark.active { background: #E31937 !important; color: #ffffff !important; } /* Červená - 3DMark */
.hw-year-btn-soft.active   { background: #28a745 !important; color: #ffffff !important; } /* Zelená - 3D Soft */
.hw-year-btn-app.active    { background: #9b59b6 !important; color: #ffffff !important; } /* Fialová - Apps */








/*---- příčna tabulek v CPU */


/*/* ==========================================================================
   DOKONALÝ VZHLED KARET – MAXIMÁLNĚ PŘITLAČENÉ K SOBĚ
   ========================================================================== */

/* Nadpis procesoru a Frekvence/Rok - scvaknutí mezer */
.hw-card h3,
.hw-card .name-target {
    margin: 0 0 3px 0 !important; 
    padding: 0 !important;
    line-height: 1.1 !important; 
}

.hw-card .info-target {
    margin: 0 0 5px 0 !important; 
    padding: 0 !important;
    line-height: 1.1 !important;
}

/* 1. Fotka nad tabulkou – co nejmenší mezera */
.hw-card-top-img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;                  /* byl 55px → výrazně menší */
    margin: 3px 0 2px 0;           /* téměř žádná mezera */
}

.hw-card-top-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
    transition: transform 0.2s ease;
}

/* 2. Hlavní obal specifikací – minimální mezera nad čarou */
.hw-specs-container {
    margin-top: 2px !important;     /* byl 5px → skoro nalepené */
    border-top: 1px solid var(--hw-border) !important;
    padding-top: 2px !important;    /* byl 5px */
    transition: none !important;
}

/* 3. Řádky specifikací – maximálně těsné */
.hw-spec-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 3px 0 !important;      /* byl 6px → polovina */
    border-bottom: 1px solid rgba(128,128,128,0.2) !important;
    font-size: 11px !important;
}

.hw-spec-row:last-child {
    border-bottom: none !important;
}

/* Popisky vlevo */
.hw-spec-row strong {
    color: #777 !important;
    font-weight: normal !important;
    white-space: nowrap !important;
}

/* Hodnoty vpravo */
.hw-spec-row span {
    color: #000 !important;
    font-weight: bold !important;
    text-align: right !important;
    word-break: break-word !important;
}

/* === DARK MODE – stejně těsné === */
:is(html.dark-mode, body.dark-mode) .hw-specs-container {
    border-top-color: #444 !important;
}

:is(html.dark-mode, body.dark-mode) .hw-spec-row {
    border-bottom-color: #333 !important;
}

:is(html.dark-mode, body.dark-mode) .hw-spec-row strong {
    color: #aaa !important;
}

:is(html.dark-mode, body.dark-mode) .hw-spec-row span {
    color: #fff !important;
}



/* ==========================================================================
   ZÁŘIVĚJŠÍ BÍLÝ TEXT PRO ODSTAVCE V NOČNÍM REŽIMU
   ========================================================================== */
:is(html.dark-mode, body.dark-mode) .hw-text-content p,
:is(html.dark-mode, body.dark-mode) .site-main p,
:is(html.dark-mode, body.dark-mode) .entry-content p {
    color: #ffffff !important;
    opacity: 1 !important;
}


/* ==========================================================================
   PŘEPÍNAČ MÓDŮ (VGA / CPU) - Sjednoceno a opraveno
   ========================================================================== */
/* Hlavní obal přepínače */
.vga-mode-switch {
    display: inline-flex;
    background: #e1e8ed;
    padding: 4px;
    border-radius: 20px;
    border: 1px solid #dce4ec;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;
}

/* Obal v nočním režimu */
:is(html.dark-mode, body.dark-mode) .vga-mode-switch { 
    background: #111111 !important; 
    border-color: #444444 !important; 
}

/* --- NEAKTIVNÍ TLAČÍTKA --- */
.vga-mode-opt {
    padding: 6px 16px;
    cursor: pointer;
    border-radius: 16px;
    color: #555555; /* Den: Tmavě šedá */
    transition: all 0.2s ease;
}

/* Neaktivní tlačítka v nočním režimu (TADY BYL PROBLÉM) */
:is(html.dark-mode, body.dark-mode) .vga-mode-switch .vga-mode-opt:not(.active) { 
    color: #dddddd !important; /* V noci bude neaktivní text svítit skoro bíle! */
}

/* Efekt při najetí myší na neaktivní tlačítko */
.vga-mode-opt:hover {
    color: #000000;
    background: rgba(0,0,0,0.05);
}
:is(html.dark-mode, body.dark-mode) .vga-mode-switch .vga-mode-opt:not(.active):hover { 
    color: #ffffff !important; 
    background: rgba(255,255,255,0.15) !important; 
}

/* --- AKTIVNÍ TLAČÍTKA (VGA / CPU) --- */
.vga-mode-opt.active {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: default;
    pointer-events: none; 
}

/* Aktivní VGA (Zlatá) */
#btn-mode-vga.active { 
    color: #000000 !important; 
    background: #FFC000 !important; 
    border: 1px solid #FFC000 !important; 
}
:is(html.dark-mode, body.dark-mode) #btn-mode-vga.active { 
    color: #000000 !important; 
    background: #FFC000 !important; 
    border-color: #FFC000 !important; 
}

/* Aktivní CPU (Modrá) */
#btn-mode-cpu.active { 
    color: #ffffff !important; 
    background: #0071C5 !important; 
    border: 1px solid #005a9e !important; 
}
:is(html.dark-mode, body.dark-mode) #btn-mode-cpu.active { 
    color: #ffffff !important; 
    background: #0071C5 !important; 
    border-color: #005a9e !important; 
}











/* Inforator css */

/* style.css - Kompaktní tmavý widget v jednom celku */

.informator-container {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    max-width: 100%; /* Vyplní dostupnou šířku panelu */
    margin: 15px 0;
    overflow: hidden;
    font-family: sans-serif;
    color: #ffffff;
}

/* Horní pruh s hodnotami vedle sebe */
.informator-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px;
    background: #222; /* O něco světlejší pruh pro odlišení */
    border-bottom: 1px solid #333;
}

.informator-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
    opacity: 0.5; /* Neaktivní položky jsou lehce pohaslé */
}

.informator-item.active, .informator-item:hover {
    opacity: 1;
}

.informator-icon {
    font-size: 16px;
}

.informator-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.informator-label {
    font-size: 9px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.informator-value {
    font-size: 18px;
    font-weight: 800;
}

/* Svislé oddělovací čáry */
.informator-divider {
    width: 1px;
    height: 25px;
    background-color: #444;
}

/* Spodní část pro graf */
.informator-chart-box {
    padding: 10px 15px;
    background: #1a1a1a;
    position: relative; /* DŮLEŽITÉ: Nutné pro správné chování Chart.js */
    height: 120px;      /* DŮLEŽITÉ: Pevná výška, aby graf věděl, kam se roztáhnout */
    width: 100%;
    box-sizing: border-box;
}

#informator-chart-title {
    margin: 0 0 8px 0;
    font-size: 10px;
    color: #999;
    text-align: center;
    text-transform: uppercase;
}




.hw-container,
.site-main,
.entry-content,
.hw-text-content {
    /* Donutí prohlížeč počítat padding do celkové šířky 100 % */
    box-sizing: border-box !important;
    max-width: 100% !important;
    
    /* Vynutí zalomení textu, aby nikdy neutekl z obrazovky */
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}














/* ==========================================================================
   MOBILNÍ OPTIMALIZACE SROVNÁVACÍ MATICE (Maximální smrsknutí)
   ========================================================================== */
@media (max-width: 800px) {
    /* 1. Základ tabulky: Povolíme zalamování textu */
    .hw-matrix-table {
        white-space: normal !important; 
        word-wrap: break-word !important;
    }

    /* 2. Datové sloupce (Procesory/VGA): Zkrocení šířky, aby se vešly dva vedle sebe */
    .hw-matrix-table th, 
    .hw-matrix-table td {
        white-space: normal !important; 
        word-wrap: break-word !important;
        min-width: 80px !important;    /* Nesmí se smrsknout do nečitelnosti */
        max-width: 130px !important;    /* ZABIJÁK: Zabrání sloupci se roztahovat! */
        padding: 6px 5px !important;    /* Extrémně zmenšený padding */
        font-size: 11px !important;     /* Zmenšené písmo */
        line-height: 1.2 !important;    /* Řádky blíž k sobě */
    }

    /* 3. Extrémní zmáčknutí prvního sloupce (Parametry) */
    /* Dáváme to záměrně až pod bod 2, aby to přebilo ty širší hodnoty nahoře */
    .hw-matrix-table .hw-matrix-corner,
    .hw-matrix-table .hw-matrix-row-title {
        width: 85px !important;         /* Natvrdo úzký sloupec */
        min-width: 85px !important;     /* Nepovolí zvětšení */
        max-width: 85px !important;     /* Nepovolí zvětšení */
        overflow-wrap: break-word !important; 
        word-break: break-word !important; /* Rozlomí i extrémně dlouhá slova */
        padding: 6px 4px !important;    /* Minimální "vzduch" okolo textu */
        font-size: 10px !important;     /* Zmenšíme písmo, ať se tam víc vejde */
        line-height: 1.1 !important;    
    }

    /* 4. Zmenšení náhledových obrázků v hlavičce (ušetří spoustu místa) */
    .hw-matrix-thumb {
        width: 50px !important;
        height: 40px !important;
        margin-bottom: 4px !important;
    }
}



/* --- BOXÍK REDAKTORA --- */
.hw-redaktor-box {
    background-color: #1a1a1a; /* Tmavé pozadí, ať to sedí k tvému webu */
    border: 1px solid #333;
    border-radius: 4px;
    padding: 20px;
    margin: 30px 0;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    position: relative;
    color: #ddd; /* Světlý text pro tmavý web */
}

.hw-redaktor-hlavicka {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px dotted #444;
    padding-bottom: 15px;
}

.hw-redaktor-foto {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
    border-radius: 10% !important; /* Dělá zaoblenou kostičku. Pokud chceš kolečko, dej 50% */
    object-fit: cover !important;
    border: 2px solid #555 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
    margin-right: 15px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.hw-redaktor-meta {
    display: flex;
    flex-direction: column;
}

.hw-redaktor-stitek {
    /* Odtud zmizelo 'color: #111 !important;' */
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 4px;
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.15); /* Jemný rámeček, aby tmavé štítky nesplynuly s okolím */
}

.hw-redaktor-jmeno {
    font-size: 18px;
    color: #fff;
    font-family: 'Courier New', Courier, monospace; 
}

.hw-redaktor-text {
    font-size: 16px;
    line-height: 1.6;
    font-style: normal; /* Zruší kurzívu a text bude rovný */
    font-family: inherit; /* Pojistka: přikáže boxíku použít přesně ten samý font, jaký má zbytek webu */
}



/* --- STYLY PRO STRÁNKU REDAKCE --- */
.hw-redakce-grid {
    display: grid;
    /* Auto-fit s min. šířkou 350px vytvoří na PC 3 sloupce, které se roztáhnou (1fr) */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    width: 100% !important; /* Přinutí kontejner ignorovat omezení šablony */
    max-width: 100% !important;
    margin: 40px auto !important; /* Natvrdo vycentruje celý grid */
    padding: 0 !important; /* Vynuluje případný nechtěný padding ze šablony */
    box-sizing: border-box;
}

.hw-profil-karta {
    width: 100% !important; /* Karta musí vyplnit celou šířku své grid buňky */
    box-sizing: border-box;
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-top: 5px solid; 
    border-radius: 6px;
    padding: 20px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    color: #ddd;
    display: flex;
    flex-direction: column;
    height: 100%; 
}

.hw-profil-hlavicka {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px dotted #444;
    padding-bottom: 15px;
}

a.hw-foto-odkaz {
    display: inline-block;
    margin-right: 15px;
}

.hw-profil-foto {
    width: 80px;
    height: 80px;
    border-radius: 10%;
    object-fit: cover;
    border: 2px solid #555;
    transition: transform 0.2s ease, border-color 0.2s ease;
    display: block; 
}

.hw-profil-foto:hover {
    transform: scale(1.05);
    border-color: #888;
}

.hw-profil-jmeno {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    margin: 0 0 5px 0;
    font-family: 'Courier New', Courier, monospace;
}

.hw-profil-role {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.hw-profil-popis {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    font-style: italic;
    color: #bbb;
}

.hw-profil-zajmy {
    margin-top: auto; 
    font-size: 13px;
    line-height: 1.5;
    background: #222;
    padding: 10px 15px;
    border-radius: 4px;
    border-left: 2px solid #444;
}
.hw-profil-zajmy strong { color: #eee; }






/* --- WIDGET: TEAM SNŮ (NEPRŮSTŘELNÁ VERZE) --- */
.hw-widget-team-box {
    position: relative; 
    background-color: #171717 !important; 
    border: 1px solid #333 !important;
    border-top: 3px solid #ffcc00 !important; 
    border-radius: 5px !important;
    /* ZMĚNA ZDE: Nahradíme "padding: 15px" tímto rozepsaným. 
       Pořadí je: nahoře, vpravo, dole, vlevo. Nahoře dáme jen 5px (nebo klidně 0) */
    padding: 5px 15px 15px 15px !important;
    text-align: center !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3) !important;
    transition: all 0.2s ease-in-out !important;
    margin-bottom: 20px !important;
    display: block !important;
}

.hw-widget-team-box:hover {
    background-color: #222 !important;
    border-color: #555 !important;
    transform: translateY(-2px); 
    box-shadow: 2px 4px 8px rgba(0,0,0,0.5) !important;
}

/* Neviditelný odkaz, který překryje celý box */
.hw-team-full-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    text-decoration: none !important;
}

.hw-team-titulek {
    color: #ffcc00 !important; 
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    letter-spacing: 1px !important;
    /* PŘIDÁNO: Zruší neviditelný vzduch kolem textu */
    line-height: 1 !important; 
}
.hw-team-text {
    color: #bbb !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
}

.hw-team-avatary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.hw-team-avatary img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    border-radius: 50% !important; 
    border: 2px solid #171717 !important; 
    margin-left: -10px !important; 
    margin-bottom: 0 !important;
    object-fit: cover !important;
    transition: margin 0.2s ease !important;
    box-sizing: content-box !important;
}

.hw-team-avatary img:first-child {
    margin-left: 0 !important;
}

.hw-team-plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background-color: #333 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: bold !important;
    border: 2px solid #171717 !important;
    margin-left: -10px !important;
    z-index: 1 !important;
    box-sizing: content-box !important;
}

.hw-widget-team-box:hover .hw-team-avatary img,
.hw-widget-team-box:hover .hw-team-plus {
    margin-left: -5px !important; 
}

.hw-widget-team-box:hover .hw-team-avatary img:first-child {
    margin-left: 0 !important;
}




















/* 1. Hlavní obal WP galerie - flexbox pro rozházení vedle sebe */
.gallery {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0 !important;
}

/* 2. Obal jednotlivé fotky - natočení a z-index */
.gallery .gallery-item {
    width: auto !important;
    max-width: 220px;
    margin: 0 !important;
    transition: transform 0.3s ease, z-index 0s;
    position: relative;
}

/* 3. Samotná fotka - tenký 1px rámeček (výchozí barvu jsem dal šedou, můžeš změnit) */
.gallery .gallery-item img {
    border: 1px solid #555 !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    width: 100%;
    height: auto;
    display: block;
    transition: border-color 0.3s ease; /* Plynulá změna barvy rámu */
}

/* 4. Rozházení fotek (Natočení) */
.gallery .gallery-item:nth-child(odd) { transform: rotate(-3deg); }
.gallery .gallery-item:nth-child(even) { transform: rotate(2deg); }
.gallery .gallery-item:nth-child(3n) { transform: rotate(-1deg); }
.gallery .gallery-item:nth-child(4n) { transform: rotate(4deg); }

/* 5. HOVER EFEKT - srovnání fotky, zvětšení */
.gallery .gallery-item:hover {
    transform: rotate(0deg) scale(1.1);
    z-index: 10;
}

/* 5b. HOVER EFEKT - zlatý rámeček na fotce */
.gallery .gallery-item:hover img {
    border-color: #ffd700 !important; /* Zlatá barva (případně použij var(--hw-gold)) */
}

/* 6. Skrytí textových popisků WP galerie */
.gallery .gallery-caption {
    display: none !important;
}

/* --- TOTÁLNÍ ČISTKA ŠABLONY: Zabití žlutých čar a pozadí uvnitř galerie --- */
.gallery .gallery-item,
.gallery .gallery-icon,
.gallery .gallery-item figure,
.gallery .gallery-item dl,
.gallery .gallery-item dt,
.gallery .gallery-item a {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    padding: 0 !important;
}

/* Ujistíme se, že i samotný obrázek má čisté pozadí pod naším rámečkem */
.gallery .gallery-item img {
    background-image: none !important;
    outline: none !important;
}

/* Skrytí 5. a další fotky (Fancybox si je ale stále najde v kódu) */
.gallery .hw-hidden-photo {
    display: none !important;
}

/* Vzhled překryvné vrstvy s číslem na 4. fotce */
.gallery .hw-more-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Tmavý filtr */
    color: #ffd700; /* Tvá zlatá barva */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2em;
    font-weight: bold;
    font-family: sans-serif;
    pointer-events: none; /* Kliknutí projde skrz text rovnou na obrázek */
}











/* --- VYLEPŠENÍ VZHLEDU KOMENTÁŘŮ --- */

/* 1. Obal každého jednotlivého komentáře (vytvoří efekt karty) */
.comment-list li.comment {
    margin-bottom: 30px; /* Mezera mezi jednotlivými komentáři */
    padding: 20px; /* Vnitřní odsazení, aby text nebyl nalepený na kraji */
    background: rgba(255, 255, 255, 0.03); /* Velmi jemný světlejší podklad */
    border-radius: 8px; /* Zakulacené rohy */
    border: 1px solid rgba(255, 255, 255, 0.05); /* Jemná linka kolem */
    list-style-type: none; /* Pro jistotu schová odrážky, kdyby tam nějaké byly */
}

/* 2. Odsazení samotného textu komentáře od fotky a jména */
.comment-content {
    margin-top: 15px;
    line-height: 1.6; /* Zvětší řádkování textu pro lepší čitelnost */
}

/* 3. Drobná mezera mezi jménem a datem */
.comment-metadata {
    margin-top: 4px;
    font-size: 0.9em; /* Malinko zmenší datum, aby neřvalo tolik jako jméno */
}

/* 4. Odsazení fotky (avatara) od textu */
.comment-author img.avatar {
    margin-right: 15px;
    border-radius: 50%; /* Udělá z fotky hezké kolečko (volitelné) */
}

/* 5. Odsazení tlačítka Odpovědět */
.reply {
    margin-top: 20px;
}

/* 6. Velká mezera mezi starými komentáři a polem pro psaní nového */
#respond {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Dělící čára */
}











/* =========================================
   RUBRIKY A ŠTÍTKY (Tlačítka)
   ========================================= */
.hw-categories, .hw-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px; /* Mezera mezi štítky */
}

/* Skrytí výchozích mezer, které WP někdy generuje */
.hw-categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hw-categories a, .hw-tags a {
    background-color: #1a1a1a; /* Případně var(--hw-bg-dark) pokud máš */
    color: var(--hw-gold);
    padding: 4px 12px;
    border: 1px solid var(--hw-border);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.hw-categories a:hover, .hw-tags a:hover {
    background-color: #333;
    border-color: var(--hw-gold);
}

/* =========================================
   POST NAVIGATION (Další / Předchozí)
   ========================================= */
.post-navigation {
    margin: 40px 0;
    padding: 20px 0;
    border-top: 1px solid var(--hw-border);
    border-bottom: 1px solid var(--hw-border);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
}

.post-navigation .nav-previous, 
.post-navigation .nav-next {
    flex: 1;
}

.post-navigation .nav-next {
    text-align: right;
}

/* Výchozí stav (tmavé pozadí, zlatý rámeček, zlatý text) */
.post-navigation a {
    display: block;
    padding: 15px 20px;
    background-color: #0a0a0a; /* Tmavé pozadí jako na obrázku */
    color: var(--hw-gold);
    border: 1px solid var(--hw-gold); /* Žlutý/Zlatý rámeček */
    border-radius: 6px;
    text-decoration: none;
    height: 100%;
    box-sizing: border-box;
    
    /* Přechody pro plynulý efekt */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
}

/* Hover stav (nadzvednutí, záře, bělejší rámeček) */
.post-navigation a:hover {
    background-color: #0a0a0a; /* Pozadí zůstává tmavé */
    color: var(--hw-gold); /* Text zůstává zlatý */
    border-color: #fff; /* Rámeček se při záři mírně rozjasní do běla (podle obrázku) */
    
    /* Zvednutí nahoru o 4 pixely */
    transform: translateY(-4px); 
    
    /* Zlatá záře (rozmazaný stín) */
    box-shadow: 0 0 20px 2px rgba(255, 215, 0, 0.6);
}

.post-navigation .nav-subtitle {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.post-navigation .nav-title {
    display: block;
    font-weight: bold;
    margin-top: 5px;
}