:root {
    --term-color: #0f0;
    --term-bg: #050505;
    --glass-bg: rgba(10, 15, 20, 0.85);
    --glass-border: rgba(0, 255, 234, 0.2);
    --accent: #00ffea;
    --secondary: #bd93f9;
    --warn: #ffdb4d;
    --error: #ff3333;
}

/* Theme: Amber */
.theme-amber {
    --term-color: #ffb000;
    --accent: #ffd700;
    --secondary: #ff8c00;
    --glass-border: rgba(255, 176, 0, 0.2);
}

/* Theme: Cyan */
.theme-cyan {
    --term-color: #8be9fd;
    --term-bg: #101419;
    --glass-border: rgba(139, 233, 253, 0.2);
}

/* Theme: Red */
.theme-red {
    --term-color: #ff5555;
    --term-bg: #1a0b0b;
    --glass-border: rgba(255, 85, 85, 0.2);
}

/* Theme: White */
.theme-white {
    --term-color: #f8f8f2;
    --term-bg: #000000;
    --glass-border: rgba(248, 248, 242, 0.2);
}

/* Modern Dark Theme */
.theme-modern-dark {
    --term-color: #a9b1d6;
    --term-bg: #1a1b26;
    --term-prompt: #7aa2f7;
    --term-accent: #bb9af7;
    --glass-bg: rgba(26, 27, 38, 0.9);
    --glass-border: rgba(122, 162, 247, 0.2);
}

/* Dracula Theme */
.theme-dracula {
    --term-color: #f8f8f2;
    --term-bg: #282a36;
    --term-prompt: #50fa7b;
    --term-accent: #ff79c6;
    --glass-bg: rgba(40, 42, 54, 0.9);
    --glass-border: rgba(189, 147, 249, 0.2);
}

/* Monokai Theme */
.theme-monokai {
    --term-color: #f8f8f2;
    --term-bg: #272822;
    --term-prompt: #a6e22e;
    --term-accent: #f92672;
    --glass-bg: rgba(39, 40, 34, 0.9);
    --glass-border: rgba(166, 226, 46, 0.2);
}

/* Theme: Red */
.theme-red {
    --term-color: #ff0000;
    --accent: #ff4444;
    --secondary: #cc0000;
    --glass-border: rgba(255, 0, 0, 0.2);
}

/* Theme: White */
.theme-white {
    --term-color: #ffffff;
    --accent: #cccccc;
    --secondary: #999999;
    --glass-border: rgba(255, 255, 255, 0.2);
}

body {
    background-color: var(--term-bg);
    color: var(--term-color);
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    /* No dir-specific styles on body itself */
}

body::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 10;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

#terminal {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    position: absolute;
    /* Changed from relative to absolute to fit viewport */
    top: 0;
    left: 0;
    z-index: 1;
}

/* Admin Bar Compatibility */
body.admin-bar #terminal {
    top: 32px;
    height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar #terminal {
        top: 46px;
        height: calc(100% - 46px);
    }
}

.line {
    display: block;
    margin-bottom: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.4);
}

.input-line {
    display: flex;
    /* margin-top: 10px; */
    align-items: center;
}

#cmd-input {
    background: transparent;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: inherit;
    flex-grow: 1;
    outline: none;
    margin-left: 10px;
    /* Default LTR */
    caret-color: var(--accent);
}

.prompt {
    margin-right: 10px;
    color: var(--secondary);
    text-shadow: 0 0 5px var(--secondary);
    /* Default LTR */
}

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

.accent {
    color: var(--accent);
}

.warn {
    color: #ffe600;
}

.error {
    color: #ff3333;
}

.system {
    color: #00ccff;
}

.ascii-art {
    font-size: 10px;
    line-height: 10px;
    color: var(--accent);
    white-space: pre;
    margin: 20px 0;
}

.about-text {
    color: #e6e6e6;
    line-height: 1.5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95em;
}

.social-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent);
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--accent);
    color: #000;
    border-bottom-style: solid;
}

#gui-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 100;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.glass-panel {
    width: 85%;
    max-width: 1000px;
    height: 85%;
    background: linear-gradient(180deg, rgba(20, 30, 40, 0.9), rgba(10, 15, 20, 0.95));
    border: 1px solid var(--glass-border);
    border-top: 2px solid var(--accent);
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 255, 234, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.5);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #eee;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.gui-header {
    padding: 15px 25px;
    background: rgba(0, 255, 234, 0.05);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gui-title-bar {
    font-family: 'Courier New', monospace;
    color: var(--accent);
    letter-spacing: 2px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.gui-title-bar::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent);
}

.close-btn {
    background: transparent;
    border: 1px solid var(--error);
    color: var(--error);
    padding: 5px 15px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    transition: 0.3s;
}

.close-btn:hover {
    background: var(--error);
    color: #000;
    box-shadow: 0 0 10px var(--error);
}

#gui-content {
    padding: 40px;
    overflow-y: auto;
    flex-grow: 1;
}

/* ======================================= *
 * Post Content Directional Styles (LTR/RTL)
 * These apply only to content loaded into #gui-content 
 * or Gutenberg blocks with a specific direction class.
 * ======================================= */

#gui-content .post-content-wrapper.is-ltr {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
}

#gui-content .post-content-wrapper.is-rtl {
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
}



.visible {
    display: flex !important;
    opacity: 1 !important;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
}

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

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

#gui-content .portfolio-header {
    text-align: center;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#gui-content .portfolio-tags span {
    background: var(--accent);
    color: #000;
    padding: 2px 8px;
    font-size: 0.8em;
    margin-right: 5px;
    border-radius: 3px;
}

#gui-content .portfolio-img-full {
    width: 100%;
    border: 2px solid #fff;
    margin-top: 10px;
}

/* Portfolio Media Styles */
.portfolio-media {
    width: 100%;
    height: auto;
    border: 1px solid var(--primary);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-top: 10px;
}

.website-frame {
    width: 100%;
    height: 400px;
    /* Fixed height for the viewport */
    overflow: hidden;
    border: 1px solid var(--primary);
    position: relative;
    background: #fff;
    margin-top: 10px;
}

/* Desktop Mode Scaling */
.website-frame.desktop-mode {
    position: relative;
    overflow: hidden;
}

.iframe-scaler {
    width: 1440px;
    /* Simulate desktop width */
    height: 300%;
    /* Tall height for scrolling */
    transform-origin: top left;
    transform: scale(0.5);
    /* Scale down. This needs to be dynamic ideally, but fixed for now */
    /* Note: A fixed scale of 0.5 means the container needs to be 720px wide to fit perfectly. 
       Since the terminal width varies, we might need a more robust solution later, 
       but for now this provides the "desktop look". */
}

/* Make sure the scaler fits the container width dynamically if possible, 
   but CSS transform scale is rigid. 
   Alternative: Use container queries or JS. 
   For this task, we'll stick to a reasonable fixed scale that looks "desktop-like". */
.iframe-scaler {
    width: 200%;
    /* 200% of the container width (if container is ~700px, this is ~1400px) */
    height: 300%;
    transform: scale(0.5);
    transform-origin: top left;
}

.website-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.website-frame iframe.animate-scroll {
    animation: scroll-site 20s linear infinite alternate;
}

.website-frame:hover iframe.animate-scroll {
    animation-play-state: paused;
}

@keyframes scroll-site {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-66.66%);
        /* Scroll to bottom */
    }
}

.slider-controls {
    display: none;
    /* Hide old controls if any remain */
}

.portfolio-slider {
    position: relative;
    /* Ensure absolute buttons are relative to this */
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: var(--accent);
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
    /* Hidden by default */
}

.portfolio-slider:hover .slider-btn {
    opacity: 1;
    /* Show on hover */
}

.slider-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    box-shadow: 0 0 10px var(--accent);
}

.prev-btn {
    left: 0;
    border-radius: 0 5px 5px 0;
}

.next-btn {
    right: 0;
    border-radius: 5px 0 0 5px;
}

.slides-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
}

.slide {
    grid-area: 1 / 1;
    width: 100%;
    transition: opacity 0.5s ease;
    /* Default state for inactive slides */
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

.slide.active {
    visibility: visible;
    opacity: 1;
    z-index: 2;
}

/* Comments System */
.comments-title {
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 5px;
    margin-top: 60px;
    /* Increased spacing */
    margin-bottom: 20px;
    text-shadow: 0 0 5px var(--accent);
    letter-spacing: 1px;
}

.no-comments {
    color: var(--secondary);
    font-style: italic;
    margin-bottom: 20px;
    opacity: 0.7;
}

.comment-item {
    margin-bottom: 25px;
    border-left: 3px solid var(--secondary);
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    /* Glassmorphism base */
    backdrop-filter: blur(2px);
    border-radius: 0 10px 10px 0;
    transition: all 0.3s ease;
    animation: fadeIn 0.5s ease forwards;
    opacity: 0;
    transform: translateX(-10px);
}

.comment-item:hover {
    border-left-color: var(--accent);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Change text color on hover */
.comment-item:hover .comment-content {
    color: #fff;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.comment-avatar {
    float: left;
    margin-right: 20px;
}

.comment-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    /* Techy square-ish look */
    border: 2px solid var(--secondary);
    transition: border-color 0.3s ease;
}

.comment-item:hover .comment-avatar img {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

.comment-item:hover .comment-author,
.comment-item:hover .comment-date {
    color: var(--accent);
}

.comment-body {
    overflow: hidden;
}

.comment-meta {
    font-size: 0.85em;
    color: var(--secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.comment-author {
    color: var(--highlight);
    font-weight: bold;
    font-size: 1.1em;
    text-shadow: 0 0 2px var(--highlight);
}

.reply-btn {
    background: transparent;
    border: 1px solid var(--secondary);
    color: var(--secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.reply-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 5px var(--accent);
    text-decoration: none;
    text-shadow: none;
}

.comment-content {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #ddd;
    transition: color 0.3s ease;
}

.comment-children {
    margin-left: 30px;
    margin-top: 20px;
    border-left: 1px dashed var(--secondary);
    padding-left: 20px;
}

/* Comment Form */
.comment-form-container {
    margin-top: 60px;
    /* Increased spacing */
    background: rgba(10, 10, 10, 0.6);
    padding: 25px;
    border: 1px solid var(--secondary);
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Scanline effect for form */
.comment-form-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    animation: scan 3s linear infinite;
    pointer-events: none;
}

@keyframes scan {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

.form-title {
    color: var(--highlight);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--secondary);
    display: inline-block;
    padding-bottom: 5px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    /* Responsive */
}

.form-row input {
    flex: 1;
    min-width: 200px;
    /* Responsive */
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--secondary);
    color: var(--text);
    padding: 12px;
    font-family: 'Courier New', monospace;
    transition: all 0.3s ease;
}

.form-row input:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    outline: none;
    background: rgba(0, 0, 0, 0.5);
}

textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--secondary);
    color: var(--text);
    padding: 12px;
    font-family: 'Courier New', monospace;
    height: 120px;
    margin-bottom: 20px;
    resize: vertical;
    transition: all 0.3s ease;
}

.captcha-row {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
    border: 1px dashed var(--secondary);
}

@media (max-width: 730px) {
    .captcha-row {
        justify-content: center;
    }
}

.captcha-label {
    color: var(--accent);
    font-weight: bold;
    text-shadow: 0 0 3px var(--accent);
}

.captcha-input {
    width: 80px !important;
    flex: none !important;
    text-align: center;
    font-size: 1.1em;
    min-width: auto !important;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.cyber-btn {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--accent);
    padding: 10px 25px;
    cursor: pointer;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cyber-btn:hover {
    background: var(--accent);
    box-shadow: 0 0 15px var(--accent);
}

.cyber-btn.secondary {
    background: transparent;
    border-color: #b32d2e;
    color: #b32d2e;
}

.cyber-btn.secondary:hover {
    background: rgba(179, 45, 46, 0.1);
    box-shadow: 0 0 10px #b32d2e;
    color: #ff5555;
}

/* Restored Styles from Backup */
.post-title {
    font-size: 2.8em;
    margin: 0 0 10px 0;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 255, 234, 0.3);
}

.post-meta {
    font-size: 0.85em;
    color: var(--accent);
    margin-bottom: 40px;
    border-left: 3px solid var(--accent);
    padding-left: 10px;
    font-family: 'Courier New', monospace;
    opacity: 0.8;
}

.post-body {
    line-height: 1.8;
    font-size: 1.1em;
    color: #ccc;
}

.post-body p {
    margin-bottom: 20px;
}

.post-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--glass-border);
    margin-bottom: 25px;
    filter: brightness(0.9) contrast(1.1);
}

.code-box {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    margin: 30px 0;
    position: relative;
    overflow: hidden;
}

.code-header {
    background: #161b22;
    padding: 8px 15px;
    font-size: 0.8em;
    color: #8b949e;
    border-bottom: 1px solid #30363d;
    font-family: monospace;
    display: flex;
    justify-content: space-between;
}

.code-content {
    padding: 15px;
    overflow-x: auto;
    color: #c9d1d9;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

.cyber-player {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--secondary);
    border-left: 4px solid var(--secondary);
    padding: 20px;
    margin: 30px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.cyber-player::before {
    content: "AUDIO_LOG";
    position: absolute;
    top: -10px;
    left: 10px;
    background: var(--term-bg);
    padding: 0 5px;
    font-size: 0.7em;
    color: var(--secondary);
    font-family: monospace;
}

.audio-visualizer {
    display: flex;
    gap: 3px;
    height: 30px;
    align-items: center;
}

.bar {
    width: 4px;
    background: var(--secondary);
    animation: equalize 1s infinite;
}

@keyframes equalize {

    0%,
    100% {
        height: 5px;
    }

    50% {
        height: 25px;
    }
}

.bar:nth-child(2) {
    animation-delay: 0.1s;
}

.bar:nth-child(3) {
    animation-delay: 0.2s;
}

.bar:nth-child(4) {
    animation-delay: 0.3s;
}

.bar:nth-child(5) {
    animation-delay: 0.1s;
}

audio {
    width: 100%;
    height: 30px;
    filter: invert(1) hue-rotate(180deg);
}

.cyber-video {
    margin: 30px 0;
    border: 1px solid var(--accent);
    padding: 5px;
    background: rgba(0, 255, 234, 0.05);
    position: relative;
}

.cyber-video::after {
    content: "REC ●";
    position: absolute;
    top: 15px;
    right: 15px;
    color: red;
    font-family: monospace;
    font-size: 0.8em;
    animation: blink 2s infinite;
    z-index: 5;
    text-shadow: 0 0 5px red;
}

video {
    width: 100%;
    display: block;
    filter: contrast(1.1) saturate(1.2);
}

.cyber-alert {
    border: 1px solid var(--warn);
    background: rgba(255, 230, 0, 0.05);
    color: #ffdb4d;
    padding: 15px;
    margin: 20px 0;
    border-left: 5px solid var(--warn);
    font-family: 'Courier New', monospace;
    display: grid;
    align-items: center;
}

.cyber-alert.error {
    border-color: var(--error);
    background: rgba(255, 51, 51, 0.05);
    color: #ff6666;
    border-left-color: var(--error);
}

.cyber-alert.info {
    border-color: var(--accent);
    background: rgba(0, 255, 234, 0.05);
    color: var(--accent);
    border-left-color: var(--accent);
}

.cyber-quote {
    border-left: 3px solid var(--secondary);
    padding-left: 20px;
    margin: 25px 0;
    font-style: italic;
    color: #ccc;
    font-size: 1.2em;
    position: relative;
}

.cyber-quote::before {
    content: '"';
    font-size: 3em;
    color: var(--secondary);
    position: absolute;
    top: -20px;
    left: 5px;
    opacity: 0.3;
}

#gui-content ul,
#gui-content ol {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

#gui-content ul li,
#gui-content ol li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
    color: #ddd;
}

#gui-content ul li::before,
#gui-content ol li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

/* ... (skipping unrelated styles) ... */

/* Cyber List directional styles */
#gui-content .is-ltr ul li,
#gui-content .is-ltr ol li {
    padding-left: 25px;
    padding-right: 0;
    /* reset */
}

#gui-content .is-rtl ul li,
#gui-content .is-rtl ol li {
    padding-right: 25px;
    padding-left: 0;
    /* reset */
}

#gui-content .is-ltr ul li::before,
#gui-content .is-ltr ol li::before {
    left: 0;
    right: auto;
    /* reset */
}

#gui-content .is-rtl ul li::before,
#gui-content .is-rtl ol li::before {
    right: 0;
    left: auto;
    /* reset */
}

.cyber-btn {
    display: inline-block;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: transparent;
    padding: 10px 25px;
    text-decoration: none;
    margin: 10px 5px 10px 0;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85em;
    cursor: pointer;
    font-family: 'Courier New', monospace;
}

.cyber-btn:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 15px var(--accent);
}

.cyber-progress-container {
    margin: 20px 0;
}

.cyber-progress-label {
    display: flex;
    justify-content: space-between;
    font-family: monospace;
    color: var(--accent);
    margin-bottom: 5px;
    font-size: 0.9em;
}

.cyber-progress-track {
    width: 100%;
    background: #1a1a1a;
    height: 10px;
    border: 1px solid #333;
}

.cyber-progress-bar {
    height: 100%;
    background: var(--term-color);
    box-shadow: 0 0 10px var(--term-color);
}

#gui-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.95em;
    color: #ccc;
}

#gui-content table th,
#gui-content table td {
    border: 1px solid #333;
    padding: 12px;
    text-align: left;
}

#gui-content table th {
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
    text-transform: uppercase;
    background: rgba(0, 255, 234, 0.02);
}

#gui-content table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
}

.portfolio-header {
    text-align: center;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.portfolio-tags span {
    background: var(--accent);
    color: #000;
    padding: 2px 8px;
    font-size: 0.8em;
    border-radius: 3px;
}

.portfolio-img-full {
    width: 100%;
    border: 2px solid #fff;
    margin-top: 10px;
}

/* Comments System */
.comments-title {
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 5px;
    margin-top: 60px;
    /* Increased spacing */
    margin-bottom: 20px;
    text-shadow: 0 0 5px var(--accent);
    letter-spacing: 1px;
}

.no-comments {
    color: var(--secondary);
    font-style: italic;
    margin-bottom: 20px;
    opacity: 0.7;
}

.comment-item {
    margin-bottom: 25px;
    border-left: 3px solid var(--secondary);
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    /* Glassmorphism base */
    backdrop-filter: blur(2px);
    border-radius: 0 10px 10px 0;
    transition: all 0.3s ease;
    animation: fadeIn 0.5s ease forwards;
    opacity: 0;
    transform: translateX(-10px);
}

.comment-item:hover {
    border-left-color: var(--accent);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* Change text color on hover */
.comment-item:hover .comment-content {
    color: #fff;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.comment-avatar {
    float: left;
    margin-right: 20px;
}

.comment-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    /* Techy square-ish look */
    border: 2px solid var(--secondary);
    transition: border-color 0.3s ease;
}

.comment-item:hover .comment-avatar img {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

.comment-body {
    overflow: hidden;
}

.comment-meta {
    font-size: 0.85em;
    color: var(--secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.comment-author {
    color: var(--highlight);
    font-weight: bold;
    font-size: 1.1em;
    text-shadow: 0 0 2px var(--highlight);
}

.reply-btn {
    background: transparent;
    border: 1px solid var(--secondary);
    color: var(--secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.reply-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 5px var(--accent);
    text-decoration: none;
    text-shadow: none;
}

.comment-content {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #ddd;
    transition: color 0.3s ease;
}

.comment-children {
    margin-left: 30px;
    margin-top: 20px;
    border-left: 1px dashed var(--secondary);
    padding-left: 20px;
}

/* Comment Form */
.comment-form-container {
    margin-top: 60px;
    /* Increased spacing */
    background: rgba(10, 10, 10, 0.6);
    padding: 25px;
    border: 1px solid var(--secondary);
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Scanline effect for form */
.comment-form-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    animation: scan 3s linear infinite;
    pointer-events: none;
}

@keyframes scan {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

.form-title {
    color: var(--highlight);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--secondary);
    display: inline-block;
    padding-bottom: 5px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    /* Responsive */
}

.form-row input {
    flex: 1;
    min-width: 200px;
    /* Responsive */
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--secondary);
    color: var(--text);
    padding: 12px;
    font-family: 'Courier New', monospace;
    transition: all 0.3s ease;
}

.form-row input:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    outline: none;
    background: rgba(0, 0, 0, 0.5);
}

textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--secondary);
    color: var(--text);
    padding: 12px;
    font-family: 'Courier New', monospace;
    height: 120px;
    margin-bottom: 20px;
    resize: vertical;
    transition: all 0.3s ease;
}

.captcha-row {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
    border: 1px dashed var(--secondary);
}

.captcha-label {
    color: var(--accent);
    font-weight: bold;
    text-shadow: 0 0 3px var(--accent);
}

.captcha-input {
    width: 80px !important;
    flex: none !important;
    text-align: center;
    font-size: 1.1em;
    min-width: auto !important;
}

.form-actions {
    margin-top: 10px;
}

/* ======================================= *
 * Post Content Directional Styles (LTR/RTL)
 * Restored from previous version
 * ======================================= */

#gui-content .post-title {
    font-size: 2.8em;
    margin: 0 0 10px 0;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 255, 234, 0.3);
}

#gui-content .post-body {
    line-height: 1.8;
    font-size: 1.1em;
    color: #ccc;
}

#gui-content .post-body p {
    margin-bottom: 20px;
}

#gui-content .post-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--glass-border);
    margin-bottom: 25px;
    filter: brightness(0.9) contrast(1.1);
}

/* Default LTR styles for post content elements */
#gui-content .is-ltr .post-meta {
    font-size: 0.85em;
    color: var(--accent);
    margin-bottom: 40px;
    border-left: 3px solid var(--accent);
    padding-left: 10px;
    font-family: 'Courier New', monospace;
    opacity: 0.8;
}

#gui-content .is-rtl .post-meta {
    font-size: 0.85em;
    color: var(--accent);
    margin-bottom: 40px;
    border-right: 3px solid var(--accent);
    border-left: none;
    padding-right: 10px;
    font-family: 'Courier New', monospace;
    opacity: 0.8;
    text-align: right;
}

#gui-content .code-box {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    margin: 30px 0;
    position: relative;
    overflow: hidden;
    direction: ltr;
    /* Always LTR for code */
    text-align: left;
    /* Always left-aligned for code */
}

#gui-content .code-box .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Align items vertically */
    background: #161b22;
    padding: 8px 15px;
    font-size: 0.8em;
    color: #8b949e;
    border-bottom: 1px solid #30363d;
    font-family: monospace;
}

#gui-content .code-box .code-header .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Space between lang and copy button */
}

#gui-content .code-box .copy-btn {
    margin-left: 10px;
    /* LTR default */
    color: var(--accent);
    cursor: pointer;
    font-family: "Courier New", monospace;
    font-size: 0.8em;
    background: transparent;
    border: 1px solid var(--accent);
    padding: 5px 10px;
    transition: 0.3s;
}

#gui-content .code-box .copy-btn:hover {
    background: var(--accent);
    color: var(--term-bg);
    box-shadow: 0 0 5px var(--accent);
}

#gui-content .code-box .copy-btn.copied {
    background: #0f0;
    color: var(--term-bg);
    border-color: #0f0;
    box-shadow: 0 0 5px #0f0;
}

#gui-content .copy-btn {
    margin-left: 10px;
    color: #03d1c1;
    cursor: pointer;
    font-family: "Courier New", monospace;
    font-size: 0.8em;
    background: transparent;
    border: 1px solid #04c6b8;
    padding: 5px 15px;
    transition: 0.3s;
}

.copy-btn:hover {
    background: var(--accent);
    color: #000000;
    box-shadow: 0 0 5px var(--accent);
}

#gui-content .code-header {
    background: #161b22;
    padding: 8px 15px;
    font-size: 0.8em;
    color: #8b949e;
    border-bottom: 1px solid #30363d;
    font-family: monospace;
    display: flex;
    justify-content: space-between;
}

#gui-content .code-content {
    padding: 15px;
    overflow-x: auto;
    color: #c9d1d9;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

#gui-content .is-ltr .cyber-player {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--secondary);
    border-left: 4px solid var(--secondary);
    padding: 20px;
    margin: 30px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

#gui-content .is-rtl .cyber-player {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--secondary);
    border-right: 4px solid var(--secondary);
    padding: 20px;
    margin: 30px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    flex-direction: row-reverse;
}

#gui-content .cyber-player::before {
    content: "AUDIO_LOG";
    position: absolute;
    top: -10px;
    left: 10px;
    background: var(--term-bg);
    padding: 0 5px;
    font-size: 0.7em;
    color: var(--secondary);
    font-family: monospace;
}

#gui-content .audio-visualizer {
    display: flex;
    gap: 3px;
    height: 30px;
    align-items: center;
}

#gui-content .bar {
    width: 4px;
    background: var(--secondary);
    animation: equalize 1s infinite;
}

@keyframes equalize {

    0%,
    100% {
        height: 5px;
    }

    50% {
        height: 25px;
    }
}

#gui-content .bar:nth-child(2) {
    animation-delay: 0.1s;
}

#gui-content .bar:nth-child(3) {
    animation-delay: 0.2s;
}

#gui-content .bar:nth-child(4) {
    animation-delay: 0.3s;
}

#gui-content .bar:nth-child(5) {
    animation-delay: 0.1s;
}

#gui-content audio {
    width: 100%;
    height: 30px;
    filter: invert(1) hue-rotate(180deg);
}

#gui-content .cyber-video {
    margin: 30px 0;
    border: 1px solid var(--accent);
    padding: 5px;
    background: rgba(0, 255, 234, 0.05);
    position: relative;
}

#gui-content .cyber-video::after {
    content: "REC ●";
    position: absolute;
    top: 15px;
    right: 15px;
    color: red;
    font-family: monospace;
    font-size: 0.8em;
    animation: blink 2s infinite;
    z-index: 5;
    text-shadow: 0 0 5px red;
}

#gui-content video {
    width: 100%;
    display: block;
    filter: contrast(1.1) saturate(1.2);
}

/* Cyber Alert directional styles */
#gui-content .is-ltr .cyber-alert {
    border-left: 5px solid var(--warn);
    border-right: 1px solid var(--warn);
    /* reset */
    padding-left: 15px;
    padding-right: 15px;
}

#gui-content .is-rtl .cyber-alert {
    border-right: 5px solid var(--warn);
    border-left: 1px solid var(--warn);
    /* reset */
    padding-right: 15px;
    padding-left: 15px;
    text-align: right;
}

#gui-content .is-ltr .cyber-alert.error {
    border-left-color: var(--error);
    border-right-color: var(--error);
    /* reset */
}

#gui-content .is-rtl .cyber-alert.error {
    border-right-color: var(--error);
    border-left-color: var(--error);
    /* reset */
}

#gui-content .is-ltr .cyber-alert.info {
    border-left-color: var(--accent);
    border-right-color: var(--accent);
    /* reset */
}

#gui-content .is-rtl .cyber-alert.info {
    border-right-color: var(--accent);
    border-left-color: var(--accent);
    /* reset */
}

/* Cyber Quote directional styles */
#gui-content .is-ltr .cyber-quote {
    border-left: 3px solid var(--secondary);
    padding-left: 20px;
    padding-right: 20px;
    /* reset */
    text-align: left;
}

#gui-content .is-rtl .cyber-quote {
    border-right: 3px solid var(--secondary);
    padding-right: 20px;
    padding-left: 20px;
    /* reset */
    text-align: right;
}

#gui-content .is-ltr .cyber-quote::before {
    left: 5px;
    right: auto;
    /* reset */
}

#gui-content .is-rtl .cyber-quote::before {
    right: 5px;
    left: auto;
    /* reset */
}



#gui-content .cyber-btn {
    display: inline-block;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: transparent;
    padding: 10px 25px;
    text-decoration: none;
    margin: 10px 5px 10px 0;
    /* Default LTR */
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85em;
    cursor: pointer;
    font-family: 'Courier New', monospace;
}

#gui-content .is-rtl .cyber-btn {
    margin: 10px 0 10px 5px;
    /* RTL margin */
}

.cyber-btn:hover {
    background: var(--accent) !important;
    color: #000 !important;
    box-shadow: 0 0 10px var(--accent);
}

#gui-content .cyber-progress-container {
    margin: 20px 0;
}

#gui-content .is-ltr .cyber-progress-label {
    display: flex;
    justify-content: space-between;
    font-family: monospace;
    color: var(--accent);
    margin-bottom: 5px;
    font-size: 0.9em;
}

#gui-content .is-rtl .cyber-progress-label {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    font-family: monospace;
    color: var(--accent);
    margin-bottom: 5px;
    font-size: 0.9em;
}

#gui-content .cyber-progress-track {
    width: 100%;
    background: #1a1a1a;
    height: 10px;
    border: 1px solid #333;
}

#gui-content .cyber-progress-bar {
    height: 100%;
    background: var(--term-color);
    box-shadow: 0 0 10px var(--term-color);
}

#gui-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.95em;
    color: #ccc;
}

#gui-content table th,
#gui-content table td {
    border: 1px solid #333;
    padding: 12px;
    text-align: left;
    /* Default LTR */
}

#gui-content .is-rtl table th,
#gui-content .is-rtl table td {
    text-align: right;
}

#gui-content table th,
#gui-content table tr:first-child td {
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
    text-transform: uppercase;
    background: rgba(0, 255, 234, 0.02);
    font-weight: bold;
}

#gui-content table tr:not(:first-child):hover td {
    background: rgba(255, 255, 255, 0.02);
    color: #fff;
}

/* ======================================= *
 * RTL/LTR Wrapper & Comments Support
 * ======================================= */

#gui-content .post-content-wrapper.is-ltr {
    direction: ltr;
    text-align: left;
}

#gui-content .post-content-wrapper.is-rtl {
    direction: rtl;
    text-align: right;
}

/* Comments RTL Overrides */
#gui-content .is-rtl .comments-title {
    text-align: left;
    direction: ltr;
}

#gui-content .is-rtl .comment-item {
    text-align: right;
    border-right: 3px solid var(--secondary);
    border-left: none;
    border-radius: 10px 0 0 10px;
    transform: translateX(10px);
    /* Animation start position for RTL */
}

#gui-content .is-rtl .comment-item:hover {
    border-right-color: var(--accent);
}

#gui-content .is-rtl .comment-avatar {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}

#gui-content .is-rtl .comment-meta {
    flex-direction: row;
    /* Flex follows direction */
}

#gui-content .is-rtl .reply-btn {
    float: left;
    /* Move reply button to the far left (end of line in RTL) */
}

#gui-content .is-rtl .comment-children {
    margin-right: 30px;
    margin-left: 0;
    border-right: 1px dashed var(--secondary);
    border-left: none;
    padding-right: 20px;
    padding-left: 0;
}

#gui-content .is-rtl .comment-form-container {
    text-align: left;
}

#gui-content .is-rtl .form-row input,
#gui-content .is-rtl textarea {
    text-align: right;
    direction: rtl;
}

#gui-content .is-rtl .form-row,
#gui-content .is-rtl .captcha-row {
    direction: ltr;
    text-align: left;
}

#gui-content .is-rtl .form-actions {
    justify-content: flex-start;
}

#gui-content .is-rtl .form-actions {
    justify-content: flex-end;
}

/* Ensure Code Box is ALWAYS LTR */
#gui-content .is-rtl .code-box {
    direction: ltr;
    text-align: left;
}

#gui-content .is-rtl .code-box .code-header {
    flex-direction: row;
    /* Keep header LTR */
}

@media (max-width: 730px) {
    .captcha-row {
        justify-content: center;
    }

    #gui-content .form-actions {
        justify-content: center !important;
    }
}