* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
position: relative;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 10% 20%, rgba(255,255,255,0.05) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(255,255,255,0.05) 0%, transparent 20%);
pointer-events: none;
z-index: -1;
}
.antibot-container {
width: 100%;
max-width: 500px;
background: white;
border-radius: 20px;
box-shadow:
0 20px 60px rgba(0,0,0,0.3),
0 0 0 1px rgba(255,255,255,0.1) inset;
overflow: hidden;
animation: fadeInUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 1;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.security-alert {
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
color: white;
padding: 25px;
display: flex;
align-items: center;
gap: 20px;
position: relative;
overflow: hidden;
}
.security-alert::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255,255,255,0.1) 50%,
transparent 70%
);
animation: shine 3s infinite linear;
pointer-events: none;
}
@keyframes shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.alert-icon {
font-size: 42px;
flex-shrink: 0;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.alert-content h3 {
margin-bottom: 8px;
font-size: 20px;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.alert-content p {
opacity: 0.95;
font-size: 15px;
line-height: 1.5;
text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.captcha-box {
padding: 35px;
}
.captcha-header {
text-align: center;
margin-bottom: 30px;
}
.captcha-header h2 {
color: #2c3e50;
margin-bottom: 12px;
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #2c3e50, #4a6491);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.captcha-header p {
color: #7f8c8d;
font-size: 16px;
line-height: 1.5;
}
.math-captcha {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
border: 2px solid #e9ecef;
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.math-captcha:hover {
border-color: #3498db;
box-shadow: 0 8px 25px rgba(52, 152, 219, 0.15);
transform: translateY(-2px);
}
.math-problem {
font-size: 42px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.math-problem .number {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
padding: 15px 25px;
border-radius: 12px;
min-width: 90px;
display: inline-block;
font-weight: 700;
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
transition: all 0.3s ease;
}
.math-problem .number:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}
.math-problem .operator {
color: #2c3e50;
font-weight: 800;
font-size: 38px;
min-width: 30px;
}
.math-problem .equals {
color: #2c3e50;
font-weight: 800;
font-size: 38px;
min-width: 30px;
}
.captcha-input {
font-size: 36px;
width: 110px;
text-align: center;
padding: 15px;
border: 3px solid #3498db;
border-radius: 12px;
outline: none;
transition: all 0.3s ease;
font-weight: 600;
color: #2c3e50;
background: white;
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}
.captcha-input:focus {
border-color: #2980b9;
box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
transform: scale(1.02);
}
.captcha-input::placeholder {
color: #bdc3c7;
font-weight: normal;
}
.captcha-hint {
color: #7f8c8d;
font-size: 14px;
margin-top: 15px;
font-style: italic;
}
.security-questions {
margin: 30px 0;
display: grid;
gap: 25px;
}
.question {
position: relative;
}
.question label {
display: block;
margin-bottom: 10px;
color: #2c3e50;
font-weight: 600;
font-size: 16px;
padding-left: 5px;
}
.security-select {
width: 100%;
padding: 16px 20px;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 16px;
background: white;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
background-size: 20px;
padding-right: 50px;
background-repeat: no-repeat;
background-position: right center;
}
.security-select:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
.security-select option {
padding: 12px;
font-size: 15px;
}
.captcha-footer {
text-align: center;
margin-top: 35px;
}
.verify-btn {
background: linear-gradient(135deg, #2ecc71, #27ae60);
color: white;
border: none;
padding: 18px 45px;
font-size: 18px;
font-weight: 700;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
position: relative;
overflow: hidden;
letter-spacing: 0.5px;
}
.verify-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.verify-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(46, 204, 113, 0.6);
}
.verify-btn:hover::before {
left: 100%;
}
.verify-btn:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
}
.verify-btn:disabled {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.verify-btn:disabled:hover {
transform: none;
box-shadow: none;
}
.verify-btn.loading {
padding-right: 60px;
}
.verify-btn.loading::after {
content: '';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: translateY(-50%) rotate(360deg); }
}
.captcha-info {
margin-top: 20px;
color: #7f8c8d;
font-size: 13px;
line-height: 1.6;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.captcha-info small {
display: block;
font-size: 13px;
opacity: 0.8;
}
.tech-info {
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid #e9ecef;
}
.tech-info summary {
color: #3498db;
cursor: pointer;
font-weight: 600;
font-size: 15px;
outline: none;
padding: 10px;
border-radius: 8px;
transition: all 0.3s ease;
list-style: none;
position: relative;
padding-left: 30px;
}
.tech-info summary::-webkit-details-marker {
display: none;
}
.tech-info summary::before {
content: '▶';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
transition: transform 0.3s ease;
}
.tech-info[open] summary::before {
transform: translateY(-50%) rotate(90deg);
}
.tech-info summary:hover {
background: #f8f9fa;
color: #2980b9;
}
.tech-details {
margin-top: 20px;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
padding: 25px;
border-radius: 12px;
font-size: 14px;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tech-details p {
margin-bottom: 12px;
color: #2c3e50;
display: flex;
align-items: center;
gap: 10px;
}
.tech-details strong {
color: #34495e;
min-width: 180px;
display: inline-block;
font-weight: 600;
}
.tech-details span {
color: #555;
font-family: 'Courier New', monospace;
background: white;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid #ddd;
flex: 1;
word-break: break-all;
}
.error {
border-color: #e74c3c !important;
animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
background: linear-gradient(135deg, #ffebee, #ffcdd2) !important;
}
@keyframes shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-4px); }
40%, 60% { transform: translateX(4px); }
}
.error-message {
color: #e74c3c;
font-size: 14px;
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px;
animation: fadeIn 0.3s ease;
}
.error-message::before {
content: '⚠️';
font-size: 16px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
.success {
border-color: #2ecc71 !important;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9) !important;
}
.success-message {
color: #27ae60;
font-size: 14px;
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.success-message::before {
content: '✅';
font-size: 16px;
}
.progress-container {
margin: 25px 0;
}
.progress-bar {
height: 8px;
background: #ecf0f1;
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #3498db, #2ecc71);
border-radius: 4px;
width: 0%;
transition: width 0.5s ease;
position: relative;
overflow: hidden;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.4),
transparent
);
animation: progressShine 2s infinite linear;
}
@keyframes progressShine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.progress-text {
display: flex;
justify-content: space-between;
font-size: 13px;
color: #7f8c8d;
}
.tooltip {
position: relative;
display: inline-block;
cursor: help;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 250px;
background-color: #2c3e50;
color: white;
text-align: center;
border-radius: 8px;
padding: 12px;
position: absolute;
z-index: 1000;
bottom: 125%;
left: 50%;
margin-left: -125px;
opacity: 0;
transition: opacity 0.3s;
font-size: 13px;
line-height: 1.5;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
pointer-events: none;
}
.tooltip .tooltiptext::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #2c3e50 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
@media (max-width: 768px) {
html {
font-size: 15px;
}
body {
padding: 15px;
}
.antibot-container {
border-radius: 15px;
}
.security-alert {
padding: 20px;
flex-direction: column;
text-align: center;
gap: 15px;
}
.alert-icon {
font-size: 36px;
}
.captcha-box {
padding: 25px;
}
.captcha-header h2 {
font-size: 24px;
}
.math-captcha {
padding: 25px;
}
.math-problem {
font-size: 32px;
gap: 10px;
}
.math-problem .number {
padding: 12px 20px;
min-width: 70px;
}
.captcha-input {
width: 90px;
font-size: 30px;
padding: 12px;
}
.security-select {
padding: 14px 18px;
font-size: 15px;
}
.verify-btn {
padding: 16px 35px;
font-size: 16px;
}
.tech-details {
padding: 20px;
}
.tech-details p {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.tech-details strong {
min-width: auto;
width: 100%;
}
}
@media (max-width: 480px) {
html {
font-size: 14px;
}
body {
padding: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.antibot-container {
max-width: 100%;
}
.math-problem {
font-size: 28px;
}
.math-problem .number {
padding: 10px 15px;
min-width: 60px;
}
.captcha-input {
width: 80px;
font-size: 26px;
}
.verify-btn {
width: 100%;
padding: 16px;
}
}
@media print {
body {
background: white !important;
padding: 0;
}
.antibot-container {
box-shadow: none;
border: 1px solid #ddd;
max-width: 100%;
}
.security-alert, .verify-btn, .tech-info {
display: none;
}
.captcha-box {
padding: 20px;
}
}
@media (prefers-color-scheme: dark) {
.antibot-container {
background: #1a1a1a;
color: #e0e0e0;
}
.captcha-header h2 {
background: linear-gradient(135deg, #e0e0e0, #b0b0b0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.captcha-header p {
color: #b0b0b0;
}
.math-captcha {
background: linear-gradient(135deg, #2a2a2a, #333);
border-color: #444;
}
.math-problem .operator,
.math-problem .equals {
color: #e0e0e0;
}
.captcha-input {
background: #2a2a2a;
color: #e0e0e0;
border-color: #555;
}
.question label {
color: #e0e0e0;
}
.security-select {
background: #2a2a2a;
color: #e0e0e0;
border-color: #444;
background-repeat: no-repeat;
background-position: right center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.tech-details {
background: linear-gradient(135deg, #2a2a2a, #333);
}
.tech-details strong {
color: #d0d0d0;
}
.tech-details span {
background: #2a2a2a;
color: #e0e0e0;
border-color: #444;
}
.captcha-info {
color: #b0b0b0;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
:focus {
outline: 3px solid #3498db;
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #5a6fd8, #6a4190);
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
color: white;
font-size: 18px;
gap: 20px;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: #3498db;
animation: spin 1s linear infinite;
}
.footer-note {
text-align: center;
margin-top: 30px;
color: rgba(255,255,255,0.7);
font-size: 12px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.footer-note a {
color: rgba(255,255,255,0.9);
text-decoration: none;
border-bottom: 1px dotted rgba(255,255,255,0.5);
}
.footer-note a:hover {
color: white;
border-bottom-style: solid;
}