/* Define CSS Variables for a cohesive color palette (Updated for "Trading View" style) */

:root {
    /* Backgrounds */
    --bg-primary: #121417;
    /* Darkest for body */
    --bg-secondary: #1E2024;
    /* Main panel backgrounds */
    --bg-tertiary: #272A2E;
    /* Lighter for controls, header */
    --bg-card: #202327;
    /* Card specific background, slightly different */
    --bg-hover-light: #303337;
    /* Button/interactive element hover */
    /* Borders & Dividers */
    --border-color: #383A3F;
    /* Subtle dividing lines */
    --border-light: #5A5D63;
    /* Slightly lighter border for accents */
    --grid-line-color: rgba(69, 74, 82, 0.1);
    /* Very subtle grid lines */
    /* Text Colors */
    --text-color-primary: #E0E3E8;
    /* Light grey for main content */
    --text-color-secondary: #9BA1A8;
    /* Subdued grey for labels, clock */
    --text-color-inverted: #121417;
    /* Dark text on light backgrounds */
    --text-white: #F0F6FC;
    /* Near white for welcome message */
    /* Chart specific base colors */
    --chart-line-neutral: #6C7078;
    /* Neutral grey for grid/horizontal lines */
    --chart-current-level: #F0F6FC;
    /* Near white for current value line */
    --candle-bullish-fill: #00C853;
    /* TradingView Green */
    --candle-bearish-fill: #FF3D00;
    /* TradingView Red */
    --candle-stroke-bullish: #00D259;
    /* Slightly brighter for stroke */
    --candle-stroke-bearish: #FF4A0C;
    /* Slightly brighter for stroke */
    /* Neon/Highlight Colors - High Impact (tuned for subtlety) */
    --neon-blue-ema: #00BFFF;
    /* Deep Sky Blue */
    --neon-golden-ema: #FFD700;
    /* Gold */
    --neon-green-sr: #00FF7F;
    /* Spring Green */
    --neon-red-sr: #FF4500;
    /* Orange Red */
    --neon-version: #FF7F50;
    /* Coral for version glow */
    /* Specific Button Range Colors */
    --btn-range-red-dark: #8B0000;
    /* 1.00-1.09, 1.10-1.29 */
    --btn-range-red-light: #CD5C5C;
    /* 1.30-1.49, 1.50-1.79 */
    --btn-range-red-neutral: #DC143C;
    /* 1.80-1.99 - use crimson for distinction but still red family */
    --btn-range-green-light: #32CD32;
    /* 2.00-3.99 */
    --btn-range-green-dark: #006400;
    /* 4.00-5.99 */
    --btn-range-gold-light: #FFD700;
    /* 6.00-7.99 */
    --btn-range-gold-dark: #B8860B;
    /* 8.00-9.99 */
    --btn-range-pink: #FF69B4;
    /* 10+ */
    /* Action buttons */
    --btn-action-main: #3C4046;
    /* Dark slate grey for undo/reset */
    --btn-action-hover: #4C5057;
    /* Lighter slate grey on hover */
    --btn-fib-action: #FF9800;
    /* Orange for Fibonacci */
    --btn-mini-fib-action: #00BCD4;
    /* Cyan for Mini Fibonacci */
    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    /* Ensure consistent box model */
}

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Updated: A subtle, sophisticated dark background */
    background-color: var(--bg-primary);
    background-image: radial-gradient(at 0% 0%, var(--bg-secondary) 0%, transparent 50%), radial-gradient(at 100% 100%, var(--bg-secondary) 0%, transparent 50%);
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-color-primary);
    margin: 0;
    padding: var(--spacing-md);
    min-height: 100vh;
    height: 100vh;
    justify-content: flex-start;
    overflow-x: hidden;
    /* Prevent horizontal scroll on small screens */
}

.hidden {
    display: none !important;
}


/* App Screens for Welcome, Bank Choice, Capital Input */

.app-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    /* Full black background */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
    /* On top of everything */
}

#welcome-screen {
    background-color: #000;
    /* Pure black for welcome */
}

.welcome-message {
    font-family: 'Agbalumo', cursive;
    font-size: 3.5em;
    /* Larger for impact */
    color: var(--text-white);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9), 0 0 40px rgba(255, 255, 255, 0.7);
    animation: zoomAndFade 3s forwards;
    /* Animation for the message */
    opacity: 0;
    /* Start hidden for the animation */
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 2px;
}

@keyframes zoomAndFade {
    0% {
        transform: translateZ(0) scale(0.5);
        opacity: 0;
        filter: blur(5px);
    }
    50% {
        transform: translateZ(50px) scale(1.2);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateZ(100px) scale(2);
        opacity: 0;
        filter: blur(10px);
    }
}

.card {
    background-color: var(--bg-card);
    border-radius: 12px;
    padding: var(--spacing-xl);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.05);
    text-align: center;
    color: var(--text-color-primary);
    max-width: 500px;
    /* Wider card */
    width: 90%;
    border: 1px solid var(--border-color);
}

.card h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    font-size: 1.8em;
    /* Larger heading */
    color: var(--neon-blue-ema);
    /* Highlight question */
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.4);
}

.button-group {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.choice-button,
.action-button {
    padding: 14px 30px;
    /* Larger buttons */
    font-size: 1.1em;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid;
    transition: all 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--bg-tertiary);
    color: var(--text-color-primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.choice-button:hover,
.action-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7), 0 0 20px currentColor;
    /* Enhanced glow */
}

#bank-yes {
    border-color: var(--neon-green-sr);
    color: var(--neon-green-sr);
}

#bank-yes:hover {
    background-color: var(--neon-green-sr);
    color: var(--bg-primary);
    text-shadow: 0 0 8px var(--text-white);
}

#bank-no {
    border-color: var(--neon-red-sr);
    color: var(--neon-red-sr);
}

#bank-no:hover {
    background-color: var(--neon-red-sr);
    color: var(--bg-primary);
    text-shadow: 0 0 8px var(--text-white);
}

#capital-input-screen input {
    width: calc(100% - 40px);
    padding: 14px 18px;
    margin-bottom: var(--spacing-lg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-hover-light);
    color: var(--text-color-primary);
    font-size: 1.2em;
    /* Larger input text */
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

#capital-input-screen input:focus {
    border-color: var(--neon-blue-ema);
    box-shadow: 0 0 0 4px rgba(0, 191, 255, 0.4);
}

#start-bank-management {
    margin-top: var(--spacing-lg);
    border-color: var(--neon-golden-ema);
    color: var(--neon-golden-ema);
}

#start-bank-management:hover {
    background-color: var(--neon-golden-ema);
    color: var(--bg-primary);
    text-shadow: 0 0 8px var(--text-white);
}

#app-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1600px;
    /* Even wider app content */
    height: calc(100vh - var(--spacing-xl));
    /* Use available vertical space */
    min-height: 700px;
    margin: 0 auto;
    gap: var(--spacing-md);
    flex-grow: 1;
}

#main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    min-height: 75px;
    /* Taller header */
    flex-shrink: 0;
    flex-wrap: wrap;
    /* Allow header content to wrap on smaller screens */
}

#header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* Reduce gap */
    flex-grow: 1;
    /* Allow to grow */
    justify-content: flex-start;
    /* Align title to start */
}

#main-header h1 {
    font-family: 'Agbalumo', cursive;
    font-size: 2.2em;
    /* Larger title */
    color: var(--text-white);
    letter-spacing: 1.5px;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
    margin: 0;
}

.version-tag {
    animation: neonGlow 1.5s ease-in-out infinite alternate;
    font-size: 0.6em;
    vertical-align: super;
    /* Align better with text */
    padding: 3px 8px;
    border-radius: 6px;
    background-color: var(--neon-version);
    /* Use the new neon version color */
    box-shadow: 0 0 12px var(--neon-version);
    /* Add box shadow for depth */
    color: var(--bg-primary);
    /* Darker text for contrast */
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

@keyframes neonGlow {
    from {
        text-shadow: 0 0 8px var(--neon-version), 0 0 15px var(--neon-version);
        box-shadow: 0 0 5px var(--neon-version);
    }
    to {
        text-shadow: 0 0 20px var(--neon-version), 0 0 35px var(--neon-version);
        box-shadow: 0 0 15px var(--neon-version);
    }
}


/* Clock is now inside chart-container */

.chart-clock {
    position: absolute;
    top: var(--spacing-md);
    /* Adjust to desired corner, e.g., top-left */
    left: var(--spacing-md);
    font-size: 1em;
    /* Standard size */
    font-weight: 500;
    color: var(--text-color-secondary);
    background-color: rgba(18, 20, 23, 0.6);
    /* Slightly darker background than mini-chart */
    backdrop-filter: blur(5px);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 20;
    /* Above grid, below overlay messages */
    pointer-events: none;
    /* Do not block interaction with chart */
}

.chart-clock.high-zone-msg {
    background-color: rgba(255, 215, 0, 0.12);
    color: var(--neon-golden-ema);
    font-weight: 600;
    pointer-events: none;
    text-align: center;
}

#header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* Reduce gap */
    flex-grow: 1;
    /* Allow to grow */
    justify-content: flex-end;
    /* Align to end */
}


/* Apuesta Info and View Selector within header-right */

#apuesta-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Distribute items (apuesta-details, session-stats-header) */
    gap: var(--spacing-sm);
    /* Space between grouped items */
    background-color: var(--bg-secondary);
    /* Integrated into header */
    padding: var(--spacing-xs) var(--spacing-sm);
    /* Smaller padding */
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    position: static;
    /* Ensure it's not absolute */
    flex-direction: row;
    /* Keep elements in a row for space efficiency */
    flex-wrap: wrap;
    /* Allow wrapping within the info block */
    flex-grow: 1;
    /* Allow to grow to fill space */
}

.apuesta-details {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xs);
    /* Smaller gap for elements within details */
    flex-wrap: wrap;
    justify-content: center;
}

.info-label,
.apuesta-label {
    background-color: transparent;
    /* No extra background for labels in header */
    backdrop-filter: none;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: 500;
    color: var(--text-color-secondary);
    border: none;
    /* No border for labels in header */
    box-shadow: none;
    white-space: nowrap;
    /* Prevent text wrapping */
    transition: all 0.2s ease-in-out;
    /* Smooth transitions for highlights */
}

#current-bank-display {
    color: var(--neon-golden-ema);
    /* Highlight bank display */
    font-weight: bold;
    font-size: 1.05em;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
    border-right: 1px solid var(--border-color);
    /* Separator */
    padding-right: var(--spacing-sm);
    margin-right: var(--spacing-sm);
}

.apuesta-labels-row {
    display: flex;
    flex-direction: row;
    /* Apuestas side-by-side */
    gap: var(--spacing-xs);
    /* Smaller gap */
    margin-top: 0;
}

#view-selector-container {
    position: static;
    transform: none;
    z-index: 100;
    flex-shrink: 0;
}

#chart-view-selector {
    padding: 10px 20px;
    /* Larger padding */
    border-radius: 10px;
    /* More rounded */
    background-color: var(--bg-hover-light);
    color: var(--text-color-primary);
    border: 1px solid var(--border-color);
    font-size: 1em;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    appearance: none;
    /* Remove default arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E0E3E8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    /* Adjusted position */
    background-size: 18px;
    /* Adjusted size */
    transition: all 0.2s ease-in-out;
}

#chart-view-selector:hover {
    border-color: var(--neon-blue-ema);
    box-shadow: 0 4px 12px rgba(0, 191, 255, 0.4);
}

#chart-view-selector:focus {
    outline: none;
    border-color: var(--neon-blue-ema);
    box-shadow: 0 0 0 4px rgba(0, 191, 255, 0.3);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#main-app-layout {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#chart-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


/* New: Main container for Apuesta Info, Chart, and Trend Bar */

#main-chart-area {
    width: 98%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* Stack info above chart+trend */
    gap: 15px;
    /* Space between info and chart */
}


/* New wrapper for Chart and Trend Bar to manage side-by-side flex */

#chart-and-trend-wrapper {
    display: flex;
    flex-direction: row;
    /* Chart and trend side-by-side */
    gap: 15px;
    /* Space between chart and trend bar */
    height: 70vh;
    /* Match chart-container height */
    min-height: 500px;
    /* Match chart-container min-height */
    flex-grow: 1;
}

#chart-container {
    flex-grow: 1;
    /* Allow chart to take available space */
    height: 100%;
    /* Fill parent wrapper height */
    min-height: unset;
    /* Reset min-height as parent wrapper handles it */
    border-radius: 12px;
    /* More rounded corners */
    background-color: var(--bg-secondary);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(0, 191, 255, 0.08);
    /* Subtle inner glow */
    overflow: hidden;
    padding: var(--spacing-lg);
    /* Increased padding */
    border: 1px solid var(--border-color);
    /* Use general border color */
    display: flex;
    flex-direction: row;
    position: relative;
    transition: box-shadow 0.5s ease-in-out, border-color 0.5s ease-in-out;
}


/* Green glow/border for Uptrend */

#chart-container.ema-trend-up {
    animation: containerBorderPulseGreen 2s ease-in-out infinite alternate;
}


/* Red glow/border for Downtrend */

#chart-container.ema-trend-down {
    animation: containerBorderPulseRed 2s ease-in-out infinite alternate;
}


/* Keyframes for dynamic border glow */

@keyframes containerBorderPulseGreen {
    from {
        box-shadow: 0 0 20px var(--neon-green-sr), inset 0 0 12px rgba(0, 255, 127, 0.4);
        border-color: rgba(0, 255, 127, 0.7);
    }
    to {
        box-shadow: 0 0 35px var(--neon-green-sr), inset 0 0 20px rgba(0, 255, 127, 0.6);
        border-color: rgba(0, 255, 127, 1);
    }
}

@keyframes containerBorderPulseRed {
    from {
        box-shadow: 0 0 20px var(--neon-red-sr), inset 0 0 12px rgba(255, 69, 0, 0.4);
        border-color: rgba(255, 69, 0, 0.7);
    }
    to {
        box-shadow: 0 0 35px var(--neon-red-sr), inset 0 0 20px rgba(255, 69, 0, 0.6);
        border-color: rgba(255, 69, 0, 1);
    }
}


/* Base states for charts */

#chart,
#mini-chart-container {
    display: none;
    /* Hidden by default, controlled by JS classes */
}


/* State for showing only main chart */

.chart-mode-main #chart {
    display: block;
    /* Show main chart */
    flex-grow: 1;
    width: 100%;
    /* Ensure it takes full width when alone */
    height: 100%;
    /* Ensure it takes full height when alone */
}

.chart-mode-main #mini-chart-container {
    display: none;
    /* Hide mini chart */
}


/* State for showing only mini chart (full screen) */

.chart-mode-mini #chart {
    display: none;
    /* Hide main chart */
}

.chart-mode-mini #mini-chart-container {
    display: block;
    /* Show mini chart */
    position: static;
    /* Critical: remove absolute positioning to fill parent */
    width: 100%;
    /* Fill parent */
    height: 100%;
    /* Fill parent */
    top: auto;
    /* Reset properties from absolute positioning */
    right: auto;
    /* Reset properties from absolute positioning */
    opacity: 1;
    /* Make it fully opaque */
    background-color: transparent;
    /* Match main chart container's background */
    border: none;
    /* Remove mini-chart's specific border */
    margin: 0;
    /* Remove any margins */
    padding: 0;
    /* Remove any padding */
}


/* State for showing both charts (default) */

.chart-mode-both #chart {
    display: block;
    flex-grow: 1;
    width: auto;
    /* Let flexbox decide */
    height: auto;
    /* Let flexbox decide */
}

.chart-mode-both #mini-chart-container {
    display: block;
    position: absolute;
    /* Revert to absolute for small overlay */
    top: 20px;
    /* Adjust top */
    right: 20px;
    /* Adjust right */
    width: 220px;
    /* Larger mini chart */
    height: 140px;
    /* Larger mini chart */
    opacity: 0.98;
    /* More opaque */
    background-color: rgba(26, 28, 34, 0.75);
    backdrop-filter: blur(10px);
    /* Stronger frosted glass */
    border: 1px solid var(--border-light);
    /* Lighter, more defined border */
    border-radius: 10px;
    /* Consistent rounded corners */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.1);
    /* Deeper shadow */
}

#mini-chart {
    width: 100%;
    height: 100%;
}


/* Added styles for mini-chart support/resistance lines */

.mini-support-line {
    stroke: rgba(0, 255, 127, 0.3);
    stroke-width: 1;
    stroke-dasharray: 2, 2;
}

.mini-resistance-line {
    stroke: rgba(255, 69, 0, 0.3);
    stroke-width: 1;
    stroke-dasharray: 2, 2;
}


/* Highlighted Support/Resistance Styles for Mini Chart (solid, neon) */

.mini-support-line.mini-neon-green-sr {
    stroke: var(--neon-green-sr);
    stroke-width: 1.5;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 5px var(--neon-green-sr));
    /* Softer glow */
    animation: neonGlowGreenSR 1s ease-in-out infinite alternate;
}

.mini-resistance-line.mini-neon-red-sr {
    stroke: var(--neon-red-sr);
    stroke-width: 1.5;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 5px var(--neon-red-sr));
    /* Softer glow */
    animation: neonGlowRedSR 1s ease-in-out infinite alternate;
}

#chart {
    width: 100%;
    height: 100%;
}


/* New Trend Indicator Bar */

#trend-indicator-bar {
    width: 50px;
    /* Wider bar */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    /* Stack sections vertically by default */
    overflow: hidden;
    /* Ensure sections stay within bounds */
    position: relative;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
    height: 100%;
    /* Fill parent wrapper height */
    transition: opacity 0.5s ease;
    flex-shrink: 0;
}

.trend-section {
    flex-grow: 0;
    /* Controlled by JS height property */
    flex-shrink: 0;
    /* Controlled by JS height property */
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Smooth cubic bezier transition */
}

.bullish-strength {
    background-color: var(--candle-bullish-fill);
    box-shadow: inset 0 0 8px rgba(0, 200, 83, 0.6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    /* Vertical bar specific */
}

.bearish-strength {
    background-color: var(--candle-bearish-fill);
    box-shadow: inset 0 0 8px rgba(255, 61, 0, 0.6);
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    /* Vertical bar specific */
}

.trend-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    /* Rotate for vertical text by default */
    white-space: nowrap;
    font-size: 1em;
    font-weight: bold;
    color: var(--text-color-primary);
    /* Default color */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 1;
    /* Ensure text is above sections */
    opacity: 0.9;
    transition: color 0.3s ease, text-shadow 0.3s ease, opacity 0.3s ease;
}


/* New Trend Indicator Bar Markers */

.trend-marker {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    /* Thin line */
    background-color: var(--border-light);
    /* Subtle grey */
    z-index: 2;
    /* Above trend sections but below label */
    opacity: 0.7;
    pointer-events: none;
    /* Allow interaction with elements below */
}

.trend-marker-50 {
    top: 50%;
    transform: translateY(-50%);
    /* Center the line visually */
    background-color: var(--neon-blue-ema);
    /* More distinct color for 50% */
    height: 2px;
    /* Slightly thicker */
    box-shadow: 0 0 4px var(--neon-blue-ema);
}

.trend-marker-40 {
    top: 40%;
    transform: translateY(-50%);
    background-color: var(--border-light);
}

.trend-marker-60 {
    top: 60%;
    transform: translateY(-50%);
    background-color: var(--border-light);
}


/* Removed old message styles (e.g. #trend-message, #prediction-message, #signal-message) */


/* The below is a new message container */

#signal-overlay-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: 12px;
    font-size: 2em;
    /* Larger, more prominent */
    font-weight: bold;
    text-align: center;
    color: var(--text-color-primary);
    /* Default white text */
    background-color: rgba(18, 20, 23, 0.9);
    /* Darker, more prominent background */
    border: 2px solid var(--border-light);
    /* Subtle border */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
    /* Deep shadow */
    z-index: 100;
    pointer-events: none;
    /* Allow clicks to pass through */
    opacity: 0;
    /* Hidden by default */
    display: none;
    /* Ensured hidden, important for initial state */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    white-space: nowrap;
    /* Prevent text wrapping */
}

#signal-overlay-message.fade-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: signalPulse 1.5s infinite alternate;
    /* Add a subtle pulse */
}


/* Specific message types neon effects */

#signal-overlay-message.entrada {
    color: var(--neon-blue-ema);
    /* Cyan */
    border-color: var(--neon-blue-ema);
    box-shadow: 0 0 20px var(--neon-blue-ema), 0 0 40px rgba(0, 191, 255, 0.7);
    text-shadow: 0 0 10px var(--neon-blue-ema);
}

#signal-overlay-message.acierto {
    color: var(--neon-green-sr);
    /* Green */
    border-color: var(--neon-green-sr);
    box-shadow: 0 0 20px var(--neon-green-sr), 0 0 40px rgba(0, 255, 127, 0.7);
    text-shadow: 0 0 10px var(--neon-green-sr);
}

#signal-overlay-message.fail_retry {
    color: var(--neon-golden-ema);
    /* Gold */
    border-color: var(--neon-golden-ema);
    box-shadow: 0 0 20px var(--neon-golden-ema), 0 0 40px rgba(255, 215, 0, 0.7);
    text-shadow: 0 0 10px var(--neon-golden-ema);
}

#signal-overlay-message.fallo {
    /* Final fail */
    color: var(--neon-red-sr);
    /* Red */
    border-color: var(--neon-red-sr);
    box-shadow: 0 0 20px var(--neon-red-sr), 0 0 40px rgba(255, 69, 0, 0.7);
    text-shadow: 0 0 10px var(--neon-red-sr);
}

@keyframes signalPulse {
    from {
        transform: translate(-50%, -50%) scale(0.98);
        opacity: 0.9;
    }
    to {
        transform: translate(-50%, -50%) scale(1.02);
        opacity: 1;
    }
}


/* Session Stats Counter - For mobile version (inside chart) */

#session-stats {
    position: absolute;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    background-color: rgba(18, 20, 23, 0.7);
    backdrop-filter: blur(5px);
    /* Subtle blur */
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 8px;
    font-size: 1em;
    font-weight: 500;
    color: var(--text-color-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: none;
    /* Hidden by default for desktop */
}


/* Session Stats Counter - For desktop version (in header) */

#session-stats-header {
    background-color: transparent;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: 500;
    color: var(--text-color-secondary);
    border: none;
    box-shadow: none;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    display: block;
    /* Shown by default for desktop */
}

#session-stats .stat-hits,
#session-stats-header .stat-hits {
    color: var(--neon-green-sr);
    text-shadow: 0 0 6px rgba(0, 255, 127, 0.6);
}

#session-stats .stat-misses,
#session-stats-header .stat-misses {
    color: var(--neon-red-sr);
    text-shadow: 0 0 6px rgba(255, 69, 0, 0.6);
}


/* Apuesta Labels and Bank Display */


/* No changes needed for #apuesta-info or .info-label, .apuesta-label specific styles,
   as they are now wrapped in .apuesta-details for better grouping */


/* Highlight for Apuesta 1 */

.apuesta-label.highlight-apuesta1 {
    color: var(--neon-blue-ema);
    border-color: var(--neon-blue-ema);
    box-shadow: 0 0 12px var(--neon-blue-ema), inset 0 0 6px rgba(0, 191, 255, 0.5);
    text-shadow: 0 0 4px var(--neon-blue-ema);
    background-color: rgba(0, 191, 255, 0.15);
}


/* Highlight for Apuesta 2 */

.apuesta-label.highlight-apuesta2 {
    color: var(--neon-golden-ema);
    border-color: var(--neon-golden-ema);
    box-shadow: 0 0 12px var(--neon-golden-ema), inset 0 0 6px rgba(255, 215, 0, 0.5);
    text-shadow: 0 0 4px var(--neon-golden-ema);
    background-color: rgba(255, 215, 0, 0.15);
}

#buttons-panel {
    display: flex;
    /* Use flexbox for overall panel */
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    margin-top: var(--spacing-md);
    /* Add some top margin to separate from chart */
}

.input-buttons-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 columns for desktop */
    gap: var(--spacing-sm);
    justify-items: stretch;
    /* Stretch items to fill grid cell */
    align-items: center;
}

.action-buttons-row {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    /* Allow action buttons to wrap */
}

#buttons-panel button {
    height: 48px;
    /* Maintain standard height for desktop */
    padding: 12px 10px;
    /* Reduced horizontal padding */
    cursor: pointer;
    border: 1px solid;
    /* Consistent border */
    border-radius: 10px;
    /* Slightly more rounded */
    font-size: 0.9em;
    /* Slightly larger font */
    font-weight: 500;
    transition: all 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    /* All properties transition */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 4px rgba(255, 255, 255, 0.04);
    /* Enhanced shadow */
    letter-spacing: 0.5px;
    /* Slightly more space for professionalism */
    min-width: unset;
    /* Let grid/flex determine width */
    max-width: unset;
    /* Let grid/flex determine width */
    flex-grow: 1;
    /* Allow buttons to grow and fill space */
    text-align: center;
    color: var(--text-color-primary);
    /* Default text color, will be overridden by specific buttons */
    background-color: var(--bg-tertiary);
    /* Default background, will be overridden */
    border-color: var(--border-color);
    /* Default border, will be overridden */
    display: flex;
    /* Enable flex for content centering (e.g., zoom icons) */
    align-items: center;
    justify-content: center;
    outline: none;
    /* Remove default focus outline */
}

button:hover {
    transform: translateY(-2px);
    /* More pronounced lift */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 1px 5px rgba(255, 255, 255, 0.1);
    /* Deeper shadow on hover */
}

button:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), inset 0 0 8px rgba(255, 255, 255, 0.15);
}

button#undo,
button#reset {
    background-color: var(--btn-action-main);
    border-color: var(--btn-action-main);
    /* Consistent border color */
    color: var(--text-color-secondary);
}

button#undo:hover,
button#reset:hover {
    background-color: var(--btn-action-hover);
    border-color: var(--btn-action-hover);
    color: var(--text-color-primary);
    box-shadow: 0 0 10px rgba(76, 80, 87, 0.5);
    /* Subtle grey glow */
}


/* Specific button range styles */

button[data-value="-5"],
button[data-value="-4"] {
    /* 1.00 / 1.09 & 1.10 / 1.29 (Rojo Oscuro) */
    background-color: var(--btn-range-red-dark);
    border-color: var(--btn-range-red-dark);
    color: var(--text-white);
}

button[data-value="-3"],
button[data-value="-2"] {
    /* 1.30 / 1.49 & 1.50 / 1.79 (Rojo más claro) */
    background-color: var(--btn-range-red-light);
    border-color: var(--btn-range-red-light);
    color: var(--text-white);
}

button[data-value="-1"] {
    /* 1.80 / 1.99 (use a distinct red) */
    background-color: var(--btn-range-red-neutral);
    border-color: var(--btn-range-red-neutral);
    color: var(--text-white);
}

button[data-value="1"] {
    /* 2.00 / 3.99 (Verde claro) */
    background-color: var(--btn-range-green-light);
    border-color: var(--btn-range-green-light);
    color: var(--text-color-inverted);
}

button[data-value="2"] {
    /* 4.00 / 5.99 (Verde más oscuro) */
    background-color: var(--btn-range-green-dark);
    border-color: var(--btn-range-green-dark);
    color: var(--text-white);
}

button[data-value="3"] {
    /* 6.00 / 7,99 (Dorado claro) */
    background-color: var(--btn-range-gold-light);
    border-color: var(--btn-range-gold-light);
    color: var(--text-color-inverted);
}

button[data-value="4"] {
    /* 8.00 / 9,99 (Dorado más intenso) */
    background-color: var(--btn-range-gold-dark);
    border-color: var(--btn-range-gold-dark);
    color: var(--text-white);
}

button[data-value="5"] {
    /* 10+ (Rosado) */
    background-color: var(--btn-range-pink);
    border-color: var(--btn-range-pink);
    color: var(--text-white);
}


/* Hover effects for specific buttons */

button[data-value="-5"]:hover,
button[data-value="-4"]:hover {
    background-color: color-mix(in srgb, var(--btn-range-red-dark) 80%, white);
    box-shadow: 0 0 15px var(--btn-range-red-dark);
    border-color: var(--btn-range-red-dark);
}

button[data-value="-3"]:hover,
button[data-value="-2"]:hover {
    background-color: color-mix(in srgb, var(--btn-range-red-light) 80%, white);
    box-shadow: 0 0 15px var(--btn-range-red-light);
    border-color: var(--btn-range-red-light);
}

button[data-value="-1"]:hover {
    background-color: color-mix(in srgb, var(--btn-range-red-neutral) 80%, white);
    box-shadow: 0 0 15px var(--btn-range-red-neutral);
    border-color: var(--btn-range-red-neutral);
}

button[data-value="1"]:hover {
    background-color: color-mix(in srgb, var(--btn-range-green-light) 80%, white);
    box-shadow: 0 0 15px var(--btn-range-green-light);
    border-color: var(--btn-range-green-light);
}

button[data-value="2"]:hover {
    background-color: color-mix(in srgb, var(--btn-range-green-dark) 80%, white);
    box-shadow: 0 0 15px var(--btn-range-green-dark);
    border-color: var(--btn-range-green-dark);
}

button[data-value="3"]:hover {
    background-color: color-mix(in srgb, var(--btn-range-gold-light) 80%, white);
    box-shadow: 0 0 15px var(--btn-range-gold-light);
    border-color: var(--btn-range-gold-light);
}

button[data-value="4"]:hover {
    background-color: color-mix(in srgb, var(--btn-range-gold-dark) 80%, white);
    box-shadow: 0 0 15px var(--btn-range-gold-dark);
    border-color: var(--btn-range-gold-dark);
}

button[data-value="5"]:hover {
    background-color: color-mix(in srgb, var(--btn-range-pink) 80%, white);
    box-shadow: 0 0 15px var(--btn-range-pink);
    border-color: var(--btn-range-pink);
}


/* Active state for input buttons */

.active-input-button {
    animation: button-active-pulse 1s infinite alternate;
    transform: translateY(0);
    /* Reset transform from hover */
    box-shadow: 0 0 20px currentColor, inset 0 0 10px rgba(255, 255, 255, 0.2);
    filter: brightness(1.2);
    /* Make it brighter */
}


/* Keyframes for the active button pulse effect */

@keyframes button-active-pulse {
    from {
        box-shadow: 0 0 15px currentColor, inset 0 0 8px rgba(255, 255, 255, 0.1);
        transform: scale(1);
        filter: brightness(1.1);
    }
    to {
        box-shadow: 0 0 25px currentColor, inset 0 0 12px rgba(255, 255, 255, 0.3);
        transform: scale(1.02);
        filter: brightness(1.3);
    }
}

button[data-action="fibonacci"] {
    background-color: var(--btn-fib-action);
    color: var(--text-color-inverted);
    font-weight: bold;
    border-color: var(--btn-fib-action);
}

button[data-action="fibonacci"]:hover {
    background-color: color-mix(in srgb, var(--btn-fib-action) 90%, white);
    /* Brighter hover */
    border-color: var(--btn-fib-action);
    box-shadow: 0 0 15px var(--btn-fib-action);
    /* Add glow */
    color: var(--text-color-inverted);
}


/* New style for Mini Fibonacci button */

button[data-action="mini-fibonacci"] {
    background-color: var(--btn-mini-fib-action);
    color: var(--text-color-inverted);
    font-weight: bold;
    border-color: var(--btn-mini-fib-action);
}

button[data-action="mini-fibonacci"]:hover {
    background-color: color-mix(in srgb, var(--btn-mini-fib-action) 90%, white);
    /* Brighter hover */
    border-color: var(--btn-mini-fib-action);
    box-shadow: 0 0 15px var(--btn-mini-fib-action);
    /* Add glow */
    color: var(--text-color-inverted);
}


/* New styles for zoom buttons */

button.zoom-button {
    background-color: var(--neon-blue-ema);
    /* Changed to a more vibrant color */
    color: var(--text-white);
    /* Changed to white for better contrast */
    padding: 0;
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    border-color: var(--neon-blue-ema);
    /* Border matches background */
    border-radius: 50%;
    /* Make them round */
}

button.zoom-button:hover {
    background-color: color-mix(in srgb, var(--neon-blue-ema) 90%, white);
    /* Brighter tint */
    color: var(--text-white);
    transform: translateY(-2px);
    box-shadow: 0 0 15px var(--neon-blue-ema);
    /* Glow using its base color */
    border-color: var(--neon-blue-ema);
    /* Border matches initial color */
}

button.zoom-button svg {
    width: 28px;
    /* Larger icons */
    height: 28px;
    fill: currentColor;
    /* Icon inherits button text color */
}


/* Chart Grid Lines */

.grid line {
    stroke: var(--grid-line-color);
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
    /* Ensures sharp lines */
}

.grid path {
    stroke-width: 0;
    /* Hide axis path */
}


/* Chart Line Styles */

.horizontal-line {
    stroke: var(--chart-line-neutral);
    stroke-width: 1.2;
    stroke-dasharray: 6, 6;
    /* Larger dashes */
    opacity: 0.4;
    /* Even more subtle */
}

.neon-blue {
    stroke: var(--neon-blue-ema);
    stroke-width: 2.5;
    /* Slightly thicker */
    opacity: 0.95;
    filter: drop-shadow(0 0 8px var(--neon-blue-ema));
    /* Stronger glow */
}

.neon-golden {
    stroke: var(--neon-golden-ema);
    stroke-width: 2.5;
    opacity: 0.95;
    filter: drop-shadow(0 0 8px var(--neon-golden-ema));
}

.candle {
    stroke-width: 1;
    /* Thinner stroke for sharper look */
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.08));
}


/* Targeting specific fills for the new color variables */

.candle[fill="#00C853"] {
    /* Bullish candles */
    fill: var(--candle-bullish-fill);
    stroke: var(--candle-stroke-bullish);
    filter: drop-shadow(0 0 8px var(--candle-bullish-fill));
    /* Stronger glow */
}

.candle[fill="#FF3D00"] {
    /* Bearish candles */
    fill: var(--candle-bearish-fill);
    stroke: var(--candle-stroke-bearish);
    filter: drop-shadow(0 0 8px var(--candle-bearish-fill));
    /* Stronger glow */
}


/* Prediction Candle Styles */

.candle.prediction-candle {
    opacity: 0.35;
    /* More translucent */
    filter: none;
    stroke-width: 1;
    stroke-dasharray: 4, 4;
    /* Dashed border for prediction */
}

.candle.prediction-candle.bullish-prediction {
    fill: color-mix(in srgb, var(--candle-bullish-fill) 25%, black);
    stroke: color-mix(in srgb, var(--candle-bullish-fill) 40%, var(--bg-primary));
    filter: drop-shadow(0 0 5px rgba(0, 200, 83, 0.25));
    /* Softer glow */
}

.candle.prediction-candle.bearish-prediction {
    fill: color-mix(in srgb, var(--candle-bearish-fill) 25%, black);
    stroke: color-mix(in srgb, var(--candle-bearish-fill) 40%, var(--bg-primary));
    filter: drop-shadow(0 0 5px rgba(255, 61, 0, 0.25));
    /* Softer glow */
}

.wick {
    stroke-width: 1.2;
    opacity: 0.8;
}

.wick.prediction-wick {
    opacity: 0.4;
    stroke-width: 1;
    filter: none;
    stroke-dasharray: 3, 3;
    /* Dashed wick for prediction */
}

.wick.prediction-wick.bullish-prediction {
    stroke: color-mix(in srgb, var(--candle-bullish-fill) 40%, var(--bg-primary));
}

.wick.prediction-wick.bearish-prediction {
    stroke: color-mix(in srgb, var(--candle-bearish-fill) 40%, var(--bg-primary));
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    from {
        transform: scale(0.97);
    }
    to {
        transform: scale(1.03);
    }
}


/*
    Responsive Design for Mobile, Tablet, and Desktop
    The application utilizes fluid widths, flexible layouts (flexbox),
    and media queries to adapt its appearance across various screen sizes.
    Chart dimensions are dynamically calculated in JavaScript based on
    container size, ensuring D3.js renders correctly.
*/

@media (max-width: 1200px) {
    #main-header h1 {
        font-size: 2em;
    }
    #apuesta-info {
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    .info-label,
    .apuesta-label {
        font-size: 0.9em;
    }
    #current-bank-display {
        font-size: 1em;
    }
    #chart-view-selector {
        padding: 8px 15px;
        font-size: 0.95em;
    }
    #chart-and-trend-wrapper {
        min-height: 450px;
    }
    #trend-indicator-bar {
        width: 45px;
    }
    .trend-label {
        font-size: 0.95em;
    }
    #buttons-panel button {
        height: 45px;
        font-size: 0.9em;
    }
    button.zoom-button {
        width: 45px;
        height: 45px;
        min-width: 45px;
        max-width: 45px;
    }
    button.zoom-button svg {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 992px) {
    #app-content {
        max-width: 100%;
        padding: 0 var(--spacing-sm);
    }
    /* Adjust main-header for better flow on smaller screens */
    #main-header {
        flex-direction: column;
        /* Changed to column for stacking elements */
        flex-wrap: wrap;
        align-items: center;
        /* Center elements horizontally in column */
        justify-content: center;
        /* Center elements vertically in column */
        gap: var(--spacing-sm);
        padding: var(--spacing-sm);
        min-height: unset;
    }
    .header-top-row {
        /* New style for the wrapper */
        display: flex;
        justify-content: space-between;
        /* Title left, selector right */
        align-items: center;
        width: 100%;
        /* Take full width of header */
        gap: var(--spacing-xs);
    }
    #header-left {
        width: auto;
        /* Let content determine width */
        flex-grow: 1;
        /* Allow it to grow */
        justify-content: flex-start;
        order: unset;
        /* Remove order */
    }
    /* View selector positioning */
    #view-selector-container {
        order: unset;
        /* Remove order */
        width: auto;
        /* Let content determine width */
        display: flex;
        justify-content: flex-end;
        /* Push content to the right */
        align-items: center;
        position: static;
        margin: 0;
        align-self: center;
        /* Center vertically within its flex row */
        background-color: transparent;
        border: none;
        box-shadow: none;
        flex-shrink: 0;
        /* Prevent shrinking too much */
    }
    /* Reduce size of chart-view-selector for mobile */
    #chart-view-selector {
        padding: 6px 12px;
        font-size: 0.85em;
        background-size: 16px;
        background-position: right 8px center;
        border-radius: 8px;
        max-width: 150px;
        min-width: 120px;
    }
    #header-right {
        order: unset;
        /* Remove order */
        width: 100%;
        /* Take full width */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /* Center its content */
        gap: var(--spacing-xs);
        padding: 0;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }
    #main-header h1 {
        font-size: 1.8em;
    }
    .version-tag {
        font-size: 0.5em;
        /* Smaller version tag */
    }
    #apuesta-info {
        /* This is the container for bank and apuesta labels */
        background-color: var(--bg-secondary);
        padding: var(--spacing-xs) var(--spacing-sm);
        border: 1px solid var(--border-color);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        width: 100%;
        /* Take full width within header-right */
        justify-content: center;
        flex-wrap: wrap;
        order: 1;
        max-width: 300px;
        /* Constrain max width for compactness */
        margin: auto;
    }
    #current-bank-display {
        font-size: 0.85em;
        padding-right: var(--spacing-xs);
        margin-right: var(--spacing-xs);
        border-right: 1px solid var(--border-color);
    }
    .apuesta-label {
        font-size: 0.8em;
        padding: 3px 6px;
    }
    .apuesta-labels-row {
        gap: var(--spacing-xs);
    }
    #chart-and-trend-wrapper {
        min-height: unset;
    }
    #chart-container {
        padding: var(--spacing-md);
    }
    #mini-chart-container.chart-mode-both {
        width: 180px;
        height: 110px;
        top: var(--spacing-md);
        right: var(--spacing-md);
        border-radius: 8px;
    }
    #trend-indicator-bar {
        width: 40px;
    }
    .trend-label {
        font-size: 0.9em;
    }
    #buttons-panel button {
        height: 42px;
        font-size: 0.85em;
    }
    button.zoom-button {
        width: 42px;
        height: 42px;
        min-width: 42px;
        max-width: 42px;
    }
    button.zoom-button svg {
        width: 24px;
        height: 24px;
    }
    /* #session-stats (in chart) on smaller screens */
    #session-stats {
        display: block !important;
        bottom: 15px;
        left: 15px;
        font-size: 0.9em;
        padding: 2px 6px;
        border-radius: 4px;
        position: absolute;
        background-color: transparent;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
    }
    /* Hide header stats on smaller screens */
    #session-stats-header {
        display: none !important;
    }
    #signal-overlay-message {
        font-size: 1.5em;
        padding: var(--spacing-md) var(--spacing-lg);
    }
    #chart-section {
        padding: 0;
    }
    /* Clock inside chart */
    .chart-clock {
        top: var(--spacing-sm);
        left: var(--spacing-sm);
        padding: 4px 8px;
        font-size: 0.9em;
    }
}

@media (max-width: 768px) {
    body {
        padding: var(--spacing-sm);
    }
    .welcome-message {
        font-size: 2.5em;
    }
    .card {
        padding: 25px;
    }
    .card h3 {
        font-size: 1.4em;
        margin-bottom: 15px;
    }
    .button-group {
        gap: 15px;
    }
    .choice-button,
    .action-button {
        padding: 10px 20px;
        font-size: 1em;
    }
    #capital-input-screen input {
        padding: 10px 12px;
        font-size: 1em;
        margin-bottom: 15px;
    }
    /* Header adjustments */
    #main-header {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
        flex-direction: column;
        /* Stack header elements */
        flex-wrap: wrap;
        align-items: center;
        /* Center elements horizontally in column */
    }
    .header-top-row {
        /* New style for the wrapper */
        display: flex;
        justify-content: space-between;
        /* Title left, selector right */
        align-items: center;
        width: 100%;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
        /* Space below top row */
    }
    #header-left {
        width: auto;
        flex-grow: 1;
        justify-content: flex-start;
        order: unset;
    }
    /* View selector positioning */
    #view-selector-container {
        order: unset;
        width: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: static;
        margin: 0;
        align-self: center;
        background-color: transparent;
        border: none;
        box-shadow: none;
        flex-shrink: 0;
    }
    #header-right {
        order: unset;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /* Center its content */
        gap: var(--spacing-xs);
        padding: 0;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }
    #main-header h1 {
        font-size: 1.6em;
    }
    .version-tag {
        font-size: 0.5em;
    }
    #apuesta-info {
        order: unset;
        /* No specific order needed here */
        background-color: var(--bg-secondary);
        padding: 2px 4px;
        border: 1px solid var(--border-color);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 6px;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 250px;
        margin: auto;
    }
    /* Adjust specific elements within apuesta-info */
    #current-bank-display {
        font-size: 0.75em;
        padding-right: 2px;
        margin-right: 2px;
        border-right: 1px solid var(--border-color);
    }
    .apuesta-label {
        font-size: 0.7em;
        padding: 1px 3px;
    }
    .apuesta-labels-row {
        gap: var(--spacing-xs);
    }
    #chart-view-selector {
        padding: 4px 8px;
        font-size: 0.75em;
        background-size: 12px;
        background-position: right 6px center;
        border-radius: 5px;
        max-width: 110px;
        min-width: 90px;
    }
    /* Chart area responsiveness */
    #chart-and-trend-wrapper {
        gap: 10px;
        height: auto;
        min-height: unset;
    }
    #chart-container {
        padding: 12px;
        min-height: unset;
        border-radius: 12px;
    }
    /* Adjusted mini chart size for tablets */
    #mini-chart-container.chart-mode-both {
        width: 140px;
        height: 90px;
        top: 15px;
        right: 15px;
        border-radius: 8px;
    }
    #trend-indicator-bar {
        display: none;
    }
    .trend-label {
        font-size: 0.85em;
    }
    #signal-overlay-message {
        font-size: 1.3em;
        padding: 12px 25px;
        border-radius: 8px;
    }
    /* Show chart-container #session-stats on mobile */
    #session-stats {
        display: block !important;
        bottom: 15px;
        left: 15px;
        font-size: 0.9em;
        padding: 2px 6px;
        border-radius: 4px;
        position: absolute;
        background-color: transparent;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
    }
    /* Hide header stats on mobile */
    #session-stats-header {
        display: none !important;
    }
    #buttons-panel {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }
    .input-buttons-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--spacing-xs);
    }
    .action-buttons-row {
        gap: var(--spacing-xs);
    }
    #buttons-panel button {
        height: 38px;
        padding: 8px 6px;
        font-size: 0.8em;
    }
    button.zoom-button {
        width: 38px;
        height: 38px;
        min-width: 38px;
        max-width: 38px;
    }
    button.zoom-button svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    body {
        padding: var(--spacing-xs);
    }
    #app-content {
        height: auto;
        min-height: unset;
        padding: 0 var(--spacing-xs);
        gap: var(--spacing-xs);
    }
    .welcome-message {
        font-size: 1.8em;
    }
    .card {
        padding: var(--spacing-md);
    }
    .card h3 {
        font-size: 0.9em;
        margin-bottom: var(--spacing-sm);
    }
    .button-group {
        gap: var(--spacing-sm);
        margin-top: var(--spacing-sm);
    }
    .choice-button,
    .action-button {
        padding: 4px 8px;
        font-size: 0.75em;
        border-radius: 4px;
    }
    #capital-input-screen input {
        width: calc(100% - var(--spacing-md));
        padding: 4px 6px;
        font-size: 0.75em;
        margin-bottom: var(--spacing-sm);
        border-radius: 4px;
    }
    #start-bank-management {
        margin-top: var(--spacing-sm);
    }
    /* Header adjustments */
    #main-header {
        padding: var(--spacing-xs);
        min-height: unset;
        gap: var(--spacing-xs);
        flex-direction: column;
        /* Ensure column for smallest screens */
        flex-wrap: wrap;
        align-items: center;
        /* Center content */
    }
    .header-top-row {
        /* New style for the wrapper */
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
    }
    #header-left {
        gap: var(--spacing-xs);
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-basis: auto;
        flex-grow: 1;
        width: auto;
        /* Remove width restriction */
        order: unset;
    }
    #main-header h1 {
        font-size: 1.0em;
        letter-spacing: 0.5px;
    }
    .version-tag {
        font-size: 0.4em;
        padding: 1px 4px;
        border-radius: 3px;
        position: relative;
        top: -2px;
        left: 1px;
    }
    /* View Selector on Mobile */
    #view-selector-container {
        order: unset;
        width: auto;
        /* Remove width restriction */
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: static;
        margin: 0;
        align-self: center;
        background-color: transparent;
        border: none;
        box-shadow: none;
        flex-shrink: 0;
    }
    #chart-view-selector {
        padding: 3px 6px;
        font-size: 0.65em;
        background-size: 10px;
        background-position: right 4px center;
        border-radius: 4px;
        max-width: 90px;
        min-width: 70px;
        height: 25px;
    }
    #header-right {
        order: unset;
        gap: var(--spacing-xs);
        flex-wrap: wrap;
        justify-content: center;
        flex-basis: auto;
        flex-grow: 1;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-top: var(--spacing-xs);
        padding-bottom: var(--spacing-xs);
    }
    /* Apuesta Info and View Selector within header-right */
    #apuesta-info {
        order: unset;
        background-color: var(--bg-secondary);
        padding: 1px 2px;
        border: 1px solid var(--border-color);
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 200px;
        margin: auto;
    }
    #current-bank-display {
        font-size: 0.65em;
        padding-right: 1px;
        margin-right: 1px;
        border-right: 1px solid var(--border-color);
    }
    .apuesta-label {
        font-size: 0.6em;
        padding: 0 2px;
    }
    .apuesta-labels-row {
        gap: 2px;
    }
    /* Chart and Trend Wrapper */
    #chart-and-trend-wrapper {
        gap: var(--spacing-xs);
        height: 45vh;
        min-height: unset;
    }
    #chart-container {
        padding: var(--spacing-xs);
        border-radius: 8px;
    }
    /* Mini chart specific (when both are visible) */
    #mini-chart-container.chart-mode-both {
        width: 90px;
        /* Reduced from 100px */
        height: 55px;
        /* Reduced from 60px */
        top: 5px;
        right: 5px;
        border-radius: 5px;
    }
    /* Clock inside chart */
    .chart-clock {
        font-size: 0.7em;
        top: 5px;
        left: 5px;
        padding: 3px 6px;
        border-radius: 6px;
    }
    #signal-overlay-message {
        font-size: 0.9em;
        padding: 8px 12px;
        border-radius: 6px;
    }
    #session-stats {
        bottom: 4px;
        left: 4px;
        font-size: 0.7em;
        padding: 1px 3px;
        border-radius: 3px;
        background-color: transparent;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
    }
    #buttons-panel {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
        margin-top: var(--spacing-xs);
    }
    .input-buttons-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
    .action-buttons-row {
        gap: 4px;
        flex-wrap: wrap;
    }
    #buttons-panel button {
        height: 40px;
        padding: 6px 4px;
        font-size: 0.75em;
        border-radius: 6px;
        line-height: 1.2;
        min-width: unset;
        flex-basis: auto;
        word-break: break-word;
    }
    button.zoom-button {
        width: 40px;
        height: 40px;
        min-width: 40px;
        max-width: 40px;
    }
    button.zoom-button svg {
        width: 18px;
        height: 18px;
    }
}


/* Added styles for Fibonacci */

.fibonacci-group {
    pointer-events: none;
    /* Allows interaction with chart below */
}

.fibonacci-line {
    stroke: var(--neon-golden-ema);
    stroke-width: 1.8;
    stroke-dasharray: 5, 3;
    opacity: 0.85;
    pointer-events: none;
}

.fibonacci-anchor-line {
    stroke: rgba(255, 215, 0, 0.4);
    /* Softer initial color */
    stroke-width: 3;
    /* Thicker */
    stroke-dasharray: 8, 8;
    /* Larger dashes */
    pointer-events: all;
    cursor: ns-resize;
    transition: stroke-width 0.15s ease, stroke 0.15s ease, filter 0.15s ease;
}

.fibonacci-anchor-line:hover {
    stroke-width: 4;
    /* Even thicker on hover */
    stroke: var(--neon-golden-ema);
    filter: drop-shadow(0 0 12px var(--neon-golden-ema));
    /* Add glow on hover */
}

.fibonacci-temp-anchor {
    fill: var(--neon-golden-ema);
    filter: drop-shadow(0 0 6px var(--neon-golden-ema));
    pointer-events: none;
}

.golden-zone-band {
    fill: rgba(255, 215, 0, 0.12);
    /* Slightly more opaque */
    pointer-events: none;
}


/* Default Support/Resistance Styles (dashed, not neon) */

.support-line {
    stroke: rgba(0, 255, 127, 0.35);
    /* More subtle */
    stroke-width: 1.5;
    stroke-dasharray: 8, 8;
    filter: none;
}

.resistance-line {
    stroke: rgba(255, 69, 0, 0.35);
    /* More subtle */
    stroke-width: 1.5;
    stroke-dasharray: 8, 8;
    filter: none;
}


/* Current Level Line Style */

.current-level-line {
    stroke: var(--chart-current-level);
    stroke-width: 2;
    stroke-dasharray: 6, 6;
    opacity: 0.9;
    pointer-events: none;
}


/* New style for 10+ marker */

.plus-10-marker {
    stroke: var(--bg-primary);
    /* Dark outline for contrast */
    stroke-width: 1;
    opacity: 1;
    filter: drop-shadow(0 0 12px var(--btn-range-pink)) drop-shadow(0 0 6px var(--btn-range-pink));
    /* Pink glow, made brighter */
    pointer-events: none;
}


/* Highlighted Support/Resistance Styles (solid, neon) */

.support-line.neon-green-sr {
    stroke: var(--neon-green-sr);
    stroke-width: 3;
    /* Thicker */
    stroke-dasharray: none;
    filter: drop-shadow(0 0 10px var(--neon-green-sr));
    /* Stronger glow */
    animation: neonGlowGreenSR 1s ease-in-out infinite alternate;
}

.resistance-line.neon-red-sr {
    stroke: var(--neon-red-sr);
    stroke-width: 3;
    /* Thicker */
    stroke-dasharray: none;
    filter: drop-shadow(0 0 10px var(--neon-red-sr));
    /* Stronger glow */
    animation: neonGlowRedSR 1s ease-in-out infinite alternate;
}


/* Keyframes for the glow animation */

@keyframes neonGlowGreenSR {
    from {
        filter: drop-shadow(0 0 6px var(--neon-green-sr));
        opacity: 1;
    }
    to {
        filter: drop-shadow(0 0 12px var(--neon-green-sr));
        opacity: 0.95;
    }
}

@keyframes neonGlowRedSR {
    from {
        filter: drop-shadow(0 0 6px var(--neon-red-sr));
        opacity: 1;
    }
    to {
        filter: drop-shadow(0 0 12px var(--neon-red-sr));
        opacity: 0.95;
    }
}


/* New styles for mini-fibonacci */

.mini-fibonacci-group {
    pointer-events: auto;
}

.mini-fibonacci-anchor-line {
    stroke: rgba(255, 215, 0, 0.3);
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    pointer-events: all;
    cursor: ns-resize;
    transition: stroke-width 0.15s ease, stroke 0.15s ease;
}

.mini-fibonacci-anchor-line:hover {
    stroke-width: 3;
    stroke: var(--neon-golden-ema);
    filter: drop-shadow(0 0 8px var(--neon-golden-ema));
}

.mini-fibonacci-temp-anchor {
    pointer-events: none;
    fill: var(--neon-golden-ema);
}

.mini-golden-zone-band {
    fill: rgba(255, 215, 0, 0.1);
    pointer-events: none;
}


/* Mini chart points and line */

#mini-chart path[stroke="#fff"] {
    /* Target the white line */
    stroke: var(--text-color-primary);
    stroke-width: 2;
    opacity: 0.85;
}

.mini-point {
    opacity: 0.95;
    r: 4px;
    /* Default size (was 3.5px, now slightly smaller for mini */
    transition: all 0.1s ease;
}

.mini-point:hover {
    r: 5px;
    /* Slightly larger on hover */
    opacity: 1;
    filter: drop-shadow(0 0 6px currentColor);
    /* Stronger glow on hover */
}


/* Small golden full-chart flash */

.golden-flash {
    animation: goldenFlashAnim 1.2s ease-in-out;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.35) inset;
    border-color: rgba(255, 215, 0, 0.85) !important;
}

@keyframes goldenFlashAnim {
    0% {
        filter: brightness(1);
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.05) inset;
    }
    40% {
        filter: brightness(1.25) saturate(1.1);
        box-shadow: 0 0 80px rgba(255, 215, 0, 0.45) inset;
    }
    100% {
        filter: brightness(1);
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.08) inset;
    }
}