:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #121212; background: #f8f8f8; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: #f8f8f8; }
button, select, textarea { font: inherit; }
button { cursor: pointer; font-weight: 850; }
.app-shell { width: 100%; min-height: calc(100vh - 50px); margin: 0; background: #fff; }
.city-header { position: relative; height: 116px; overflow: hidden; padding: 26px 25px 12px; border-bottom: 2px solid #151515; background: linear-gradient(180deg, #dce2e2 0 34%, #aeb6b8 34% 57%, #25282b 57% 100%); }
.city-header::after { content: ""; position: absolute; right: -5%; bottom: 0; width: 84%; height: 64px; opacity: .9; background: repeating-linear-gradient(90deg, transparent 0 11px, #202224 11px 19px, transparent 19px 34px), linear-gradient(90deg, #242629 0 12%, transparent 12% 18%, #1d1f21 18% 32%, transparent 32% 39%, #202225 39% 59%, transparent 59% 67%, #1c1e20 67% 88%, transparent 88%); clip-path: polygon(0 100%,0 48%,10% 48%,10% 15%,18% 15%,18% 64%,28% 64%,28% 26%,36% 26%,36% 100%,49% 100%,49% 5%,57% 5%,57% 72%,70% 72%,70% 34%,80% 34%,80% 100%); }
.brand, .header-actions, .status-line { position: relative; z-index: 1; }.brand { display: inline-flex; align-items: center; min-width: 170px; min-height: 58px; padding: 0 24px; border: 2px solid #111; border-radius: 9px 27px 9px 27px; color: #111; background: #fff; font-size: 28px; font-weight: 950; text-decoration: none; }.header-actions { float: right; display: flex; gap: 7px; align-items: center; }.online, .round-button, .menu-button { height: 35px; border: 1px solid #111; border-radius: 99px; background: rgba(255,255,255,.9); }.online { display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; font-size: 13px; font-weight: 900; }.online i { width: 8px; height: 8px; border-radius: 50%; background: #26a269; }.round-button { width: 35px; font-size: 20px; }.menu-button { display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; color: #111; font-size: 13px; }.status-line { margin: 5px auto 0; width: fit-content; padding: 2px 9px; color: #fff; border-radius: 99px; background: rgba(10,14,20,.78); font-size: 11px; font-weight: 900; }
.gate-card, .account-view, .home-view, .search-view, .chat-view, .ended-view { padding: 28px 25px; }.gate-card { margin: 34px 25px; padding: 28px; border: 1px solid #d1d6dc; border-radius: 23px; background: #eef0f1; }.eyebrow { margin: 0 0 8px; color: #3567dc; font-size: 12px; font-weight: 950; letter-spacing: .12em; }.gate-card h1, .account-card h1, .welcome-card h1, .search-center h1, .ended-view h1 { margin: 0; font-size: clamp(24px, 7vw, 31px); }.gate-card p { line-height: 1.5; }.gate-notice { display: grid; gap: 5px; margin: 18px 0; padding: 14px; border: 1px solid #f1d29d; border-radius: 13px; color: #714b00; background: #fff7e8; font-size: 13px; line-height: 1.45; }.check { display: block; margin: 16px 0; font-weight: 750; line-height: 1.4; }.check input { margin-right: 8px; }.legal-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; font-size: 13px; font-weight: 800; }.legal-links a { color: #1d4ed8; }.primary, .secondary-button, .muted-button, .outline-button, .connect-button { min-height: 50px; padding: 11px 19px; border-radius: 15px; }.primary { border: 0; color: #fff; background: #315ce6; }.secondary-button { border: 1px solid #b7c0ce; color: #263650; background: #fff; }.link-button { display: block; margin: 15px auto 0; padding: 5px; border: 0; color: #1d4ed8; background: transparent; font-weight: 850; text-decoration: underline; }.connect-button { display: block; width: min(100%, 330px); margin: 42px auto; border: 2px solid #111; color: #111; background: #fff; font-size: 19px; }.welcome-card { margin-top: 12px; padding: 28px; border-radius: 24px; text-align: center; background: #e4e5e6; }.welcome-card p { margin: 10px 0 0; font-size: 18px; font-weight: 700; }.region-field { display: grid; gap: 7px; font-weight: 800; }.region-field select { width: 100%; min-height: 54px; padding: 0 14px; border: 2px solid #171717; border-radius: 13px; color: #111; background: #f0f1f1; }.safety { margin: 28px 8px; color: #667085; font-size: 13px; line-height: 1.5; text-align: center; }.search-view { min-height: calc(100vh - 166px); display: flex; flex-direction: column; justify-content: space-between; }.search-center { display: grid; place-items: center; gap: 18px; padding-top: 30vh; }.progress { width: 75%; height: 4px; overflow: hidden; background: #d4d4d4; }.progress span { display: block; width: 56%; height: 100%; background: #727272; animation: scanning 1.8s linear infinite alternate; }@keyframes scanning { from { transform: translateX(0); } to { transform: translateX(80%); } }.muted-button { min-width: 190px; border: 0; background: #dedede; }.outline-button { width: 100%; border: 2px solid #111; background: #fff; }.messages { min-height: 45vh; max-height: 53vh; overflow-y: auto; display: grid; align-content: end; gap: 12px; }.message { max-width: 77%; padding: 13px 15px; border: 1px solid #c9d1dc; border-radius: 20px; background: #eef2f7; }.message.mine { justify-self: end; border-color: #164bdc; color: #fff; background: #315ce6; }.message small { display: block; margin-bottom: 5px; opacity: .75; font-size: 11px; font-weight: 900; }.message p { margin: 0; line-height: 1.45; white-space: pre-wrap; }.typing { width: 58px; height: 32px; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; border: 1px solid #d0d5db; border-radius: 99px; background: #f0f1f3; }.typing span { width: 7px; height: 7px; border-radius: 50%; background: #697386; }.chat-actions { display: flex; justify-content: space-around; margin: 16px -25px 0; padding: 12px; border-top: 1px solid #d0d5db; border-bottom: 1px solid #d0d5db; }.chat-actions button { border: 0; background: transparent; }.report { color: #e11d48; }.block { color: #d97706; }.composer { display: flex; gap: 10px; padding-top: 14px; }.composer textarea { flex: 1; min-height: 60px; max-height: 120px; padding: 12px; border: 2px solid #c9d1dc; border-radius: 15px; resize: vertical; }.ended-view { text-align: center; }.ended-view p { color: #667085; line-height: 1.5; }.ended-view .primary { width: 100%; margin-top: 18px; }.account-view { min-height: calc(100vh - 166px); display: grid; place-items: center; }.account-card { width: min(100%, 560px); padding: 28px; border: 1px solid #d1d6dc; border-radius: 23px; background: #eef0f1; }.account-card > p { line-height: 1.5; }.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 16px; }.account-form { display: grid; gap: 12px; }.account-form label { display: grid; gap: 6px; color: #344054; font-size: 13px; font-weight: 850; }.account-form input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #b7c0ce; border-radius: 12px; color: #111; background: #fff; }.account-message { min-height: 20px; margin: 14px 0 0; color: #b42318; font-size: 13px; line-height: 1.4; }.error { min-height: 22px; margin: 0; padding: 0 25px 16px; color: #d92d20; text-align: center; }.hidden { display: none !important; }footer { display: flex; justify-content: center; gap: 14px; padding: 15px; color: #667085; font-size: 12px; } footer a { color: inherit; }.document { width: min(860px, calc(100% - 40px)); margin: 48px auto; padding: 30px; border: 1px solid #d1d6dc; border-radius: 23px; background: #fff; line-height: 1.6; }.document h1 { margin-top: 0; }
body.dark { color: #edf2ff; background: #0e1523; } body.dark .app-shell { background: #101827; } body.dark .gate-card, body.dark .account-card, body.dark .welcome-card { background: #1d2939; border-color: #3b4b62; } body.dark .gate-notice { color: #fee3ab; border-color: #815d21; background: #2c2418; } body.dark .region-field select, body.dark .outline-button, body.dark .account-form input { color: #edf2ff; border-color: #52637d; background: #182337; } body.dark .secondary-button, body.dark .account-button { color: #edf2ff; border-color: #52637d; background: #182337; } body.dark .connect-button { color: #fff; border-color: #d5d9df; background: #172235; } body.dark .message { color: #eff6ff; border-color: #42526b; background: #22314a; } body.dark .chat-actions { border-color: #3b4b62; } body.dark .composer textarea { color: #fff; border-color: #42526b; background: #172235; } body.dark .muted-button { color: #fff; background: #34445d; }
.radio-panel { border: 1px solid #d0d5db; border-radius: 15px; padding: 15px; }.radio-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.radio-title-row h2 { margin: 0; color: #1d4ed8; font-size: 18px; }.text-button { padding: 5px 0; border: 0; color: #1d4ed8; background: transparent; }.radio-panel p { margin: 8px 0 13px; color: #667085; font-size: 13px; line-height: 1.45; }.radio-now-playing { margin-bottom: 9px; color: #344054; font-size: 13px; font-weight: 800; }.radio-audio { width: 100%; height: 38px; }.radio-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; border-top: 1px solid #e3e6ea; }.radio-list > span { padding: 14px 0; color: #667085; font-size: 13px; }.radio-station { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 9px; padding: 12px 11px; border: 0; border-bottom: 1px solid #e3e6ea; color: #172033; background: transparent; text-align: left; }.radio-station:nth-child(odd) { border-right: 1px solid #e3e6ea; }.radio-station:hover { background: #f4f7ff; }.radio-station strong, .radio-station small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.radio-station strong { font-size: 14px; }.radio-station small { color: #667085; font-size: 11px; }.radio-station b { grid-row: span 2; align-self: center; color: #1d4ed8; }.text-button:disabled { opacity: .45; cursor: wait; }body.dark .radio-panel { border-color: #3b4b62; } body.dark .radio-title-row h2, body.dark .text-button, body.dark .radio-station b { color: #9fc4ff; } body.dark .radio-panel p, body.dark .radio-now-playing, body.dark .radio-station small, body.dark .radio-list > span { color: #b2c0d5; } body.dark .radio-station { color: #edf2ff; border-color: #3b4b62; } body.dark .radio-list { border-color: #3b4b62; } body.dark .radio-station:nth-child(odd) { border-color: #3b4b62; } body.dark .radio-station:hover { background: #1b2a43; }
.shoutbox-panel { margin-top: 26px; padding: 15px; border: 1px solid #d0d5db; border-radius: 15px; background: #fff; }.shoutbox-panel > p { margin: 8px 0 13px; color: #667085; font-size: 13px; line-height: 1.45; }.shoutbox-form { display: grid; gap: 9px; }.shoutbox-form textarea { min-height: 76px; padding: 11px; border: 1px solid #b7c0ce; border-radius: 12px; color: #172033; background: #fff; resize: vertical; }.shoutbox-form-footer { display: flex; justify-content: space-between; gap: 10px; color: #667085; font-size: 12px; }.shoutbox-form .primary { min-height: 44px; }.shoutbox-guest { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; color: #52637d; font-size: 13px; line-height: 1.35; }.shoutbox-guest .secondary-button { min-height: 39px; padding: 8px 11px; white-space: nowrap; }.shoutbox-list { display: grid; gap: 9px; margin-top: 13px; }.shoutbox-list > span { color: #667085; font-size: 13px; }.shoutbox-entry { padding: 12px; border: 1px solid #e0e5ec; border-radius: 12px; background: #f7f9fc; }.shoutbox-entry div { display: flex; justify-content: space-between; gap: 10px; }.shoutbox-entry strong { color: #1d4ed8; font-size: 13px; }.shoutbox-entry small { color: #667085; font-size: 11px; }.shoutbox-entry p { margin: 7px 0 0; color: #172033; font-size: 14px; line-height: 1.42; white-space: pre-wrap; }body.dark .shoutbox-panel { border-color: #3b4b62; background: #182337; } body.dark .shoutbox-panel > p, body.dark .shoutbox-form-footer, body.dark .shoutbox-guest, body.dark .shoutbox-list > span, body.dark .shoutbox-entry small { color: #b2c0d5; } body.dark .shoutbox-form textarea { color: #edf2ff; border-color: #52637d; background: #101827; } body.dark .shoutbox-entry { border-color: #3b4b62; background: #1d2939; } body.dark .shoutbox-entry strong { color: #9fc4ff; } body.dark .shoutbox-entry p { color: #edf2ff; }
.settings-view { min-height: calc(100vh - 166px); display: grid; place-items: center; padding: 28px 25px; }.settings-card { width: min(100%, 720px); padding: 28px; border: 1px solid #d1d6dc; border-radius: 23px; background: #eef0f1; }.settings-card h1 { margin: 0; font-size: clamp(25px, 5vw, 34px); }.settings-card > p { line-height: 1.5; }.settings-list { margin: 22px 0; border: 1px solid #d1d6dc; border-radius: 16px; overflow: hidden; background: #fff; }.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px; cursor: pointer; }.setting-row + .setting-row { border-top: 1px solid #e1e5ea; }.setting-row span { display: grid; gap: 5px; }.setting-row strong { font-size: 15px; }.setting-row small { color: #667085; line-height: 1.4; }.setting-row input { flex: 0 0 auto; width: 44px; height: 25px; accent-color: #315ce6; }.consent-summary { margin: 22px 0; padding: 17px; border: 1px solid #b8caf6; border-radius: 16px; background: #edf3ff; }.consent-summary h2 { margin: 0; font-size: 18px; }.consent-summary p { line-height: 1.75; }.settings-documents { display: flex; flex-wrap: wrap; gap: 14px; margin: 20px 0; font-weight: 800; }.settings-documents a { color: #1d4ed8; }body.dark .settings-card { background: #1d2939; border-color: #3b4b62; } body.dark .settings-list { border-color: #3b4b62; background: #182337; } body.dark .setting-row + .setting-row { border-color: #3b4b62; } body.dark .setting-row small { color: #b2c0d5; } body.dark .consent-summary { border-color: #40567f; background: #172a49; } body.dark .settings-documents a { color: #9fc4ff; }
.report-dialog { width: min(560px, calc(100% - 34px)); border: 1px solid #c8d1de; border-radius: 20px; color: #172033; background: #fff; box-shadow: 0 24px 65px rgba(16,24,39,.38); }.report-dialog::backdrop { background: rgba(15,23,42,.58); }.report-dialog form { display: grid; gap: 15px; padding: 25px; }.report-dialog h2 { margin: 0; font-size: 25px; }.report-dialog p { margin: -3px 0 2px; color: #5b6678; line-height: 1.45; }.report-dialog label { display: grid; gap: 7px; color: #344054; font-size: 13px; font-weight: 850; }.report-dialog select, .report-dialog textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #aeb9ca; border-radius: 12px; color: #172033; background: #fff; }.report-dialog textarea { min-height: 92px; resize: vertical; }.report-dialog label small { color: #667085; font-weight: 600; }.report-dialog .dialog-check { display: block; line-height: 1.45; }.dialog-check input { margin-right: 8px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }body.dark .report-dialog { color: #edf2ff; border-color: #42526b; background: #182337; } body.dark .report-dialog p, body.dark .report-dialog label, body.dark .report-dialog label small { color: #c8d4e7; } body.dark .report-dialog select, body.dark .report-dialog textarea { color: #edf2ff; border-color: #52637d; background: #101827; }
@media (min-width: 860px) { .city-header { height: 140px; padding: 34px max(48px, 7vw) 16px; }.city-header::after { width: 93%; }.brand { min-width: 218px; min-height: 64px; font-size: 32px; }.header-actions { margin-right: max(8px, 4vw); }.status-line { margin-top: 9px; }.gate-card { width: min(760px, calc(100% - 96px)); margin: 52px auto; }.home-view, .search-view, .chat-view, .ended-view, .settings-view { width: 100%; margin: 0; padding: 42px clamp(48px, 7vw, 154px); }.home-view { display: grid; grid-template-columns: minmax(520px, 1fr) minmax(420px, .78fr); column-gap: clamp(48px, 6vw, 150px); align-items: start; }.welcome-card { grid-column: 1; margin-top: 0; min-height: 190px; display: grid; place-content: center; }.connect-button, .region-field, .safety { grid-column: 1; width: min(100%, 590px); }.connect-button { margin: 32px auto; }.safety { margin: 28px auto; }.shoutbox-panel { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }.radio-panel { grid-column: 2; grid-row: 3 / span 3; min-height: 430px; }.radio-list { max-height: 460px; overflow-y: auto; }.search-view { min-height: calc(100vh - 190px); }.messages { min-height: 54vh; max-height: 58vh; }.ended-view { max-width: 920px; }.radio-station { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 430px) { .city-header { height: 101px; padding: 20px 16px 9px; }.brand { min-width: 142px; min-height: 50px; padding: 0 18px; font-size: 24px; }.online { padding: 0 8px; font-size: 11px; }.gate-card { margin: 24px 16px; }.gate-card, .home-view, .search-view, .chat-view, .ended-view { padding-left: 17px; padding-right: 17px; }.chat-actions { margin-left: -17px; margin-right: -17px; } }
.account-message.success { color: #067647; font-weight: 750; }.account-profile-details { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 16px 0 0; padding: 13px 15px; border: 1px solid #9cccb2; border-radius: 13px; color: #155b37; background: #eaf8ee; font-size: 13px; }.account-profile-details p { margin: 0; }.account-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; width: min(100%, 650px); margin: 18px auto 0; padding: 17px 19px; border: 1px solid #b8caf6; border-radius: 18px; background: #edf3ff; }.account-summary > div { display: grid; gap: 3px; }.account-summary-label, .coin-balance span { color: #52637d; font-size: 11px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }.account-summary strong { font-size: 18px; }.account-summary small { color: #52637d; font-size: 12px; }.coin-balance { text-align: right; }.coin-balance b { color: #1d4ed8; }.account-summary .secondary-button { min-height: 42px; white-space: nowrap; }.home-view .account-summary { grid-column: 1; }body.dark .account-profile-details { border-color: #2d7050; color: #b7f2ce; background: #152d22; } body.dark .account-summary { border-color: #40567f; background: #172a49; } body.dark .account-summary-label, body.dark .account-summary small, body.dark .coin-balance span { color: #b2c0d5; }

/* Graficzny znaczek pobierania aplikacji, ponad odnośnikami prawnymi. */
footer { flex-wrap: wrap; align-items: center; }
footer .android-download { order: -1; display: flex; justify-content: center; flex-basis: 100%; margin: 2px 0 8px; }
.android-download img { display: block; max-width: 100%; height: auto; border-radius: 13px; transition: transform .15s ease; }
.android-download:hover img { transform: translateY(-2px); }
.android-download:focus-visible { outline: 3px solid #315ce6; outline-offset: 5px; border-radius: 13px; }
@media (prefers-reduced-motion: reduce) { .android-download img { transition: none; }.android-download:hover img { transform: none; } }