/* --- COLOR PALETTE VARIABLES --- */
:root {
    --deep-indigo: #110c18;
    --solid-indigo: #1a1325;
    --highlight-indigo: #261336;
    --soft-matte-teal: #6ab0c4;

    /* Lightened from #4a3f58 for better contrast against the clouds */
    --muted-indigo: #9686aa;

    --soft-lilac: #a784d6;
}
/* --- GLOBAL STYLES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--deep-indigo);
    color: var(--soft-matte-teal);
    font-family: 'Fira Code', monospace;
    line-height: 1.6;
    overflow-x: hidden;
}

::selection {
    background-color: var(--highlight-indigo);
    color: var(--soft-lilac);
}

/* --- TYPOGRAPHY --- */
h1, h2, h3 {
    color: var(--soft-lilac);
    font-weight: 700;
}

h1 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(167, 132, 214, 0.4);
}

.accent-text {
    color: var(--soft-matte-teal);
    text-shadow: 0 0 8px rgba(106, 176, 196, 0.5);
}

.subtitle {
    color: var(--muted-indigo);
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

p {
    color: var(--soft-matte-teal);
}

/* --- NAVIGATION --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 3rem;

    /* Sticky positioning so it stays visible while scrolling */
    position: sticky;
    top: 0;
    z-index: 100;

    /* Glassmorphism Effect */
    background-color: rgba(26, 19, 37, 0.45); /* Solid Indigo with transparency */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(167, 132, 214, 0.2); /* Soft Lilac translucent border */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.logo {
    font-size: 1.5rem;
    color: var(--soft-lilac);
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--muted-indigo);
    transition: all 0.3s ease;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--soft-matte-teal);
    text-shadow: 0 0 5px var(--soft-matte-teal);
}

/* --- MAIN CONTAINER --- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

/* --- HERO SECTION WITH PARALLAX CLOUDS --- */
.hero {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    padding-bottom: 3rem;
    /* Removed the border-bottom property here */
}

.parallax-clouds {
    position: fixed; /* Locks it to the viewport */
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1; /* Pushes it to the very back */
    overflow: hidden;
    pointer-events: none; /* Prevents the clouds from stealing clicks */
}

.cloud-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;

    /* Forces height to fill the screen, allows width to tile */
    background-size: auto 100vh;
    background-repeat: repeat-x;
    image-rendering: pixelated;

    animation: panClouds ease-in-out infinite alternate;
}

.layer-1 { background-image: url("img/Clouds%208/1.png"); animation-duration: 120s; }
.layer-2 { background-image: url("img/Clouds%208/2.png"); animation-duration: 90s; opacity: 0.8; }
.layer-3 { background-image: url("img/Clouds%208/3.png"); animation-duration: 60s; opacity: 0.9; }
.layer-4 { background-image: url("img/Clouds%208/4.png"); animation-duration: 45s; }
.layer-5 { background-image: url("img/Clouds%208/5.png"); animation-duration: 30s; }
.layer-6 { background-image: url("img/Clouds%208/6.png"); animation-duration: 20s; }

/* Blends the clouds into your background color */
.cloud-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(17, 12, 24, 0.4), var(--deep-indigo));
}

@keyframes panClouds {
    0% { background-position: 0vw center; }
    /* Forces the clouds to physically slide exactly one screen width */
    100% { background-position: 100vw center; }
}

.hero-content {
    position: relative;
    z-index: 1;
}

/* --- ABOUT SECTION --- */
.about-section {
    margin-top: 1rem;
    padding: 1.5rem 2rem;
    background-color: rgba(17, 12, 24, 0.6);
    border-left: 4px solid var(--soft-matte-teal);
    width: 100%; /* Forces the box to span the full width of the container */
    /* Removed the max-width property */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.about-section h2 {
    font-size: 1.5rem; /* Increased from 1.2rem */
    margin-bottom: 1rem;
    color: var(--soft-matte-teal);
}

.about-section p {
    margin-bottom: 1rem;
    font-size: 1.2rem; /* Increased from 0.95rem */
    color: var(--muted-indigo);
}

.about-section p:last-child {
    margin-bottom: 0;
}

.sys-msg {
    color: var(--muted-indigo);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    border-left: 2px solid var(--muted-indigo);
    padding-left: 10px;
}

/* --- 8-PIECE BORDER BUTTON --- */
.btn {
    display: inline-block;
    color: var(--soft-lilac);
    padding: 1.2rem 2.5rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s ease;
    margin-bottom: 2rem;

    /* ORDER MATTERS: Corners must go first so they render ON TOP of the repeating edges */
    background-image:
    url('img/Frame_09.png'), /* 1. Top Left Corner */
    url('img/Frame_63.png'), /* 2. Top Right Corner */
    url('img/Frame_81.png'), /* 3. Bottom Right Corner */
    url('img/Frame_27.png'), /* 4. Bottom Left Corner */
    url('img/Frame_36.png'), /* 5. Top Edge */
    url('img/Frame_54.png'), /* 6. Bottom Edge */
    url('img/Frame_72.png'), /* 7. Right Edge */
    url('img/Frame_18.png'); /* 8. Left Edge */

    /* Pinning each image to its respective position */
    background-position:
    top left, top right, bottom right, bottom left,
    top center, bottom center, center right, center left;

    /* Only repeating the edges */
    background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-x, repeat-x, repeat-y, repeat-y;

    background-color: rgba(26, 19, 37, 0.85);
    image-rendering: pixelated;
    border: none;
    cursor: pointer;
}

.btn:hover {
    color: var(--soft-matte-teal);

    /* Moves the button physically up and to the left */
    transform: translate(4px, -4px);

    /* Casts a hard, solid shadow down and to the right */
    filter: drop-shadow(6px 6px 0px var(--highlight-indigo));
}

/* --- GRID / PROJECTS --- */
.grid-section {
    padding: 4rem 0;
    position: relative;
    z-index: 2;
}

.grid-section h2 {
    margin-bottom: 2rem;
    font-size: 2rem;
    border-bottom: 1px dashed var(--muted-indigo);
    padding-bottom: 1rem;
}

.card-grid {
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding-bottom: 2rem;
    scroll-snap-type: x mandatory;

    /* Firefox support for sleek scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--muted-indigo) var(--solid-indigo);
}

/* --- SLEEK CYBERPUNK SCROLLBAR (Chrome/Safari/Edge) --- */

/* Height of the horizontal scrollbar */
.card-grid::-webkit-scrollbar {
    height: 10px;
}

/* The track (background) of the scrollbar */
.card-grid::-webkit-scrollbar-track {
    background: var(--solid-indigo);
    border-radius: 2px;
    border: 1px solid var(--highlight-indigo);
}

/* The draggable handle */
.card-grid::-webkit-scrollbar-thumb {
    background: var(--muted-indigo);
    border-radius: 2px;
    border: 1px solid var(--highlight-indigo);
    transition: background 0.3s ease;
}

/* Hover effect on the draggable handle */
.card-grid::-webkit-scrollbar-thumb:hover {
    background: var(--soft-lilac);
    box-shadow: inset 0 0 5px rgba(17, 12, 24, 0.5); /* Subtle inner shadow */
}

/* =========================================
 *  UNIVERSAL CARD STYLE (Pixel Art Border Fix)
 *  ========================================= */
.card {
    /* Set the border width to accommodate the thick pixel frame */
    border-style: solid;
    border-width: 36px; /* Thickens the border frame to preserve the tech details */

    /* Call your new tech window image (make sure the filename matches what you saved it as) */
    border-image-source: url("img/lol.png");

    /* Slices at 36px to protect the corners, side brackets, and top bar from distortion, and fills the center */
    border-image-slice: 36 fill;
    border-image-repeat: stretch;

    /* Keeps the pixel art sharp and blocky */
    image-rendering: pixelated;

    /* Extra padding inside so text stays clear of the top title bar and bottom tabs */
    padding: 2.5rem 3rem;
    margin-bottom: 3rem; /* Extra space at the bottom so the red/yellow tabs don't overlap elements */
    position: relative;

    /* Background is handled automatically by 'fill' in border-image-slice */
    background-color: transparent;
}

.card:hover {
    transform: translateY(-5px);
}

.card-header h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

.retro-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    image-rendering: pixelated;
}

.card-body p {
    margin-bottom: 1.5rem;
    color: var(--muted-indigo);
}

.tag {
    background-color: var(--highlight-indigo);
    color: var(--soft-matte-teal);
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 2px;
    margin-right: 0.5rem;
}

/* --- FOOTER --- */
footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.9rem;
    color: var(--muted-indigo);
    position: relative;
    z-index: 10;

    /* Glassmorphism Effect */
    background-color: rgba(26, 19, 37, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(167, 132, 214, 0.2);
}

/* --- CYBERWARE SKILL TREE --- */
.skill-tree-section {
    padding: 4rem 0;
    position: relative;
    z-index: 2;
}

.skill-tree-section h2 {
    margin-bottom: 3rem;
    font-size: 2rem;
    border-bottom: 1px dashed var(--muted-indigo);
    padding-bottom: 1rem;
}

.sub-tree-title {
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    color: var(--soft-matte-teal);
}

.tree-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.tree-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.tree-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

/* Creates the vertical glowing circuit line connecting root to nodes */
.tree-root::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    width: 2px;
    height: 2rem;
    background-color: var(--soft-lilac);
    box-shadow: 0 0 8px var(--soft-lilac);
    z-index: 1;
}

/* Octagon shaped perk icons */
.perk-icon {
    width: 80px;
    height: 80px;
    background-color: rgba(26, 19, 37, 0.9);
    border: 2px solid var(--soft-lilac);
    padding: 10px;
    image-rendering: pixelated;
    box-shadow: 0 0 15px rgba(167, 132, 214, 0.3), inset 0 0 10px rgba(167, 132, 214, 0.2);
    transition: all 0.3s ease;
    /* CSS magic to cut the square into an octagon */
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

.tree-root:hover .perk-icon {
    border-color: var(--soft-matte-teal);
    background-color: rgba(106, 176, 196, 0.1);
    box-shadow: 0 0 20px rgba(106, 176, 196, 0.6), inset 0 0 15px rgba(106, 176, 196, 0.4);
    transform: scale(1.1);
}

.tree-root h4 {
    margin-top: 1rem;
    color: var(--soft-lilac);
    text-shadow: 1px 1px 3px rgba(17, 12, 24, 0.9);
    font-family: 'Fira Code', monospace;
    letter-spacing: 1px;
}

.tree-nodes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--soft-lilac); /* Horizontal circuit line */
    box-shadow: inset 0 2px 5px -2px var(--soft-lilac);
    position: relative;
    width: 85%;
}

/* Small glowing connector dot on the horizontal line */
.tree-nodes::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background-color: var(--soft-matte-teal);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--soft-matte-teal);
}

/* Global Tag Styling (Updated for better readability) */
.tag, .perk-tag {
    background-color: rgba(38, 19, 54, 0.85);
    color: var(--soft-matte-teal);
    padding: 0.25rem 0.6rem; /* Increased for breathing room */
    font-size: 0.85rem; /* Bumped up for readability */
    border: 1px solid var(--highlight-indigo);
    border-radius: 2px;
    transition: all 0.2s ease;
    cursor: crosshair;
    text-shadow: 1px 1px 2px var(--deep-indigo);
}

.perk-tag:hover, .tag:hover {
    background-color: var(--soft-lilac);
    color: var(--deep-indigo);
    border-color: var(--soft-lilac);
    box-shadow: 0 0 12px var(--soft-lilac);
    transform: translateY(-2px);
    text-shadow: none;
}

/* =========================================
 *  SUNSET THEME OVERRIDES (Projects Page)
 *  ========================================= */

/* 1. Override Colors */
.sunset-theme {
    --deep-indigo: #241734;
    --solid-indigo: #3c2554;
    --highlight-indigo: #613c73;
    --soft-matte-teal: #ffcc8e;
    --muted-indigo: #c79eb4;
    --soft-lilac: #f26d7d;
}

/* 2. Override Cloud Layers */
.sunset-theme .layer-1 {
    background-image: url("img/2_2.png");
    animation: none;
    background-size: cover;
}
.sunset-theme .layer-2 {
    background-image: url("img/4_2.png");
    animation-duration: 120s;
}
.sunset-theme .layer-3 {
    background-image: url("img/3_2.png");
    animation-duration: 70s;
}
.sunset-theme .layer-4,
.sunset-theme .layer-5,
.sunset-theme .layer-6 {
    display: none;
}

/* 3. Override Cloud Overlay Gradient */
.sunset-theme .cloud-overlay {
    background: linear-gradient(to bottom, rgba(36, 23, 52, 0.2), var(--deep-indigo));
}

/* 4. Evangelion-style Warning Tag */
.alert-tag {
    background-color: rgba(220, 50, 47, 0.2);
    color: #ff4c4c;
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
    border: 1px solid #ff4c4c;
    border-radius: 2px;
    margin-right: 0.5rem;
    text-shadow: 0 0 5px #ff4c4c;
    font-weight: bold;
    display: inline-block;
}

/* 2. Override Cloud Layers */
.sunset-theme .layer-1 {
    /* The %20 handles the space in the folder name */
    background-image: url("img/Clouds%207/1.png");
    animation: none;
    background-size: cover;
}
.sunset-theme .layer-2 {
    background-image: url("img/Clouds%207/2.png");
    animation-duration: 120s;
}
.sunset-theme .layer-3 {
    background-image: url("img/Clouds%207/3.png");
    animation-duration: 70s;
}
.sunset-theme .layer-4 {
    background-image: url("img/Clouds%207/4.png");
    animation-duration: 45s;
}
.sunset-theme .layer-5,
.sunset-theme .layer-6 {
    display: none;
}

/* =========================================
 *  SECTION HEADER & "SEE MORE" BUTTON
 *  ========================================= */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px dashed var(--muted-indigo);
    padding-bottom: 1rem;
    margin-bottom: 3rem;
}

/* Removes the default dashed line from the H2 so it doesn't double up */
.section-header h2 {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.see-more-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    padding-bottom: 0.2rem; /* Aligns it visually with the text baseline */
}

.see-more-text {
    color: var(--muted-indigo);
    font-family: 'Fira Code', monospace;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.see-more-icon {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 2px rgba(97, 60, 115, 0.5));
}

/* Hover Effects */
.see-more-link:hover .see-more-text {
    color: var(--soft-lilac);
    text-shadow: 0 0 5px rgba(242, 109, 125, 0.4);
}

.see-more-link:hover .see-more-icon {
    transform: translateX(4px) scale(1.05);
    filter: drop-shadow(0 0 5px var(--soft-lilac));
}

/* =========================================
 *  CLOUDS 4 THEME OVERRIDES (Writeups Page)
 *  ========================================= */

.clouds4-theme {
    /* Exact colors extracted from your new reference images */
    --deep-indigo: #2c2541;
    --solid-indigo: #352d4d;
    --highlight-indigo: #514670;
    --soft-matte-teal: #9ce2e6; /* Bright cyan/blue */
    --muted-indigo: #a69bb8; /* Soft grey-purple */
    --soft-lilac: #ff96b6; /* Vibrant pink */
}

/* Background Animations using the 1_4.png to 4_4.png assets */
/* Background Animations using the Clouds 4 folder assets */
.clouds4-theme .layer-1 {
    background-image: url("img/Clouds%204/1.png");
    animation: none;
    background-size: cover;
}
.clouds4-theme .layer-2 {
    background-image: url("img/Clouds%204/2.png");
    animation-duration: 150s;
}
.clouds4-theme .layer-3 {
    background-image: url("img/Clouds%204/3.png");
    animation-duration: 70s;
}
.clouds4-theme .layer-4 {
    background-image: url("img/Clouds%204/4.png");
    animation-duration: 45s;
}
.clouds4-theme .layer-5,
.clouds4-theme .layer-6 {
    display: none;
}

.clouds4-theme .cloud-overlay {
    background: linear-gradient(to bottom, rgba(44, 37, 65, 0.4), var(--deep-indigo));
}

/* =========================================
 *  WRITEUPS LAYOUT (Sidebar Far-Left + Centered Main)
 *  ========================================= */

.writeups-layout {
    display: grid;
    /* 3-Column Layout: Sidebar (Left), Main Content (Center), Invisible Spacer (Right) */
    grid-template-columns: 250px minmax(auto, 800px) 250px;
    justify-content: space-between;
    width: 96%;
    max-width: 1600px; /* Allows stretching to the edges on large monitors */
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 6rem;
    align-items: start;
    gap: 2rem;
}

/* Sidebar Styles */
.sidebar {
    position: sticky;
    top: 100px;
}

.sidebar-title {
    color: var(--soft-lilac);
    border-bottom: 1px dashed var(--highlight-indigo);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.nav-folder {
    margin-bottom: 1.2rem;
}

.nav-folder summary {
    color: var(--soft-matte-teal);
    font-family: 'Fira Code', monospace;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease;
}

.nav-folder summary::before {
    content: "[+] ";
    color: var(--soft-lilac);
}

.nav-folder[open] summary::before {
    content: "[-] ";
    color: var(--soft-lilac);
}

.nav-folder summary:hover {
    color: var(--soft-lilac);
}

.folder-contents {
    list-style-type: none;
    padding-left: 1.5rem;
    margin-top: 0.8rem;
    border-left: 1px solid var(--highlight-indigo);
}

.folder-contents li {
    margin-bottom: 0.8rem;
}

.folder-contents a {
    color: var(--muted-indigo);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.folder-contents a:hover {
    color: var(--soft-matte-teal);
    text-shadow: 0 0 5px var(--soft-matte-teal);
}

/* Main Content Styles */
.main-content {
    width: 100%;
}

.main-content > h2 {
    border-bottom: 1px dashed var(--highlight-indigo);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.category-title {
    color: var(--soft-lilac);
    font-family: 'Fira Code', monospace;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

/* View Button */
.view-btn {
    display: inline-block;
    background-color: rgba(110, 205, 244, 0.1); /* Soft cyan tint */
    color: var(--soft-matte-teal);
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 0.5rem 1.2rem;
    text-decoration: none;
    border: 1px dashed var(--soft-matte-teal);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.view-btn:hover {
    background-color: var(--soft-matte-teal);
    color: var(--deep-indigo);
    box-shadow: 0 0 12px rgba(110, 205, 244, 0.6);
    border-style: solid;
}

/* =========================================
 *  PREVIEW MODAL (FORCED WIDTH)
 *  ========================================= */

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    background-color: rgba(44, 37, 65, 0.85);
    backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
}


/* Dynamically wrapping modal content */
.modal-content.card {
    width: fit-content !important;
    min-width: 450px !important; /* Prevents it from getting overly crushed */
    max-width: 800px !important; /* Caps the width so text doesn't stretch too far */
    max-height: 85vh !important;
    background-color: rgba(44, 37, 65, 0.98) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 2.5rem 3.5rem !important;
    margin: auto !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px dashed var(--highlight-indigo);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.modal-header h3 {
    margin: 0;
    color: var(--soft-matte-teal);
    font-size: 1.6rem;
    line-height: 1.4;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    flex: 1; /* Forces the title to wrap nicely within its allocated space */
    padding-right: 1.5rem; /* Creates a guaranteed safe zone between the text and the close button */
}

.close-btn {
    background: none;
    border: none;
    color: var(--soft-lilac);
    font-family: 'Fira Code', monospace;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: text-shadow 0.2s ease;
    flex-shrink: 0; /* Prevents the button from ever getting squeezed */
    padding: 0;
    margin: 0;
}

.close-btn:hover {
    text-shadow: 0 0 8px var(--soft-lilac);
}

.modal-body p {
    color: var(--muted-indigo);
    line-height: 2;
    font-family: 'Fira Code', monospace;
    font-size: 1.05rem;
    white-space: pre-wrap;
}
/* =========================================
 *  CLOUDS 3 THEME OVERRIDES (Contact Page)
 *  ========================================= */

.clouds3-theme {
    /* Extracted from the deep night sky and moon assets */
    --deep-indigo: #0b0c14; /* Deepest night sky */
    --solid-indigo: #121526; /* Dark navy for cards */
    --highlight-indigo: #1d2745; /* Border highlights */
    --soft-matte-teal: #6ecdf4; /* Cyan/blue from the moon */
    --muted-indigo: #6f7c9e; /* Muted text */
    --soft-lilac: #8caeff; /* Pale blue accents */
}

/* Background Animations using the Clouds 3 folder assets */
.clouds3-theme .layer-1 {
    background-image: url("img/Clouds%203/1.png"); /* Starry Sky */
    animation: none;
    background-size: cover;
}
.clouds3-theme .layer-2 {
    background-image: url("img/Clouds%203/2.png"); /* Moon (Slow drift) */
    animation-duration: 200s;
}
.clouds3-theme .layer-3 {
    background-image: url("img/Clouds%203/3.png"); /* Back clouds */
    animation-duration: 90s;
}
.clouds3-theme .layer-4 {
    background-image: url("img/Clouds%203/4.png"); /* Front clouds */
    animation-duration: 50s;
}
.clouds3-theme .layer-5,
.clouds3-theme .layer-6 {
    display: none;
}

.clouds3-theme .cloud-overlay {
    background: linear-gradient(to bottom, rgba(11, 12, 20, 0.4), var(--deep-indigo));
}

/* =========================================
 *  CONTACT PAGE LAYOUT & FORM STYLING
 *  ========================================= */

.contact-layout {
    display: grid;
    grid-template-columns: 3fr 2fr; /* Form takes 60%, Info takes 40% */
    gap: 4rem;
    padding-top: 3rem;
    padding-bottom: 6rem;
    align-items: start;
}

/* Form Styles */
.cyber-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    color: var(--soft-lilac);
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    font-weight: bold;
}

.cyber-input {
    background-color: rgba(11, 12, 20, 0.6);
    border: 1px solid var(--highlight-indigo);
    color: var(--soft-matte-teal);
    padding: 0.8rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.cyber-input:focus {
    border-color: var(--soft-matte-teal);
    box-shadow: 0 0 8px rgba(110, 205, 244, 0.2);
    background-color: rgba(29, 39, 69, 0.4);
}

.cyber-input::placeholder {
    color: var(--muted-indigo);
    opacity: 0.5;
}

/* Custom Dropdown Arrow styling */
select.cyber-input {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236ecdf4%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem top 50%;
    background-size: 0.65rem auto;
}

/* Checkbox */
.checkbox-group {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
}

.checkbox-group input[type="checkbox"] {
    accent-color: var(--soft-matte-teal);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-group label {
    font-size: 0.85rem;
    color: var(--muted-indigo);
    font-weight: normal;
}

/* Submit Button */
.cyber-btn-submit {
    background-color: transparent;
    color: var(--soft-matte-teal);
    border: 1px solid var(--soft-matte-teal);
    padding: 1rem;
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    text-align: center;
}

.cyber-btn-submit:hover {
    background-color: var(--soft-matte-teal);
    color: var(--deep-indigo);
    box-shadow: 0 0 15px var(--soft-matte-teal);
}

/* Right Side: Contact Info List */
.contact-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-details-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.contact-details-list .retro-icon {
    width: 32px;
    height: 32px;
    margin-top: 0.2rem;
    filter: drop-shadow(0 0 4px rgba(140, 174, 255, 0.4));
}

.info-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.info-text strong {
    color: var(--soft-lilac);
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
}

.info-text span {
    color: var(--muted-indigo);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Resume Download Button */
.cyber-btn-resume {
    display: inline-block;
    background-color: rgba(110, 205, 244, 0.05);
    color: var(--soft-matte-teal);
    border: 1px dashed var(--soft-matte-teal);
    padding: 0.6rem 1rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    align-self: flex-start; /* Keeps the button from stretching all the way across */
}

.cyber-btn-resume:hover {
    background-color: var(--soft-matte-teal);
    color: var(--deep-indigo);
    box-shadow: 0 0 12px rgba(110, 205, 244, 0.6);
}

/* =========================================
 *  CUSTOM ADMIN/DOWNLOAD BUTTONS
 *  ========================================= */

/* Style 01: ACCESS_ARCHIVES (Solid Cyber Frame) */
/* =========================================
 *  STYLE 01: ACCESS_ARCHIVES (Chamfered Frame)
 *  ========================================= */

.btn-archives {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #9f8bc2;
    font-family: 'Fira Code', monospace;
    font-size: 1.1rem;
    letter-spacing: 1px;
    padding: 1rem 2.5rem;
    text-decoration: none;
    z-index: 1; /* Establishes stacking context for the pseudo-elements */

    /* Layer 1: Outer Light Blue Border */
    background-color: #89b4c4;

    /* Outermost shape with cut Top-Right & Bottom-Left corners */
    clip-path: polygon(
        0 0,
        calc(100% - 16px) 0,
                       100% 16px,
                       100% 100%,
                       16px 100%,
                       0 calc(100% - 16px)
    );
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Layer 2: Inner Thin Dark Border */
.btn-archives::before {
    content: '';
    position: absolute;
    inset: 3px; /* Pulls inward to leave 3px of the outer border visible */
    background-color: #443355;
    z-index: -2;
    /* Slightly smaller cut paths to match the new inset */
    clip-path: polygon(
        0 0,
        calc(100% - 13px) 0,
                       100% 13px,
                       100% 100%,
                       13px 100%,
                       0 calc(100% - 13px)
    );
}

/* Layer 3: Main Button Fill */
.btn-archives::after {
    content: '';
    position: absolute;
    inset: 5px; /* Pulls inward further to leave 2px of the dark line visible */
    background-color: #272844;
    z-index: -1;
    clip-path: polygon(
        0 0,
        calc(100% - 11px) 0,
                       100% 11px,
                       100% 100%,
                       11px 100%,
                       0 calc(100% - 11px)
    );
    transition: background-color 0.3s ease;
}

/* Hover State Animations */
.btn-archives:hover {
    color: #bfa9e6;
    background-color: #9ce2e6; /* Brightens outer border */
}
.btn-archives:hover::after {
    background-color: #35365e; /* Brightens inner fill */
}

/* =========================================
 *  ADMIN INBOX LOG STYLES
 *  ========================================= */

.message-feed {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: 600px; /* Forces the inbox to scroll if it gets too long */
    overflow-y: auto;
    padding-right: 1rem;
}

/* Custom Scrollbar for the feed */
.message-feed::-webkit-scrollbar {
    width: 6px;
}
.message-feed::-webkit-scrollbar-track {
    background: rgba(11, 12, 20, 0.4);
}
.message-feed::-webkit-scrollbar-thumb {
    background: var(--highlight-indigo);
}

.message-card {
    background-color: rgba(11, 12, 20, 0.4);
    border: 1px solid var(--highlight-indigo);
    border-left: 4px solid var(--muted-indigo); /* Indicator stripe */
    padding: 1.2rem;
    transition: all 0.3s ease;
}

.message-card.unread {
    border-left: 4px solid var(--soft-lilac); /* Unread messages get a bright stripe */
    background-color: rgba(29, 39, 69, 0.4);
}

.message-card:hover {
    border-color: var(--soft-matte-teal);
    box-shadow: 0 0 10px rgba(110, 205, 244, 0.1);
}

.msg-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--highlight-indigo);
    padding-bottom: 0.5rem;
    margin-bottom: 0.8rem;
}

.msg-sender {
    color: var(--soft-matte-teal);
    font-family: 'Fira Code', monospace;
    font-weight: bold;
    font-size: 1.05rem;
}

.msg-date {
    color: var(--muted-indigo);
    font-size: 0.85rem;
    font-family: 'Fira Code', monospace;
}

.msg-contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--soft-lilac);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    font-family: 'Fira Code', monospace;
}

.msg-body {
    color: var(--muted-indigo);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    white-space: pre-wrap; /* Preserves line breaks entered by the user */
}

.msg-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/* =========================================
 *  CUSTOM BORDER: WIRED FRAME (Logo3.png)
 *  ========================================= */

.card-wired {
    /* Top, Right, Bottom, Left widths. Notice the bottom is massive! */
    border-width: 16px 16px 64px 16px;

    border-image-source: url("img/Logo1.png");

    /* Slice values must exactly match the border-widths to prevent distortion */
    border-image-slice: 16 16 64 16 fill;
    border-image-repeat: stretch;

    /* Adjusting padding so the text doesn't overlap the bottom wires */
    padding: 1.5rem 2rem 1rem 2rem;

    /* Huge bottom margin so the hanging wires don't clip into the next card */
    margin-bottom: 4rem;
}

/* =========================================
 *  CUSTOM BORDER: POPUP MODAL
 *  ========================================= */

.card-popup {
    border-style: solid;
    border-width: 32px; /* Uniform width all the way around for this specific frame */

    /* URL-encoded the space so the browser can load the image properly */
    border-image-source: url("img/Interface%20windows_42.png");

    /* Uniform slice to protect all 4 corners evenly */
    border-image-slice: 32 fill;
    border-image-repeat: stretch;

    image-rendering: pixelated;
    background-color: transparent;

    /* THE FIX: 3.5rem bottom padding gives the dashed button plenty of room to breathe */
    padding: 2rem 2.5rem 3.5rem 2.5rem;

    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

/* =========================================
 *  POPUP DOWNLOAD BUTTON FIX
 *  ========================================= */

.btn-download-dashed {
    display: inline-block;
    color: var(--soft-matte-teal);
    font-family: 'Fira Code', monospace;
    font-size: 0.95rem;
    padding: 0.8rem 1.5rem;
    text-decoration: none !important;
    border: 1px dashed var(--soft-matte-teal);
    background-color: transparent;
    transition: all 0.3s ease;
    margin-top: 2rem;
    cursor: pointer;
}

.btn-download-dashed:hover {
    background-color: rgba(110, 205, 244, 0.15);
    box-shadow: 0 0 10px rgba(110, 205, 244, 0.2);
}