/* Extracted common styles for better caching */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; font-size: 16px; color: #333; background-color: #f4f4f4; padding: 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; } }
.top-bar img {max-height: 50px;}

.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); }

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

.good-proxies-button { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; margin: 5px; background-color: #696969; color: #fff; text-decoration: none; border-radius: 5px; transition: background-color .3s ease, transform .3s ease, color .3s ease; font-size: 14px; text-align: center; cursor: pointer; border: 2px solid #808080; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: relative; overflow: hidden; }
.good-proxies-button:hover { background-color: #0e87e6; transform: scale(1.05); color: #fff; }

.flex-container { display: flex; justify-content: space-between; margin: 10px auto; width: 100%; max-width: 1000px; flex-wrap: wrap; }
.flex-item { width: calc(25% - 7.5px); height: 180px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); padding: 20px; text-align: center; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: transform .3s ease-in-out; position: relative; overflow: hidden; }
.flex-item:hover { transform: scale(1.03); }
.flex-item.red{background: linear-gradient(135deg,#F25320,#F8A990);} .flex-item.green{background:linear-gradient(135deg,#00b09b,#CAE49E);} .flex-item.orange{background:linear-gradient(135deg,#f2994a,#F8E4A6);} .flex-item.blue{background:linear-gradient(135deg,#1c92d2,#f2fcfe);} .flex-item .letter{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18rem;opacity:.35;z-index:0;}

.slide-container { width: 100%; max-width: 1000px; margin: 0 auto 20px; background: #f9f9f9; padding: 20px; border: 3px solid #ddd; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); overflow: hidden; position: relative; }
.slider { display: flex; transition: transform .5s ease-in-out; }
.slide { flex: 0 0 100%; position: relative; }
.slide img { width: 100%; height: auto; border-radius: 8px; }
.slide-content { position: absolute; bottom: 20px; left: 20px; color: #fff; background: rgba(0,0,0,.5); padding: 10px; border-radius: 8px; }

.proxy-table-container { font-family: Arial, sans-serif; margin: 30px auto; padding: 15px; max-width: 1200px; 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 */
.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; }

/* Buttons set */
.menu-button, .auth-form button { background-color:#007bff; color:#fff; padding:5px 15px; border:none; border-radius:5px; cursor:pointer; transition:background-color .3s; }
.menu-button:hover, .auth-form button:hover { background-color:#0056b3; }

/* Modals */
.modal { display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; overflow:auto; background-color: rgba(0,0,0,.7); }
.modal-content, .modal-content2, .modal-content3 { border-radius: 16px; }