/* Стилі для https://w3schoolsua.github.io/vpnlist/index.html */
body {margin: 0;font-family: Arial, sans-serif;background: #f7f7f7;color: #222;transition: background 0.3s ease, color 0.3s ease}
body.dark {background: #1a1a1a;color: #e5e5e5}
.topbar {display: flex;justify-content: space-between;align-items: center;padding: 5px 15px;background: #008459;color: white}
.topbar .logo {color: white;text-decoration: none;font-weight: bold;text-shadow: 1px 1px 2px #000}
.logo:hover {color: yellow}
.theme-btn {background: transparent;border: none;font-size: 24px;cursor: pointer;color: white;transition: transform 0.3s ease}
.theme-btn:hover {transform: rotate(20deg)}
body.dark .theme-btn {color: #ffdd57}
main {padding: 10px;display: flex;flex-direction: column;align-items: center}
h1 {text-align: center; margin-bottom: 20px;color: #333}
body.dark h1 {color: #ddd}
.search-box {width: 96%;max-width: 920px}
.filter-box {width: 100%;max-width: 960px}
#searchInput {width: 100%;padding:12px; margin: 10px -15px; font-size: 16px;border: 2px solid #4CAF50;border-radius: 6px;outline: none;transition: 0.3s}
body.dark #searchInput {background: #2a2a2a;color: #eee;border-color: #008459}
#searchInput:focus {border-color: #008459}
.table-wrapper {width: 100%;max-width: 990px;margin: 5px -20px;overflow-x: auto;background: white;padding: 5px;border-radius: 8px;box-shadow: 0 0 10px rgba(0,0,0,0.1)}
body.dark .table-wrapper {background: #2a2a2a;box-shadow: 0 0 10px rgba(255,255,255,0.05)}
table {width: 100%;border-collapse: collapse}
thead {background: #008459;color: white}
body.dark thead {background: #008459}
th, td {padding: 12px;border-bottom: 1px solid #ddd}
body.dark td {border-bottom: 1px solid #444}
td a {color: #0077cc;text-decoration: none}
body.dark td a {color: #66aaff}
td a:hover {text-decoration: underline}
td img {width: 32px;height: 32px;border-radius: 6px}

th {position: relative;cursor: pointer;user-select: none;padding-right: 18px;  /* місце для стрілочок */}
th:hover {color: yellow; /* легкий натяк, що це активний елемент */}
th::after {content: "⇅";position: absolute;right: 6px;top: 50%;transform: translateY(-50%);font-size: 12px;opacity: 0.4;transition: opacity 0.2s;}
th:hover::after {opacity: 0.9;}
th.sorted-asc::after {content: "↑";opacity: 1;}
th.sorted-desc::after {content: "↓";opacity: 1;}

.article-wrapper {width: 100%;max-width: 990px;margin: 5px -20px;overflow-x: auto;padding: 5px;border-radius: 8px;box-shadow: 0 0 10px rgba(0,0,0,0.1)}
hr {border: none;height: 1px;background-color: #4c4c4c;margin: 1rem 0}
hr.dark {background-color: #414141;}

#scrollTopBtn {position: fixed;bottom: 10px;right: 10px;background: #008459;color: white;border: none;padding: 8px 10px;font-size: 20px;border-radius: 8px;cursor: pointer;display: none;transition: background 0.3s, transform 0.3s;z-index: 999}
#scrollTopBtn:hover {background: #45a049;transform: translateY(-3px)}
body.dark #scrollTopBtn {background: #008459;color: #222}
body.dark #scrollTopBtn:hover {background: #81c784}
.center {text-align: center}
.red {color:red}
.green {color:green}
@media (max-width: 600px) {
    th, td {padding: 10px;font-size: 14px}
    .table-wrapper {padding: 5px}
    #scrollTopBtn {bottom: 15px;right: 15px;font-size: 18px}
    h1 {font-size: 0.95rem}
    .search-box {width: 92%;max-width: 480px}
}

.adver_adup {display: block; text-align: center}
.adver_adinarticle {display: block}
.adver_addown {display:block; text-align: center}
.adver_adfooter {display:block}
.adver_adinfeed {display:block}
.adver {display:none!important;}
.adver2 {display:block}
.adver3 {display:block}
.admedia-square-rightbar {display:block}
.adver_admultiplex1 {display:block}
.adver_admultiplex_rightbar1 {display:block}
ins.adsbygoogle[data-ad-status="unfilled"] {display: none !important;} /*Приховати блок AdSense, якщо реклама не відображається*/