* {
    box-sizing: border-box;
}

body {
    background: #0d0221;
    color: #00f2ff;
    font-family: 'Courier New', Courier, monospace;
    padding: 20px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    /* Prevent horizontal scroll "wiggle" */
}

h1 {
    color: #ff00ff;
    text-align: center;
    letter-spacing: 5px;
    font-size: 2.2em;
    text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
    margin-bottom: 30px;
}

.top-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 30px;
    width: 100%;
}

/* --- NEW FORM CARD REDESIGN --- */
.form-card {
    width: 100%;
    border: 2px solid #ff00ff;
    background: #1a1a2e;
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
    border-radius: 0;
}

.form-card form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Space between logical sections */
}

/* SECTION STRUCTURES */
.ticker-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 1x4 on desktop */
    gap: 15px 20px;
}

.param-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    align-items: flex-end;
}

.action-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* FIELD STYLING */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.param-group {
    flex: 1;
    /* Stretch evenly across row */
}

.form-group label {
    color: #ff00ff;
    font-size: 0.85em;
    font-weight: bold;
    letter-spacing: 1px;
}

.stats-panel {
    border: 2px solid #ff00ff;
    background: #1a1a2e;
    padding: 30px;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
    border-radius: 0;

    flex: 2.2;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    font-size: 0.85em;
}

.stats-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
    align-items: center;
}

.trend-grid {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}

.trend-col-left,
.trend-col-right {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background:
        linear-gradient(180deg, rgba(13, 2, 33, 0.9) 0%, rgba(43, 16, 85, 0.8) 100%),
        repeating-linear-gradient(transparent 0px, transparent 19px, rgba(255, 0, 255, 0.1) 20px),
        repeating-linear-gradient(90deg, transparent 0px, transparent 39px, rgba(0, 242, 255, 0.1) 40px);
    background-size: 100% 100%, 100% 20px, 40px 100%;
    border: 2px solid #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3), inset 0 0 20px rgba(255, 0, 255, 0.1);
}

.trend-col-left {
    flex: 3;
    text-align: center;
}

.trend-col-right {
    flex: 1.2;
    text-align: center;
}

.chart-container,
.small-chart-container {
    flex: 1;
    min-height: 280px;
    margin-top: 10px;
    position: relative;
    /* Removed redundant grid background since parent has it often, or keep for specific emphasis? 
       Actually, if the parent has it, doubling it might look messy. 
       Let's keep it SIMPLE: if parent (.trend-col-left) has it, the chart container should be transparent or just have the border.
       But .chart-container is also used inside .trend-col-left.
       Let's remove the background from here to avoid visual clutter and rely on the parent container. 
       Wait, Comp Box has it on the box. Trend col has it on the box.
       So chart container should be transparent. */
}

.scenario-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #3d0158;
    margin-top: 15px;
    padding-top: 15px;
}

.table-panel {
    border: 2px solid #ff00ff;
    background: #1a1a2e;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.2);
    overflow-x: auto;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85em;
    /* min-width: 950px; Removed to allow wrapping */
}

caption {
    caption-side: top;
    color: #00f2ff !important;
    font-size: 1.1em;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}

th {
    color: #ff00ff;
    border-bottom: 2px solid #ff00ff;
    padding: 12px;
    text-align: left;
    white-space: normal;
    /* Allow wrapping */
    vertical-align: bottom;
}

td {
    padding: 10px;
    border-bottom: 1px solid #3d0158;
    color: #00f2ff;
    white-space: nowrap;
    /* Prevent data wrapping so record defines width */
}

/* NEW BUTTON STYLING */
.btn-execute {
    background: linear-gradient(90deg, #ff00ff 0%, #00f2ff 100%);
    color: #1a1a2e;
    border: none;
    padding: 18px 20px;
    font-family: inherit;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    width: 100%;
    border-radius: 0;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.6), inset 0 0 10px rgba(0, 242, 255, 0.5);
    transition: all 0.2s ease-in-out;
}

.btn-execute:hover {
    background: linear-gradient(90deg, #00f2ff 0%, #ff00ff 100%);
    color: #1a1a2e;
    cursor: pointer;
    transform: scale(1.02);
    box-shadow: 0 0 25px #00f2ff, inset 0 0 10px #ff00ff;
}

.clear-form-btn {
    background: transparent;
    color: #ff00ff;
    border: 2px solid #ff00ff;
    padding: 0 15px;
    /* left/right padding, height matches flex sibling */
    font-size: 1.5em;
    /* Bigger icon */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.4), inset 0 0 5px rgba(255, 0, 255, 0.2);
}

.clear-form-btn:hover {
    background: rgba(255, 0, 255, 0.1);
    color: #00f2ff;
    border-color: #00f2ff;
    box-shadow: 0 0 15px #00f2ff, inset 0 0 10px #00f2ff;
    transform: scale(1.05);
}

input.opt-input::placeholder {
    color: #555;
    font-size: 0.9em;
}

/* Input Icon Wrapper for "$" Prefix */
.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-icon-wrapper .input-icon {
    position: absolute;
    left: 12px;
    color: #00f2ff;
    font-weight: bold;
    pointer-events: none;
}

.input-icon-wrapper input {
    padding-left: 28px !important;
    /* Make room for the $ icon */
}

/* Base Inputs */
input,
select,
button:not(.btn-execute) {
    background: #0d0221;
    color: #00f2ff;
    border: 1px solid #ff00ff;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    width: 100%;
}

button:not(.btn-execute):hover {
    background: #ff00ff;
    color: #0d0221;
    cursor: pointer;
}

.highlight {
    color: #00f2ff !important;
    font-weight: bold;
    text-decoration: none !important;
}

.sub-text {
    font-size: 0.75em;
    color: #888;
    margin-top: 2px;
}

.slider-neon {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #3d0158;
    border-radius: 5px;
    margin-top: auto;
    padding-top: 20px;
}

.slider-neon::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #ff00ff;
    border: 2px solid #00f2ff;
    border-radius: 50%;
    cursor: pointer;
}

.comp-container {
    display: flex;
    gap: 20px;
    margin-top: 0;
    margin-bottom: 20px;
}

.comp-table-box {
    flex: 1.2;
    background: linear-gradient(180deg, #2b1055 0%, #1a1a2e 100%);
    padding: 20px 20px 20px 6px;
    border: 2px solid #00f2ff;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.3), inset 0 0 20px rgba(0, 242, 255, 0.1);
}

.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.comp-chart-box {
    flex: 1.8;
    position: relative;
    min-height: 400px;
    background:
        linear-gradient(180deg, rgba(13, 2, 33, 0.9) 0%, rgba(43, 16, 85, 0.8) 100%),
        repeating-linear-gradient(transparent 0px, transparent 19px, rgba(255, 0, 255, 0.1) 20px),
        repeating-linear-gradient(90deg, transparent 0px, transparent 39px, rgba(0, 242, 255, 0.1) 40px);
    background-size: 100% 100%, 100% 20px, 40px 100%;
    padding: 20px;
    border: 2px solid #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3), inset 0 0 20px rgba(255, 0, 255, 0.1);
}

.comp-table {
    width: 100%;
    font-size: 0.9em;
    min-width: auto;
}

.comp-table th {
    color: #888;
    border-bottom: 1px solid #444;
    padding: 2px 5px;
    line-height: 1.1;
    background: #1a1a2e;
}

.comp-table td {
    border-bottom: 1px solid #3d0158;
    color: #00f2ff;
    text-shadow: 0 0 2px rgba(0, 242, 255, 0.5);
    padding: 2px 5px;
    line-height: 1.1;
    font-weight: normal;
    background: #1a1a2e;
}


/* Sticky Metric column — keeps row labels visible while scrolling on mobile */
.comp-table th:first-child,
.comp-table td:first-child {
    position: sticky;
    left: -6px;
    /* reaches the box border, closing the 6px padding gap */
    padding-left: 11px;
    /* 5px original + 6px compensation so text stays put */
    z-index: 2;
    background: #1a1a2e;
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.th-main {
    color: #00f2ff !important;
    font-size: 1.1em;
    text-decoration: underline;
}

.th-bm {
    color: #ff00ff !important;
    font-size: 1.1em;
    text-decoration: underline;
}

.th-3 {
    color: #ff9900 !important;
    font-size: 1.1em;
    text-decoration: underline;
}

.th-4 {
    color: #39ff14 !important;
    font-size: 1.1em;
    text-decoration: underline;
}

.td-val-main {
    color: #00f2ff;
    font-weight: normal !important;
}

.td-val-bm {
    color: #ff00ff;
    font-weight: normal !important;
}

/* Explicit font-weight for Section 3 dynamically updated cells */
#c_init_main,
#c_init_bm,
#c_shares_main,
#c_shares_bm,
#c_divs_main,
#c_divs_bm,
#c_pret_main,
#c_pret_bm,
#c_tret_main,
#c_tret_bm,
#c_cagr_main,
#c_cagr_bm,
#c_pval_main,
#c_pval_bm,
#c_tval_main,
#c_tval_bm {
    font-weight: normal !important;
}

.section-title {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.4em;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 5px #00f2ff;
}

/* FAQ toggle — used inside section panels */
.faq-box {
    margin-top: 12px;
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 4px;
    padding: 0;
    font-size: 0.78em;
}

.faq-box summary {
    cursor: pointer;
    padding: 6px 10px;
    color: #ff00ff;
    letter-spacing: 1px;
    list-style: none;
    user-select: none;
}

.faq-box summary::-webkit-details-marker {
    display: none;
}

.faq-box[open] summary {
    border-bottom: 1px solid rgba(255, 0, 255, 0.3);
}

.faq-box p {
    margin: 0;
    padding: 8px 10px;
    color: #aaa;
    line-height: 1.5;
}

.section-divider {
    display: block;
    width: 100%;
    padding: 30px 0;
    overflow: visible;
}

.section-divider::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #ff00ff 20%, #00f2ff 50%, #ff00ff 80%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.6), 0 0 20px rgba(0, 242, 255, 0.3);
    border-radius: 2px;
}

/* Nav Menu */
.nav-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center items vertically */
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
    position: relative;
    /* Allow absolute positioning of children */
    width: 100%;
    /* Ensure it takes full width for absolute positioning to work */
}

/* Wrapper for Ko-fi button to sit on the far right */
.kofi-wrapper {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(calc(-50% - 10px));
    /* Center perfectly vertically, accounting for parent padding-bottom */
}

/* Left Nav Group */
.left-nav-group {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(calc(-50% - 10px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* Visitor Counter */
.visitor-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* X (Twitter) Link */
.x-link {
    color: #888;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin-top: 10px;
    /* Align with bottom of visitor counter visually */
}

.x-link:hover {
    color: #00f2ff;
    filter: drop-shadow(0 0 8px #00f2ff);
    transform: scale(1.1);
}

.visitor-label {
    color: #888;
    letter-spacing: 2px;
    font-size: 0.6em;
    text-transform: uppercase;
}

.nixie-clock {
    display: flex;
    gap: 4px;
    background: #050505;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid #1a1a1a;
    box-shadow: inset 0 0 10px #000;
}

.nixie-tube {
    display: inline-block;
    width: 20px;
    height: 32px;
    background: linear-gradient(180deg, #111 0%, #222 50%, #111 100%);
    border-radius: 6px;
    border: 1px solid #333;
    color: #ff9900;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    text-shadow: 0 0 5px #ff5e00, 0 0 10px #ff5e00, 0 0 15px #ff2a00;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8), 0 2px 3px rgba(0, 0, 0, 0.5);
    position: relative;
}

.nixie-tube::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 3px;
    right: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px 6px 0 0;
    pointer-events: none;
}

/* Mobile: Stack them naturally */
@media (max-width: 600px) {
    .nav-menu {
        flex-direction: column;
        gap: 15px;
    }

    .kofi-wrapper,
    .left-nav-group {
        position: static;
        transform: none;
        margin-top: 10px;
        flex-direction: row;
        /* keep it row for counter and x icon on mobile */
        justify-content: center;
    }
}

/* Dropdown Menu Styling */
.menu-container {
    position: relative;
    display: inline-block;
}

.menu-button {
    background: transparent;
    color: #ff00ff;
    border: 2px solid #ff00ff;
    padding: 8px 16px;
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.menu-button:hover {
    background: rgba(255, 0, 255, 0.1);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    color: #00f2ff;
    border-color: #00f2ff;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #1a1a2e;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
    border: 2px solid #00f2ff;
    z-index: 1000;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    flex-direction: column;
}

.dropdown-content.show {
    display: flex;
}

.nav-link {
    color: #888;
    text-decoration: none;
    font-size: 1.1em;
    padding: 12px 15px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    text-align: center;
}

.dropdown-content .nav-link {
    border-bottom: 1px solid #3d0158;
}

.dropdown-content .nav-link:last-child {
    border-bottom: none;
}

.nav-link:hover,
.nav-link.active {
    color: #00f2ff;
    border-color: #ff00ff;
    background: rgba(255, 0, 255, 0.1);
}

@media (max-width: 1100px) {

    .trend-grid,
    .comp-container {
        flex-direction: column;
    }

    /* Fallback generic stats panel on mobile */
    .stats-panel {
        flex-wrap: wrap;
    }

    .chart-container,
    .small-chart-container {
        min-height: 250px;
    }
}

@media (max-width: 600px) {
    body {
        padding: 10px 10px 80px 10px;
        /* Increased bottom padding for Ko-fi widget */
        overflow-x: hidden;
    }

    h1 {
        font-size: 1.2em;
        /* Smaller title */
        letter-spacing: 1px;
        /* Reduce spacing to prevent overflow */
        margin-bottom: 15px;
        word-wrap: break-word;
        /* Ensure long words break */
        line-height: 1.3;
    }

    .section-title {
        font-size: 1.1em;
    }

    /* Switch from 2x2 Grid to Single Column */
    .ticker-section {
        grid-template-columns: 1fr;
    }

    /* Switch from Row to Stacked Column */
    .param-section {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 20px 15px;
        /* Less padding on small screens */
    }

    .btn-execute {
        padding: 15px;
        font-size: 1em;
    }

    .stats-panel {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        max-width: 100%;
        width: 100%;
        padding: 15px;
    }

    .form-group {
        width: 100%;
        min-width: 0;
    }

    input,
    select,
    button,
    .flatpickr-input,
    .flatpickr-mobile,
    .flatpickr-wrapper {
        display: block !important;
        /* Prevent inline-block width issues */
        max-width: 100%;
        width: 100% !important;
        box-sizing: border-box !important;
        /* CRITICAL: Includes padding in width */
        padding: 12px !important;
        /* Force exact same padding */
        border: 1px solid #ff00ff !important;
        /* Force exact same border */
        margin: 0 !important;
        height: auto !important;
        /* Ensure height doesn't collapse */
    }

    /* Prevent global mobile resets from blowing up the DRIP selector height inside tables */
    .comp-table select {
        padding: 2px !important;
        height: 1.8em !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    /* specific wrapper reset to avoid double borders/padding if the wrapper mimics the input */
    .flatpickr-wrapper {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* specific input reset inside wrapper to ensure it fills */
    .flatpickr-wrapper input {
        width: 100% !important;
    }

    /* Generic Mobile Input Reset - encompassing all variations */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    .flatpickr-mobile {
        -webkit-appearance: none !important;
        appearance: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        /* CRITICAL for flex containers */
        box-sizing: border-box !important;
        padding: 12px !important;
        border: 1px solid #ff00ff !important;
        border-radius: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        color: inherit !important;
        height: auto !important;
        line-height: normal !important;
        /* Reset line-height to prevent vertical expansion */
        min-height: 45px;
        /* Ensure touch target size */
    }

    .stats-column {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 0, 255, 0.2);
        padding-bottom: 5px;
    }

    .stats-column label {
        font-size: 0.9em;
    }

    .stats-column span {
        font-size: 1em;
    }

    /* Adjust charts for small vertical space */
    .chart-container,
    .small-chart-container {
        min-height: 220px;
    }

    /* Ensure tables scroll smoothly */
    .table-panel {
        padding: 10px;
        max-width: 100%;
        /* Force container to fit viewport */
        overflow-x: auto;
        /* Enable scroll */
    }

    /* Wrap Nav for small screens */
    .nav-menu {
        flex-wrap: wrap;
        gap: 10px;
    }

    .trend-grid,
    .comp-container {
        gap: 10px;
        /* Tighter gap for mobile */
    }

    /* Fix DRIP selector overlap */
    #dripForm {
        position: relative !important;
        /* Relative allows z-index to work if needed, captures flow */
        top: auto !important;
        right: auto !important;
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        /* Push table down */
        padding: 10px;
        z-index: 20;
    }
}

.retro-green {
    color: #39ff14 !important;
    /* Neon Green */
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.5);
}

.retro-red {
    color: #ff073a !important;
    /* Neon Red */
    text-shadow: 0 0 5px rgba(255, 7, 58, 0.5);
}

/* Technical Analysis Page */
.ta-container {
    width: 100%;
    margin: 0 auto 40px auto;
    padding: 20px;
    background:
        linear-gradient(180deg, rgba(13, 2, 33, 0.9) 0%, rgba(43, 16, 85, 0.8) 100%),
        repeating-linear-gradient(transparent 0px, transparent 19px, rgba(255, 0, 255, 0.1) 20px),
        repeating-linear-gradient(90deg, transparent 0px, transparent 39px, rgba(0, 242, 255, 0.1) 40px);
    background-size: 100% 100%, 100% 20px, 40px 100%;
    border: 2px solid #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3), inset 0 0 20px rgba(255, 0, 255, 0.1);
}

.tv-chart-box {
    width: 100%;
    height: 500px;
    position: relative;
    border: 1px solid #00f2ff;
}

/* TV Chart Interactive Legend Overlay */
.chart-legend {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    font-size: 1.1em;
    font-family: inherit;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.legend-item {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(13, 2, 33, 0.6);
    border: 1px solid transparent;
}

.legend-item:hover {
    background: rgba(13, 2, 33, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

.legend-item.hidden-series {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Timeframe Bar */
.timeframe-bar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 15px;
}

.timeframe-btn {
    background: transparent;
    border: 1px solid #00f2ff;
    color: #00f2ff;
    padding: 6px 14px;
    font-size: 0.9em;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeframe-btn:hover {
    background: rgba(0, 242, 255, 0.2);
}

.timeframe-btn.active {
    background: #00f2ff;
    color: #0d0221;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.6);
}

/* TA Metrics Box */
.ta-metrics-container {
    width: 100%;
    margin: 0 auto 60px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.metric-card {
    background: rgba(13, 2, 33, 0.8);
    border: 1px solid #ff00ff;
    border-radius: 8px;
    padding: 20px;
    min-width: 250px;
    text-align: center;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.15), inset 0 0 10px rgba(255, 0, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3), inset 0 0 15px rgba(255, 0, 255, 0.1);
}

.metric-card.active-metric {
    transform: translateY(-2px);
    background: rgba(40, 2, 40, 0.9);
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.6), inset 0 0 20px rgba(255, 0, 255, 0.2);
    border-width: 2px;
}

.metric-title {
    color: #00f2ff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.metric-value {
    color: #ff00ff;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.metric-subtitle {
    font-size: 0.75em;
    color: #888;
    margin-top: 5px;
    font-family: 'Courier New', Courier, monospace;
}

/* TA Metrics Stats Grid */
.metric-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    border: 1px dashed rgba(255, 0, 255, 0.3);
}

.stat-box {
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 4px;
}

.stat-box:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stat-label {
    color: #a0a0a0;
}

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

.stat-win {
    color: #39ff14;
    font-size: 0.9em;
    margin-left: 5px;
}

@keyframes pulseSignal {
    0% {
        opacity: 1;
        box-shadow: 0 0 5px rgba(57, 255, 20, 0.5);
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 15px rgba(57, 255, 20, 0.8);
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 5px rgba(57, 255, 20, 0.5);
    }
}