* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', monospace;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1a3e 50%, #0d0221 100%);
    color: #0f0;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Animated Stars Background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stars::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 100px white, 200px 50px white, 300px 150px white, 150px 200px white,
        250px 100px white, 50px 250px white, 400px 50px white, 350px 300px white,
        120px 350px white, 280px 280px white, 450px 150px white, 80px 400px white,
        420px 400px white, 180px 450px white, 500px 300px white, 50px 50px white,
        600px 100px white, 700px 250px white, 550px 450px white, 650px 350px white;
    border-radius: 50%;
    animation: twinkle 3s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Security Bar */
.security-bar {
    background: linear-gradient(90deg, #1a0033 0%, #330066 50%, #1a0033 100%);
    border-bottom: 3px solid #0f0;
    padding: 15px 0;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.bar-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.security-level, .status {
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

.status {
    color: #f00;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Language Selector */
.language-selector {
    display: flex;
    gap: 10px;
    align-items: center;
}

.lang-btn {
    padding: 8px 15px;
    background: linear-gradient(135deg, #001a00 0%, #003300 100%);
    border: 2px solid #0f0;
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    text-transform: uppercase;
}

.lang-btn:hover {
    background: linear-gradient(135deg, #003300 0%, #006600 100%);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}

.lang-btn.active {
    background: linear-gradient(135deg, #003300 0%, #006600 100%);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
    border-color: #0ff;
}

/* RTL Support for Arabic */
body.ar-mode {
    direction: rtl;
    text-align: right;
}

body.ar-mode .bar-content {
    flex-direction: row-reverse;
}

body.ar-mode .header {
    direction: rtl;
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

/* Profile Image Box */
.profile-image-box {
    position: fixed;
    left: 30px;
    top: 100px;
    width: 220px;
    height: 160px;
    border: 3px solid #ff0000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1a2e 0%, #1a1a3e 100%);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
    animation: slideDown 0.8s ease-out;
    z-index: 10;
}

.profile-image-box:hover {
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.6);
    border-color: #ff6666;
}

#profileImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header {
    text-align: center;
    margin-bottom: 40px;
    animation: slideDown 0.8s ease-out;
    margin-left: 260px;
    padding-top: 20px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo {
    margin-bottom: 20px;
}

.logo-icon {
    font-size: 60px;
    display: block;
    margin-bottom: 10px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.header h1 {
    font-size: 48px;
    color: #0f0;
    text-shadow: 0 0 30px rgba(0, 255, 0, 0.8), 0 0 60px rgba(0, 255, 0, 0.4);
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.version {
    font-size: 14px;
    color: #0f0;
    opacity: 0.7;
}

.warning-banner {
    background: linear-gradient(90deg, #003300 0%, #006600 50%, #003300 100%);
    border: 2px solid #0f0;
    color: #fff;
    padding: 15px;
    margin: 20px 0;
    font-weight: bold;
    animation: glow 2s infinite;
    border-radius: 5px;
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(0, 255, 0, 0.8);
    }
}

/* Panel Styles */
.status-panel, .hack-panel, .terminal {
    background: linear-gradient(135deg, #0d1b2a 0%, #1a1a3e 100%);
    border: 2px solid #0f0;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3), inset 0 0 20px rgba(0, 255, 0, 0.05);
    animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel-header {
    background: linear-gradient(90deg, #1a3a3a 0%, #0a2a2a 100%);
    border-bottom: 2px solid #0f0;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px 6px 0 0;
}

.panel-title {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.panel-indicator {
    font-size: 14px;
    color: #f00;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 49%, 100% { color: #f00; }
    50%, 99% { color: #080; }
}

.panel-body {
    padding: 20px;
}

.status-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 255, 0, 0.2);
    font-size: 16px;
}

.status-item:last-child {
    border-bottom: none;
}

.label {
    font-weight: bold;
    color: #0f0;
}

.value {
    color: #0f0;
    font-family: 'Courier New', monospace;
}

.value.locked {
    color: #f00;
    font-weight: bold;
}

.value.highlight {
    color: #ff0;
    font-weight: bold;
}

.value.countdown {
    color: #0ff;
    font-weight: bold;
}

/* Input Group */
.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 12px;
    font-weight: bold;
    color: #0f0;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 12px;
    color: #0f0;
    font-size: 18px;
    font-weight: bold;
}

.input-group input {
    width: 100%;
    padding: 14px 14px 14px 40px;
    background: #0a1a2e;
    border: 2px solid #0f0;
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.3s;
}

.input-group input::placeholder {
    color: #0f0;
    opacity: 0.5;
}

.input-group input:disabled {
    background: #0a0a0a;
    border-color: #333;
    color: #666;
    cursor: not-allowed;
}

.input-group input:not(:disabled):focus {
    outline: none;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6);
}

/* Hack Button */
.hack-button {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #001a00 0%, #003300 100%);
    border: 2px solid #0f0;
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    margin-bottom: 15px;
}

.hack-button:disabled {
    background: #0a0a0a;
    border-color: #333;
    color: #666;
    cursor: not-allowed;
}

.hack-button:not(:disabled):hover {
    background: linear-gradient(135deg, #003300 0%, #006600 100%);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.6);
    transform: scale(1.02);
}

.hack-button:not(:disabled):active {
    transform: scale(0.98);
}

/* Hack Info */
.hack-info {
    background: rgba(0, 255, 0, 0.05);
    border: 1px solid rgba(0, 255, 0, 0.2);
    padding: 15px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.8;
}

.hack-info p {
    margin: 8px 0;
    color: #0f0;
}

/* Features Section */
.section-title {
    font-size: 24px;
    color: #0f0;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.6);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 2px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.feature-card {
    background: linear-gradient(135deg, #0d1b2a 0%, #1a1a3e 100%);
    border: 2px solid #0f0;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.feature-card:hover {
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.6);
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 32px;
}

.feature-title {
    font-size: 16px;
    font-weight: bold;
    color: #0f0;
    text-transform: uppercase;
}

.feature-desc {
    font-size: 12px;
    color: #0ff;
    opacity: 0.8;
}

/* Terminal */
.terminal {
    max-width: 100%;
}

.terminal-content {
    padding: 20px;
    font-size: 13px;
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
    background: #000;
    border-radius: 0 0 6px 6px;
}

.log-entry {
    margin-bottom: 8px;
    font-family: 'Courier New', monospace;
}

.log-entry.info {
    color: #0f0;
}

.log-entry.warning {
    color: #ff0;
}

.log-entry.error {
    color: #f00;
    font-weight: bold;
}

/* Hack Result Modal */
.hack-result {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.98);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.5s ease-out;
    overflow-y: auto;
    padding: 20px;
}

.hack-result.show {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.hack-result-content {
    background: linear-gradient(135deg, #0d1b2a 0%, #1a1a3e 100%);
    border: 3px solid #0f0;
    border-radius: 12px;
    padding: 40px;
    max-width: 700px;
    width: 100%;
    box-shadow: 0 0 50px rgba(0, 255, 0, 0.6), inset 0 0 50px rgba(0, 255, 0, 0.1);
    animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.result-header {
    text-align: center;
    margin-bottom: 30px;
}

.result-icon {
    font-size: 60px;
    display: inline-block;
    animation: spin 1s infinite;
}

@keyframes spin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(360deg); }
}

.result-header h2 {
    font-size: 40px;
    color: #0f0;
    text-shadow: 0 0 30px rgba(0, 255, 0, 0.8);
    margin: 20px 0;
    letter-spacing: 3px;
}

.result-phase {
    margin: 20px 0;
}

.phase-title {
    font-size: 18px;
    font-weight: bold;
    color: #0f0;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scanning-bar {
    width: 100%;
    height: 30px;
    background: #000;
    border: 2px solid #0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.scanning-progress {
    height: 100%;
    background: linear-gradient(90deg, #0f0, #0ff);
    width: 0%;
    animation: progress 2s ease-in-out;
}

@keyframes progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

.phase-status {
    text-align: center;
    color: #0ff;
    font-weight: bold;
}

.info-box {
    background: #000;
    border: 2px solid #0f0;
    padding: 15px;
    border-radius: 4px;
    margin: 15px 0;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 255, 0, 0.2);
    font-size: 14px;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    color: #0f0;
    font-weight: bold;
}

.info-value {
    color: #0ff;
    font-weight: bold;
}

.messages-box {
    background: #000;
    border: 2px solid #0f0;
    padding: 15px;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.message-item {
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(0, 255, 0, 0.05);
    border-left: 3px solid #0f0;
    border-radius: 4px;
}

.message-item:last-child {
    margin-bottom: 0;
}

.msg-sender {
    font-weight: bold;
    color: #0f0;
    font-size: 12px;
}

.msg-text {
    display: block;
    color: #0ff;
    margin-top: 5px;
}

.success-phase {
    text-align: center;
}

.success-title {
    font-size: 28px;
    color: #0f0;
    font-weight: bold;
    margin: 20px 0;
    animation: pulse 1.5s infinite;
}

.success-text {
    color: #0ff;
    font-size: 16px;
    margin: 10px 0;
}

.success-warning {
    color: #ff0;
    font-weight: bold;
    margin: 15px 0;
    padding: 10px;
    background: rgba(255, 255, 0, 0.1);
    border: 2px solid #ff0;
    border-radius: 4px;
}

.result-footer {
    text-align: center;
    margin-top: 30px;
}

.close-result-button {
    padding: 12px 40px;
    background: linear-gradient(135deg, #001a00 0%, #003300 100%);
    border: 2px solid #0f0;
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
}

.close-result-button:hover {
    background: linear-gradient(135deg, #003300 0%, #006600 100%);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6);
}

/* Footer */
.footer {
    text-align: center;
    padding: 30px 20px;
    border-top: 2px solid #0f0;
    margin-top: 40px;
    color: #0f0;
    opacity: 0.7;
}

.footer p {
    margin: 8px 0;
    font-size: 12px;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .profile-image-box {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%);
        top: 80px !important;
        width: 180px;
        height: 140px;
        z-index: 5;
    }

    .header {
        margin-left: 0 !important;
        margin-top: 160px;
        padding-top: 20px;
    }

    .header h1 {
        font-size: 28px;
    }

    .logo-icon {
        font-size: 40px;
    }

    .version {
        font-size: 12px;
    }

    .main-content {
        padding: 20px 10px;
    }

    .status-panel, .hack-panel, .terminal, .feature-card {
        margin-bottom: 20px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .panel-title {
        font-size: 14px;
    }

    .status-item {
        font-size: 14px;
    }

    .input-group input {
        padding: 12px 12px 12px 35px;
        font-size: 14px;
    }

    .hack-button {
        padding: 14px;
        font-size: 14px;
    }

    .terminal-content {
        font-size: 11px;
        max-height: 250px;
    }

    .bar-content {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .security-level, .status {
        font-size: 14px;
    }

    .footer {
        padding: 20px 10px;
    }

    .footer p {
        font-size: 10px;
    }

    .hack-result-content {
        padding: 20px;
        max-width: 90vw;
    }

    .result-header h2 {
        font-size: 24px;
    }

    .result-icon {
        font-size: 40px;
    }

    .info-box {
        padding: 10px;
    }

    .info-item {
        font-size: 12px;
        padding: 8px 0;
    }

    .feature-card {
        padding: 15px;
    }

    .feature-icon {
        font-size: 24px;
    }

    .feature-title {
        font-size: 14px;
    }

    .feature-desc {
        font-size: 11px;
    }
}

/* Extra small devices (phones) */
@media (max-width: 480px) {
    .profile-image-box {
        width: 150px !important;
        height: 120px !important;
        top: 70px !important;
    }

    .header {
        margin-top: 150px !important;
    }

    .header h1 {
        font-size: 20px;
        letter-spacing: 1px;
    }

    .version {
        font-size: 11px;
    }

    .warning-banner {
        padding: 10px;
        font-size: 12px;
    }

    .panel-header {
        padding: 12px 15px;
    }

    .panel-title {
        font-size: 12px;
    }

    .panel-body {
        padding: 15px;
    }

    .status-item {
        font-size: 13px;
        padding: 10px 0;
    }

    .hack-button {
        padding: 12px;
        font-size: 12px;
    }

    .input-group label {
        font-size: 12px;
    }

    .hack-info {
        font-size: 12px;
    }

    .hack-info p {
        margin: 6px 0;
    }

    .terminal-content {
        font-size: 10px;
        max-height: 200px;
    }

    .log-entry {
        margin-bottom: 6px;
    }

    .section-title {
        font-size: 18px;
    }

    .features-grid {
        gap: 12px;
    }

    .hack-result-content {
        padding: 15px;
        border-radius: 8px;
    }

    .result-header h2 {
        font-size: 20px;
        margin: 15px 0;
    }

    .info-box {
        padding: 8px;
    }

    .info-item {
        font-size: 11px;
        padding: 6px 0;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #0f0;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0ff;
}