/* ==========================================================
   Szopka Elektronika CMS - frontend (tier: modern)
   Styl: Windows 95 / Internet Explorer (srebro + granat + teal).
   ========================================================== */

:root{
    --teal:#008080;
    --silver:#c0c0c0;
    --silver-lt:#dfdfdf;
    --navy:#000080;
    --navy2:#1084d0;
    --gray:#808080;
    --black:#0a0a0a;
    --link:#0000cc;
    --lcd:#33ff66;
    --ui:"Tahoma","MS Sans Serif","Segoe UI",Geneva,Arial,sans-serif;
    --mono:"Consolas","Lucida Console","Courier New",monospace;
    /* fazowanie 3D */
    --out: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
    --in:  inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;

    /*
     * Lagodniejszy wariant ramki 3D - bez czarnego obrysu.
     * Wzorowany na pierwotnym projekcie serwisu, gdzie krawedzie
     * kafelkow menu sa szare (#8a-#98), a nie czarne. Ten sam
     * relief, mniej kontrastu.
     */
    --out-soft: inset -1px -1px #909090, inset 1px 1px #fff, inset -2px -2px #c8c8c8, inset 2px 2px #e8e8e8;
    --in-soft:  inset -1px -1px #fff, inset 1px 1px #909090, inset -2px -2px #e8e8e8, inset 2px 2px #c8c8c8;

    /*
     * Tlo obszaru tresci. Ustawiane z panelu (Ustawienia ->
     * content_bg) - layout nadpisuje ta zmienna, gdy wartosc
     * jest inna niz domyslna.
     */
    --content-bg: #c0c0c0;
}

* { box-sizing: border-box; }

html{
    background: var(--teal);
    min-height: 100%;
}

body{
    max-width: 940px;
    margin: 22px auto;
    padding: 3px;
    background: var(--silver);
    box-shadow: var(--out);
    font-family: var(--ui);
    font-size: 13px;
    line-height: 1.5;
    color: #000;
}

/* --- Naglowki --- */
h1, h2, h3{
    font-family: var(--mono);
    color: var(--navy);
    margin: 0 0 10px;
}
h2{
    font-size: 15px;
    border-bottom: 2px solid var(--navy);
    padding-bottom: 4px;
}
h3{ font-size: 14px; margin-top: 16px; }

a{ color: var(--navy); text-decoration: none; }
a:hover{ color: #a00000; text-decoration: underline; }

hr{ border: 0; border-top: 1px solid var(--gray); margin: 14px 0; }
img{ max-width: 100%; height: auto; }
p{ margin: 8px 0; }

/* --- Tabele bazowe (podstrony) --- */
table{ border-collapse: collapse; }
table[border] th, table[border] td{ border: 1px solid #9a9686; }
th{
    background: var(--navy); color: #fff; text-align: left;
    padding: 5px 9px; font-family: var(--mono); font-weight: bold;
}
td{ padding: 5px 9px; vertical-align: top; }

/* ==========================================================
   Pasek tytulu okna
   ========================================================== */
.win-titlebar{
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(90deg, var(--navy), var(--navy2));
    color: #fff; font-weight: bold; letter-spacing: .3px;
    padding: 3px 4px;
}
.win-title{ padding-left: 4px; }
.win-controls{ display: flex; gap: 2px; }
.win-controls i{
    width: 17px; height: 14px; background: var(--silver); color: #000;
    box-shadow: var(--out); font-style: normal; font-size: 10px;
    line-height: 12px; text-align: center; font-weight: bold;
}

/* ==========================================================
   Gorny pasek: logo (lewo) + wyszukiwarka (prawo)
   ========================================================== */
.site-header{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    background: var(--silver); padding: 6px 8px; margin-top: 3px;
    box-shadow: var(--out);
}
.site-brand{ display: flex; align-items: center; gap: 9px; color: #000 !important; }
.site-brand:hover{ text-decoration: none; }
.site-brand-badge{
    width: 34px; height: 34px; flex: 0 0 34px; background: var(--navy);
    display: flex; align-items: center; justify-content: center;
}
.site-brand-txt strong{ display: block; font-size: 17px; line-height: 1; letter-spacing: .3px; color: #000; }
.site-brand-txt small{ font-size: 10px; color: var(--navy); }

.site-search{ display: flex; align-items: center; gap: 4px; }
.site-search input[type=text]{
    font-family: var(--ui); font-size: 12px; border: none; background: #fff;
    padding: 3px 6px; min-width: 160px; box-shadow: var(--in);
}
.site-search button{
    font-family: var(--ui); font-size: 12px; background: var(--silver);
    border: none; padding: 3px 12px; cursor: pointer; box-shadow: var(--out);
}
.site-search button:active{ box-shadow: var(--in); }

/* ==========================================================
   Uklad: menu (lewo) + tresc (prawo) - strona glowna
   ========================================================== */
.layout-row{ display: flex; gap: 3px; padding: 3px 0; align-items: stretch; }

.menu{ flex: 0 0 182px; display: flex; flex-direction: column; gap: 3px; }
.menu-item{
    display: flex; align-items: center; gap: 8px;
    background: var(--silver); color: #000; padding: 6px 8px;
    font-size: 13px; box-shadow: var(--out-soft);
}
.menu-item:hover{ background: #cdcdcd; text-decoration: none; }
.menu-item:active{ box-shadow: var(--in-soft); }
.menu-item.active{ background: var(--navy); color: #fff; box-shadow: var(--in-soft); }
.menu-item .ico{ flex: 0 0 16px; width: 16px; height: 16px; }
.menu-item span{ line-height: 1.15; }
.menu-item.parent{ font-weight: bold; }
.menu-item.sub{
    margin-left: 18px; padding: 4px 8px; font-size: 12px;
    background: #cbc9c2; border-left: 3px solid var(--navy);
}
.menu-item.sub .ico{ flex: 0 0 14px; width: 14px; height: 14px; }
.menu-item.sub.active{ background: var(--navy); color: #fff; }

.main-col{ flex: 1 1 auto; background: var(--content-bg, #fff); box-shadow: var(--in); min-width: 0; padding: 22px 30px; }

/* ==========================================================
   Baner / logo
   ========================================================== */
.hero{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--navy); color: #fff; padding: 16px 20px;
    margin-top: 3px;
}
.hero .hero-text h1{
    margin: 0; font-size: 21px; line-height: 1.1; letter-spacing: 2px;
    font-family: var(--mono); font-weight: bold; color: #e9e9ff;
    text-shadow: 2px 2px 0 #000; border: 0;
}
.hero .hero-text .sub1{ margin: 7px 0 2px; font-weight: bold; font-size: 13px; color: #c9c9ff; }
.hero .hero-text .sub2{ margin: 0; font-size: 11px; color: #aeaee6; }
.hero .hero-art{ flex: 0 0 auto; line-height: 0; }

/* ==========================================================
   Tresc strony glownej: Witaj + Aktualnosci + Artykuly
   ========================================================== */
.home-cols{ display: flex; gap: 18px; padding: 0; }
.home-col{ flex: 1 1 50%; min-width: 0; }
.home-welcome p{ margin: 0 0 8px; line-height: 1.5; }

ul.home-news{ list-style: none; margin: 0; padding: 0; }
ul.home-news li{ position: relative; padding-left: 15px; margin: 0 0 6px; font-size: 12px; line-height: 1.4; }
ul.home-news li:before{ content: "\25A0"; position: absolute; left: 0; top: 1px; color: var(--navy); font-size: 9px; }
ul.home-news li .date{ font-weight: bold; color: #333; }
.home-news-empty{ color: #666; font-style: italic; }

.home-articles{ padding: 0; margin-top: 14px; }
.home-article{ background: #f4f4f4; padding: 10px 12px; margin-bottom: 10px; box-shadow: var(--in); }
.home-article-title{ margin: 0 0 4px; font-size: 14px; }
.home-article-title a{ color: var(--navy); }
.home-article-summary{ margin: 0 0 6px; font-size: 12px; color: #333; }
.home-article-meta{ font-size: 11px; color: #555; font-family: var(--mono); margin: 0; }
.home-article-meta a{ color: var(--link); }
.home-seeall{ display: inline-block; margin-top: 2px; color: var(--link); font-size: 12px; }

/* ==========================================================
   Pasek statusu: licznik + napisz do mnie
   ========================================================== */
.statusbar{ display: flex; align-items: center; gap: 8px; padding: 5px 3px; }
.status-cell{
    background: var(--silver); padding: 4px 8px; font-size: 12px;
    display: flex; align-items: center; gap: 8px; box-shadow: var(--in);
}
.status-grow{ flex: 1 1 auto; }
.counter{
    background: #000; color: var(--lcd); font-family: var(--mono);
    font-weight: bold; letter-spacing: 3px; padding: 2px 8px; font-size: 15px;
}
.status-mail a{ color: var(--link); }

/* --- Stopka wersji --- */
.site-footer{
    text-align: center; color: #555; font-size: 10px; font-family: var(--mono);
    padding: 4px 0 6px;
}

/* ==========================================================
   PODSTRONY (na razie bez zmian ukladu) - zachowane klasy
   ========================================================== */
/* Menu na podstronach, ktore nie uzywaja ukladu dwukolumnowego */
.content-page{ background: var(--content-bg, #c0c0c0); box-shadow: var(--in-soft); padding: 14px 18px; margin: 3px 0; }

/* Moja Kolekcja */
.hw-list{ margin-top: 14px; }
.hw-card{ margin-bottom: 16px; background: var(--content-bg, #c0c0c0); box-shadow: var(--in-soft); }
.hw-card > tr > td, .hw-card td{ border: 1px solid #9a9686; }
.hw-thumb{ background: #ece7d8; text-align: center; }
.hw-thumb img{ border: 1px solid #7a7768; background: #fff; padding: 2px; }
.hw-morephotos{ font-size: 12px; color: #555; margin-top: 4px; }
.hw-nophoto{ font-size: 12px; color: #888; font-style: italic; }
.hw-name{ font-size: 17px; margin: 0 0 8px; }
.hw-name a{ color: var(--navy); }
.hw-meta{ border: 0 !important; }
.hw-meta td{ border: 0 !important; padding: 1px 8px 1px 0; }
.hw-k{ color: #5a5648; font-family: var(--mono); white-space: nowrap; font-weight: bold; }
.hw-desc{ margin-top: 10px; padding: 8px 10px; background: #f6f3e8; border-left: 3px solid var(--navy); }
.hw-more{ margin-top: 10px; }
.hw-more a{ font-weight: bold; }
.crumbs{ font-size: 13px; margin-bottom: 6px; }
.hw-detail{ width: 100%; max-width: 560px; background: var(--content-bg, #c0c0c0); }
.hw-detail .hw-k{ background: #ece7d8; }
.hw-gallery{ margin-top: 10px; }
.hw-shot{ display: inline-block; vertical-align: top; margin: 0 12px 14px 0; background: #fff; border: 1px solid #9a9686; padding: 6px; box-shadow: var(--in); }
.hw-shot img{ display: block; border: 1px solid #ccc; }
.hw-cap{ font-size: 12px; color: #555; margin-top: 4px; max-width: 220px; }

/* Retro Benchmarks */
.bm-card{ margin-bottom: 18px; background: var(--content-bg, #c0c0c0); box-shadow: var(--in-soft); }
.bm-head td{ background: #ece7d8; }
.bm-title{ font-family: var(--mono); font-size: 16px; color: var(--navy); }
.bm-date{ color: #777; font-size: 12px; margin-left: 8px; }
.bm-k{ background: #f6f3e8; color: #5a5648; font-family: var(--mono); font-weight: bold; white-space: nowrap; }
.bm-noresults{ color: #888; font-style: italic; }
.bm-results{ margin: 2px 0; }
.bm-results th{ background: #33336b; font-size: 13px; }
.bm-results b{ color: #a00000; }

/* Artykuly */
.art-section{ margin-top: 22px; color: var(--navy); background: #ece7d8; padding: 6px 10px; border: 1px solid #b8b2a0; border-bottom: 2px solid var(--navy); }
.art-group{ margin: 0 0 8px; }
.art-item{ margin-bottom: 10px; background: var(--content-bg, #c0c0c0); box-shadow: var(--in-soft); }
.art-title{ font-size: 16px; margin: 0 0 4px; }
.art-summary{ margin: 4px 0; color: #333; }
.art-meta{ font-size: 12px; color: #6a6656; font-family: var(--mono); margin: 6px 0 0; }
.art-lead{ font-size: 15px; padding: 8px 12px; background: #f6f3e8; border-left: 3px solid var(--navy); }
.art-content{ margin: 16px 0; line-height: 1.65; }
.art-content::after{ content: ""; display: block; clear: both; }
.art-content h2, .art-content h3{ border: 0; margin-top: 20px; }
.art-content img{ border: 0; }
.art-content pre{ background: #1c1b18; color: #e8e6df; padding: 12px; overflow-x: auto; border: 1px solid #000; }
.art-content code{ font-family: var(--mono); }
.art-back{ margin-top: 20px; }

/* Wyniki wyszukiwania */
.search-page-form{ margin: 10px 0; }
.search-page-form input[type=text]{ padding: 6px 8px; border: 1px solid #9a9686; }
.search-hit{ margin-bottom: 8px; background: var(--content-bg, #c0c0c0); box-shadow: var(--in-soft); }
.search-hit-type{ color: #a00000; font-family: var(--mono); font-size: 12px; }
.search-hit-title{ margin: 0 0 3px; }
.search-hit-snippet{ margin: 2px 0 0; color: #444; font-size: 14px; }


/* ==========================================================
   Formularze w obszarze tresci (Win95) + Ksiega Gosci
   ========================================================== */
.main-col input[type=text], .main-col input[type=email], .main-col input[type=password], .main-col textarea{
    font-family: var(--ui); font-size: 13px; background: #fff; border: none;
    padding: 4px 6px; box-shadow: var(--in);
}
.main-col textarea{ width: 100%; max-width: 520px; resize: vertical; }
.main-col button, .main-col input[type=submit]{
    font-family: var(--ui); font-size: 13px; background: var(--silver); border: none;
    padding: 4px 16px; cursor: pointer; box-shadow: var(--out);
}
.main-col button:active, .main-col input[type=submit]:active{ box-shadow: var(--in); }

.gb-notice{ padding: 8px 12px; margin: 0 0 14px; box-shadow: var(--out); font-size: 13px; }
.gb-ok{ background: #d7ecd7; border-left: 4px solid #2a7d2a; }
.gb-err{ background: #f3d9d9; border-left: 4px solid #a02020; }
.gb-form{ padding: 12px 0; margin-bottom: 18px; max-width: 560px; }
.gb-row{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gb-row label{ flex: 0 0 92px; font-weight: bold; color: #333; }
.gb-row input[type=text], .gb-row input[type=email]{ flex: 1 1 auto; }
.gb-row-msg{ align-items: flex-start; }
.gb-row-msg textarea{ flex: 1 1 auto; max-width: none; }
.gb-actions{ margin-top: 4px; }
.gb-hp{ display: none; }
.gb-list-h{ border-bottom: 2px solid var(--navy); padding-bottom: 3px; }
.gb-entry{ background: var(--content-bg, #c0c0c0); box-shadow: var(--in-soft); padding: 8px 12px; margin-bottom: 10px; }
.gb-entry-head{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.gb-nick{ color: var(--navy); font-size: 14px; }
.gb-web{ font-size: 11px; }
.gb-date{ margin-left: auto; font-size: 11px; color: #777; font-family: var(--mono); }
.gb-msg{ font-size: 13px; line-height: 1.45; }

/* Slad sprzetowy autora wpisu (maly druczek pod trescia). */
.gb-trace{ margin-top: 7px; padding-top: 5px; border-top: 1px dotted #cfcfcf; }
.gb-trace small{ font-size: 11px; color: #808080; font-family: var(--mono); line-height: 1.7; }
.gb-trace b{ color: #555; }
.gb-badge{ display: inline-block; background: #ece9e0; color: #555; padding: 1px 6px;
    margin: 0 3px; font-size: 10px; font-family: var(--ui); box-shadow: var(--out); }
.gb-badge-rare{ background: #fff8e6; color: #8a6d1f; }

/* ==========================================================
   Responsywnosc (podglad na waskich ekranach)
   ========================================================== */
@media (max-width: 640px){
    body{ margin: 8px; }
    .layout-row{ flex-direction: column; }
    .menu{ flex: 1 1 auto; flex-flow: row wrap; }
    .menu-item{ flex: 1 1 44%; }
    .home-cols{ flex-direction: column; gap: 14px; }
    .hero{ flex-direction: column; align-items: flex-start; }
    .hero .hero-art{ display: none; }
    .site-search input[type=text]{ min-width: 120px; }
}

/* ==========================================================
   Moja Kolekcja - ekran wyboru kategorii (kafelki).
   ========================================================== */
.hw-cat-intro{ margin: 0 0 14px; }
.hw-cat-grid{ border-collapse: separate; border-spacing: 8px; border: 0; }
.hw-cat-grid td{ border: 0; }
.hw-cat-tile{ display: block; padding: 18px 14px; background: #ece9e0; box-shadow: var(--out); text-decoration: none; color: var(--navy); text-align: center; }
.hw-cat-tile:hover{ box-shadow: var(--in); }
.hw-cat-name{ display: block; font-weight: bold; font-size: 16px; }
.hw-cat-count{ display: block; margin-top: 5px; font-size: 12px; color: #666; font-family: var(--mono); }
.hw-cat-all .hw-cat-tile{ background: var(--navy); color: #fff; }
.hw-cat-all .hw-cat-name{ color: #fff; }
.hw-cat-all .hw-cat-count{ color: #b9c7e6; }

/* ==========================================================
   Kategorie jako lista linkow (Moja Kolekcja / Download)
   ========================================================== */
.cat-list{ list-style: none; margin: 0 0 10px; padding: 0; max-width: 520px; }
.cat-list li{
    display: flex; align-items: baseline; gap: 10px;
    padding: 6px 8px; border-bottom: 1px dotted #b9b9b9;
}
.cat-list li:hover{ background: #f1f1f1; }
.cat-list a{ color: var(--link); font-weight: bold; }
.cat-list .cat-count{
    margin-left: auto; font-family: var(--mono); font-size: 12px; color: #666;
    white-space: nowrap;
}
.cat-list .cat-all{ border-bottom: 1px solid var(--navy); }
.cat-list .cat-all a{ color: var(--navy); }
.hw-back{ margin: 0 0 14px; }