/* ==========================================================================
   FlexBoxer '95: Stacja Egzaminacyjna CKE INF.03
   Stylistyka: Klasyczny 16-bit / Windows 95 Oldschool OS + Retro Arcade
   - Zero zaokrągleń (border-radius: 0px)
   - Prawdziwe fazowane ramki 3D (Outset / Inset Bevel)
   - Klasyczne paski tytułowe okien (#000080 -> #1084d0) + przyciski [_][□][X]
   - Licznik punktów LED w stylu Saper / Pinball '95
   - Kwadrant 3: Papierowy Rysunek 1 CKE w oknie Podglądu Wydruku
   - Kwadrant 4: Strona WWW w oknie klasycznej przeglądarki Navigator '95
   ========================================================================== */

:root {
    --win-desktop: #008080;
    --win-face: #c0c0c0;
    --win-face-light: #dfdfdf;
    --win-highlight: #ffffff;
    --win-shadow: #808080;
    --win-dark-shadow: #000000;
    --win-title-navy: #000080;
    --win-title-blue: #1084d0;
    --win-doc-bg: #fffff6;
    --terminal-bg: #080d18;
    --arcade-yellow: #ffcc00;
    --arcade-green: #00ff66;
    --scrollbar-thumb: #808080;
    --scrollbar-track: #dfdfdf;
}

/* Custom Scrollbars w stylu klasycznym */
.scroller {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

@supports not (scrollbar-color: auto) {
    .scroller::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
    .scroller::-webkit-scrollbar-thumb {
        background: #c0c0c0;
        border-top: 2px solid #ffffff;
        border-left: 2px solid #ffffff;
        border-right: 2px solid #404040;
        border-bottom: 2px solid #404040;
    }
    .scroller::-webkit-scrollbar-track {
        background: #dfdfdf;
    }
}

body.theme-flexboxer {
    background-color: var(--win-desktop);
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 0);
    background-size: 4px 4px;
    color: #000000;
    overflow: hidden;
    height: 100vh;
    margin: 0;
    font-family: 'Tahoma', 'MS Sans Serif', system-ui, sans-serif;
    border-radius: 0 !important;
}

/* ==========================================================================
   Górny Pasek Zadań (Windows 95 Taskbar + Cyfrowy Licznik LED)
   ========================================================================== */
.top-navbar {
    height: 44px !important;
    padding: 0 8px !important;
    background: var(--win-face) !important;
    border-top: 2px solid var(--win-highlight) !important;
    border-bottom: 2px solid var(--win-dark-shadow) !important;
    box-shadow: inset 0 -1px 0 var(--win-shadow) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    border-radius: 0 !important;
}

.navbar-brand-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.win95-portal-btn {
    text-decoration: none;
    white-space: nowrap;
    height: 26px !important;
    padding: 0 8px !important;
}

body.theme-flexboxer.embed-mode .win95-portal-btn {
    display: none;
}

/* Przycisk Start: FlexBoxer '95 */
.win95-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--win-face);
    border-top: 2px solid var(--win-highlight);
    border-left: 2px solid var(--win-highlight);
    border-right: 2px solid var(--win-dark-shadow);
    border-bottom: 2px solid var(--win-dark-shadow);
    box-shadow: inset -1px -1px 0 var(--win-shadow), inset 1px 1px 0 var(--win-face-light);
    font-family: 'Pixelify Sans', 'Tahoma', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #000000;
    user-select: none;
}

.brand-accent {
    color: #000080;
}

.brand-badge {
    background: #000080;
    color: #ffff00;
    font-family: 'Silkscreen', monospace;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 0;
}

/* Wklęsły wyświetlacz LED (styl Saper / Pinball '95) */
.win95-led-panel {
    background: #000000;
    border-top: 2px solid var(--win-shadow);
    border-left: 2px solid var(--win-shadow);
    border-right: 2px solid var(--win-highlight);
    border-bottom: 2px solid var(--win-highlight);
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
}

.brand-progress-badge {
    font-family: 'Silkscreen', 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--arcade-green);
    letter-spacing: 0.03em;
    text-shadow: 0 0 6px rgba(0, 255, 102, 0.45);
    background: transparent;
    border: none;
    padding: 0;
}

/* Pasek 30 klawiszy poziomów (1..30) */
.levels-bar-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow-x: auto;
}

.level-pills {
    display: flex;
    align-items: center;
    gap: 2px;
}

.level-pill {
    width: 22px !important;
    height: 24px !important;
    font-family: 'Tahoma', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--win-face) !important;
    color: #000000 !important;
    border-top: 2px solid var(--win-highlight) !important;
    border-left: 2px solid var(--win-highlight) !important;
    border-right: 2px solid var(--win-dark-shadow) !important;
    border-bottom: 2px solid var(--win-dark-shadow) !important;
    box-shadow: inset -1px -1px 0 var(--win-shadow) !important;
    cursor: pointer;
}

.level-pill:hover:not(:disabled) {
    background: #dcdcdc !important;
}

/* Aktywny poziom wygląda jak wciśnięty do środka klawisz 3D */
.level-pill.active {
    background: #ffffaa !important;
    color: #000080 !important;
    border-top: 2px solid var(--win-dark-shadow) !important;
    border-left: 2px solid var(--win-dark-shadow) !important;
    border-right: 2px solid var(--win-highlight) !important;
    border-bottom: 2px solid var(--win-highlight) !important;
    box-shadow: inset 1px 1px 0 var(--win-shadow) !important;
    font-weight: 900 !important;
}

/* Ukończony poziom */
.level-pill.completed {
    background: #b8f5c8 !important;
    color: #004d1a !important;
}

.level-pill.completed.active {
    background: #52e080 !important;
    color: #000000 !important;
}

/* Zablokowany poziom (wytłoczony szary tekst Win95) */
.level-pill.locked {
    background: #b8b8b8 !important;
    color: #707070 !important;
    font-size: 0.55rem !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.btn-icon {
    width: 28px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
    background: var(--win-face);
    border-top: 2px solid var(--win-highlight);
    border-left: 2px solid var(--win-highlight);
    border-right: 2px solid var(--win-dark-shadow);
    border-bottom: 2px solid var(--win-dark-shadow);
    box-shadow: inset -1px -1px 0 var(--win-shadow);
    color: #000000;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
}

.btn-icon:active {
    border-top: 2px solid var(--win-dark-shadow);
    border-left: 2px solid var(--win-dark-shadow);
    border-right: 2px solid var(--win-highlight);
    border-bottom: 2px solid var(--win-highlight);
}

/* ==========================================================================
   Wspólna Konstrukcja Okien Systemu Windows 95 (4 Kwadranty)
   ========================================================================== */
.game-container {
    height: calc(100vh - 44px);
    width: 100vw;
    overflow: hidden;
}

.game-workspace {
    display: grid !important;
    grid-template-columns: 44% 56% !important;
    gap: 8px !important;
    height: 100% !important;
    width: 100% !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

.workspace-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Każda karta kwadrantu jest oknem programu Windows 95 */
.quadrant-card {
    background: var(--win-face);
    border-radius: 0 !important;
    border-top: 2px solid var(--win-highlight);
    border-left: 2px solid var(--win-highlight);
    border-right: 2px solid var(--win-dark-shadow);
    border-bottom: 2px solid var(--win-dark-shadow);
    box-shadow: inset -1px -1px 0 var(--win-shadow), inset 1px 1px 0 var(--win-face-light), 3px 3px 0 rgba(0, 0, 0, 0.35);
    padding: 3px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 0;
}

/* Klasyczny granatowy pasek tytułowy okna Windows 95 */
.win95-titlebar {
    background: linear-gradient(90deg, var(--win-title-navy) 0%, var(--win-title-blue) 100%);
    color: #ffffff;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    user-select: none;
    flex-shrink: 0;
}

.win95-titlebar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.win95-app-icon {
    font-size: 0.82rem;
    flex-shrink: 0;
}

.win95-app-title {
    font-family: 'Pixelify Sans', 'Tahoma', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.win95-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.win95-ctrl-btn {
    width: 16px;
    height: 15px;
    background: var(--win-face);
    color: #000000;
    border-top: 1px solid var(--win-highlight);
    border-left: 1px solid var(--win-highlight);
    border-right: 1px solid var(--win-dark-shadow);
    border-bottom: 1px solid var(--win-dark-shadow);
    font-family: 'Tahoma', sans-serif;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 13px;
    text-align: center;
    padding: 0;
    user-select: none;
    cursor: default;
}

/* ==========================================================================
   KWADRANT 1: Okno Arkusz_CKE.hlp (Góra-Lewo)
   ========================================================================== */
.quadrant-task {
    flex: 0 0 auto;
    max-height: 48%;
}

.task-window-body {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    min-height: 0;
}

.task-top-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap;
}

.level-header-tags {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0 !important;
}

/* Etykiety statusu w stylu wklęsłych pól paska stanu Win95 */
.tag-pill {
    font-family: 'Tahoma', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 0 !important;
    border-top: 1px solid var(--win-shadow);
    border-left: 1px solid var(--win-shadow);
    border-right: 1px solid var(--win-highlight);
    border-bottom: 1px solid var(--win-highlight);
    background: #d8d8d8;
    color: #000000;
}

.tag-level {
    background: #000080;
    color: #ffffff;
}

.tag-phase {
    background: #e4e4e4;
    color: #000080;
}

.tag-exam {
    background: #ffffff;
    color: #000000;
    font-family: 'JetBrains Mono', monospace;
}

.tag-points {
    background: #000000;
    color: var(--arcade-yellow);
    font-family: 'Silkscreen', monospace;
    font-size: 0.62rem;
}

/* Wklęsłe jasne okno dokumentu pomocy CKE (#fffff6) */
.win95-doc-well {
    background: var(--win-doc-bg);
    border-top: 2px solid var(--win-shadow);
    border-left: 2px solid var(--win-shadow);
    border-right: 2px solid var(--win-highlight);
    border-bottom: 2px solid var(--win-highlight);
    box-shadow: inset 1px 1px 0 #000000;
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #000000;
}

.quadrant-task .level-title {
    font-family: 'Tahoma', sans-serif;
    font-size: 0.88rem !important;
    font-weight: 800;
    color: #000080;
    margin: 0 !important;
    line-height: 1.2;
    border-bottom: 1px dotted #808080;
    padding-bottom: 3px;
}

.quadrant-task .level-instruction {
    font-size: 0.75rem !important;
    color: #111111;
    line-height: 1.38 !important;
    margin: 0 !important;
}

.inline-code-pill {
    background: #e8eef5;
    color: #800000;
    border: 1px solid #94a3b8;
    padding: 0 4px;
    border-radius: 0 !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Checklista Wymagań CKE z okienkami wyboru [✓] — zwijany akordeon */
details.cke-checklist-box {
    background: #ffffff;
    border: 1px solid #808080;
    padding: 0;
    margin: 6px 0;
}

summary.cke-checklist-header {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #000080;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: #e0e0e0;
    border-bottom: 1px solid transparent;
}

summary.cke-checklist-header:hover {
    background: #d4d0c8;
}

details[open] summary.cke-checklist-header {
    border-bottom: 1px solid #808080;
}

summary.cke-checklist-header::-webkit-details-marker {
    display: none;
}

summary.cke-checklist-header::before {
    content: "►";
    font-size: 0.65rem;
    color: #000080;
    display: inline-block;
    width: 12px;
}

details[open] summary.cke-checklist-header::before {
    content: "▼";
}

.cke-checklist-badge {
    background: #000080;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 2px;
    letter-spacing: 0.5px;
}

.cke-checklist-badge.all-passed {
    background: #008000;
}

.cke-checklist-toggle-hint {
    font-size: 0.6rem;
    font-weight: normal;
    color: #666666;
    margin-left: auto;
}

details.cke-checklist-box .cke-checklist {
    list-style: none;
    margin: 0;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cke-checklist-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #1e293b;
    padding: 2px 5px;
    background: #f4f4f4;
    border: 1px solid #cccccc;
}

/* Kwadratowe okienko checkboxa w stylu Windows 95 */
.cke-check-icon {
    width: 14px;
    height: 14px;
    border-radius: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 900;
    background: #ffffff;
    color: transparent;
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    flex-shrink: 0;
}

.cke-checklist-item.completed {
    background: #d8f8e0;
    border-color: #008000;
    color: #003300;
    font-weight: 700;
}

.cke-checklist-item.completed .cke-check-icon {
    background: #008000;
    color: #ffffff;
}

.quadrant-task .cke-trap-box {
    margin: 6px 0 0 0 !important;
    padding: 6px 8px !important;
    background: #fffff0;
    border-top: 2px solid var(--win-shadow);
    border-left: 2px solid var(--win-shadow);
    border-right: 2px solid var(--win-highlight);
    border-bottom: 2px solid var(--win-highlight);
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: win95SlideDown 0.15s ease-out;
}

@keyframes win95SlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.cke-trap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cke-trap-badge {
    font-size: 0.74rem;
    font-weight: 900;
    color: #990000;
    font-family: 'Silkscreen', 'Pixelify Sans', monospace;
    letter-spacing: 0.5px;
}

.cke-trap-close-btn {
    background: var(--win-face);
    border-top: 1px solid var(--win-highlight);
    border-left: 1px solid var(--win-highlight);
    border-right: 1px solid var(--win-dark-shadow);
    border-bottom: 1px solid var(--win-dark-shadow);
    color: #000000;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    padding: 1px 5px;
    line-height: 1;
}

.cke-trap-close-btn:active {
    border-top: 1px solid var(--win-dark-shadow);
    border-left: 1px solid var(--win-dark-shadow);
    border-right: 1px solid var(--win-highlight);
    border-bottom: 1px solid var(--win-highlight);
}

.quadrant-task .cke-trap-desc {
    font-size: 0.76rem;
    color: #1a1a1a;
    line-height: 1.35;
    background: #fffbdf;
    padding: 4px 6px;
    border: 1px solid #dcd39e;
}

.cke-hints-extra {
    margin-top: 2px;
}

.merlin-hints-container {
    padding: 6px 8px;
    background: #f0f7ff;
    border: 1px solid #b6d3f2;
    margin-bottom: 6px;
}

.merlin-hints-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #000080;
    margin-bottom: 4px;
}

.merlin-hint-step {
    font-size: 0.76rem;
    color: #111827;
    margin-bottom: 4px;
    line-height: 1.35;
}

.hint-bullet {
    font-weight: 700;
    color: #b45309;
}

/* Klasyczne Wypukłe Przyciski 3D Windows 95 */
.task-bottom-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quadrant-task .workspace-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary,
.btn-next-level,
.btn-danger {
    padding: 4px 12px !important;
    font-family: 'Tahoma', sans-serif !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--win-face) !important;
    color: #000000 !important;
    border-top: 2px solid var(--win-highlight) !important;
    border-left: 2px solid var(--win-highlight) !important;
    border-right: 2px solid var(--win-dark-shadow) !important;
    border-bottom: 2px solid var(--win-dark-shadow) !important;
    box-shadow: inset -1px -1px 0 var(--win-shadow), inset 1px 1px 0 var(--win-face-light) !important;
}

.btn-primary {
    outline: 1px solid #000000;
    outline-offset: -4px;
    font-weight: 800 !important;
}

.btn-next-level {
    background: #98fb98 !important;
    color: #003300 !important;
}

.btn-danger {
    background: #ffb3b3 !important;
    color: #660000 !important;
}

.btn-primary:active,
.btn-secondary:active,
.btn-next-level:active,
.btn-danger:active {
    border-top: 2px solid var(--win-dark-shadow) !important;
    border-left: 2px solid var(--win-dark-shadow) !important;
    border-right: 2px solid var(--win-highlight) !important;
    border-bottom: 2px solid var(--win-highlight) !important;
    box-shadow: inset 1px 1px 0 var(--win-shadow) !important;
    transform: translate(1px, 1px);
}

.feedback-box {
    display: none;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    font-size: 0.73rem !important;
    font-weight: 700;
    margin: 0 !important;
    border-top: 1px solid var(--win-shadow);
    border-left: 1px solid var(--win-shadow);
    border-right: 1px solid var(--win-highlight);
    border-bottom: 1px solid var(--win-highlight);
}

.feedback-box.visible {
    display: flex;
    align-items: center;
    gap: 6px;
}

.feedback-box.success {
    background: #b8f5c8;
    color: #004d00;
}

.feedback-box.error {
    background: #ffd6d6;
    color: #800000;
}

/* ==========================================================================
   KWADRANT 2: Okno Turbo_Edytor.exe (Dół-Lewo)
   ========================================================================== */
.quadrant-code {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.code-window-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    min-height: 0;
}

.code-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.html-panel {
    flex: 1.05 1 0;
    min-height: 0;
}

.css-panel {
    flex: 1.15 1 0;
    min-height: 0;
}

.code-panel-header {
    background: var(--win-face);
    padding: 2px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #000000;
    user-select: none;
    flex-shrink: 0;
}

.code-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.code-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Przełącznik Trybu Hardcore w stylu Windows 95 */
.win95-hardcore-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    margin-left: 6px;
    background: #d4d0c8;
    padding: 1px 5px;
    border: 1px solid #808080;
}

.win95-hardcore-toggle input[type="checkbox"] {
    display: none;
}

.win95-switch-track {
    width: 38px;
    height: 16px;
    background: #808080;
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.win95-switch-status {
    font-size: 0.55rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

.win95-hardcore-toggle input[type="checkbox"]:checked + .win95-switch-track {
    background: #800000;
    border-color: #ff0000;
}

.win95-hardcore-toggle input[type="checkbox"]:checked + .win95-switch-track .win95-switch-status {
    color: #ffff00;
}

.win95-hardcore-toggle.is-active .hardcore-label-title {
    color: #800000;
    font-weight: 900;
}

/* Edytor HTML w Trybie Hardcore Win95 */
.html-editor-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #ffffff;
}

.html-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px;
    background: #ece9d8;
    border-bottom: 1px solid #808080;
}

.html-editor-body-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    color: #800000;
}

.html-editor-hint {
    font-size: 0.6rem;
    color: #444444;
    font-style: italic;
}

.html-editor-actions {
    display: flex;
    gap: 4px;
}

.win95-mini-btn {
    background: #d4d0c8;
    color: #000000;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    cursor: pointer;
}

.win95-mini-btn:active {
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

.html-editor-surface {
    flex: 1;
    min-height: 0;
    display: flex;
    background: #ffffff;
    overflow-y: auto;
}

.html-input-row {
    flex: 1;
    display: flex;
    min-height: 100%;
}

.html-editor-textarea {
    width: 100%;
    height: 100%;
    min-height: 80px;
    background: #ffffff;
    color: #000000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.4;
    border: none;
    outline: none;
    resize: none;
    padding: 4px 6px;
    box-sizing: border-box;
}

.html-editor-footer {
    padding: 1px 6px;
    background: #ece9d8;
    border-top: 1px solid #808080;
}

.code-scope-pill.hardcore-badge {
    background: #800000 !important;
    color: #ffffff !important;
    font-weight: 800;
}

.hardcore-empty-hint {
    padding: 20px 10px;
    text-align: center;
    color: #666666;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-style: italic;
    border: 1px dashed #808080;
    margin: 10px;
    background: #f4f4f4;
}

.code-window-body.hardcore-active .code-panel.html-panel {
    flex: 1 1 50%;
}

.code-window-body.hardcore-active .code-panel.css-panel {
    flex: 1 1 50%;
}

.code-lang-tag {
    font-family: 'Silkscreen', monospace;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 0;
}

.html-lang-badge {
    background: #800000;
    color: #ffffff;
}

.css-lang-badge {
    background: #000080;
    color: #ffff00;
}

.code-panel-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: #000000;
    font-family: 'JetBrains Mono', monospace;
}

.code-scope-pill {
    font-size: 0.62rem;
    font-family: 'Tahoma', sans-serif;
    font-weight: 700;
    color: #000080;
    background: #e0e0e0;
    border: 1px solid #808080;
    padding: 0 5px;
    border-radius: 0;
}

.code-scope-pill.freeform-pill {
    color: #ffffff;
    background: #006600;
    border-color: #003300;
}

.code-hover-tip {
    font-size: 0.63rem;
    color: #404040;
}

.code-target-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem;
    font-weight: 800;
    color: #ffff00;
    background: #000080;
    padding: 1px 6px;
    border-radius: 0;
}

/* Wklęsła ramka terminala 3D (Ciemny ekran DOS/Borland wewnątrz szarego okna Win95) */
.win95-sunken-terminal {
    flex: 1;
    background: var(--terminal-bg);
    border-top: 2px solid var(--win-shadow);
    border-left: 2px solid var(--win-shadow);
    border-right: 2px solid var(--win-highlight);
    border-bottom: 2px solid var(--win-highlight);
    box-shadow: inset 1px 1px 0 #000000;
    padding: 4px 0;
    overflow-y: auto;
    min-height: 0;
}

.html-code-display {
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', monospace;
}

.html-line {
    display: flex;
    align-items: center;
    min-height: 19px;
    padding: 0 8px 0 4px;
    font-size: 0.73rem;
    line-height: 19px;
    border-left: 3px solid transparent;
}

.html-line:hover,
.html-line.dock-hover-highlight {
    background: rgba(255, 204, 0, 0.22);
    border-left-color: var(--arcade-yellow);
    cursor: pointer;
}

.html-line.html-body-line {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.03);
}

.html-line.html-line-target {
    background: rgba(0, 240, 255, 0.12);
    border-left-color: #00f0ff;
}

.code-line-num {
    width: 26px;
    text-align: right;
    padding-right: 10px;
    color: #64748b;
    font-size: 0.67rem;
    user-select: none;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
}

.html-line-code {
    white-space: pre;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.html-target-pill {
    font-size: 0.6rem;
    font-weight: 800;
    color: #000000;
    background: var(--arcade-yellow);
    padding: 0 5px;
    border-radius: 0;
    margin-left: 8px;
    line-height: 15px;
    flex-shrink: 0;
}

.html-bracket { color: #94a3b8; }
.html-tag { color: #ffcc00; font-weight: 700; }
.html-attr { color: #5ce1e6; }
.html-val { color: #80ff80; }
.html-text { color: #ffffff; }

/* Edytor CSS wewnątrz terminala */
.css-editor-surface {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.77rem;
}

.css-rule-group {
    display: flex;
    flex-direction: column;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    padding-bottom: 2px;
}

.css-rule-group:last-child {
    border-bottom: none;
}

.css-editor-line {
    display: flex;
    align-items: center;
    height: 22px;
    line-height: 22px;
    padding: 0 8px 0 4px;
    user-select: none;
}

.css-selector-locked {
    color: var(--arcade-yellow);
    font-weight: 800;
}

.css-brace-locked {
    color: #ffffff;
    font-weight: 700;
}

.css-locked-indent {
    white-space: pre;
}

.css-locked-prop {
    color: #5ce1e6;
}

.css-locked-val {
    color: #80ff80;
}

.css-editor-input-row {
    display: flex;
    align-items: stretch;
    background: rgba(255, 204, 0, 0.1);
    border-left: 3px solid var(--arcade-yellow);
    padding-left: 1px;
    min-height: 24px;
}

.freeform-input-row {
    background: rgba(0, 255, 102, 0.06);
    border-left-color: var(--arcade-green);
}

.css-line-number-col {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.css-line-number-col .code-line-num {
    height: 22px;
    line-height: 22px;
    color: var(--arcade-yellow);
    font-weight: 800;
}

.css-editor-input-col {
    flex: 1;
    display: flex;
}

.css-editor-textarea {
    width: 100%;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.77rem;
    line-height: 22px;
    padding: 0 8px 0 14px;
    margin: 0;
    resize: none;
    overflow: hidden;
}

.css-editor-textarea.freeform-textarea {
    padding-left: 8px;
}

.css-editor-textarea::placeholder {
    color: #64748b;
    font-style: italic;
}

/* ==========================================================================
   PRAWA KOLUMNA: Kwadrant 3 (Podglad_Wydruku.exe) & Kwadrant 4 (Navigator_WWW.exe)
   ========================================================================== */
.quadrant-target,
.quadrant-live {
    flex: 1 1 50% !important;
    height: 50% !important;
    min-height: 0 !important;
    overflow: hidden;
}

.target-badge {
    background: #ffff00;
    color: #000000;
    font-family: 'Silkscreen', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 5px;
    margin-right: 4px;
}

/* Wklęsły obszar Podglądu Wydruku CKE (Kwadrant 3) */
.target-viewport {
    flex: 1;
    margin: 4px;
    background-color: #808080;
    border-top: 2px solid var(--win-shadow);
    border-left: 2px solid var(--win-shadow);
    border-right: 2px solid var(--win-highlight);
    border-bottom: 2px solid var(--win-highlight);
    box-shadow: inset 1px 1px 0 #000000;
    padding: 8px 10px;
    overflow: auto;
    display: flex;
    box-sizing: border-box;
}

/* Pasek adresu klasycznej przeglądarki Navigator '95 (Kwadrant 4) */
.browser-topbar {
    background: var(--win-face);
    padding: 4px 6px 2px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.win95-addr-label {
    font-family: 'Tahoma', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #000000;
    white-space: nowrap;
}

.browser-address-bar {
    flex: 1;
    background: #ffffff;
    border-top: 2px solid var(--win-shadow);
    border-left: 2px solid var(--win-shadow);
    border-right: 2px solid var(--win-highlight);
    border-bottom: 2px solid var(--win-highlight);
    box-shadow: inset 1px 1px 0 #000000;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    color: #000000;
}

.address-lock {
    background: #000080;
    color: #ffffff;
    font-size: 0.55rem;
    font-weight: 800;
    padding: 0 4px;
}

.live-pulse-badge {
    background: #00ff66;
    color: #000000;
    font-family: 'Silkscreen', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 5px;
    margin-right: 4px;
}

/* Wklęsłe okno strony WWW w przeglądarce (Kwadrant 4) */
.browser-viewport {
    flex: 1;
    margin: 4px;
    background-color: #e8ecf2;
    border-top: 2px solid var(--win-shadow);
    border-left: 2px solid var(--win-shadow);
    border-right: 2px solid var(--win-highlight);
    border-bottom: 2px solid var(--win-highlight);
    box-shadow: inset 1px 1px 0 #000000;
    padding: 8px 10px;
    position: relative;
    overflow: auto;
    display: flex;
    box-sizing: border-box;
}

/* Pieczęć zaliczenia układu CKE */
.dock-stamp-approved {
    position: absolute;
    top: 8px;
    right: 14px;
    z-index: 30;
    background: #008000;
    border-top: 2px solid #80ff80;
    border-left: 2px solid #80ff80;
    border-right: 2px solid #003300;
    border-bottom: 2px solid #003300;
    color: #ffff00;
    font-family: 'Silkscreen', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 4px 10px;
    box-shadow: 3px 3px 0 #000000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.dock-stamp-approved.visible {
    opacity: 1;
}

/* ==========================================================================
   SZKIELET CAŁEJ STRONY CKE (.cke-page-canvas) — CZYTELNY JAK NA EGZAMINIE
   ========================================================================== */
.cke-page-canvas {
    width: 100%;
    height: 100%;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
}

/* Kartka papieru CKE w Kwadrancie 3 */
.wireframe-mode.cke-page-canvas {
    background: #ffffff;
    border: 1px solid #000000;
    box-shadow: 4px 4px 0 #333333;
    padding: 7px;
}

/* Tło strony WWW w Kwadrancie 4 */
.live-mode.cke-page-canvas {
    background: #ffffff;
    border: 1px solid #94a3b8;
    padding: 7px;
}

.cke-page-canvas * {
    box-sizing: border-box;
    margin: 0;
    transition: all 0.2s ease;
}

.cke-page-canvas > header,
.cke-page-canvas > nav,
.cke-page-canvas > footer {
    width: 100%;
    flex: 0 0 auto;
}

.cke-page-canvas > main,
.cke-page-canvas > #uklad,
.cke-page-canvas > #kontener {
    width: 100%;
    flex: 1 1 auto;
    min-height: 80px;
}

#cala-strona,
#kontener {
    width: 100%;
    height: 100%;
}

.cke-container-block {
    position: relative;
    padding: 5px;
    border-radius: 0;
    min-height: 30px;
}

.cke-container-block::after {
    content: attr(data-tag-label);
    position: absolute;
    top: 2px;
    right: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.54rem;
    font-weight: 800;
    opacity: 0.85;
    pointer-events: none;
}

.cke-leaf-block {
    position: relative;
    padding: 5px 8px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

/* Synchronizacja podświetlenia Hover (HTML <-> Rysunek 1 CKE <-> Strona WWW) */
.cke-page-canvas [data-node-key].dock-hover-highlight {
    outline: 2px solid #ff0055 !important;
    box-shadow: 0 0 0 2px #ffff00 !important;
    z-index: 10;
}

/* ==========================================================================
   KWADRANT 3: CZARNO-BIAŁY SCHEMAT BLOKOWY Z PAPIEROWEGO ARKUSZA CKE (.wireframe-mode)
   ========================================================================== */
.wireframe-mode .cke-container-block {
    border: 1.5px dashed #475569;
    background: #ffffff;
    color: #334155;
}

.wireframe-mode .cke-container-block.is-css-target {
    border: 2px solid #000000;
    background: #f8fafc;
    color: #000000;
}

.wireframe-mode .cke-leaf-block {
    border: 1.5px solid #000000;
    background: #ffffff;
    color: #000000;
}

.wireframe-mode .cke-leaf-block.is-css-target {
    border: 2px solid #000000;
    background: #fffde7;
}

.wireframe-mode header.cke-leaf-block,
.wireframe-mode footer.cke-leaf-block {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 4px 8px;
}

.wf-node-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    font-weight: 700;
    color: #475569;
    flex-shrink: 0;
}

.wf-node-title {
    font-family: 'Tahoma', sans-serif;
    font-size: 0.67rem;
    font-weight: 700;
    color: inherit;
    width: 100%;
    flex: 1;
}

.wf-img-box {
    width: 100%;
    height: 15px;
    border: 1px solid #000000;
    background:
        linear-gradient(to top right, transparent calc(50% - 1px), #000000 50%, transparent calc(50% + 1px)),
        linear-gradient(to bottom right, transparent calc(50% - 1px), #000000 50%, transparent calc(50% + 1px));
}

/* ==========================================================================
   KWADRANT 4: CZYSTA, REALISTYCZNA STRONA WWW (.live-mode)
   ========================================================================== */
.live-mode .cke-container-block {
    border: 1px dashed #94a3b8;
    background: #ffffff;
    color: #1e293b;
}

.live-mode .cke-container-block.is-css-target {
    border: 1.5px dashed #0284c7;
    background: #f8fafc;
}

.live-mode .cke-leaf-block {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #1e293b;
}

.live-mode header.cke-leaf-block,
.live-mode header.cke-container-block {
    background: #334155;
    border: 1px solid #0f172a;
    color: #ffffff;
}

.live-mode header .live-node-tag {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

.live-mode nav.cke-container-block,
.live-mode nav.cke-leaf-block {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    color: #1e293b;
}

.live-mode header.cke-leaf-block,
.live-mode footer.cke-leaf-block {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 4px 8px;
}

.live-mode aside.cke-leaf-block,
.live-mode aside.cke-container-block {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}

.live-mode section.cke-leaf-block,
.live-mode section.cke-container-block {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

.live-mode .karta,
.live-mode .pakiet,
.live-mode .kolumna,
.live-mode .slupek,
.live-mode .panel,
.live-mode .oferta,
.live-mode .dzien,
.live-mode .okno-logowania {
    background: #ffffff;
    border: 1px solid #94a3b8;
    border-top: 3px solid #0284c7;
    color: #0f172a;
}

.live-mode .alert-awaria,
.live-mode .pakiet-pro {
    background: #fff7ed !important;
    border: 1.5px solid #f97316 !important;
    border-top: 3px solid #ea580c !important;
}

.live-mode footer.cke-leaf-block,
.live-mode footer.cke-container-block {
    background: #1e293b;
    border: 1px solid #0f172a;
    color: #f8fafc;
}

.live-mode footer .live-node-tag {
    background: rgba(255, 255, 255, 0.16);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.3);
}

.live-mode .link,
.live-mode .btn-nav,
.live-mode .btn-akcja,
.live-mode .badge-user,
.live-mode .strefa {
    background: #ffffff;
    border: 1px solid #94a3b8;
    padding: 2px 7px;
    color: #0f172a;
}

/* Znaczniki semantyczne wewnątrz bloków (h2, ul, li, a, button) */
.cke-page-canvas h1,
.cke-page-canvas h2,
.cke-page-canvas h3 {
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 2px;
    width: 100%;
}

.cke-page-canvas p {
    font-size: 0.67rem;
    line-height: 1.3;
}

.cke-page-canvas ul {
    padding-left: 18px;
    font-size: 0.67rem;
    margin: 2px 0;
}

.cke-page-canvas a {
    font-size: 0.68rem;
    text-decoration: underline;
    cursor: pointer;
}

.cke-page-canvas button {
    font-size: 0.67rem;
    padding: 2px 8px;
    border: 1px solid #404040;
    background: #e2e8f0;
    color: #0f172a;
    cursor: pointer;
}

.live-node-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.54rem;
    font-weight: 700;
    color: #0369a1;
    background: #e0f2fe;
    padding: 1px 4px;
    border: 1px solid #bae6fd;
    align-self: flex-start;
    flex-shrink: 0;
    white-space: nowrap;
}

.live-node-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: inherit;
    width: 100%;
    flex: 1;
}

.live-skeleton-sub {
    width: 55%;
    height: 4px;
    background: #cbd5e1;
    margin-top: 2px;
}

/* ==========================================================================
   Okna Modalne w Stylu Windows 95 Dialog Box
   ========================================================================== */
.win95-dialog {
    background: var(--win-face) !important;
    border-radius: 0 !important;
    border-top: 2px solid var(--win-highlight) !important;
    border-left: 2px solid var(--win-highlight) !important;
    border-right: 2px solid var(--win-dark-shadow) !important;
    border-bottom: 2px solid var(--win-dark-shadow) !important;
    box-shadow: inset -1px -1px 0 var(--win-shadow), 6px 6px 0 rgba(0, 0, 0, 0.5) !important;
    padding: 3px !important;
    color: #000000 !important;
}

.win95-dialog-body {
    padding: 12px;
    background: var(--win-face);
    color: #000000;
}

/* ==========================================================================
   Nowe Komponenty UI z JSWizard: Ściągawka, Pasek Stanu, Ghost Diff
   ========================================================================== */

/* Przycisk Ściągawka CKE w Pasku Zadań */
.win95-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    background: var(--win-face);
    border-top: 2px solid var(--win-highlight);
    border-left: 2px solid var(--win-highlight);
    border-right: 2px solid var(--win-dark-shadow);
    border-bottom: 2px solid var(--win-dark-shadow);
    font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: #000000;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

.win95-nav-btn:hover {
    background: var(--win-face-light);
}

.win95-nav-btn:active {
    border-top: 2px solid var(--win-dark-shadow);
    border-left: 2px solid var(--win-dark-shadow);
    border-right: 2px solid var(--win-highlight);
    border-bottom: 2px solid var(--win-highlight);
}

/* Przycisk Nakładki Wzorca (Ghost Overlay) */
.win95-ghost-toggle-btn {
    font-weight: 700 !important;
    color: #004d40 !important;
}

.win95-ghost-toggle-btn.active {
    background: #004d40 !important;
    color: #00ff66 !important;
    border-top: 2px solid var(--win-dark-shadow) !important;
    border-left: 2px solid var(--win-dark-shadow) !important;
    border-right: 2px solid var(--win-highlight) !important;
    border-bottom: 2px solid var(--win-highlight) !important;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* Warstwa Nakładki Duch (Ghost Overlay Mode) */
.browser-viewport {
    position: relative;
}

.ghost-overlay-mode {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    pointer-events: none;
    z-index: 10;
    opacity: 0.75;
    background: transparent !important;
    border: 2px dashed #00e5ff !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
}

.ghost-overlay-mode * {
    outline: 2px dashed #00e5ff !important;
    background: rgba(0, 229, 255, 0.08) !important;
    color: transparent !important;
}

/* Dolny Pasek Stanu Navigator_WWW.exe */
.win95-browser-statusbar {
    height: 24px;
    background: var(--win-face);
    border-top: 1px solid var(--win-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px;
    box-sizing: border-box;
    font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
    font-size: 0.72rem;
    gap: 4px;
    flex-shrink: 0;
}

.win95-status-col {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    background: var(--win-face);
    border-top: 1px solid var(--win-shadow);
    border-left: 1px solid var(--win-shadow);
    border-right: 1px solid var(--win-highlight);
    border-bottom: 1px solid var(--win-highlight);
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.win95-status-left {
    min-width: 175px;
    gap: 4px;
    color: #000000;
}

.win95-status-center {
    flex: 1;
    color: #000080;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    background: #fffff6;
}

.win95-status-right {
    flex-shrink: 0;
    color: #333333;
}

.win95-zone-badge {
    font-size: 0.68rem;
    font-weight: 600;
}

.win95-status-text.is-error {
    color: #990000 !important;
    font-weight: bold;
}

/* Przycisk Podpowiedzi - Stan Aktywny (Wciśnięty 3D Win95) */
.btn-secondary.btn-hint-active {
    border-top: 2px solid var(--win-dark-shadow) !important;
    border-left: 2px solid var(--win-dark-shadow) !important;
    border-right: 2px solid var(--win-highlight) !important;
    border-bottom: 2px solid var(--win-highlight) !important;
    box-shadow: inset 1px 1px 0 var(--win-shadow) !important;
    background: #e8e8e8 !important;
    color: #000080 !important;
}

/* Stylizacje wskazówek krok po kroku Flexboxer */
.flex-hints-container {
    padding: 6px 8px;
    background: #f0f7ff;
    border: 1px solid #b6d3f2;
    margin-top: 4px;
}

.flex-hints-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: #000080;
    margin-bottom: 4px;
}

.flex-hint-step {
    font-size: 0.74rem;
    color: #111827;
    margin-bottom: 3px;
    line-height: 1.35;
}

/* Wskaźnik celu - dynamiczne podświetlenie selektora */
.code-target-badge.indicator-highlight {
    background: #000080 !important;
    color: #ffff00 !important;
    font-weight: bold;
    outline: 1px solid #ffff00;
}

/* Okno Dialogowe Ściągawki CKE (Pomoc_CSS.hlp) */
.win95-cheatsheet-dialog {
    max-width: 780px !important;
    width: 94vw !important;
    max-height: 88vh !important;
}

.win95-cheatsheet-body {
    max-height: calc(88vh - 44px);
    overflow-y: auto;
    padding: 10px 14px;
    background: #f4f4f4;
}

.cheat-section {
    margin-bottom: 14px;
    background: var(--win-face);
    border-top: 1px solid var(--win-highlight);
    border-left: 1px solid var(--win-highlight);
    border-right: 1px solid var(--win-dark-shadow);
    border-bottom: 1px solid var(--win-dark-shadow);
    padding: 10px;
}

.cheat-section-title {
    margin: 0 0 8px 0;
    font-family: 'Silkscreen', 'Pixelify Sans', sans-serif;
    font-size: 0.84rem;
    color: #000080;
    border-bottom: 2px solid var(--win-shadow);
    padding-bottom: 4px;
}

.cheat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px;
}

.cheat-card {
    background: #ffffff;
    border-top: 1px solid var(--win-shadow);
    border-left: 1px solid var(--win-shadow);
    border-right: 1px solid var(--win-highlight);
    border-bottom: 1px solid var(--win-highlight);
    padding: 6px 8px;
}

.cheat-card-header {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.78rem;
    color: #000080;
    background: #eef2ff;
    padding: 2px 4px;
    border-left: 3px solid #1084d0;
    margin-bottom: 4px;
}

.cheat-card-desc {
    font-size: 0.74rem;
    line-height: 1.35;
    color: #222222;
}

.cheat-card-desc code {
    background: #e5e7eb;
    padding: 1px 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    border: 1px solid #cbd5e1;
}

/* Responsywność dla mniejszych ekranów */
@media (max-width: 1024px) {
    body.theme-flexboxer {
        overflow: auto;
        height: auto;
    }
    .game-container {
        height: auto;
    }
    .game-workspace {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
    .quadrant-target,
    .quadrant-live {
        height: 300px !important;
    }
}