body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: 'Be Vietnam Pro', sans-serif;
    background-color: #050508;
    color: #e0e0e0;
}

/* --- Nền và các hiệu ứng background (Giữ nguyên) --- */
.cyber-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; background: #020204; }
#digital-canvas { display: block; width: 100%; height: 100%; z-index: 1; }
.vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,0) 30%, rgba(2,2,4,0.7) 100%); pointer-events: none; z-index: 2; }
.scanline { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: linear-gradient(to bottom, rgba(0,243,255,0), rgba(0,243,255,0.08) 50%, rgba(0,243,255,0)); opacity: 0.5; animation: scan 4s linear infinite; z-index: 3; pointer-events: none; }
@keyframes scan { 0% { transform: translateY(-200px); } 100% { transform: translateY(100vh); } }
.grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px); background-size: 30px 30px; z-index: 1; pointer-events: none; animation: gridPulse 4s infinite alternate; }
@keyframes gridPulse { 0% { opacity: 0.2; } 100% { opacity: 0.6; } }

/* --- Modal Overlay (Giữ nguyên) --- */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(2, 2, 4, 0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: center; z-index: 10; }
.modal { background: rgba(10, 10, 15, 0.85); border: 1px solid #1f1f2e; border-top: 2px solid #00f3ff; border-bottom: 2px solid #bb86fc; border-radius: 4px; padding: 40px 50px; width: 90%; max-width: 500px; text-align: center; color: #e0e0e0; box-shadow: 0 0 30px rgba(0, 243, 255, 0.1), inset 0 0 20px rgba(187, 134, 252, 0.05); position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); animation: modalFlicker 2s infinite; }
@keyframes modalFlicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { box-shadow: 0 0 30px rgba(0, 243, 255, 0.1), inset 0 0 20px rgba(187, 134, 252, 0.05); } 20%, 24%, 55% { box-shadow: 0 0 30px rgba(0, 243, 255, 0.3), inset 0 0 20px rgba(187, 134, 252, 0.2); } }

/* --- Tiêu đề Glitch (Giữ nguyên) --- */
.glitch { font-family: 'Share Tech Mono', monospace; font-size: 2em; font-weight: 700; color: #fff; position: relative; display: inline-block; margin-top: 0; margin-bottom: 20px; text-shadow: 0 0 10px rgba(0, 243, 255, 0.8); letter-spacing: 2px; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; }
.glitch::before { left: 2px; text-shadow: -2px 0 #bb86fc; clip: rect(24px, 550px, 90px, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -2px 0 #00f3ff; clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; }
@keyframes glitch-anim { 0% { clip: rect(10px, 9999px, 86px, 0); } 20% { clip: rect(69px, 9999px, 14px, 0); } 40% { clip: rect(21px, 9999px, 98px, 0); } 60% { clip: rect(51px, 9999px, 16px, 0); } 80% { clip: rect(32px, 9999px, 78px, 0); } 100% { clip: rect(81px, 9999px, 3px, 0); } }
@keyframes glitch-anim-2 { 0% { clip: rect(65px, 9999px, 100px, 0); } 20% { clip: rect(3px, 9999px, 80px, 0); } 40% { clip: rect(90px, 9999px, 34px, 0); } 60% { clip: rect(15px, 9999px, 5px, 0); } 80% { clip: rect(50px, 9999px, 60px, 0); } 100% { clip: rect(20px, 9999px, 40px, 0); } }

.modal .subtitle { color: #8fa1b3; font-size: 0.9em; line-height: 1.6; font-family: 'Share Tech Mono', monospace; }
.disclaimer-text { font-size: 0.85em; color: #6a737d; line-height: 1.5; margin: -10px 0 30px 0; border-left: 2px solid #30363d; padding-left: 15px; text-align: left; }

/* --- Input, Buttons --- */
.input-group { position: relative; margin-bottom: 20px; }
.input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #555e68; transition: color 0.3s; }
#account-input, #key-input { width: 100%; padding: 15px 15px 15px 45px; background-color: #0c0d12; border: 2px solid #30363d; border-radius: 2px; color: #e0e0e0; font-family: 'Share Tech Mono', monospace; font-size: 1.1em; transition: all 0.3s; box-sizing: border-box; }
#account-input:focus, #key-input:focus { outline: none; border-color: #00f3ff; box-shadow: 0 0 15px rgba(0, 243, 255, 0.3); }
#account-input:focus + i, #key-input:focus + i, .input-group:focus-within i { color: #00f3ff; }
#check-btn, #reset-btn, #key-submit-btn { background: rgba(0, 243, 255, 0.1); color: #00f3ff; border: 2px solid #00f3ff; border-radius: 2px; padding: 16px 0; width: 100%; font-size: 1.2em; font-family: 'Share Tech Mono', monospace; font-weight: 700; cursor: pointer; transition: all 0.3s ease; letter-spacing: 2px; text-transform: uppercase; box-shadow: 0 0 15px rgba(0, 243, 255, 0.2), inset 0 0 10px rgba(0, 243, 255, 0.1); }
#check-btn:hover, #reset-btn:hover, #key-submit-btn:hover { background: #00f3ff; color: #020204; box-shadow: 0 0 25px rgba(0, 243, 255, 0.6), inset 0 0 15px rgba(0, 243, 255, 0.4); }

/* --- CSS MỚI: Hiệu ứng và thông báo lỗi cho Key Modal --- */
.error-text {
    color: #dc3545;
    font-family: 'Share Tech Mono', monospace;
    margin-top: 15px;
    text-shadow: 0 0 8px rgba(220, 53, 69, 0.7);
    display: none; /* Ẩn ban đầu */
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.modal.fade-out {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.modal.fade-in {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* --- Progress và Result (Giữ nguyên) --- */
#progress-container { padding: 20px 0; height: 75px; }
#status-text { font-family: 'Share Tech Mono', monospace; color: #bb86fc; margin-bottom: 15px; text-shadow: 0 0 5px rgba(187, 134, 252, 0.5); height: 20px; display: inline-block; position: relative; }
#status-text.typing::after { content: '|'; position: absolute; right: -10px; color: #00f3ff; animation: blink 1s step-end infinite; }
@keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } }
.progress-bar-wrapper { width: 100%; height: 10px; background-color: rgba(0, 0, 0, 0.3); border: 1px solid #30363d; border-radius: 2px; padding: 2px; }
.progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #bb86fc, #00f3ff); border-radius: 1px; transition: width 0.5s ease-out; box-shadow: 0 0 10px rgba(0, 243, 255, 0.7); }
#result-container { padding: 10px 0; opacity: 0; transform: scale(0.98); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
#result-container.visible { opacity: 1; transform: scale(1); }
#result-title { font-family: 'Share Tech Mono', monospace; font-size: 1.5em; letter-spacing: 2px; margin-bottom: 15px; }
#result-description { color: #c9d1d9; line-height: 1.7; margin-bottom: 30px; transition: opacity 0.5s ease 0.2s; }
#reset-btn { transition: opacity 0.5s ease 0.4s; }
@keyframes pulse-safe { 0%, 100% { text-shadow: 0 0 10px rgba(40, 167, 69, 0.7); } 50% { text-shadow: 0 0 18px rgba(40, 167, 69, 1); } }
@keyframes pulse-warning { 0%, 100% { text-shadow: 0 0 10px rgba(255, 193, 7, 0.7); } 50% { text-shadow: 0 0 18px rgba(255, 193, 7, 1); } }
@keyframes pulse-danger { 0%, 100% { text-shadow: 0 0 10px rgba(220, 53, 69, 0.7); } 50% { text-shadow: 0 0 18px rgba(220, 53, 69, 1); } }
.result-safe { color: #28a745; animation: pulse-safe 2.5s infinite; }
.result-warning { color: #ffc107; animation: pulse-warning 2.5s infinite; }
.result-danger { color: #dc3545; animation: pulse-danger 2.5s infinite; }

/* --- CSS Widget và Responsive (Giữ nguyên) --- */
.floating-telegram-btn { position: fixed; bottom: 35px; right: 35px; z-index: 9999; width: 60px; height: 60px; border-radius: 0; clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%); text-decoration: none; display: flex; justify-content: center; align-items: center; outline: none; transition: all 0.3s ease; background: rgba(10, 10, 15, 0.9); border: 1px solid #00f3ff; box-shadow: 0 0 15px rgba(0,243,255,0.3); }
.floating-telegram-btn .icon-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; position: relative; background: transparent; }
.floating-telegram-btn i { color: #0088cc; font-size: 32px; margin-right: 2px; }
.pulse-ring { content: ''; width: 100%; height: 100%; border: 1px solid #00f3ff; position: absolute; top: -1px; left: -1px; clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%); animation: pulsateCyber 2s infinite ease-out; z-index: 1; }
@keyframes pulsateCyber { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } }
.floating-telegram-btn:hover { transform: scale(1.1); background: rgba(0, 243, 255, 0.1); box-shadow: 0 0 25px rgba(0,243,255,0.6); }
.notification-dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; background-color: #ff003c; border: 1px solid #0a0a0f; animation: dotPulseCyber 2s infinite; z-index: 3; }
@keyframes dotPulseCyber { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 60, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(255, 0, 60, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 60, 0); } }
@media (max-width: 480px) { .modal { padding: 30px 20px; } .floating-telegram-btn { bottom: 25px; right: 25px; width: 55px; height: 55px; } .floating-telegram-btn i { font-size: 28px; } }
/* --- CSS MỚI (ĐÃ TINH CHỈNH): Công tắc chuyển đổi chế độ --- */
.mode-switch-container {
    position: fixed;
    top: 25px;
    right: 35px;
    z-index: 1000;
    display: flex;
    align-items: center;
    font-family: 'Share Tech Mono', monospace;
}

.mode-switch-container span {
    color: #8fa1b3;
    margin-right: 15px;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.mode-switch-container .toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.mode-switch-container .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(12, 13, 18, 0.7); /* Nền tối hơn một chút */
    border: 2px solid #dc3545; /* Viền dày hơn, rõ nét hơn */
    border-radius: 34px;
    transition: all 0.3s ease-in-out; /* Chuyển động mượt mà, không nảy */
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.7); /* Quầng sáng nhỏ và tập trung hơn */
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px; /* Chỉnh lại kích thước cho cân đối */
    width: 20px;
    left: 4px;
    bottom: 3px; /* Căn giữa theo chiều dọc */
    background-color: #e0e0e0;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

input:checked + .slider {
    border-color: #28a745;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.9); /* Quầng sáng xanh tập trung */
}

input:checked + .slider:before {
    transform: translateX(28px); /* Điều chỉnh lại khoảng cách di chuyển */
    background-color: #ffffff;
}

/* Thay đổi màu chữ khi bật/tắt (Giữ nguyên) */
.mode-switch-container.safe-mode span {
    color: #28a745;
    text-shadow: 0 0 8px rgba(40, 167, 69, 0.7);
}

.mode-switch-container.danger-mode span {
    color: #dc3545;
    text-shadow: 0 0 8px rgba(220, 53, 69, 0.7);
}