:root {
    --primary-color: #00ff7f;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --safe-color: #28a745;
    --background-color: #020402;
    --text-color: #e0e0e0;
    --text-muted-color: #8fa1b3;
    --border-color: #334433;
    --font-mono: 'Share Tech Mono', monospace;
    --font-sans: 'Be Vietnam Pro', sans-serif;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-sans);
    background-color: var(--background-color);
    color: var(--text-color);
}

/* --- Nền và các hiệu ứng background --- */
.cyber-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; background: var(--background-color); }
#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) 50%, rgba(2,4,2,1) 100%); pointer-events: none; z-index: 4; }

/* --- Modal Overlay --- */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(2, 4, 2, 0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 10; }

/* --- Thiết kế lại Modal với hiệu ứng HUD và Scanline --- */
.modal {
    border: 1px solid rgba(0, 255, 127, 0.2);
    border-radius: 4px;
    padding: 40px 50px;
    width: 90%;
    max-width: 650px;
    text-align: center;
    color: var(--text-color);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    position: relative;
    background: rgba(10, 15, 10, 0.9);
    overflow: hidden;
}

.modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: 
        linear-gradient(rgba(0, 255, 127, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 127, 0.07) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: grid-pan 20s linear infinite;
    z-index: 0;
    opacity: 0.5;
}
@keyframes grid-pan {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-30px, -30px); }
}

.modal-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(18, 16, 16, 0) 0%, rgba(18, 16, 16, 0) 48%, rgba(255, 255, 255, 0.1) 50%, rgba(18, 16, 16, 0) 52%, rgba(18, 16, 16, 0) 100%);
    background-size: 100% 4px;
    animation: scanlines 5s linear infinite;
    z-index: 1;
    pointer-events: none;
    opacity: 0.3;
}
@keyframes scanlines {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
}

.modal > * { position: relative; z-index: 2; }
.corner-top-left, .corner-top-right, .corner-bottom-left, .corner-bottom-right {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--primary-color);
    border-style: solid;
    z-index: 3;
    animation: corner-pulse 2s infinite alternate;
}
@keyframes corner-pulse { 0% { border-color: rgba(0, 255, 127, 0.5); } 100% { border-color: rgba(0, 255, 127, 1); } }
.corner-top-left { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.corner-top-right { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.corner-bottom-left { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.corner-bottom-right { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.hud-decoration {
    position: absolute;
    width: 40px;
    height: 25px;
    z-index: 3;
    animation: hud-pulse 2.5s infinite alternate-reverse;
}
.hud-decoration.top-left {
    top: 25px; left: 35px;
    border-top: 2px solid var(--primary-color);
    border-left: 2px solid var(--primary-color);
}
.hud-decoration.top-right {
    top: 25px; right: 35px;
    border-top: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
}
@keyframes hud-pulse {
    0%   { opacity: 0.4; transform: scale(1); }
    50%  { opacity: 1; border-color: #ffffff; }
    100% { opacity: 0.4; transform: scale(1.05); }
}

.side-scanner {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--primary-color), transparent);
    animation: scan-vertical 4s linear infinite;
    box-shadow: 0 0 10px var(--primary-color);
    opacity: 0.6;
}
.side-scanner.left { left: 15px; }
.side-scanner.right { right: 15px; animation-delay: -2s; }
@keyframes scan-vertical {
    0% { transform: translateY(-100px); }
    50% { transform: translateY(calc(100% + 100px)); }
    50.1% { transform: translateY(calc(100% + 100px));}
    100% { transform: translateY(-100px); }
}

.result-log-container { display: flex; justify-content: space-between; margin-top: 25px; padding-top: 15px; border-top: 1px solid rgba(0, 255, 127, 0.1); }
.data-readout { font-family: var(--font-mono); font-size: 0.7em; color: rgba(0, 255, 127, 0.4); line-height: 1.5; pointer-events: none; width: 48%; height: 50px; overflow: hidden; }
#data-readout-left { text-align: left; }
#data-readout-right { text-align: right; }

.glitch { font-family: var(--font-mono); 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, 255, 127, 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 var(--warning-color); clip: rect(24px, 550px, 90px, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -2px 0 var(--primary-color); clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2.5s infinite linear alternate-reverse; }
@keyframes glitch-anim { from { clip: rect(10px, 9999px, 86px, 0); } to { clip: rect(81px, 9999px, 3px, 0); } }
@keyframes glitch-anim-2 { from { clip: rect(65px, 9999px, 100px, 0); } to { clip: rect(20px, 9999px, 40px, 0); } }

.modal .subtitle { color: var(--text-muted-color); font-size: 0.9em; line-height: 1.6; font-family: var(--font-mono); }

.form-row { display: flex; gap: 20px; margin-bottom: 20px; }
.input-group { position: relative; width: 100%; }
.input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #555e68; transition: color 0.3s; }

.input-group label {
    display: block;
    text-align: left;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    text-shadow: 0 0 5px rgba(0, 255, 127, 0.5);
}

input[type="text"] { width: 100%; padding: 12px 15px 12px 45px; background-color: #050705; border: 1px solid var(--border-color); border-radius: 2px; color: var(--text-color); font-family: var(--font-mono); font-size: 1.1em; transition: all 0.3s; box-sizing: border-box; }
input[type="text"]:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 15px rgba(0, 255, 127, 0.3); }
input[type="text"]:focus + i, .input-group:focus-within i { color: var(--primary-color); }

.input-group.is-focused::after { content: ''; position: absolute; right: 15px; top: 30%; bottom: 30%; width: 2px; background-color: var(--primary-color); animation: blink 1s step-end infinite; }

button { background: rgba(0, 255, 127, 0.1); color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 2px; padding: 16px 0; width: 100%; font-size: 1.2em; font-family: var(--font-mono); font-weight: 700; cursor: pointer; transition: all 0.3s ease; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 8px rgba(0, 255, 127, 0.5); box-shadow: 0 0 15px rgba(0, 255, 127, 0.2), inset 0 0 10px rgba(0, 255, 127, 0.1); position: relative; overflow: hidden; }
button::after { content: ''; position: absolute; top: -50%; left: -150%; width: 50%; height: 200%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); transform: rotate(25deg); transition: left 0.6s ease; }
button:hover::after { left: 150%; }
button:hover { background: var(--primary-color); color: var(--background-color); box-shadow: 0 0 25px rgba(0, 255, 127, 0.6), inset 0 0 15px rgba(0, 255, 127, 0.4); text-shadow: none; }

.error-text { color: var(--danger-color); font-family: var(--font-mono); margin-top: 15px; text-shadow: 0 0 8px rgba(220, 53, 69, 0.7); display: none; }
@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; }

#check-progress-wrapper { margin-bottom: 20px; }
#status-text { font-family: var(--font-mono); color: var(--text-color); margin-bottom: 15px; height: 20px; display: inline-block; position: relative; }
#status-text.typing::after { content: '|'; position: absolute; right: -10px; color: var(--primary-color); animation: blink 1s step-end infinite; }
@keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } }
.progress-bar-wrapper { width: 100%; height: 4px; background-color: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: 2px; padding: 1px; }
.progress-bar { width: 0%; height: 100%; background: var(--primary-color); border-radius: 1px; transition: width 0.5s ease-out; box-shadow: 0 0 10px rgba(0, 255, 127, 0.7); }

#check-result-container { width: 100%; text-align: left; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
#check-result-container.visible { opacity: 1; transform: translateY(0); }
#result-title-text { font-family: var(--font-mono); font-size: 1.5em; margin-bottom: 20px; text-align: center; letter-spacing: 1px; }

#result-details { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 25px;
    font-family: var(--font-mono); 
    font-size: 0.95em; 
    padding: 20px; 
    background: rgba(0,0,0,0.2); 
    border: 1px solid var(--border-color); 
    border-radius: 2px; 
}

.result-item { opacity: 0; transform: translate(-10px, 5px) scale(0.95); animation: result-fade-in 0.6s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94); }
@keyframes result-fade-in { 
  to { 
    opacity: 1; 
    transform: translate(0, 0) scale(1); 
  } 
}

.result-label { color: var(--text-muted-color); text-transform: uppercase; }
.result-value { 
    color: var(--text-color); 
    word-break: break-all; 
    position: relative; 
    min-height: 1.2em; /* Giữ chiều cao ổn định khi hiệu ứng chạy */
}

/* === CSS MỚI CHO HIỆU ỨNG TEXT GLITCH === */
.text-glitch-fx {
    animation: text-glitch-anim 0.8s 1;
}
@keyframes text-glitch-anim {
  0% { transform: translate(0); }
  10% { transform: translate(-2px, 2px); text-shadow: 2px 0 var(--danger-color); }
  20% { transform: translate(2px, -2px); text-shadow: -2px 0 var(--safe-color); }
  30% { transform: translate(0); }
  70% { transform: translate(0); }
  80% { transform: translate(2px, 1px); text-shadow: -2px 0 var(--warning-color); }
  90% { transform: translate(-1px, -2px); text-shadow: 2px 0 var(--primary-color); }
  100% { transform: translate(0); }
}
.result-value .typing-cursor {
    display: inline-block;
    background-color: var(--primary-color);
    width: 8px;
    height: 1.1em;
    animation: blink 0.7s infinite;
    position: absolute;
    margin-left: 2px;
}
/* === KẾT THÚC CSS MỚI === */


.status-safe { color: var(--safe-color); text-shadow: 0 0 8px rgba(40, 167, 69, 0.8); animation: pulse-safe 2s infinite; }
.status-danger { color: var(--danger-color); text-shadow: 0 0 8px rgba(220, 53, 69, 0.8); animation: pulse-danger 1.5s infinite; }

@keyframes pulse-safe { 0%, 100% { text-shadow: 0 0 8px rgba(40, 167, 69, 0.7); } 50% { text-shadow: 0 0 16px rgba(80, 200, 100, 1); } }
@keyframes pulse-danger { 0%, 100% { text-shadow: 0 0 8px rgba(220, 53, 69, 0.7); } 50% { text-shadow: 0 0 16px rgba(255, 80, 100, 1); } }

.severity-critical { color: var(--danger-color); }
.severity-high { color: var(--warning-color); }
.severity-low { color: var(--primary-color); }

.log-viewer { background-color: #050705; border: 1px solid var(--border-color); height: 150px; overflow-y: auto; padding: 15px; font-family: var(--font-mono); font-size: 0.9em; color: var(--text-muted-color); border-radius: 2px; text-align: left; }
.log-viewer p { margin: 0 0 5px 0; white-space: pre-wrap; opacity: 0; animation: log-fade-in 0.5s forwards; }
@keyframes log-fade-in { to { opacity: 1; } }
.log-viewer .info { color: var(--primary-color); }
.log-viewer .success { color: var(--safe-color); }
.log-viewer .warn { color: var(--warning-color); }

.mode-switch-container { position: fixed; top: 25px; right: 35px; z-index: 1000; display: flex; align-items: center; font-family: var(--font-mono); }
.mode-switch-container span { color: var(--text-muted-color); 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); border: 2px solid var(--danger-color); border-radius: 34px; transition: all 0.3s ease-in-out; box-shadow: 0 0 6px rgba(220, 53, 69, 0.7); }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 3px; background-color: var(--text-color); border-radius: 50%; transition: all 0.3s ease-in-out; }
input:checked + .slider { border-color: var(--safe-color); box-shadow: 0 0 8px rgba(40, 167, 69, 0.9); }
input:checked + .slider:before { transform: translateX(28px); background-color: #ffffff; }
.mode-switch-container.safe-mode span { color: var(--safe-color); text-shadow: 0 0 8px rgba(40, 167, 69, 0.7); }
.mode-switch-container.danger-mode span { color: var(--danger-color); text-shadow: 0 0 8px rgba(220, 53, 69, 0.7); }

.system-status-notice {
    margin-top: 25px;
    color: rgba(0, 255, 127, 0.7);
    font-family: var(--font-mono);
    font-size: 0.85em;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: pulse-glow 3s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        color: rgba(0, 255, 127, 0.7);
        text-shadow: 0 0 6px rgba(0, 255, 127, 0.4);
    }
    50% {
        color: rgba(127, 255, 200, 1);
        text-shadow: 0 0 12px rgba(0, 255, 127, 0.7);
    }
}