/* GrzybTV community + TS-website. Loaded after the original panel styles. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root {
    --site-background: #101114;
    --site-secondary-color: #b8ed84;
    --site-accent-color: #e54d53;
    --site-text: #e4e5e7;
    --site-scrollbar-color: #565b61;
    --font-family-main: 'Inter', 'Segoe UI', sans-serif;
    --font-family-sans-serif: 'Inter', 'Segoe UI', sans-serif;
    --grzyb-border: #303238;
    --grzyb-muted: #a7abb2;
}
html { scroll-behavior: smooth; }
body { background: #101114 url('../zdjecia/bgbg.png') center top / cover fixed; padding: 110px 0 0; font-size: 14px; line-height: 1.65; }
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(110deg, #101114c9, #101114ed 60%); pointer-events: none; z-index: -1; }
a { color: #edf0f2; }
a:hover { color: #b8ed84; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid #b8ed84; outline-offset: 4px; }
.container { max-width: 1320px; padding-left: 28px; padding-right: 28px; }
.skip-link { position: fixed; left: 20px; top: -100px; padding: 12px 24px; z-index: 2000; background: #b8ed84; color: #121512; }
.skip-link:focus { top: 12px; }
#main-navbar { background: #141519f5 !important; border-bottom: 1px solid var(--grzyb-border); padding: 12px 0; backdrop-filter: blur(18px); }
#main-navbar .navbar-brand { margin-right: 32px; padding: 0; }
#main-navbar .navbar-brand img { width: 175px; height: 50px; object-fit: contain; }
#main-navbar .nav-item { padding: 0; border-radius: 8px; }
#main-navbar .navbar-nav .nav-link { font-size: 11px; font-weight: 700; text-transform: none; padding: 11px 10px; white-space: nowrap; }
#main-navbar .nav-item.active, #main-navbar .nav-item:hover { background: #ffffff08; }
#main-navbar .nav-item.active .nav-link { color: #b8ed84; }
#navbarDropdownLanguageChooser { font-size: 10px !important; }
.dropdown-menu { border: 1px solid #41444a; box-shadow: 0 16px 50px #0006; }
.site-main { min-height: 65vh; }
.community-bar { display: flex; justify-content: space-between; gap: 12px; color: #a3a7af; font-size: 11px; margin-bottom: 24px; letter-spacing: .03em; }
.community-bar > span:last-child > span { color: #e54d53; padding: 0 6px; }
.community-dot { display: inline-block; width: 7px; height: 7px; background: #b8ed84; border-radius: 50%; box-shadow: 0 0 13px #b8ed8433; margin-right: 7px; vertical-align: middle; }
.grzyb-hero { display: grid; grid-template-columns: 1fr 1.04fr; gap: 32px; align-items: center; padding: 28px 0 42px; }
.eyebrow { display: block; color: #a5aab2; letter-spacing: .15em; font-weight: 700; font-size: 10px; margin-bottom: 12px; }
.hero-copy h1 { font-size: clamp(32px, 3.8vw, 51px); font-weight: 900; letter-spacing: -.055em; line-height: 1.13; margin: 0 0 20px; }
.hero-copy h1 em { color: #b8ed84; font-style: normal; }
.hero-copy p { max-width: 450px; color: #b2b6bd; line-height: 1.8; margin-bottom: 26px; font-size: 13px; }
.hero-copy p span { color: #e54d53; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.btn { font-weight: 700; font-size: 12px; padding: 10px 15px; border-radius: 7px; box-shadow: none; }
.btn-lg { padding: 13px 20px; font-size: 12px; }
.btn-primary, .btn-primary:focus { color: #fff; background: #d8444c; border-color: #d8444c; box-shadow: none; }
.btn-primary:hover, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { background: #ee5860; border-color: #ee5860; color: white; }
.btn-outline-light { border-color: #41444b; color: #e6e7eb; }
.btn-outline-light:hover { background: #292d31; color: #fff; border-color: #697079; }
.hero-caption { display: flex; align-items: center; gap: 7px; margin-top: 22px; font-size: 10px; font-weight: 500; color: #8c939d; }
.hero-caption > span:not(.community-dot) { color: #5a6068; padding: 0 4px; }
.hero-art { position: relative; display: block; transform: rotate(-1deg); border-radius: 16px; border: 1px solid #ffffff25; box-shadow: 0 22px 60px #0007; overflow: hidden; }
.hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 930/380; object-fit: contain; }
.hero-art > span { position: absolute; bottom: 14px; left: 14px; right: 14px; width: fit-content; background: #15171bde; color: #fff; border: 1px solid #ffffff30; border-radius: 6px; padding: 9px 13px; font-size: 10px; backdrop-filter: blur(8px); }
.quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 42px; }
.quick-links a { display: flex; align-items: center; gap: 14px; padding: 19px; background: #1a1c20; border: 1px solid var(--grzyb-border); border-radius: 10px; transition: background .2s, border-color .2s; }
.quick-links a:hover { background: #22252a; border-color: #5d684f; }
.quick-icon { background: #b8ed840c; color: #b8ed84; width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; font-size: 17px; flex-shrink: 0; }
.quick-icon i { margin: 0; }
.quick-links strong, .help-card strong { display: block; color: #f2f3f5; font-size: 12px; }
.quick-links small, .help-card small { display: block; color: #989fa9; font-size: 10px; margin-top: 3px; }
.quick-links a > i:last-child { margin-left: auto; transform: rotate(45deg); color: #6f7580; font-size: 12px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }
.section-heading .eyebrow { margin-bottom: 6px; }
.section-heading h2, .section-heading h1 { font-size: 26px; font-weight: 800; letter-spacing: -.04em; margin: 0; }
.section-heading h2 > span, .section-heading h1 > span { color: #e54d53; }
.section-tag { color: #abb2bd; font-size: 10px; border: 1px solid #343840; padding: 4px 10px; border-radius: 5px; }
.card { background: #1a1c20; border: 1px solid var(--grzyb-border); border-radius: 10px; overflow: hidden; margin-bottom: 19px; box-shadow: 0 4px 16px #0001; }
.card-accent { border-top: 2px solid #e54d53; }
.card-header { background: #1e2025; border-bottom: 1px solid var(--grzyb-border); padding: 15px 19px; font-weight: 700; font-size: 13px; }
.card-header h5 { font-size: 17px; line-height: 1.5; font-weight: 700; }
.card-body { padding: 20px; }
.welcome-card { background: linear-gradient(110deg, #22291f, #1b1e21); border-color: #3c4932; border-left: 3px solid #b8ed84; }
.welcome-card .eyebrow { color: #b8ed84; }
.welcome-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.welcome-card p { margin: 10px 0 0; font-size: 12px; color: #aeb8ac; line-height: 1.85; }
.news-card .card-header { background: transparent; border: 0; padding: 23px 24px 8px; }
.news-card time { display: block; color: #9aa2af; font-size: 10px; font-weight: 500; margin-bottom: 8px; letter-spacing: .06em; }
.news-card .card-body { padding: 3px 24px 24px; color: #b5bac3; font-size: 13px; }
.news-card .card-text > :last-child { margin-bottom: 0; }
.server-status .data p { flex-wrap: wrap; gap: 5px; font-size: 11px; }
.server-status .data p > :last-child { overflow-wrap: anywhere; }
.badge-secondary { background: #30343b; }
.badge-success { background: #b8ed84; color: #17220e; }
.badge { font-size: 10px; padding: 5px 7px; font-weight: 600; }
.admin-status .status-container { font-size: 11px; gap: 5px; }
.admin-status .nickname { min-width: 0; }
.admin-status .group-name { font-size: 12px; }
.community-card h3 { font-size: 17px; font-weight: 800; }
.community-card p { font-size: 11px; color: #a8afb9; line-height: 1.8; margin: 10px 0; }
.community-card a { color: #d8dfd5; }
.community-card hr { border-color: #363b40; }
.community-card small { font-size: 9px; color: #8a929e; }
.legacy-stat { display: flex; justify-content: space-between; font-size: 11px; color: #a8afb9; padding-top: 8px; }
.legacy-stat strong { color: #e0e5ea; }
.grzyb-footer { position: static; background: #141519; border-top: 1px solid var(--grzyb-border); margin-top: 45px; padding: 32px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.footer-inner img { width: 140px; height: 40px; object-fit: contain; }
.footer-inner p { color: #969da8; margin: 10px 0 5px; font-size: 10px; }
.footer-inner small { color: #777f8b; font-size: 9px; }
.footer-inner nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 19px; max-width: 390px; }
.footer-inner nav a { color: #aeb5be; font-size: 11px; }
.footer-inner > .btn { flex-shrink: 0; }
.viewer-container { overflow-x: auto; padding-bottom: 12px; }
.viewer-container .client-container { min-height: 32px; cursor: pointer; border-radius: 5px; }
.viewer-container .client-container:hover, .viewer-container .client-container:focus { background: #b8ed840b; }
.viewer-avatar { width: 24px; height: 24px; object-fit: cover; border-radius: 6px; margin-right: 7px; vertical-align: middle; }
.viewer-container .client-name { white-space: nowrap; }
.viewer-container .channel { min-height: 26px; }
.popover { max-width: 335px; width: min(335px, calc(100vw - 24px)); border: 1px solid #495047; border-radius: 10px; background: #202328; box-shadow: 0 12px 45px #0009; }
.popover-header { background: #292d31; color: #fff; border-bottom: 1px solid #3c424a; padding: 12px 15px; font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.popover-body { color: #d3d8df; padding: 15px; font-size: 11px; }
.client-preview { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.popover-avatar { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.client-preview small { display: block; color: #b8ed84; font-size: 9px; margin-bottom: 4px; }
.client-description, .profile-description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.client-description { max-height: 155px; overflow-y: auto; margin: 0; }
.popover-body table { width: 100%; }
.popover-body td { vertical-align: top; padding: 3px 0; }
.popover-body td:first-child { color: #a8b0bc; }
.profile-avatar { object-fit: cover; }
.channel-join-modal .modal-dialog { max-width: 490px; margin-left: auto; margin-right: auto; padding: 12px; }
.channel-join-modal .modal-content { background: #1c2229; color: #edf2f7; border: 1px solid #49535e; border-radius: 15px; box-shadow: 0 24px 80px #0009; }
.channel-join-modal .modal-header { padding: 22px; border-bottom: 1px solid #36414c; align-items: center; }
.channel-join-heading { display: flex; align-items: center; gap: 13px; min-width: 0; }
.channel-join-heading h2 { color: #f5f8fc; font-size: 19px; font-weight: 700; margin: 0; }
.channel-join-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 11px; background: #30402f; color: #c8eea8; font-size: 20px; }
.channel-join-modal .close { color: #dce5ee; opacity: 1; text-shadow: none; font-size: 28px; }
.channel-join-modal .modal-body { padding: 22px; }
.channel-join-label { display: block; color: #aebdcb; font-size: 11px; margin-bottom: 7px; }
.channel-join-name { display: block; color: #dbf3c7; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.channel-join-modal .modal-body p { margin: 16px 0 0; color: #bdc9d6; font-size: 13px; line-height: 1.7; }
.channel-join-modal .modal-footer { padding: 16px 22px 22px; border-top: 1px solid #36414c; gap: 9px; }
.channel-join-modal .modal-footer .btn { margin: 0; font-size: 13px; font-weight: 700; min-height: 43px; display: inline-flex; align-items: center; justify-content: center; }
.channel-join-modal .btn:focus-visible, .channel-join-modal .close:focus-visible { outline: 2px solid #b8ed84; outline-offset: 3px; }
.profile-description { max-width: 560px; margin: 12px auto 20px; color: #b7bdc8; }
.contact-form { padding: 28px; }
.contact-form h2 { font-size: 22px; font-weight: 700; }
.contact-form form { margin-top: 25px; max-width: 640px; }
.contact-form label { display: block; font-size: 12px; font-weight: 600; }
.contact-form input:not([type=submit]), .contact-form textarea { width: 100%; background: #111316; border: 1px solid #3a3f47; border-radius: 7px; color: #f0f2f5; padding: 12px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 1px solid #b8ed84; border-color: #b8ed84; }
.contact-form textarea { min-height: 170px; resize: vertical; }
.contact-form .g-recaptcha { margin: 20px 0; max-width: 100%; overflow: auto; }
.table, .table td, .table th { color: #d3d8e1; border-color: #363a43; }
.page-link, .page-item.disabled .page-link { background: #202328; border-color: #3a4047; }
.page-item.active .page-link { background: #d8444c; border-color: #d8444c; }
.text-muted { color: #a4acb7 !important; }
@media (min-width: 992px) { .site-main > .row > .col-lg-9 { flex: 0 0 73%; max-width: 73%; } .site-main > .row > .col-lg-3 { flex: 0 0 27%; max-width: 27%; } }
@media (max-width: 1199px) { #main-navbar .navbar-brand { margin-right: 13px; } #main-navbar .navbar-brand img { width: 145px; height: 42px; } #main-navbar .navbar-nav .nav-link { font-size: 10px; padding: 10px 7px; } .hero-copy h1 { font-size: 40px; } .hero-actions .btn { font-size: 10px; } }
@media (max-width: 991px) { body { padding-top: 96px; } .grzyb-hero { gap: 25px; } .hero-copy h1 { font-size: 34px; } .hero-art img { aspect-ratio: 1.1; } .quick-links a { padding: 14px; gap: 10px; } .quick-links strong { font-size: 11px; } .quick-icon { width: 32px; height: 38px; font-size: 15px; } .quick-links small { font-size: 9px; } #main-navbar .navbar-collapse { margin: 16px 0 0; max-height: calc(100vh - 100px); overflow: auto; } #main-navbar .navbar-nav .nav-link { padding: 12px; font-size: 13px; } #navbarDropdownLanguageChooser { font-size: 12px !important; } .footer-inner { flex-wrap: wrap; } }
@media (max-width: 650px) { .container { padding-left: 18px; padding-right: 18px; } .community-bar { margin-bottom: 9px; } .grzyb-hero { grid-template-columns: 1fr; padding: 20px 0 26px; gap: 28px; } .hero-copy h1 { font-size: 40px; } .hero-copy p { font-size: 12px; max-width: 95%; margin-bottom: 20px; } .hero-actions { gap: 8px; } .hero-actions .btn { font-size: 10px; padding: 12px; } .hero-caption { margin-top: 17px; } .hero-art { transform: none; } .hero-art img { aspect-ratio: 930/380; object-fit: contain; } .quick-links { grid-template-columns: 1fr; gap: 9px; margin-bottom: 30px; } .quick-links a { padding: 12px 15px; } .quick-icon { width: 36px; height: 36px; } .quick-links small { font-size: 10px; } .quick-links strong { font-size: 12px; } .section-heading h2 { font-size: 24px; } .section-tag { display: none; } .card-body { padding: 17px; } .news-card .card-header { padding: 18px 18px 8px; } .news-card .card-body { padding: 3px 18px 18px; } .footer-inner { flex-direction: column; text-align: center; gap: 22px; } .footer-inner nav { max-width: 320px; } .contact-form { padding: 18px; } .grzyb-footer { margin-top: 24px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
/* Readable status colours override the legacy theme's lime/white badges. */
.server-status .data .badge { background-color: #2c333d; color: #edf2f7; border: 1px solid #45505e; }
.server-status .data p:nth-of-type(2) .badge { background-color: #223d31; color: #c9f1d8; border-color: #3f6551; }
.grzyb-hero { grid-template-columns: 1fr; gap: 24px; }
.hero-copy { display: grid; grid-template-columns: 1fr auto; column-gap: 28px; align-items: center; }
.hero-copy > .eyebrow, .hero-caption { grid-column: 1 / -1; }
.hero-copy h1 { font-size: clamp(28px, 3.2vw, 43px); margin-bottom: 0; }
.hero-copy h1 br { display: none; }
.hero-caption { margin-top: 16px; }
.weather-banner { margin: 0; min-width: 0; }
.weather-banner picture { display: block; border: 1px solid #344655; border-radius: 14px; overflow: hidden; background: #07192c; box-shadow: 0 18px 50px #0005; }
.weather-banner img { display: block; width: 100%; height: auto; aspect-ratio: auto 1856/560; }
.weather-banner figcaption { margin-top: 9px; color: #a5adb9; font-size: 10px; }
.weather-banner figcaption a { color: #b7cbdc; text-decoration: underline; }
.rank-intro { margin-bottom: 24px; color: #bcc5d0; font-size: 12px; }
.rank-intro > p { max-width: 780px; }
.rank-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rank-steps li { display: flex; align-items: center; gap: 11px; padding: 15px; background: #1a2026; border: 1px solid #364049; border-radius: 9px; }
.rank-steps li > span { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border-radius: 50%; background: #30452f; color: #d5f1c1; font-weight: 800; }
.rank-steps strong, .rank-steps small { display: block; }
.rank-steps strong { color: #eef3f7; font-size: 11px; }
.rank-steps small { color: #a7b3c0; margin-top: 4px; font-size: 10px; }
.rank-login-title { font-size: 21px; }
.rank-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.rank-toolbar label { margin: 0; color: #e6edf4; font-size: 11px; font-weight: 600; flex: 1; max-width: 420px; }
.rank-toolbar input { display: block; margin-top: 8px; width: 100%; background: #14191e; border: 1px solid #45505d; color: #fff; border-radius: 8px; padding: 11px 13px; }
.rank-toolbar input:focus { outline: 2px solid #b8ed84; outline-offset: 2px; }
.rank-toolbar p { max-width: 340px; color: #aab5c2; font-size: 10px; margin: 0; }
.rank-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: start; }
.rank-category { display: inline-block; width: 100%; min-width: 0; break-inside: avoid; vertical-align: top; margin: 0 0 18px; padding: 14px; background: #1a1e24; border: 1px solid #39414c; border-radius: 10px; }
.rank-category legend { display: flex; justify-content: space-between; gap: 10px; float: none; width: calc(100% - 8px); padding: 0 5px; margin: 0 0 8px; color: #eff3f7; font-size: 14px; font-weight: 700; }
.assigner-counter { padding: 3px 8px; border: 1px solid #4b5948; border-radius: 6px; background: #2a3a2c; color: #d7efcb; white-space: nowrap; font-size: 10px; align-self: center; }
.rank-category-hint { color: #aab7c6; font-size: 10px; line-height: 1.6; margin-bottom: 13px; }
.rank-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 7px; }
.rank-option { display: flex; align-items: center; gap: 7px; min-height: 48px; margin: 0; padding: 9px; border: 1px solid #414955; border-radius: 7px; background: #222831; color: #dbe2ec; font-size: 11px; line-height: 1.5; cursor: pointer; transition: background .15s, border-color .15s; }
.rank-option:hover { background: #2b333e; border-color: #778594; }
.rank-option:focus-within { outline: 2px solid #b8ed84; outline-offset: 2px; }
.rank-option input { width: 17px; height: 17px; flex-shrink: 0; accent-color: #b8ed84; cursor: inherit; }
.rank-option img { object-fit: contain; flex-shrink: 0; }
.rank-name { min-width: 0; overflow-wrap: anywhere; }
.rank-check { margin-left: auto; color: #ccf1b6; opacity: 0; font-size: 13px; }
.rank-option.is-selected { background: #25392d; border-color: #739966; color: #edf8e8; }
.rank-option.is-selected .rank-check { opacity: 1; }
.rank-option.is-unavailable { opacity: .55; cursor: not-allowed; }
.rank-option[hidden], .rank-empty[hidden], .rank-no-results[hidden], .rank-reset[hidden] { display: none; }
.rank-category.is-invalid { border-color: #ef8f8f; }
.rank-category.is-invalid .assigner-counter { color: #ffd4d4; background: #552b30; border-color: #b86469; }
.rank-category.is-invalid .rank-category-hint { color: #ffbaba; }
.rank-empty, .rank-no-results { font-size: 11px; color: #c2ceda; padding-top: 12px; }
.rank-savebar { position: sticky; bottom: 16px; z-index: 5; display: flex; justify-content: space-between; gap: 16px; align-items: center; background: #1d242df5; border: 1px solid #495564; border-radius: 10px; padding: 17px; box-shadow: 0 8px 28px #0007; }
.rank-savebar strong, .rank-savebar small { display: block; }
.rank-savebar strong { color: #dce5ee; font-size: 11px; }
.rank-savebar small { margin-top: 5px; color: #a6b4c3; font-size: 10px; }
.rank-save-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.rank-savebar .btn { font-size: 10px; }
.rank-savebar .assigner-save { min-width: 140px; }
.rank-savebar .assigner-save:disabled { background: #353d48; border-color: #525d6b; color: #aeb9c7; opacity: 1; cursor: not-allowed; }
.rank-savebar.has-changes { border-color: #9d555b; }
.rank-savebar.has-changes .assigner-save:enabled { box-shadow: 0 0 0 3px #e54d5320; }
.rank-savebar.has-changes .rank-save-status { color: #ffc8cb; }
.rank-savebar.has-error { border-color: #ef8f8f; }
#assigner-form[aria-busy=true] { pointer-events: none; }
@media (max-width: 650px) { .rank-steps { grid-template-columns: 1fr; gap: 7px; } .rank-steps li { padding: 11px; } .rank-toolbar { display: block; } .rank-toolbar p { margin-top: 13px; } .rank-categories { columns: 1; } .rank-savebar { flex-direction: column; align-items: stretch; bottom: 8px; padding: 12px; } .rank-save-actions { justify-content: flex-end; } .rank-savebar .btn { flex: 1; } }
@media (max-width: 991px) { .hero-copy { display: block; } .hero-copy h1 { margin-bottom: 20px; } }
@media (max-width: 650px) { .weather-banner img { aspect-ratio: auto 900/1050; } .weather-banner figcaption { line-height: 1.7; } }