/* ==========================================================================
   CYBERPUNK 2090 TERMINAL THEME - WORKING CORE STYLESHEET
   ========================================================================== */

/* 1. Global Core Foundations & Typography */
body {
    background-color: #030308 !important;
    color: #e2e8f0 !important;
    font-family: 'Courier New', Courier, monospace !important;
}

/* 2. Primary Page Layout Elements, Cards & Interface Blocks */
.frame-box,
.app-card,
.form-registration,
#grav-login,
.modal-content {
    background-color: #090b14 !important;
    border: 1px solid #00f0ff !important;
    color: #e2e8f0 !important;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.05) !important;
    border-radius: 4px !important; /* Cyberpunk 2090 architectural edges are sharp and structural */
    padding: 2.5rem;
    margin: 2rem auto;
}

#grav-login {
    padding: 2rem;
}

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

/* 3. Global Typography Headers, Alerts & Interactive Hyperlinks */
h2, h3, p {
    color: #ffffff !important;
}

h2, .dashboard-header h2, .email-header h2, .no-address-container h2 {
    color: #00f0ff !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.6) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 800 !important;
}

h3, .attachments-section h5, .modal-content h3 {
    color: #ff007f !important;
    text-shadow: 0 0 8px rgba(255, 0, 127, 0.6) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 800 !important;
}

#security-modal h3 {
    color: #ff0055 !important;
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.8) !important;
}

a, table.app-table a {
    color: #00f0ff !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s ease !important;
}

a:hover, table.app-table a:hover {
    color: #ff007f !important;
    text-shadow: 0 0 6px rgba(255, 0, 127, 0.8) !important;
}

/* 4. Top Navigation HUD & Header Menu Interface */
#header.section {
    background-color: #030308 !important;
    border-bottom: 2px solid #ff007f !important;
    box-shadow: 0 4px 15px rgba(255, 0, 127, 0.25) !important;
}

.navbar {
    background-color: transparent !important;
}

.navbar .dropmenu {
    background-color: #090b14 !important;
    border: 1px solid #00f0ff !important;
}

.navbar .dropmenu a {
    color: #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

.navbar .dropmenu a:hover {
    color: #ff007f !important;
    background-color: rgba(255, 0, 127, 0.1) !important;
}

.mobile-menu .button_container span {
    background-color: #00f0ff !important;
    box-shadow: 0 0 8px #00f0ff !important;
}

/* ==========================================================================
   5. Cybernetic Action Elements & Tactile Buttons
   ========================================================================== */
button.contrast,
.form-registration .button-wrapper button,
.btn-proceed,
#grav-login .button-wrapper .contrast {
    width: 100%;
    padding: 0.9rem 2rem !important;
    background: linear-gradient(135deg, #ff007f, #7b2cbf) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border: 1px solid #00f0ff !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.4) !important;
    transition: all 0.2s ease !important;
    display: inline-block;
    text-decoration: none;
}

/* FIXED: Isolated rule for the generate email button to prevent giant text overflow */
.button-generate {
    display: inline-block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.9rem 1.2rem !important;
    background: linear-gradient(135deg, #ff007f, #7b2cbf) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    
    /* Dynamic scaling: Scales smoothly between 0.75rem on mobile and 0.9rem on desktop */
    font-size: clamp(0.75rem, 2vw, 0.9rem) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    
    border: 1px solid #00f0ff !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.4) !important;
    transition: all 0.2s ease !important;
    text-decoration: none;
    text-align: center !important;
    
    /* FIX: Forces email onto a single line and cleanly handles ultra-small screens */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Adds '...' if a phone screen is impossibly narrow */
    box-sizing: border-box !important;
}

button.contrast:hover,
.form-registration .button-wrapper button:hover,
.button-generate:hover,
.btn-proceed:hover,
#grav-login .button-wrapper .contrast:hover {
    background: linear-gradient(135deg, #00f0ff, #ff007f) !important;
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.8) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

button.contrast:active,
.button-generate:active {
    transform: translateY(0) !important;
}

.btn-outline,
.btn-back,
.btn-attachment {
    padding: 0.7rem 1rem !important;
    border: 2px solid #00f0ff !important;
    border-radius: 4px !important;
    background: #030308 !important;
    color: #00f0ff !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    width: 100%;
    box-shadow: 0 0 5px rgba(0, 240, 255, 0.2) !important;
}

.btn-outline:hover,
.btn-back:hover,
.btn-attachment:hover {
    border-color: #ff007f !important;
    color: #ff007f !important;
    background: rgba(255, 0, 127, 0.05) !important;
    box-shadow: 0 0 12px rgba(255, 0, 127, 0.5) !important;
}

.btn-attachment span {
    color: #00f0ff !important;
}

.btn-back {
    width: auto !important;
}

.btn-delete {
    color: #ff0055 !important;
    font-size: 1.1rem !important;
    padding: 4px 8px !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    text-shadow: 0 0 5px rgba(255, 0, 85, 0.5) !important;
}

.btn-delete:hover {
    color: #ff0000 !important;
    transform: scale(1.15) !important;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8) !important;
}

/* Mobile responsive scaling down specifically for small viewports */
@media screen and (max-width: 576px) {
    .button-generate {
        font-size: 0.8rem !important;
        padding: 0.8rem 1rem !important;
    }
}

/* 6. Form Fields, Systems Overrides & Interactive Inputs */
.form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.form-label,
#grav-login .form-label,
.form-registration .form-label {
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: #ff007f !important;
    margin-bottom: 0.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-shadow: 0 0 4px rgba(255, 0, 127, 0.3) !important;
}

#grav-login .rememberme label {
    color: #e2e8f0 !important;
}

.form-input, 
.form-select,
#grav-login .form-input,
.form-registration .form-input, 
.form-registration .form-select {
    width: 100% !important;
    padding: 0.8rem 1.1rem !important;
    font-size: 1rem !important;
    border: 2px solid #00f0ff !important;
    border-radius: 4px !important;
    background-color: #0e111b !important;
    color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
    box-shadow: inset 0 0 6px rgba(0, 240, 255, 0.1) !important;
}

.form-input:focus, 
.form-select:focus,
.form-registration .form-input:focus, 
.form-registration .form-select:focus {
    border-color: #ff007f !important;
    background-color: #131724 !important;
    box-shadow: 0 0 12px rgba(255, 0, 127, 0.4), inset 0 0 6px rgba(255, 0, 127, 0.1) !important;
}

/* Chrome/Safari Autofill System Overwrite */
#grav-login .form-input:-webkit-autofill,
#grav-login .form-input:-webkit-autofill:hover, 
#grav-login .form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #0e111b inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.button-wrapper {
    margin-top: 2rem;
}

/* 7. Data Tables (Grid Network Interfaces) */
.table-responsive {
    overflow-x: auto;
    border-radius: 4px !important;
    border: 1px solid #00f0ff !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.1) !important;
    -webkit-overflow-scrolling: touch;
}

.app-table, 
table.app-table,
.app-table tr {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    background-color: #090b14 !important;
    color: #e2e8f0 !important;
}

.app-table th, 
table.app-table th,
.app-table thead tr {
    background-color: #0e111b !important;
    color: #00f0ff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.08em !important;
    border-bottom: 2px solid #00f0ff !important;
}

.app-table th, table.app-table th, table.app-table td {
    padding: 1rem 1.2rem !important;
    text-align: left !important;
}

.app-table td, table.app-table td {
    border-bottom: 1px solid #141929 !important;
}

.app-table tr:hover,
table.app-table tbody tr:hover {
    background-color: rgba(0, 240, 255, 0.05) !important;
}

.app-table .empty-state,
.empty-state {
    background-color: #090b14 !important;
    color: #ff007f !important;
    text-align: center !important;
    padding: 4rem 2rem !important;
    text-shadow: 0 0 4px rgba(255, 0, 127, 0.4) !important;
}

.empty-state i {
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important;
}

.date-cell a {
    color: #ff007f !important;
    font-family: monospace !important;
}

.from-cell {
    font-weight: 600 !important;
    color: #ffffff !important;
}

.subject-cell {
    color: #00f0ff !important;
}

/* 8. Inbox Dashboard Modules & Network HUD */
.inbox-dashboard {
    width: 100%;
    margin: 0 auto;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 10px;
}

.address-display-box {
    background: #0e111b !important;
    border: 1px dashed #ff007f !important;
    padding: 1rem;
    border-radius: 4px !important;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.1) !important;
}

.address-display-box .label {
    font-size: 0.85rem;
    background-color: transparent !important;
    color: #ff007f !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
}

.address-display-box .address-link {
    color: #00f0ff !important;
    font-weight: 700 !important;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
    word-break: break-all;
    text-align: center;
    padding: 0 5px;
    text-shadow: 0 0 4px rgba(0, 240, 255, 0.4) !important;
}

.refresh-ticker {
    font-size: 0.85rem;
    color: #ffee00 !important;
    text-shadow: 0 0 4px rgba(255, 238, 0, 0.4) !important;
}

.button-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 100%;
    margin: 0 auto 2.5rem auto;
    padding: 0 10px;
}

/* 9. Email Decryption Reader View */
.read-container {
    width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
}

.read-actions {
    margin-bottom: 1.5rem;
}

.email-header {
    border-bottom: 2px solid #00f0ff !important;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 240, 255, 0.1) !important;
}

.email-meta p {
    margin: 0.4rem 0;
    font-size: 0.95rem;
    color: #e2e8f0 !important;
}

.email-meta strong {
    color: #00f0ff !important;
    display: inline-block;
    width: 60px;
    text-transform: uppercase;
}

.mail-body {
    width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    background: #05060b !important;
    border: 1px solid #ff007f !important;
    border-radius: 4px !important;
    padding: 1.5rem;
    color: #ffffff !important;
    line-height: 1.6;
    min-height: 200px;
    box-sizing: border-box;
    box-shadow: inset 0 0 10px rgba(255, 0, 127, 0.05) !important;
}

.attachments-section {
    margin-top: 2rem;
    border-top: 1px solid #00f0ff !important;
    padding-top: 1.5rem;
}

.attachments-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* 10. Threat Warning Alerts & Security Decryption Modals */
.form-errors {
    background: #1c0a10 !important;
    color: #ff0055 !important;
    padding: 1rem;
    border-radius: 4px !important;
    margin-bottom: 1.5rem;
    border-left: 4px solid #ff0055 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 4px rgba(255, 0, 85, 0.4) !important;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.1) !important;
}

.no-address-container {
    max-width: 550px;
    padding: 4rem 2rem;
    margin: 0 auto;
}

.no-address-container .alert-icon {
    font-size: 3rem;
    color: #ffee00 !important;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 12px #ffee00 !important;
}

#security-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(3, 3, 8, 0.9) !important;
    backdrop-filter: blur(8px);
    z-index: 9999999 !important;
    justify-content: center;
    align-items: center;
}

#security-modal > div {
    background-color: #090b14 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 0 30px rgba(255, 0, 85, 0.4) !important;
    border: 2px solid #ff0055 !important;
}

#modal-url {
    background: #030308 !important;
    padding: 14px;
    border-radius: 4px !important;
    font-family: monospace;
    font-size: 0.9rem;
    word-break: break-all;
    margin: 20px 0;
    display: block;
    color: #ffee00 !important;
    border: 1px solid #ffee00 !important;
    box-shadow: inset 0 0 8px rgba(255, 238, 0, 0.1) !important;
}

.modal-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 24px;
}

.btn-cancel {
    background: #1a1e2e !important;
    color: #ffffff !important;
    border: 1px solid #434b6e !important;
    padding: 12px 26px !important;
    border-radius: 4px !important;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: #272d45 !important;
    border-color: #6571a3 !important;
}

#footer.bg-dark {
    background-color: #010103 !important;
    border-top: 1px solid #0e111b !important;
}

.ad-container {
    margin-top: 2rem;
}

/* ==========================================================================
   11. GLOBAL RESPONSIVE BINDINGS & SCREEN OVERRIDES
   ========================================================================== */
@media screen and (min-width: 1280px) {
    html body #page-wrapper .container.grid-xl,
    html body #page-wrapper #body-wrapper .container.grid-xl,
    html body #page-wrapper section.container {
        max-width: 95% !important;
        width: 1680px !important;
    }
}

@media screen and (min-width: 1600px) {
    html body #page-wrapper .container.grid-xl,
    html body #page-wrapper #body-wrapper .container.grid-xl,
    html body #page-wrapper section.container {
        max-width: 95% !important;
        width: 1920px !important;
    }
}



/* ==========================================================================
   8. RESPONSIVE LAYOUT & INTERFACE FLUIDITY FIXES
   ========================================================================== */

/* --- GLOBAL BUTTON GROUP WRAP FIX --- */
/* Fixes the horizontal overflow on intermediate mobile screens (Image 1000104271) */
@media screen and (min-width: 576px) {
    .button-group {
        display: flex !important;
        flex-wrap: wrap !important; /* Enforces clean multi-line wrapping when running out of space */
        justify-content: center !important;
        gap: 12px !important;
    }
    .btn-outline {
        width: auto !important; /* Allows buttons to size naturally alongside each other */
        min-width: 140px !important;
    }
}

/* --- MOBILE SPECIFIC OVERRIDES (MAX-WIDTH: 576PX) --- */
@media screen and (max-width: 576px) {
    /* 1. DOUBLE LOGO DUPLICATION TERMINATOR */
.navbar {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }
    .navbar-section {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        padding: 1rem 0 !important;
    }
    .navbar-brand {
        margin: 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Forcefully re-enforce the framework's visibility toggles overridden by flex layouts */
    .hide-md, .hide-sm, .navbar-section.hide-md {
        display: none !important;
    }

    .show-md, .show-sm, .navbar-section.show-md {
        display: flex !important;
    }

    /* 2. ADAPTIVE FONT SIZES & TEXT BREAKS */
    /* Clamps the temporary email string so it dynamically shrinks on smaller screens */
    .address-display-box .address-link {
        font-size: clamp(0.85rem, 3.8vw, 1.1rem) !important;
        word-break: break-all !important; /* Secure fallback to wrap strings safely if critically narrow */
    }
    
    /* Fluid typography rules for headers to keep everything balanced */
    h2, .dashboard-header h2, .no-address-container h2 {
        font-size: clamp(1.2rem, 5.5vw, 1.6rem) !important;
    }
    
    .button-generate {
        font-size: clamp(0.8rem, 3.5vw, 1rem) !important;
        white-space: normal !important;
        word-break: break-all !important;
    }

    /* Ensures tight 2x2 grid handling for default narrow portrait phone screens */
    .button-group {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 !important;
    }
    
    .btn-outline {
        font-size: clamp(0.75rem, 3vw, 0.9rem) !important;
        padding: 0.6rem 0.5rem !important;
    }
}
/* ==========================================================================
   9. NATIVE DROPDOWN (SELECT DOMAIN) VISIBILITY & ALIGNMENT FIX
   ========================================================================== */
/* Targets the native select field to fix text color and prevent layout clipping */
select.form-select,
.form-select-wrapper select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Injects a high-contrast cyan dropdown arrow that works perfectly on dark themes */
    background: #1a1d23 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%2366d9ef' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 1.1rem center / 0.45rem 0.55rem !important;
    
    color: #ffffff !important;
    background-color: #1a1d23 !important;
    border: 2px solid #66d9ef !important;
    border-radius: 10px !important;
    
    /* Explicit line-height & auto-height prevents text from clipping out of bounds */
    padding: 0.8rem 2.5rem 0.8rem 1.1rem !important; 
    line-height: 0.8 !important;
    height: auto !important;
    vertical-align: middle !important;
    width: 100% !important;
}

/* Ensures the individual option choices carry bright text when the menu is open */
select.form-select option,
.form-select-wrapper select option {
    color: #ffffff !important;
    background-color: #1a1d23 !important;
}

/* Retains correct background color on active focus state */
select.form-select:focus,
.form-select-wrapper select:focus {
    background-color: #1a1d23 !important;
    border-color: #66d9ef !important;
    box-shadow: 0 0 0 4px rgba(102, 217, 239, 0.15) !important;
}
/* ==========================================================================
   10. USER LOGIN FORM BUTTON ALIGNMENT FIX
   ========================================================================== */
/* Transforms the button container into a responsive flex layout */
#grav-login .button-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important; /* Creates a clean space between the buttons */
    margin-top: 1.5rem !important;
}

/* Enforces the Remember Me checkbox to stay full-width on its own top row */
#grav-login .button-wrapper .rememberme {
    width: 100% !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* Forces the Forgot and Login buttons to split row space evenly side-by-side */
#grav-login .button-wrapper .contrast {
    flex: 1 1 0% !important;  /* Distributes remaining width 50/50 automatically */
    width: auto !important;    /* Breaks the harsh 100% structural lock */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;       /* Spaces out the font-awesome icons from text */
    box-sizing: border-box !important;
    padding: 0.8rem 1.5rem !important;
}

/* Responsive adjustment: Stack buttons safely on narrow mobile phone displays */
@media screen and (max-width: 576px) {
    #grav-login .button-wrapper .contrast {
        flex: 1 1 100% !important; /* Reverts to full width rows so tapping targets remain large */
    }
}
/* ==========================================================================
   11. SYSTEM INBOXES DASHBOARD COMPONENT
   ========================================================================== */
.section-title {
    color: #ffffff;
    font-weight: 800;
    margin-top: 2rem;
}

.section-divider {
    border-color: #222;
    margin-bottom: 2rem;
}

/* Card framing controls */
.inbox-card {
    border-top: 3px solid #ff007f !important;
    border-radius: 6px !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.inbox-card .card-header {
    padding: 1.2rem;
    border-bottom: 1px solid #222;
}

.inbox-card .card-title {
    color: #00f0ff !important;
    font-weight: 700;
    word-break: break-all;
}

.inbox-card .card-subtitle {
    color: #a0a0a0 !important;
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

/* Scrollable message container mechanics */
.scrollable-table-container {
    max-height: 220px;
    overflow-y: auto;
    background: #15151a !important;
    padding: 1rem !important;
}

.inbox-preview-table {
    background: transparent !important;
    color: #e0e0e0 !important;
}

.inbox-preview-table tr {
    border-bottom: 1px solid #222 !important;
}

.inbox-preview-table td {
    padding: 0.75rem 0.5rem !important;
    border: none !important;
}

/* Message rows details */
.mail-subject {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
}

.mail-from {
    font-size: 0.75rem;
    color: #a0a0a0;
    margin-top: 0.1rem;
}

.mail-date {
    font-size: 0.7rem;
    vertical-align: middle;
    color: #00f0ff;
    opacity: 0.8;
    white-space: nowrap;
}

.empty-notice {
    color: #666;
    margin: 1rem 0;
}

.inbox-card .card-footer {
    padding: 1.2rem;
    border-top: 1px solid #222;
    margin-top: auto;
}


/* ==========================================================================
   12. ADVANCED PARALLAX DATASTREAM & HIGH-FREQUENCY BACKGROUND GLITCH ENGINE
   ========================================================================== */

body {
    position: relative;
    overflow-x: hidden;
    background-color: #020205 !important;
    /* Cleaned: Shaking animations and images are removed from the main body tag to keep layout text stable */
}

/* ISOLATED BACKGROUND LAYER: Holds your exact matrix code rain and handles all glitch transformations */
body::before {
    content: "";
    position: fixed;
    /* Slightly oversized boundaries prevent raw browser edges from showing during translate/skew jumps */
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    z-index: -2; /* Keeps the entire datastream locked securely behind all page UI elements */
    pointer-events: none;
    
    /* YOUR EXACT PARALLAX TEXTURE STACK */
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='600'%3E%3Cstyle%3E.f1%7Bwriting-mode:vertical-rl;text-orientation:upright;font-family:monospace;font-size:16px;font-weight:900;fill:rgba(7, 120, 0, 0.73);letter-spacing:6px;%7D%3C/style%3E%3Ctext x='45' y='40' class='f1'%3ETEMPMAIL_MAIN_GRID_010101%3C/text%3E%3Ctext x='195' y='220' class='f1'%3EEXTERNAL_INBOUND_DECRYPT%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='800'%3E%3Cstyle%3E.f2%7Bwriting-mode:vertical-rl;text-orientation:upright;font-family:monospace;font-size:14px;font-weight:700;fill:rgba(255,0,127,0.48);letter-spacing:5px;%7D%3C/style%3E%3Ctext x='110' y='20' class='f2'%3EMEHARBAN_MISCAVAGE_SECURE_TRACK%3C/text%3E%3Ctext x='290' y='310' class='f2'%3EDENNIS_JOEKEN_TERMINAL_ACCESS%3C/text%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400'%3E%3Cstyle%3E.f3%7Bwriting-mode:vertical-rl;text-orientation:upright;font-family:monospace;font-size:17x;font-weight:600;fill:rgba(0,240,255,0.41);letter-spacing:4px;%7D%3C/style%3E%3Ctext x='30' y='90' class='f3'%3E010101010101010101010101%3C/text%3E%3Ctext x='135' y='10' class='f3'%3EAINX_EU_NODE_STABLE_8821%3C/text%3E%3C/svg%3E"),
        linear-gradient(rgba(154, 248, 255, 0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 240, 255, 0.01) 1px, transparent 1px);
    
    background-size: 300px 600px, 400px 800px, 200px 400px, 40px 40px, 40px 40px;
    background-repeat: repeat;
    
    /* Run both the falling tracking physics and the systemic jumps strictly on this backplane */
    animation: 
        parallax-matrix-rain 15s linear infinite,
        terminal-corruption 2.5s infinite linear;
}

/* Keep structural frames relative for clean stacking layers */
h2, .frame-box, .app-card, .inbox-card {
    position: relative;
}

/* 3. Parallax Math Cascade Engine */
@keyframes parallax-matrix-rain {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px, center center, center center;
    }
    100% {
        background-position: 0px 600px, 0px 1600px, 0px 1200px, center center, center center;
    }
}

/* 4. Isolated High-Frequency Background Corruption Cycles (Zero layout impact) */
@keyframes terminal-corruption {
    0%, 84%, 88%, 92%, 96%, 100% {
        filter: none;
        transform: none;
    }
    85% {
        filter: contrast(1.5) hue-rotate(60deg) saturate(2);
        transform: translate(3px, -2px) skewX(2deg);
    }
    87% {
        filter: contrast(2.5) invert(0.1);
        transform: translate(-4px, 3px) skewX(-2deg);
    }
    90% {
        filter: saturate(3) hue-rotate(-30deg);
        transform: translate(2px, 4px) skewX(1deg);
    }
    94% {
        filter: brightness(1.3) contrast(1.2);
        transform: translate(-3px, -1px);
    }
}

/* 5. Chromatic Title Splits (Kept intact for text-shadow only, no moving layout position) */
h2, .dashboard-header h2 {
    animation: title-twitch 2.5s infinite steps(1);
}

@keyframes title-twitch {
    0%, 84%, 88%, 92%, 96%, 100% {
        text-shadow: 0 0 8px rgba(0, 240, 255, 0.6) !important;
    }
    85% {
        text-shadow: -4px -2px 0 rgba(0, 240, 255, 0.95), 4px 2px 0 rgba(255, 0, 127, 0.95) !important;
    }
    89% {
        text-shadow: 5px -3px 0 rgba(0, 240, 255, 0.95), -4px 4px 0 rgba(255, 0, 127, 0.95) !important;
    }
}

/* ==========================================================================
   COOKIE CONSENT BUTTON RECOVERY OVERRIDE
   ========================================================================== */

/* 1. Ensure the banner sits safely on top of the CRT scanlines */
.cc-grower, .cc-window.cc-banner {
    z-index: 200000 !important;
    background-color: #ffffff !important;
}

/* 2. Force the button to respect your JS palette colors over layout wildcards */
.cc-window .cc-btn {
    color: rgba(250, 147, 147, 0.95) !important; /* Forces your salmon/pink text */
    background-color: #91edff !important;        /* Forces your bright cyan button */
    border-color: rgba(250, 147, 147, 0.95) !important;
    font-weight: 700 !important;
    text-shadow: none !important;                /* Prevents layout blurring */
    opacity: 1 !important;
}

/* 3. Keep the "Learn more" link distinctly visible */
.cc-window .cc-link {
    color: #00f0ff !important;
    text-decoration: underline !important;
}

/* 4. Ensure message prose doesn't inherit background card styles */
.cc-window .cc-message {
    color: #000000 !important;
    font-family: inherit !important;
}