:root {
    --container-bg: #0f1620;
    --header-bg: #0a0e17;
    --section-bg: #121a24;
    --input-bg: #1a2433;
    --output-bg: #0a0e17;
    --btn-bg: #1e2c3a;
    --btn-hover: #2a3b4d;
    --danger-bg: #3a1a1a;
    --danger-hover: #4d2a2a;

    --text-color: #e0e0e0;
    --header-text: #ffffff;
    --btn-text: #d0d0d0;

    --border-color: #2a3b4d;
    --input-border: #2a3b4d;
    --border-hover: #3a4b5d;
    --separator-color: #2a3b4d;

    --neon-blue: #36f9f6;
    --neon-pink: #ff4893;
    --neon-yellow: #ffe64d;

    --success-color: #5cff5c;
    --error-color: #ff5c5c;
    --info-color: #5c9fff;

    --section-shadow: rgba(0, 0, 0, 0.3);
    --glow-color: rgba(54, 249, 246, 0.2);
}

body {
    background-color: #080c14;
    background-image:
            linear-gradient(0deg, rgba(10, 14, 23, 0.9) 0%, rgba(10, 14, 23, 0.7) 100%),
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%232a3b4d" stroke-width="0.5"/></svg>');
    margin: 0;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    min-height: 100vh;
    box-sizing: border-box;
}

/* Rain effect */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--rain-color), transparent);
    background-size: 100% 3px;
    pointer-events: none;
    animation: rain 8s linear infinite;
    z-index: 1000;
    opacity: 0.3;
}

/* Rain animation */
@keyframes rain {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Neon flicker effect for headings */
@keyframes neonFlicker {
    0% { text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 15px var(--neon-pink); }
    3% { text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink); }
    6% { text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 15px var(--neon-pink); }
    9% { text-shadow: 0 0 5px var(--neon-pink); }
    12% { text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 15px var(--neon-pink); }
    15% { text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink); }
    70% { text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 15px var(--neon-pink); }
    72% { text-shadow: 0 0 5px var(--neon-pink); }
    77% { text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 15px var(--neon-pink); }
    85% { text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink); }
    92% { text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 15px var(--neon-pink); }
}

/* Container styles */
.container {
    border: 1px solid var(--border-color);
    box-shadow: 0 0 15px var(--glow-color);
    position: relative;
    overflow: hidden;
    background-color: var(--container-bg);
    background-image:
            linear-gradient(135deg, rgba(43, 58, 85, 0.1) 25%, transparent 25%),
            linear-gradient(225deg, rgba(43, 58, 85, 0.1) 25%, transparent 25%),
            linear-gradient(315deg, rgba(43, 58, 85, 0.1) 25%, transparent 25%),
            linear-gradient(45deg, rgba(43, 58, 85, 0.1) 25%, transparent 25%);
    background-size: 20px 20px;
}

/* Header styles */
header {
    border-bottom: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    flex: 0 0 115px;
    background-color: var(--header-bg);
}

header {
    padding: 3px 5px;
    margin-bottom: 5px;
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    margin-right: 250px;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
}

header::before {
    content: "TYRELL CORPORATION";
    position: absolute;
    top: -1px;
    left: 25px;
    font-size: 10px;
    opacity: 0.7;
    z-index: 1;
    color: var(--neon-blue);
}

header::after {
    content: "NEXUS PROTOCOL ACTIVE";
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 10px;
    opacity: 0.7;
    color: var(--neon-pink);
}

h1 {
    animation: neonFlicker 5s infinite;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon-pink);
}

h2 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
    letter-spacing: 1px;
    position: relative;
    color: var(--neon-blue);
}

h2::before {
    content: "// ";
    color: var(--border-color);
}

/* Section styles */
.section {
    border: 1px solid var(--border-color);
    background: linear-gradient(to bottom,
    rgba(43, 58, 85, 0.3) 0%,
    rgba(12, 16, 22, 0.8) 50%,
    rgba(43, 58, 85, 0.3) 100%);
    position: relative;
    box-shadow: 0 0 10px rgba(255, 72, 147, 0.1);
}

.section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
            repeating-linear-gradient(
                    to bottom,
                    transparent 0px,
                    transparent 1px,
                    rgba(54, 249, 246, 0.03) 1px,
                    rgba(54, 249, 246, 0.03) 2px
            );
    pointer-events: none;
}

/* Input field styles */
input[type="text"],
textarea,
select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    font-family: var(--noir-font);
    box-shadow: inset 0 0 5px rgba(54, 249, 246, 0.2);
    position: relative;
}

textarea {
    background-image:
            linear-gradient(rgba(43, 58, 85, 0.1) 50%, transparent 50%);
    background-size: 100% 4px;
    resize: vertical;
}

/* Button styles */
.btn {
    border: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 72, 147, 0.2), transparent);
    transition: all 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    box-shadow: 0 0 10px var(--glow-color);
}

/* Output area styles */
.output-area {
    border: 1px solid var(--border-color);
    background-color: var(--output-bg);
    font-family: var(--noir-font);
    position: relative;
    overflow: auto;
    padding: 10px;
    padding-top: 20px;
}

.output-area::before {
    content: "// VOIGHT-KAMPFF TERMINAL";
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 10px;
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
    color: var(--neon-blue);
}

/* Output message styles */
.success, .error, .info {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
}

.success::before {
    content: "[HUMAN] ";
    color: var(--success-color);
}

.error::before {
    content: "[REPLICANT] ";
    color: var(--error-color);
}

.info::before {
    content: "[BASELINE] ";
    color: var(--info-color);
}

/* Client list styles */
.clients-list {
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
}

.client-item {
    border-bottom: 1px dashed var(--border-color);
    padding: 8px;
    position: relative;
}

.client-item::before {
    content: "// ";
    color: var(--border-color);
}

/* Danger button styles */
.btn-danger {
    border: 1px solid #ff4893;
    background: linear-gradient(to bottom, #5c1624, #3a0f17);
    position: relative;
}

.btn-danger::before {
    background: linear-gradient(90deg, transparent, rgba(255, 72, 147, 0.2), transparent);
}

.btn-danger:hover {
    box-shadow: 0 0 10px rgba(255, 72, 147, 0.5);
}

/* Theme selector styles */
.theme-selector select {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

/* Keyboard shortcut hint styles */
.key-hint {
    color: var(--info-color);
    opacity: 0.7;
}

/* Focus states for input fields */
textarea:focus, input:focus, select:focus {
    border-color: var(--neon-blue);
    box-shadow: 0 0 10px rgba(54, 249, 246, 0.5);
    outline: none;
}

/* Code sending animation */
@keyframes bladerunner-sending-pulse {
    0% { background-color: var(--input-bg); }
    25% { background-color: rgba(54, 249, 246, 0.1); }
    50% { background-color: rgba(54, 249, 246, 0.2); }
    75% { background-color: rgba(54, 249, 246, 0.1); }
    100% { background-color: var(--input-bg); }
}

textarea.sending {
    animation: bladerunner-sending-pulse 0.5s ease;
}

/* Cityscape background effect */
.cityscape {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background-image:
            linear-gradient(to top, rgba(10, 14, 23, 0.9) 0%, transparent 100%),
            url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100" viewBox="0 0 500 100"><rect width="500" height="100" fill="%230a0e17"/><path d="M0 100 L0 70 L10 70 L10 90 L20 90 L20 60 L30 60 L30 80 L40 80 L40 70 L50 70 L50 90 L60 90 L60 80 L70 80 L70 60 L80 60 L80 70 L90 70 L90 80 L100 80 L100 60 L110 60 L110 90 L120 90 L120 70 L130 70 L130 80 L140 80 L140 60 L150 60 L150 90 L160 90 L160 70 L170 70 L170 60 L180 60 L180 80 L190 80 L190 70 L200 70 L200 90 L210 90 L210 60 L220 60 L220 80 L230 80 L230 70 L240 70 L240 90 L250 90 L250 80 L260 80 L260 60 L270 60 L270 70 L280 70 L280 80 L290 80 L290 60 L300 60 L300 90 L310 90 L310 70 L320 70 L320 80 L330 80 L330 60 L340 60 L340 90 L350 90 L350 70 L360 70 L360 60 L370 60 L370 80 L380 80 L380 70 L390 70 L390 90 L400 90 L400 60 L410 60 L410 80 L420 80 L420 70 L430 70 L430 90 L440 90 L440 80 L450 80 L450 60 L460 60 L460 70 L470 70 L470 80 L480 80 L480 60 L490 60 L490 90 L500 90 L500 100 Z" fill="%232b3a55"/></svg>');
    background-repeat: repeat-x;
    pointer-events: none;
    z-index: -1;
    opacity: 0.3;
}

/* Compact layout styles */
.compact-layout .main-content {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.compact-layout .left-column {
    flex: 1;
    min-width: 200px;
}

.compact-layout .server-controls-section {
    flex-shrink: 0;
    min-width: 200px;
}

.compact-layout .commands-section {
    flex: 1;
    min-width: 200px;
}

.compact-layout .output-section {
    flex: 2;
    min-width: 400px;
    margin-top: 0;
}

/* Holographic glitch effect for headings */
@keyframes holographicGlitch {
    0% {
        transform: translate(0);
        text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
    }
    20% {
        transform: translate(-2px, 2px);
        text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
    }
    40% {
        transform: translate(-2px, -2px);
        text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
    }
    60% {
        transform: translate(2px, 2px);
        text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue);
    }
    80% {
        transform: translate(2px, -2px);
        text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
    }
    100% {
        transform: translate(0);
        text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
    }
}

/* Apply holographic glitch effect on hover */
h1:hover, h2:hover {
    animation: holographicGlitch 0.2s cubic-bezier(.25, .46, .45, .94) both infinite;
}

/* Terminal effect for output */
.output-area div {
    position: relative;
    animation: typing 0.5s steps(30, end);
    white-space: pre-wrap;
    overflow: visible;
    display: block;
    line-height: 1.4;
    margin-bottom: 3px;
}

/* Cursor effect for last output element */
.output-area div:last-child::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 15px;
    background-color: var(--neon-blue);
    vertical-align: middle;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
}

/* Cursor blink animation */
@keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

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

::-webkit-scrollbar-track {
    background: var(--container-bg);
    border: 1px solid var(--border-color);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* System boot effect on page load */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: systemBoot 2s forwards;
}

@keyframes systemBoot {
    0% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Boot text animation */
body::before {
    content: "NEXUS PROTOCOL INITIALIZED";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--neon-blue);
    font-family: var(--noir-font);
    font-size: 24px;
    letter-spacing: 3px;
    z-index: 10000;
    text-shadow: 0 0 10px var(--neon-blue);
    animation: bootText 2s forwards;
}

@keyframes bootText {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Scan line effect */
.container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image:
            linear-gradient(
                    to bottom,
                    transparent 50%,
                    rgba(16, 16, 16, 0.05) 50%
            );
    background-size: 100% 4px;
    opacity: 0.3;
}

/* Caret styling for text inputs */
textarea, input[type="text"] {
    caret-color: var(--neon-blue);
    caret-shape: block;
}

/* Button press animation */
.btn:active {
    transform: scale(0.98);
    box-shadow: 0 0 15px var(--neon-blue);
}

/* Text selection styling */
::selection {
    background-color: var(--neon-pink);
    color: black;
}

/* Decorative corner elements */
.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--neon-pink);
    border-left: 2px solid var(--neon-pink);
    pointer-events: none;
}

.container::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid var(--neon-blue);
    border-right: 2px solid var(--neon-blue);
    pointer-events: none;
}

/* Blinking cursor effect for headings */
h2::after {
    content: "_";
    animation: blink 1s step-end infinite;
    color: var(--neon-blue);
}

/* Clear output button styling */
#clear-output {
    margin-top: 5px;
    align-self: flex-end;
}

#clear-output::after {
    content: "CLEAR MEMORY";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-bg);
    transform: translateY(-100%);
    transition: transform 0.3s;
}

#clear-output:hover::after {
    transform: translateY(0);
}

/* Blade Runner style timestamp */
.bladerunner-timestamp {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--noir-font);
    font-size: 12px;
    color: var(--neon-yellow);
    opacity: 0.7;
}

/* Neon sign effect */
@keyframes neonSign {
    0% {
        text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
    }
    50% {
        text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink), 0 0 30px var(--neon-pink);
    }
    100% {
        text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink);
    }
}

/* Fullscreen mode and compact layout */
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 5px;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

header {
    padding: 3px 5px;
    margin-bottom: 5px;
    flex: 0 0 auto;
}

.main-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0;
    min-height: 0;
}

.section {
    padding: 5px;
    margin-bottom: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

h1 {
    font-size: 1.2rem;
    margin: 11px 0;
}

h2 {
    font-size: 0.9rem;
    margin: 3px 0 5px 0;
    padding-bottom: 2px;
}

/* Grid layout for main content */
.left-column {
    flex: 1;
    min-width: 200px;
}

.commands-section {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.commands-section form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.commands-section textarea {
    flex: 1;
    min-height: 60px;
}

.output-section {
    flex-basis: 100%;
    flex: 3;
    margin-top: 0;
}

.server-controls-section {
    min-width: 200px;
    margin-top: 8px;
}

/* Compact forms and controls */
.form-group {
    margin-bottom: 3px;
    position: relative;
}

label {
    font-size: 0.75rem;
    margin-bottom: 1px;
    display: block;
    color: var(--neon-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
}

input[type="text"],
textarea,
select {
    padding: 3px;
    font-size: 0.8rem;
    margin-bottom: 3px;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(12, 16, 22, 0.8);
}

textarea {
    min-height: 60px;
    flex: 1;
    line-height: 1.4;
}

.btn {
    padding: 2px 5px;
    font-size: 0.75rem;
    margin: 1px 0;
    background: linear-gradient(to bottom, var(--btn-bg), rgba(43, 58, 85, 0.8));
}

/* Compact output */
.output-area {
    min-height: 100px;
    font-size: 0.8rem;
    line-height: 1.2;
    flex: 1;
    overflow-y: auto;
    padding: 5px;
    padding-top: 16px;
    background-color: rgba(12, 16, 22, 0.9);
}

.output-section {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.output-area div {
    margin-bottom: 1px;
    padding: 1px 0;
}

/* Compact client list */
.clients-list {
    overflow-y: auto;
    flex: 1;
}

.client-item {
    padding: 3px;
    font-size: 0.8rem;
    border-left: 2px solid transparent;
    transition: all 0.3s;
}

.client-item:hover {
    border-left: 2px solid var(--neon-pink);
    background-color: rgba(255, 72, 147, 0.1);
}

/* Scripts list styling */
.scripts-header {
    color: var(--neon-blue);
    font-size: 0.9rem;
    margin: 5px 0;
    padding: 3px 0;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    display: flex;
    align-items: center;
}

.scripts-header::before {
    content: "// ";
    color: var(--neon-pink);
    margin-right: 5px;
}

#scripts-list-container {
    background-color: rgba(12, 16, 22, 0.8);
    border: 1px solid var(--border-color);
    max-height: 150px;
    overflow-y: auto;
    margin-top: 5px;
    padding: 3px !important;
    box-shadow: inset 0 0 5px rgba(54, 249, 246, 0.1);
}

.scripts-container h3 {
    color: var(--neon-blue);
    font-size: 0.9rem;
    margin: 5px 0;
    padding: 3px 0;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    display: flex;
    align-items: center;
}

.scripts-container h3::before {
    content: "// ";
    color: var(--neon-pink);
    margin-right: 5px;
}

.scripts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.script-item {
    padding: 3px 5px;
    border-bottom: 1px dashed rgba(54, 249, 246, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.script-item:hover {
    background-color: rgba(54, 249, 246, 0.1);
}

.script-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
}

.execute-script-btn {
    background-color: transparent;
    border: 1px solid var(--neon-blue);
    color: var(--neon-blue);
    padding: 1px 5px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
}

.execute-script-btn:hover {
    background-color: var(--neon-blue);
    color: black;
}

/* Empty scripts message */
.empty-scripts-message {
    color: var(--text-color);
    opacity: 0.7;
    font-style: italic;
    text-align: center;
    padding: 10px;
}

/* Adaptive layout for smaller screens */
@media (max-width: 1200px) {
    .main-content {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }

    .left-column {
        flex: 1 1 300px;
        max-width: 300px;
    }

    .commands-section {
        flex: 2 1 400px;
    }

    .output-section {
        flex: 1 1 100%;
        margin-top: 5px;
    }

    .server-controls-section {
        flex: 1 1 300px;
        max-width: 300px;
        margin-top: 5px;
    }
}

@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }

    .left-column,
    .commands-section,
    .output-section,
    .server-controls-section {
        flex: 1 1 100%;
        margin-top: 8px;
    }

    .section {
        margin-bottom: 8px;
    }
}

/* Status bar */
.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--header-bg);
    border-top: 1px solid var(--neon-pink);
    padding: 2px 10px;
    font-size: 0.7rem;
    display: flex;
    justify-content: space-between;
    z-index: 100;
    color: var(--neon-blue);
}

.status-bar .status-item {
    margin-right: 15px;
}

.status-bar .status-item::before {
    content: "•";
    color: var(--neon-pink);
    margin-right: 5px;
}

/* System info header */
.system-info {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 0.7rem;
    color: var(--neon-yellow);
    opacity: 0.7;
}

/* Fullscreen mode optimizations */
.fullscreen-mode .container {
    min-height: 100vh;
    border: none;
}

.fullscreen-mode .status-bar {
    opacity: 0.8;
}

.fullscreen-mode .status-bar:hover {
    opacity: 1;
}

/* Control buttons */
.control-buttons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.control-buttons .btn {
    flex: 1;
    min-width: 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.control-buttons .btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--neon-blue), transparent);
}

/* Command tabs */
.command-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.command-tab {
    padding: 3px 8px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-bottom: none;
    margin-right: 2px;
    font-size: 0.8rem;
    background-color: var(--container-bg);
    position: relative;
    overflow: hidden;
}

.command-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--neon-pink);
    transform: scaleX(0);
    transition: transform 0.3s;
}

.command-tab:hover::before {
    transform: scaleX(1);
}

.command-tab.active {
    background-color: rgba(54, 249, 246, 0.1);
    color: var(--neon-blue);
}

.command-tab.active::before {
    transform: scaleX(1);
}

/* Error shake animation */
@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.error-shake {
    animation: errorShake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    border-color: var(--error-color) !important;
}

/* Spinner for loading states */
.spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(54, 249, 246, 0.3);
    border-radius: 50%;
    border-top-color: var(--neon-blue);
    animation: spin 1s linear infinite;
    margin-right: 5px;
    vertical-align: middle;
}

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

/* Replicant verification effect */
.replicant-scan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, var(--neon-blue), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 9000;
}

.replicant-scan.active {
    animation: scanEffect 1s ease-in-out;
}

@keyframes scanEffect {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* Blade Runner-specific error effect */
.bladerunner-error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 72, 147, 0.1);
    z-index: 9000;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.bladerunner-error.active {
    animation: errorFlash 0.5s ease-in-out;
}

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

.bladerunner-error::before {
    content: "ERROR C-30";
    font-size: 3rem;
    color: var(--neon-pink);
    text-shadow: 0 0 10px var(--neon-pink);
    animation: glitchText 0.3s ease-in-out infinite;
}

@keyframes glitchText {
    0%, 100% {
        transform: translate(0);
    }
    25% {
        transform: translate(-5px, 5px);
    }
    50% {
        transform: translate(5px, -5px);
    }
    75% {
        transform: translate(-5px, -5px);
    }
}

/* Sending code animation for Blade Runner theme */
@keyframes sendingCodeEffect {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

textarea.sending {
    background-image: linear-gradient(
            to bottom,
            rgba(54, 249, 246, 0.1) 0%,
            rgba(54, 249, 246, 0.2) 50%,
            rgba(54, 249, 246, 0.1) 100%
    );
    background-size: 100% 300%;
    animation: sendingCodeEffect 0.5s ease-in-out;
}

/* Blade Runner-style tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: var(--header-bg);
    color: var(--neon-blue);
    font-size: 0.7rem;
    white-space: nowrap;
    border: 1px solid var(--neon-blue);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 1000;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Blade Runner-style checkboxes */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}

input[type="checkbox"]:checked {
    background-color: var(--input-bg);
}

input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background-color: var(--neon-blue);
    box-shadow: 0 0 5px var(--neon-blue);
}

/* Blade Runner-style radio buttons */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}

input[type="radio"]:checked {
    background-color: var(--input-bg);
}

input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--neon-blue);
    box-shadow: 0 0 5px var(--neon-blue);
}

/* Blade Runner-style file input */
input[type="file"] {
    display: none;
}

.file-input-label {
    display: inline-block;
    padding: 3px 8px;
    background-color: var(--btn-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s;
}

.file-input-label:hover {
    background-color: var(--btn-hover);
    border-color: var(--neon-blue);
}

.file-name-display {
    margin-left: 5px;
    font-size: 0.8rem;
    color: var(--neon-blue);
}

/* Blade Runner-style progress bar */
progress {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    margin: 5px 0;
}

progress::-webkit-progress-bar {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
}

progress::-webkit-progress-value {
    background: linear-gradient(to right, var(--neon-pink), var(--neon-blue));
    background-size: 200% 100%;
    animation: progressGradient 2s linear infinite;
}

@keyframes progressGradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

/* Blade Runner-style notification */
.bladerunner-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    background-color: var(--header-bg);
    border: 1px solid var(--neon-blue);
    color: var(--text-color);
    font-size: 0.9rem;
    z-index: 9999;
    box-shadow: 0 0 10px var(--glow-color);
    transform: translateX(150%);
    transition: transform 0.3s;
}

.bladerunner-notification.show {
    transform: translateX(0);
}

.bladerunner-notification::before {
    content: "// ";
    color: var(--neon-blue);
}

/* Blade Runner-style modal */
.bladerunner-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 14, 23, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.bladerunner-modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 80%;
    max-width: 600px;
    background-color: var(--container-bg);
    border: 1px solid var(--neon-pink);
    padding: 20px;
    position: relative;
    box-shadow: 0 0 20px var(--glow-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 15px;
    color: var(--neon-blue);
    font-size: 1.2rem;
    position: relative;
}

.modal-header::before {
    content: "// ";
    color: var(--neon-pink);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--neon-pink);
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-body {
    margin-bottom: 15px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

/* Blade Runner-style code highlighting */
.code-highlight {
    color: var(--neon-blue);
}

.code-keyword {
    color: var(--neon-pink);
}

.code-string {
    color: var(--neon-yellow);
}

.code-comment {
    color: #4a6c8c;
    font-style: italic;
}

/* Blade Runner-style loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 14, 23, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.loading-overlay.show {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(54, 249, 246, 0.3);
    border-radius: 50%;
    border-top-color: var(--neon-blue);
    animation: spin 1s linear infinite;
}

.loading-text {
    position: absolute;
    bottom: calc(50% - 40px);
    color: var(--neon-blue);
    font-size: 1rem;
    letter-spacing: 2px;
    animation: loadingPulse 1.5s ease-in-out infinite;
}

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

/* Rain animation */
@keyframes rain {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

/* Typing animation */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Specific styling for output messages */
.output-area .success {
    color: var(--success-color);
    text-shadow: 0 0 3px var(--success-color);
    position: relative;
}

.output-area .error {
    color: var(--error-color);
    text-shadow: 0 0 3px var(--error-color);
    position: relative;
}

.output-area .info {
    color: var(--info-color);
    text-shadow: 0 0 3px var(--info-color);
    position: relative;
}

.output-area .success::before {
    content: "[OK] ";
    font-weight: bold;
}

.output-area .error::before {
    content: "[ERROR] ";
    font-weight: bold;
}

.output-area .info::before {
    content: "[INFO] ";
    font-weight: bold;
}

/* Random neon border effect */
@keyframes randomNeonPulse {
    0% {
        box-shadow: 0 0 5px var(--neon-pink), 0 0 8px var(--neon-pink);
        border-color: var(--neon-pink);
    }
    50% {
        box-shadow: 0 0 15px var(--neon-pink), 0 0 25px var(--neon-pink);
        border-color: var(--neon-pink);
    }
    100% {
        box-shadow: 0 0 5px var(--neon-pink), 0 0 8px var(--neon-pink);
        border-color: var(--neon-pink);
    }
}

@keyframes randomNeonPulseBlue {
    0% {
        box-shadow: 0 0 5px var(--neon-blue), 0 0 8px var(--neon-blue);
        border-color: var(--neon-blue);
    }
    50% {
        box-shadow: 0 0 15px var(--neon-blue), 0 0 25px var(--neon-blue);
        border-color: var(--neon-blue);
    }
    100% {
        box-shadow: 0 0 5px var(--neon-blue), 0 0 8px var(--neon-blue);
        border-color: var(--neon-blue);
    }
}

@keyframes randomNeonPulseYellow {
    0% {
        box-shadow: 0 0 5px var(--neon-yellow), 0 0 8px var(--neon-yellow);
        border-color: var(--neon-yellow);
    }
    50% {
        box-shadow: 0 0 15px var(--neon-yellow), 0 0 25px var(--neon-yellow);
        border-color: var(--neon-yellow);
    }
    100% {
        box-shadow: 0 0 5px var(--neon-yellow), 0 0 8px var(--neon-yellow);
        border-color: var(--neon-yellow);
    }
}

/* JavaScript will add these classes to random elements */
.random-neon-pink {
    animation: randomNeonPulse 2s ease-in-out;
}

.random-neon-blue {
    animation: randomNeonPulseBlue 2s ease-in-out;
}

.random-neon-yellow {
    animation: randomNeonPulseYellow 2s ease-in-out;
}

/* Voight-Kampff test animation */
@keyframes voightKampff {
    0% {
        box-shadow: 0 0 5px var(--neon-blue);
    }
    50% {
        box-shadow: 0 0 15px var(--neon-blue), 0 0 30px var(--neon-blue);
    }
    100% {
        box-shadow: 0 0 5px var(--neon-blue);
    }
}

/* Apply Voight-Kampff animation to focused inputs */
input:focus, textarea:focus, select:focus {
    animation: voightKampff 2s infinite;
    outline: none;
}

/* Styling for the container */
.container {
    background-color: var(--container-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Header styling */
header {
    background-color: var(--header-bg);
    color: var(--header-text);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

header h1::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, var(--neon-pink), transparent);
}

/* Ensure the header title doesn't overflow */
h1 {
    font-size: 1.2rem;
    margin: 11px 0;
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-right {
        margin-right: 100px; /* Less space for clock on smaller screens */
    }

    h1 {
        font-size: 1rem;
        max-width: 40%;
    }

    .theme-selector label {
        display: none; /* Hide label on small screens */
    }
}

@media (max-width: 480px) {
    .header-right {
        margin-right: 80px;
        gap: 8px;
    }

    .bladerunner-timestamp {
        font-size: 10px;
    }

    h1 {
        max-width: 30%;
    }
}

/* Section styling */
.section {
    background-color: rgba(18, 26, 36, 0.7);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 10px var(--section-shadow);
    position: relative;
}

.section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--neon-pink);
    border-left: 1px solid var(--neon-pink);
    pointer-events: none;
}

.section::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-bottom: 1px solid var(--neon-blue);
    border-right: 1px solid var(--neon-blue);
    pointer-events: none;
}

/* Section headings */
.section h2 {
    color: var(--neon-blue);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

/* Button styling */
.btn {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    background-color: var(--btn-hover);
    border-color: var(--border-hover);
    color: var(--neon-blue);
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent
    );
    transition: all 0.5s;
}

.btn:hover::before {
    left: 100%;
}

/* Danger button */
.btn-danger {
    background-color: var(--danger-bg);
}

.btn-danger:hover {
    background-color: var(--danger-hover);
}

/* Input styling */
input[type="text"],
textarea,
select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--input-border);
    transition: all 0.3s;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
    border-color: var(--neon-blue);
}

/* Output area styling */
.output-area {
    background-color: var(--output-bg);
    border: 1px solid var(--input-border);
    color: var(--text-color);
    font-family: 'Courier New', monospace;
    position: relative;
    overflow-x: hidden;
}

.output-area::before {
    content: "NEXUS-6 TERMINAL";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2px 5px;
    background-color: var(--header-bg);
    color: var(--neon-blue);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Client list styling */
.client-item {
    border-bottom: 1px dashed var(--separator-color);
    transition: all 0.3s;
}

.client-item:hover {
    background-color: rgba(54, 249, 246, 0.1);
}

.client-item.selected {
    background-color: rgba(54, 249, 246, 0.2);
    border-left: 2px solid var(--neon-blue);
}

/* Client select styling */
#client-select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--input-border);
    padding: 3px;
    width: 100%;
}

/* Theme select styling */
#theme-select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--input-border);
    padding: 3px;
}

/* Blade Runner-specific UI elements */
.replicant-id {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 0.7rem;
    color: var(--neon-yellow);
    letter-spacing: 1px;
}

.replicant-id::before {
    content: "REPLICANT ID: ";
    color: var(--neon-blue);
}

/* Blade Runner-style timestamp */
.timestamp {
    font-size: 0.7rem;
    color: var(--neon-yellow);
    opacity: 0.7;
    margin-right: 5px;
}

/* Blade Runner-style separator */
.separator {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color), transparent);
    margin: 10px 0;
}

/* Blade Runner-style code block */
.code-block {
    background-color: rgba(12, 16, 22, 0.9);
    border: 1px solid var(--border-color);
    padding: 10px;
    margin: 5px 0;
    font-family: 'Courier New', monospace;
    position: relative;
    overflow-x: auto;
}

.code-block::before {
    content: "CODE";
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 5px;
    background-color: var(--header-bg);
    color: var(--neon-blue);
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* Blade Runner-style file path display */
.file-path {
    font-size: 0.8rem;
    color: var(--neon-yellow);
    margin-bottom: 5px;
    padding: 2px 5px;
    background-color: rgba(12, 16, 22, 0.5);
    border-left: 2px solid var(--neon-blue);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-path::before {
    content: "PATH: ";
    color: var(--neon-blue);
}

/* Blade Runner-style footer */
.footer {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-color);
    opacity: 0.7;
    margin-top: 10px;
    padding: 5px 0;
    border-top: 1px solid var(--border-color);
}

.footer::before {
    content: "TYRELL CORPORATION • ";
}

.footer::after {
    content: " • MORE HUMAN THAN HUMAN";
}

/* Blade Runner-style version number */
.version {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 0.7rem;
    color: var(--neon-blue);
    opacity: 0.7;
}

.version::before {
    content: "v";
}

/* Blade Runner-style date display */
.date-display {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 0.7rem;
    color: var(--neon-yellow);
    opacity: 0.7;
}

.panel-header {
    background: none;
    border: none;
}

.theme-selector {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
}

.theme-selector label {
    font-size: 0.7rem;
    color: var(--neon-blue);
    margin-bottom: 0;
    text-transform: uppercase;
}

.theme-selector select {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 0.7rem;
    padding: 2px 5px;
    height: 22px;
}

/* Connection status styling */
.connection-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-connected {
    background-color: var(--success-color);
    box-shadow: 0 0 5px var(--success-color);
    animation: pulse 2s infinite;
}

.status-disconnected {
    background-color: var(--error-color);
    box-shadow: 0 0 5px var(--error-color);
}

.status-connecting {
    background-color: var(--info-color);
    box-shadow: 0 0 5px var(--info-color);
    animation: pulse 1s infinite;
}

.status-text {
    color: var(--neon-blue);
}

/* Clock styling - ensure it stays on the far right */
.bladerunner-timestamp {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-family: var(--noir-font);
    font-size: 12px;
    color: var(--neon-yellow);
    opacity: 0.7;
    z-index: 1;
}

/* Pulse animation for status indicators */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.panel {
    border: none;
}