/* Extracted common styles for better caching */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --gp-top-bar-height: 80px; }
html, body, button, input, select, textarea { font-family: 'Roboto', sans-serif; }
body { font-family: 'Roboto', sans-serif; margin: 0; font-size: 16px; color: #333; background-color: #f4f4f4; padding: 0 20px 20px; }

.top-bar { position: sticky; top: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; background: #f9f9f9; padding: 10px; border: 3px solid #ddd; border-radius: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.1); width: 100%; max-width: 1000px; margin: 0 auto 10px; flex-wrap: nowrap; }
@media (max-width: 768px){ .top-bar { flex-wrap: wrap; } }
.user-info { font-size: .9rem; text-align: right; }
.button-container { display: flex; justify-content: flex-end; gap: 10px; align-items: center; width: 100%; }
.auth-form { display: flex; align-items: center; }
.topbar-logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; text-decoration: none; }
.topbar-logo-link picture { display: block; }
.topbar-logo-link .gp-topbar-logo { display: block; width: 220px; height: auto; max-width: 100%; overflow: visible; }
.gp-topbar-logo__mark { transform-origin: 17px 17px; }
.gp-topbar-logo__good-mark { filter: brightness(.88) saturate(1.08) contrast(1.02); }
.gp-topbar-logo__diamond { transform-box: fill-box; transform-origin: center; opacity: 0; animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
.gp-topbar-logo__diamond rect { stroke-width: 1.05px; paint-order: fill stroke; filter: drop-shadow(0 1px 1px rgba(3,8,18,.32)) drop-shadow(0 0 2px rgba(0,0,0,.12)); }
.gp-topbar-logo__diamond--top rect { stroke: #2758b4; }
.gp-topbar-logo__diamond--left rect { stroke: #bb6226; }
.gp-topbar-logo__diamond--right rect { stroke: #ab364c; }
.gp-topbar-logo__diamond--bottom rect { stroke: #19824e; }
.gp-topbar-logo__diamond--top { animation-name: gpTopbarLogoDiamondTop; }
.gp-topbar-logo__diamond--left { animation-name: gpTopbarLogoDiamondLeft; }
.gp-topbar-logo__diamond--right { animation-name: gpTopbarLogoDiamondRight; }
.gp-topbar-logo__diamond--bottom { animation-name: gpTopbarLogoDiamondBottom; }
.gp-topbar-logo__label-main { fill: #273245; }
.gp-topbar-logo__label-sub { fill: rgba(39,50,69,.56); }

@keyframes gpTopbarLogoDiamondTop {
	0% { transform: translate(0, 9.35px); opacity: 0; }
	7.042% { transform: translate(0, -2.25px); opacity: 1; }
	13.5%, 86.5% { transform: translate(0, -0.72px); opacity: 1; }
	92.958% { transform: translate(0, -2.25px); opacity: 1; }
	100% { transform: translate(0, 9.35px); opacity: 0; }
}

@keyframes gpTopbarLogoDiamondRight {
	0%, 5.986% { transform: translate(-9.35px, 0); opacity: 0; }
	13.028% { transform: translate(2.25px, 0); opacity: 1; }
	19.5%, 80.5% { transform: translate(0.72px, 0); opacity: 1; }
	86.972% { transform: translate(2.25px, 0); opacity: 1; }
	94.014%, 100% { transform: translate(-9.35px, 0); opacity: 0; }
}

@keyframes gpTopbarLogoDiamondBottom {
	0%, 11.972% { transform: translate(0, -9.35px); opacity: 0; }
	19.014% { transform: translate(0, 2.25px); opacity: 1; }
	25.5%, 74.5% { transform: translate(0, 0.72px); opacity: 1; }
	80.986% { transform: translate(0, 2.25px); opacity: 1; }
	88.028%, 100% { transform: translate(0, -9.35px); opacity: 0; }
}

@keyframes gpTopbarLogoDiamondLeft {
	0%, 17.958% { transform: translate(9.35px, 0); opacity: 0; }
	25% { transform: translate(-2.25px, 0); opacity: 1; }
	31.5%, 68.5% { transform: translate(-0.72px, 0); opacity: 1; }
	75% { transform: translate(-2.25px, 0); opacity: 1; }
	82.042%, 100% { transform: translate(9.35px, 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.gp-topbar-logo__diamond { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 768px) {
	.topbar-logo-link .gp-topbar-logo { width: 200px; height: auto; }
}
.top-bar img {max-height: 50px;}

body { padding-top: 0; }
.lang-dropdown { position: relative; display: inline-flex; align-items: center; }
.lang-dropdown-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 6px; background: #f1f1f1; color: #333; font-weight: 600; border: 1px solid #d0d0d0; cursor: pointer; font-size: 13px; transition: background 0.2s; font-family: inherit; }
.lang-dropdown-btn:hover { background: #e0e0e0; }
.lang-dropdown-menu { display: none; position: absolute; top: 110%; right: 0; background: #fff; border: 1px solid #d0d0d0; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.15); min-width: 80px; z-index: 2000; overflow: hidden; }
.lang-dropdown-menu.open { display: block; }
.lang-dropdown-item { display: flex; align-items: center; gap: 6px; padding: 7px 12px; color: #333; text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
.lang-dropdown-item:hover { background: #f0f0f0; }
.lang-dropdown-item.active { background: #e8f4fd; color: #0e87e6; }
.lang-code { font-size: 12px; }
.top-bar { justify-content: flex-start; gap: 6px; }
.topbar-nav-row { display: contents; }
.topbar-right-row { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.topbar-right-row .lang-dropdown { margin-left: 0; }
.nav-tb-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; background: #f1f1f1; color: #333; font-weight: 400; border: 1px solid #d0d0d0; cursor: pointer; font-size: 13px; transition: background 0.2s, color 0.2s; text-decoration: none; font-family: inherit; }
.nav-tb-btn:hover { background: #e0e0e0; color: #111; }
.nav-tb-btn:active { background: #d4d4d4; }
.nav-tb-btn.is-active,
.nav-tb-btn.is-active:hover,
.nav-tb-btn.is-active:active { background: #c7ced8; color: #0d2238; border-color: #aeb7c2; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.nav-dropdown-wrap { position: relative; display: inline-flex; align-items: center; }
.nav-more-btn { overflow: visible; }
.nav-more-menu { display: none; position: absolute; top: 110%; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.15); min-width: 180px; z-index: 2000; overflow: hidden; }
.nav-more-menu.open { display: block; }
.nav-more-item { display: block; padding: 9px 16px; color: #444; text-decoration: none; font-size: 13px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
.nav-more-item:last-child { border-bottom: none; }
.nav-more-item:hover { background: #f5f5f5; color: #0e87e6; }
.nav-more-item.is-active,
.nav-more-item.is-active:hover { background: #e2e8f0; color: #0d2238; font-weight: 700; }
.nav-more-label { display: block; padding: 10px 16px 6px; color: #7a7a7a; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: #f8f8f8; border-top: 1px solid #f0f0f0; }
.nav-more-label:first-child { border-top: none; }
.nav-more-ip-btn { width: 100%; background: none; border: none; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #444; padding: 9px 16px; border-top: 1px solid #f0f0f0; }
.nav-more-ip-btn:hover { background: #f5f5f5; color: #0e87e6; }
.nav-hamburger-btn { display: none; background: #f1f1f1; border: 1px solid #d0d0d0; border-radius: 6px; padding: 4px 10px; font-size: 20px; cursor: pointer; color: #333; line-height: 1; }
.nav-hamburger-sep { border: none; border-top: 2px solid #e8e8e8; margin: 4px 0; }
.nav-hamburger-auth-btn { display: block; width: 100%; background: none; border: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nav-hamburger-auth-actions { display: flex; align-items: stretch; gap: 10px; padding: 10px 12px 12px; }
.nav-hamburger-auth-actions > .nav-hamburger-auth-btn,
.nav-hamburger-auth-actions > .nav-hamburger-auth-form { flex: 1 1 0; min-width: 0; }
.nav-hamburger-auth-form { display: flex; margin: 0; }
.nav-hamburger-auth-actions .nav-hamburger-auth-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; padding: 8px 18px; border: none; border-radius: 12px; appearance: none; background: linear-gradient(135deg, var(--gp-blue, #1e88e5), var(--gp-cyan, #00acc1)); box-shadow: 0 12px 24px rgba(30,136,229,0.28); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.15; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.nav-hamburger-auth-actions .nav-hamburger-auth-btn:hover { background: linear-gradient(135deg, var(--gp-blue, #1e88e5), var(--gp-cyan, #00acc1)); box-shadow: 0 18px 34px rgba(0,172,193,0.32); transform: translateY(-2px); filter: brightness(1.03); }
.nav-hamburger-auth-actions .nav-hamburger-auth-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0,172,193,0.14), 0 12px 24px rgba(30,136,229,0.28); }
#navHamburgerMenu { left: auto; right: 0; transform: none; min-width: 220px; max-width: calc(100vw - 12px); }
.nav-hamburger-group-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; background: #f8fafc; border: none; border-bottom: 1px solid #edf1f5; padding: 10px 14px; color: #1f2937; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.nav-hamburger-group-btn:hover { background: #eef4ff; color: #0e87e6; }
.nav-hamburger-group-btn .caret { transition: transform .2s ease; }
.nav-hamburger-group-btn.is-open .caret { transform: rotate(180deg); }
.nav-hamburger-submenu { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: max-height .28s ease, opacity .22s ease, transform .22s ease; background: #fff; }
.nav-hamburger-submenu.open { max-height: 540px; opacity: 1; transform: translateY(0); }
.nav-hamburger-submenu .nav-more-item,
.nav-hamburger-submenu .nav-hamburger-auth-btn { padding-left: 22px; }
.nav-ham-proxy-sub-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; background: #f8fafc; border: none; border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; padding: 9px 22px; color: #334155; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; font-family: inherit; }
.nav-ham-proxy-sub-btn:hover { background: #eef4ff; color: #0e87e6; }
.nav-ham-proxy-sub-btn .caret { transition: transform .2s ease; }
.nav-ham-proxy-sub-btn.is-open .caret { transform: rotate(180deg); }
.nav-ham-proxy-submenu { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-2px); transition: max-height .25s ease, opacity .2s ease, transform .2s ease; background: #fff; }
.nav-ham-proxy-submenu.open { max-height: 380px; opacity: 1; transform: translateY(0); }
.nav-ham-proxy-submenu .nav-more-item { padding-left: 30px; }
#navHamburgerMenu .nav-hamburger-auth-btn:last-child { border-bottom: none; }
html, body { overflow-x: clip; }
@media (max-width: 768px){ .nav-more-menu:not(#navHamburgerMenu) { left: 0; right: auto; transform: none; } #navHamburgerMenu { left: auto; right: 0; } }
@media (max-width: 768px){ body { padding: 0; } .top-bar, .container, .good-proxies-container, .proxy-table-container { margin-left: 0; margin-right: 0; border-radius: 0; max-width: 100%; width: 100%; } }
@media (max-width: 980px){ .topbar-nav-row { display: none; } .user-info { display: none; } .nav-hamburger-btn { display: inline-flex; align-items: center; } }
.top-bar.is-overflowing .topbar-nav-row { display: none; }
.top-bar.is-overflowing .user-info { display: none; }
.top-bar.is-overflowing .nav-hamburger-btn { display: inline-flex; align-items: center; }

.container { width: 100%; max-width: 1000px; margin: 0 auto; border: 3px solid #ddd; background: #f9f9f9; padding: 20px; border-radius: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }

.menu-button,
.auth-form button { background-color: #007bff; color: #fff; padding: 5px 15px; border: none; border-radius: 5px; cursor: pointer; transition: background-color .3s ease; }
.auth-form { margin: 0; }

button.login-btn-styled,
button.menu-btn-styled,
.auth-form button.logout-btn-styled { display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px; border: none; border-radius: 12px; appearance: none; line-height: 1.15; white-space: nowrap; background: linear-gradient(135deg, var(--gp-blue, #1e88e5), var(--gp-cyan, #00acc1)); color: #ffffff; box-shadow: 0 12px 24px rgba(30,136,229,0.28); font-size: 14px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
button.login-btn-styled:hover,
button.menu-btn-styled:hover,
.auth-form button.logout-btn-styled:hover { background: linear-gradient(135deg, var(--gp-blue, #1e88e5), var(--gp-cyan, #00acc1)); color: #ffffff; box-shadow: 0 18px 34px rgba(0,172,193,0.32); transform: translateY(-2px); filter: brightness(1.03); }
button.login-btn-styled:focus-visible,
button.menu-btn-styled:focus-visible,
.auth-form button.logout-btn-styled:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0,172,193,0.14), 0 12px 24px rgba(30,136,229,0.28); }

#access-info #invalidKeyMessage.invalid-key-message,
#access-info #validKeyMessage.valid-key-message,
.button-container #invalidKeyMessage.invalid-key-message,
.button-container #validKeyMessage.valid-key-message {
	display: inline-block;
	margin-right: 1px;
	padding: 1px;
	border-radius: 5px;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

#access-info #invalidKeyMessage.invalid-key-message,
.button-container #invalidKeyMessage.invalid-key-message {
	color: red;
	border: 0.5px solid red;
	background-color: #ffe6e6;
}

#access-info #validKeyMessage.valid-key-message,
.button-container #validKeyMessage.valid-key-message {
	color: green;
	border: 0.5px solid green;
	background-color: #e6ffe6;
}

.proxy-route-breadcrumbs { display:flex; flex-wrap:nowrap; align-items:center; gap:10px; width:100%; max-width:1000px; margin:4px auto 5px; padding:7px 18px; overflow-x:auto; overflow-y:hidden; border:1px solid #cfd9e3; border-radius:14px; background: transparent; box-shadow: none; color:#4b5563; font-size:16px; line-height:1.2; white-space:nowrap; scrollbar-width:none; }
.proxy-route-breadcrumbs::-webkit-scrollbar { display:none; }
.proxy-route-breadcrumbs__link,
.proxy-route-breadcrumbs__current { display:inline-flex; align-items:center; gap:8px; min-height:26px; text-decoration:none; }
.proxy-route-breadcrumbs__link { color:#2a7590; font-weight:600; transition:color .18s ease; }
.proxy-route-breadcrumbs__link:hover { color:#215f75; }
.proxy-route-breadcrumbs__current { color:#5b626d; font-weight:600; }
.proxy-route-breadcrumbs__label { display:inline-block; letter-spacing:-0.02em; }
.proxy-route-breadcrumbs__icon { width:auto; height:auto; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color:#2a7590; }
.proxy-route-breadcrumbs__icon.is-flag { width:24px; height:18px; line-height:0; overflow:visible; }
.proxy-route-breadcrumbs__icon.is-flag .flag { transform:scale(1.55); transform-origin:center; box-shadow:0 1px 2px rgba(15,23,42,.12); border-radius:2px; }
.proxy-route-breadcrumbs__icon-svg { width:24px; height:24px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.proxy-route-breadcrumbs__sep { color:#b4bcc6; font-size:24px; font-weight:400; line-height:1; transform:translateY(-1px); }

.proxy-route-breadcrumbs + .good-proxies-container,
.proxy-route-breadcrumbs + .container,
.proxy-route-breadcrumbs + .proxy-kb-page,
.proxy-route-breadcrumbs + .proxy-short-page {
	margin-top: 4px;
}

@media (max-width: 768px) {
	.proxy-route-breadcrumbs { max-width: 100%; margin:3px auto 4px; padding:6px 10px; font-size:14px; gap:7px; border-radius:14px; }
	.proxy-route-breadcrumbs__link,
	.proxy-route-breadcrumbs__current { gap:6px; min-height:22px; }
	.proxy-route-breadcrumbs__icon.is-flag { width:20px; height:14px; }
	.proxy-route-breadcrumbs__icon.is-flag .flag { transform:scale(1.18); }
	.proxy-route-breadcrumbs__icon-svg { width:18px; height:18px; }
	.proxy-route-breadcrumbs__sep { font-size:18px; }

	.proxy-route-breadcrumbs + .good-proxies-container,
	.proxy-route-breadcrumbs + .container,
	.proxy-route-breadcrumbs + .proxy-kb-page,
	.proxy-route-breadcrumbs + .proxy-short-page {
		margin-top: 3px;
	}
}

.anchor-scroll-highlight { animation: anchorSectionPulse 1.6s ease; }

@keyframes anchorSectionPulse {
	0% { box-shadow: 0 0 0 rgba(11, 99, 206, 0); }
	35% { box-shadow: 0 0 0 8px rgba(11, 99, 206, 0.12), 0 14px 28px rgba(11, 99, 206, 0.16); }
	100% { box-shadow: 0 0 0 rgba(11, 99, 206, 0); }
}

.proxy-table-container { font-family: 'Roboto', sans-serif; margin: 30px auto; padding: 15px; max-width: 1000px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,123,255,.3); overflow:hidden; }
.table-wrapper { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; margin-bottom: 20px; }
.proxy-table { width:100%; border-collapse: collapse; text-align:left; }
.proxy-table th { background-color:#4CAF50; color:#fff; padding:10px 12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; text-align:center; }
.proxy-table td { padding:8px 12px; text-align:left; border-bottom:1px solid #ddd; height:50px; vertical-align:middle; position:relative; }

/* Accessibility helpers */

/* Cross-links block for hub pages */
.seo-cross-links { width:100%; max-width:1000px; margin:16px auto; padding:14px 18px; background:#f3f7fd; border:1px solid #d8e0ea; border-radius:10px; }
.seo-cross-links h3 { margin:0 0 8px; color:#1b2a44; font-size:17px; }
.seo-cross-links ul { margin:0; padding-left:20px; }
.seo-cross-links li { margin-bottom:4px; font-size:15px; line-height:1.65; color:#4e5c72; }
.seo-cross-links a { color:#0b63ce; text-decoration:none; }
.seo-cross-links a:hover { text-decoration:underline; }
@media (max-width:768px){ .seo-cross-links { padding:12px 14px; } .seo-cross-links h3 { font-size:15px; } .seo-cross-links li { font-size:14px; } }
.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap; border:0; padding:0; margin:-1px; }

/* Modals — structural base (visual theme in modal-theme.css) */
.modal { display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; overflow:auto; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Good proxies container */
.good-proxies-container { width: 1000px; max-width: 100%; background-color: #f9f9f9; border: 3px solid #ddd; border-radius: 18px; padding: 20px; margin: 20px auto; box-shadow: 0 4px 8px rgba(0,0,0,.1); text-align: left; color: #213244; }

/* Nav count */
.nav-count { color: #0067d4; font-weight: 700; }



/* Key status messages */
.invalid-key-message { font-weight: bold; color: red; margin-right: 1px; padding: 1px; border: .5px solid red; border-radius: 5px; background-color: #ffe6e6; display: inline-block; }
.valid-key-message { font-weight: bold; color: green; margin-right: 1px; padding: 1px; border: .5px solid green; border-radius: 5px; background-color: #e6ffe6; display: inline-block; }

/* Utility */
.disabled { pointer-events: none; opacity: .5; }


.article-meta { margin: -6px 0 18px; color: #6c7a8e; font-size: 14px; }
.article-meta time { font-style: normal; }

/* Footer */
footer { margin-top: 20px; text-align: center; font-size: .85rem; color: #48596b; line-height: 1.7; }
footer a { color: #1357a6; text-decoration: underline; text-underline-offset: .15em; }
footer a:hover, footer a:focus { color: #0b4281; }
footer img { vertical-align: middle; }
footer .payment-methods { margin-top: 10px; }
footer .payment-methods img { height: 30px; margin: 0 5px; }

/* Auth form extras */
.auth-form { margin: 0; }
.auth-form input { padding: 5px; margin-right: 5px; border: 1px solid #ccc; border-radius: 5px; }