@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Compact Trading Platform Variables */
:root {
    /* Font Scale Factor - Change this to scale all fonts proportionally */
    --font-scale: 1.8;
    /* Increase this to make fonts bigger (1.0 = original, 1.8 = 80% bigger) */

    /* Base Font Sizes - All scaled by --font-scale */
    --font-xs: calc(4px * var(--font-scale));
    /* Extra small */
    --font-sm: calc(6px * var(--font-scale));
    /* Small */
    --font-base: calc(8px * var(--font-scale));
    /* Base/Medium */
    --font-md: calc(10px * var(--font-scale));
    /* Medium-Large */
    --font-lg: calc(12px * var(--font-scale));
    /* Large */
    --font-xl: calc(14px * var(--font-scale));
    /* Extra Large */
    --font-2xl: calc(16px * var(--font-scale));
    /* 2X Large */
    --font-3xl: calc(18px * var(--font-scale));
    /* 3X Large */

    --primary-blue: #1a365d;
    --secondary-blue: #2563eb;
    --accent-blue: #3b82f6;
    --light-blue: #60a5fa;
    --dark-navy: #0f172a;
    --slate: #1e293b;
    --light-slate: #475569;
    --white: #ffffff;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --glass-bg: rgba(15, 23, 42, 0.85);
    --glass-light: rgba(59, 130, 246, 0.08);
    --glass-medium: rgba(59, 130, 246, 0.12);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-hover: rgba(255, 255, 255, 0.2);
    --shadow-compact: 0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 2px 8px rgba(59, 130, 246, 0.4);
    --gradient-primary: linear-gradient(135deg, #1a365d 0%, #2563eb 50%, #3b82f6 100%);
    --gradient-accent: linear-gradient(45deg, #3b82f6 0%, #60a5fa 100%);
    --gradient-success: linear-gradient(135deg, #065f46 0%, #10b981 50%, #34d399 100%);
    --gradient-danger: linear-gradient(135deg, #7f1d1d 0%, #ef4444 50%, #f87171 100%);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

/* Professional Tooltip Enhancement */
[title] {
    position: relative;
    cursor: help;
}

/* Custom CSS Tooltip for Desktop */
[title]:hover::before,
[title]:hover::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: translateY(10px);
    z-index: 10000;
}

/* Tooltip content */
[title]:hover::before {
    content: attr(title);
    background: linear-gradient(135deg, var(--dark-navy) 0%, #2a3441 100%);
    color: var(--white);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: var(--font-sm);
    font-weight: 500;
    line-height: 1.4;
    max-width: 300px;
    width: max-content;
    border: 1px solid var(--accent-blue);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    white-space: normal;
    word-wrap: break-word;
}

/* Tooltip arrow */
[title]:hover::after {
    content: '';
    border: 6px solid transparent;
    border-top: 6px solid var(--dark-navy);
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Show tooltip on hover */
[title]:hover::before,
[title]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Enhanced tooltip styling for inputs and selects */
input[title]:hover,
select[title]:hover,
label[title]:hover {
    filter: brightness(1.15);
    box-shadow:
        0 0 15px rgba(59, 130, 246, 0.4),
        0 0 30px rgba(59, 130, 246, 0.2);
    transition: var(--transition-smooth);
    transform: translateY(-1px);
}

/* Tooltip accessibility enhancement */
[title]:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Additional visual feedback for tooltipped elements */
input[title],
select[title] {
    border: 1px solid rgba(59, 130, 246, 0.2);
    transition: var(--transition-smooth);
}

input[title]:hover,
select[title]:hover {
    border-color: var(--accent-blue);
}

/* Hide default browser tooltip */
[title] {
    position: relative;
}

/* Responsive tooltip positioning */
@media (max-width: 768px) {

    /* Hide custom tooltips on mobile to prevent conflicts */
    [title]:hover::before,
    [title]:hover::after {
        display: none;
    }

    /* Show mobile info icons */
    [title]::after {
        content: ' ⓘ';
        color: var(--accent-blue);
        font-size: 0.8em;
        opacity: 0.7;
    }
}

/* Mobile Touch Tooltip Popup */
.mobile-tooltip {
    position: fixed;
    background: var(--dark-navy);
    color: var(--white);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--accent-blue);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    font-size: var(--font-sm);
    max-width: 280px;
    z-index: 9999;
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    line-height: 1.4;
}

.mobile-tooltip.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.mobile-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--dark-navy);
}

/* Visual feedback for long press */
.long-press-active {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: var(--accent-blue) !important;
    transform: scale(0.98);
}

/* Touch feedback hint */
@media (max-width: 768px) {
    [title]::after {
        content: ' ⓘ';
        color: var(--accent-blue);
        font-size: 0.8em;
        opacity: 0.7;
    }
}

body {
    margin: 0;
    padding: 1px;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 30%, #334155 60%, #475569 100%);
    color: var(--white);
    font-size: var(--font-md);
    position: relative;
}

.container {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 1px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Title Animation */
.animate-charcter {
    background-image: linear-gradient(-225deg,
            #00d4ff 0%,
            #020024 29%,
            #090979 67%,
            #00d4ff 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
    font-size: var(--font-base);
    text-align: center;
    font-weight: bolder;
    padding: 1px;
    margin: 0;
    line-height: 16px;
    height: 16px;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

/* Compact Trading Header */
.firstline {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    height: 26px;
    margin-bottom: 1px;
    align-items: center;
}

.acctbalance,
.tradesTaken,
.netProfit {
    background: var(--glass-light);
    backdrop-filter: blur(12px) saturate(1.3);
    border-radius: 4px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-compact);
    padding: 1px 3px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#balance,
#tradesTaken,
#netProfit {
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 16px;
}

/* Professional Net Profit Styling */
#netProfit {
    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Courier New', monospace;
    font-size: var(--font-3xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    line-height: 1.2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 0 transparent;
}

/* Value-based color states */
#netProfit.profit {
    color: #10b981 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(16, 185, 129, 0.3);
}

#netProfit.loss {
    color: #ef4444 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(239, 68, 68, 0.3);
}

#netProfit.neutral {
    color: var(--white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 0 transparent;
}

/* Asset Price Styling */
.assetPrice {
    padding: 1px 3px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--accent-blue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 100px;
}

#currentPrice {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--white);
    margin: 0;
    line-height: 1.2;
    transition: color 0.3s ease;
}

#priceChange {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--font-xs);
    font-weight: 500;
    margin: 0;
    line-height: 1;
    min-height: 10px;
}

.price-value.positive,
.price-change.positive {
    color: var(--success) !important;
}

.price-value.negative,
.price-change.negative {
    color: var(--danger) !important;
}


/* Professional animations */
@keyframes professionalBounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

@keyframes digitalFlicker {

    0%,
    100% {
        opacity: 1;
    }

    25% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.9;
    }
}

#netProfit.animating {
    animation: professionalBounce 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#netProfit.counting {
    animation: digitalFlicker 0.8s ease-in-out;
}

/* Input Rows */
.input-row {
    display: flex;
    gap: 1px;
    height: 32px;
    margin-bottom: 1px;
    align-items: center;
}

.input-row .custom-edgeshape {
    flex: 1;
    margin: 0;
}

/* Compact Input Group */
.input-group {
    display: flex;
    align-items: center;
    gap: 1px;
    flex: 1;
}

.arrow-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.arrow-button {
    width: 14px;
    height: 12px;
    background: var(--glass-medium);
    border: 1px solid var(--glass-border);
    border-radius: 2px;
    cursor: pointer;
    font-size: 6px;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: var(--shadow-compact);
}

.arrow-button:hover {
    background: var(--accent-blue);
    box-shadow: var(--shadow-hover);
}

/* Compact Inputs */
#symbolInput,
#multiplier,
#stake_input,
#takeprofit_input,
#maximum_losses,
#stoploss_input,
#barrier_input {
    padding: 3px 5px;
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--white);
    background: linear-gradient(135deg, var(--dark-navy) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid var(--slate);
    border-radius: 4px;
    outline: none;
    width: 100%;
    height: 28px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    border-left: 1px solid transparent;
}

#symbolInput:focus,
#multiplier:focus,
#stake_input:focus,
#takeprofit_input:focus,
#maximum_losses:focus,
#stoploss_input:focus,
#barrier_input:focus {
    border-left-color: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

#symbolInput {
    font-size: var(--font-sm);
}

#symbolInput option {
    color: var(--dark-navy);
    background: var(--white);
    font-size: 8px;
}

/* Custom Edge Shape */
.custom-edgeshape {
    padding: 3px 5px;
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--white);
    background: linear-gradient(135deg, var(--dark-navy) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid var(--slate);
    border-radius: 4px;
    outline: none;
    height: 28px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    border-left: 1px solid transparent;
}

.custom-edgeshape:focus {
    border-left-color: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Compact Strategy Options */
.square-radio {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 7px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    white-space: nowrap;
    padding: 1px 2px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
    height: 20px;
}

.square-radio input[type="radio"] {
    appearance: none;
    width: 7px;
    height: 7px;
    border: 1px solid var(--glass-border);
    border-radius: 2px;
    background: var(--glass-light);
    position: relative;
    flex-shrink: 0;
}

.square-radio input[type="radio"]:checked {
    background: var(--gradient-primary);
    border-color: var(--accent-blue);
    box-shadow: 0 0 3px rgba(59, 130, 246, 0.6);
}

.square-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 2px;
    background: var(--white);
    border-radius: 50%;
}

/* Additional Inputs */
.additional-inputs {
    display: none;
    background: linear-gradient(135deg, var(--dark-navy) 0%, rgba(30, 41, 59, 0.9) 100%);
    border-radius: 3px;
    padding: 1px 2px;
    border: 1px solid var(--slate);
    margin: 1px 0;
    height: 20px;
    align-items: center;
}

.additional-inputs label {
    font-size: 7px;
    font-weight: 600;
    color: var(--white);
    margin-right: 2px;
}

#martingaleDigitInput,
#ticksInput,
#durationInput {
    padding: 1px 2px;
    font-size: 7px;
    font-weight: 600;
    color: var(--white);
    background: var(--dark-navy);
    border: 1px solid var(--slate);
    border-radius: 3px;
    width: 50px;
    margin: 0 1px;
}

#durationUnit {
    padding: 1px 2px;
    font-size: 7px;
    background: var(--dark-navy);
    border: 1px solid var(--slate);
    border-radius: 2px;
    color: var(--white);
    width: 40px;
}

/* FIXED: Added active state for JavaScript control */
.error-message.active {
    display: flex !important;
    animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

#stakeListContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin: 1px 0;
}

.stake-input {
    padding: 1px 2px;
    font-size: 6px;
    font-weight: 600;
    color: var(--white);
    background: var(--dark-navy);
    border: 1px solid var(--slate);
    border-radius: 2px;
    width: 25px;
    text-align: center;
}

/* Enhanced Error Container - LARGE & VISIBLE - FIXED: Changed to class selector */
/* Enhanced Error Container - LARGE & VISIBLE - FIXED: Changed to class selector */
.error-message {
    min-height: 40px;
    font-size: 12px;
    color: var(--white);
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid var(--danger);
    text-align: center;
    font-weight: 600;
    margin: 5px 0;
    padding: 10px;
    line-height: 1.4;
    max-height: none;
    overflow: visible;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-message.success {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--success);
    color: var(--success);
}

.error-message.info {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--info);
    color: var(--info);
}

.error-message.warning {
    background: rgba(245, 158, 11, 0.2);
    border-color: var(--warning);
    color: var(--warning);
}

.error-message.error,
.error-message.critical {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--danger);
    color: var(--danger);
}

/* Market Selection */
.combinedContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    margin: 1px 0;
}

#combinedButton {
    width: 220px;
    height: 30px;
    position: relative;
    background: var(--glass-medium);
    backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-compact);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#evenSection,
#oddSection {
    position: absolute;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--white);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    width: 50%;
}

#evenSection {
    left: 0;
    background: var(--gradient-success);
    border-radius: 15px 0 0 15px;
}

#oddSection {
    right: 0;
    background: var(--gradient-danger);
    border-radius: 0 15px 15px 0;
}

/* Summary Elements */
#summary,
#summary2 {
    background: var(--glass-light);
    backdrop-filter: blur(12px) saturate(1.3);
    border-radius: 4px;
    border: 1px solid var(--glass-border);
    padding: 2px 4px;
    font-size: 9px;
    font-weight: 600;
    color: var(--white);
    text-align: center;
    box-shadow: var(--shadow-compact);
    max-height: 28px;
    overflow: hidden;
    border-left: 1px solid var(--warning);
    line-height: 1.2;
    margin: 1px 0;
}

#tradingSummary {
    background: var(--glass-light);
    backdrop-filter: blur(12px) saturate(1.3);
    border-radius: 4px;
    border: 1px solid var(--glass-border);
    padding: 2px 4px;
    font-size: 9px;
    font-weight: 600;
    color: var(--white);
    text-align: center;
    box-shadow: var(--shadow-compact);
    max-height: 28px;
    overflow: hidden;
    border-left: 1px solid var(--warning);
    line-height: 1.2;
    display: none;
    margin: 1px 0;
}

#tradingSummary span.input-value {
    color: var(--accent-blue);
    font-weight: 700;
    text-shadow: 0 0 2px rgba(59, 130, 246, 0.6);
}

/* Action Buttons */
.startbutton {
    display: flex;
    gap: 2px;
    justify-content: center;
    align-items: center;
    height: 26px;
    margin: 1px 0;
}

.custom-edgeshape-transition {
    padding: 2px 8px;
    font-size: 8px;
    font-weight: 700;
    color: var(--white);
    background: var(--gradient-primary);
    border: 1px solid var(--accent-blue);
    border-radius: 6px;
    cursor: pointer;
    box-shadow: var(--shadow-compact);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.custom-edgeshape-transition.clicked {
    background: var(--gradient-success);
}

#pauseButton {
    background: var(--gradient-danger);
    display: none;
}

/* Trading Tables Container */
.trading-tables {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Trading Tables */
#openContractsTable,
#tradeHistoryTable {
    width: 100%;
    border-collapse: collapse;
    background: var(--glass-light);
    backdrop-filter: blur(12px) saturate(1.2);
    border-radius: 4px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    box-shadow: var(--shadow-compact);
    font-size: 6px;
    border-top: 1px solid var(--accent-blue);
}

#openContractsTable {
    max-height: 32px;
    overflow-y: auto;
    margin-bottom: 1px;
}

#tradeHistoryTable {
    flex: 1;
    display: block;
    overflow-y: auto;
}

#tradeHistoryTable thead,
#tradeHistoryTable tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#tradeHistoryTable tbody {
    display: block;
    height: calc(100% - 11px);
    overflow-y: auto;
}

#tradeHistoryTable tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

th,
td {
    padding: 0px 1px;
    text-align: center;
    font-size: 6px;
    font-weight: 600;
    border: none;
}

th {
    background: var(--gradient-primary);
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    height: 10px;
    font-size: 6px;
    border-bottom: 1px solid var(--glass-border);
}

tbody {
    color: var(--white);
}

tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

.positive {
    color: var(--success);
    font-weight: 700;
    text-shadow: 0 0 2px rgba(16, 185, 129, 0.6);
}

.negative {
    color: var(--danger);
    font-weight: 700;
    text-shadow: 0 0 2px rgba(239, 68, 68, 0.6);
}

/* Compact Button Styles */
.cancel-contract-btn,
.update-contract-btn {
    padding: 1px 4px;
    font-size: 4px;
    font-weight: 600;
    border-radius: 3px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    width: 35px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cancel-contract-btn {
    background: var(--gradient-danger);
    color: var(--white);
}

.update-contract-btn {
    background: var(--gradient-primary);
    color: var(--white);
}

.dropdown-container {
    background: var(--glass-light);
    border: 1px solid var(--glass-border);
    border-radius: 3px;
    padding: 1px;
    margin-top: 1px;
    width: 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dropdown-container input[type="number"] {
    padding: 1px 2px;
    font-size: 4px;
    width: 100%;
    height: 12px;
    border: 1px solid var(--slate);
    border-radius: 2px;
    background: var(--dark-navy);
    color: var(--white);
}

.send-button {
    padding: 1px 2px;
    font-size: 4px;
    background: var(--gradient-primary);
    color: var(--white);
    border: 1px solid var(--accent-blue);
    border-radius: 2px;
    cursor: pointer;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Compact Popup System */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(30, 64, 175, 0.1));
    backdrop-filter: blur(20px) saturate(1.2);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(30px) saturate(1.4);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 8px 16px rgba(30, 64, 175, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    padding: 20px;
    max-width: min(350px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
    position: relative;
}

.popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-blue), var(--light-blue), var(--accent-blue));
    border-radius: 16px 16px 0 0;
}

#popupMessage {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 24px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

.container1,
.container2 {
    margin: 12px 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.container1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.container2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.container2 button {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
}

.close-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.close-btn-footer {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--accent-blue), var(--primary-blue));
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow:
        0 4px 16px rgba(30, 64, 175, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* Enhanced AddToAny Social Buttons */
.a2a_kit {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.a2a_button_whatsapp,
.a2a_button_x,
.a2a_button_twitter,
.a2a_button_facebook,
.share-button {
    border-radius: 6px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Compact Scrollbar */
::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-track {
    background: var(--glass-bg);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-blue);
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(59, 130, 246, 0.6);
}

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

/* Animations */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes popIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.popup {
    animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Mobile Compact Optimization */
@media screen and (max-width: 768px) {
    body {
        font-size: 9px;
        padding: 1px;
    }

    .container {
        padding: 1px;
        gap: 1px;
    }

    .firstline {
        height: 24px;
    }

    #balance,
    #tradesTaken,
    #netProfit {
        font-size: 7px;
        line-height: 14px;
    }

    .input-row {
        height: 30px;
    }

    #symbolInput,
    #multiplier,
    #stake_input,
    #takeprofit_input,
    #maximum_losses,
    #stoploss_input,
    #barrier_input {
        font-size: var(--font-sm);
        padding: 2px 4px;
        height: 26px;
    }

    #combinedButton {
        width: 200px;
        height: 28px;
    }

    #evenSection,
    #oddSection {
        font-size: 6px;
    }

    th,
    td {
        font-size: 5px;
        padding: 0px 1px;
    }

    th {
        height: 10px;
    }

    #summary,
    #summary2,
    #tradingSummary {
        font-size: 8px;
        max-height: 26px;
    }

    .startbutton {
        height: 24px;
    }

    .custom-edgeshape-transition {
        font-size: 7px;
        padding: 2px 6px;
    }
}

@media screen and (max-width: 480px) {
    .popup {
        padding: 12px;
        max-width: 95vw;
        margin: 5px;
        border-radius: 10px;
    }

    #popupMessage {
        font-size: 12px;
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .container1,
    .container2 {
        margin: 8px 0;
        padding: 8px;
        border-radius: 6px;
    }

    .close-btn-footer {
        padding: 8px 16px;
        font-size: 11px;
        border-radius: 6px;
    }

    .container2 button {
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }

    .a2a_button_whatsapp,
    .a2a_button_x,
    .a2a_button_twitter,
    .a2a_button_facebook,
    .share-button {
        width: 20px !important;
        height: 20px !important;
    }

    .container1 {
        gap: 4px !important;
    }
}

@media screen and (max-width: 360px) {
    body {
        font-size: 8px;
    }

    .firstline {
        height: 22px;
    }

    #balance,
    #tradesTaken,
    #netProfit {
        font-size: 6px;
        line-height: 12px;
    }

    .input-row {
        height: 28px;
    }

    #combinedButton {
        width: 180px;
        height: 26px;
    }

    #evenSection,
    #oddSection {
        font-size: 5px;
    }

    .custom-edgeshape-transition {
        font-size: 6px;
        padding: 1px 4px;
    }
}

/* Hide radio form */
form {
    display: none;
}

/* Hidden form elements */
input[style*="display: none"],
label[style*="display: none"] {
    #barrier_input {
        display: none !important;
    }

    /* ============= BUY/SELL BUTTON STYLES ============= */
    .combinedContainer {
        display: flex;
        justify-content: center;
        margin: 15px 0;
    }

    #combinedButton {
        display: flex;
        width: 100%;
        max-width: 400px;
        border: none;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        padding: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    #evenSection,
    #oddSection {
        flex: 1;
        padding: 15px 20px;
        font-size: var(--font-lg);
        font-weight: 700;
        text-align: center;
        color: white;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    /* Initial colors - Buy is green, Sell is red */
    #evenSection {
        background: #059669;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    #oddSection {
        background: #dc2626;
    }

    /* ============= ERROR MESSAGE STYLES ============= */
    #errorContainer {
        min-height: 40px;
        margin: 10px 0;
        padding: 10px 15px;
        border-radius: 6px;
        font-size: var(--font-base);
        font-weight: 600;
        text-align: center;
        transition: all 0.3s ease;
        display: none;
        /* Hidden by default */
    }

    #errorContainer.active {
        display: block;
        animation: slideIn 0.3s ease;
    }

    .error-message {
        display: block;
        padding: 12px 20px;
        border-radius: 8px;
        margin: 10px 0;
        font-size: var(--font-base);
        font-weight: 600;
        text-align: center;
    }

    .error-message.error {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid #ef4444;
        color: #ef4444;
    }

    .error-message.warning {
        background: rgba(245, 158, 11, 0.15);
        border: 1px solid #f59e0b;
        color: #f59e0b;
    }

    .error-message.info {
        background: rgba(59, 130, 246, 0.15);
        border: 1px solid #3b82f6;
        color: #3b82f6;
    }

    .error-message.success {
        background: rgba(16, 185, 129, 0.15);
        border: 1px solid #10b981;
        color: #10b981;
    }

    .error-message.critical {
        background: rgba(220, 38, 38, 0.2);
        border: 2px solid #dc2626;
        color: #fca5a5;
        font-weight: 700;
        animation: pulse 1s infinite;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.7;
        }
    }

    /* Additional inputs positioning */
    #martingaleInputs,
    #stakeListInputs,
    #ticksInputs,
    #durationInputs {
        margin: 1px 0;
    }

    /* Hidden inputs - Only barrier input is hidden */
    display: none !important;
}

/* ============= BUY/SELL BUTTON STYLES ============= */
.combinedContainer {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

#combinedButton {
    display: flex;
    width: 100%;
    max-width: 400px;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#evenSection,
#oddSection {
    flex: 1;
    padding: 15px 20px;
    font-size: var(--font-lg);
    font-weight: 700;
    text-align: center;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Initial colors - Buy is green, Sell is red */
#evenSection {
    background: #059669;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

#oddSection {
    background: #dc2626;
}

/* ============= ERROR MESSAGE STYLES ============= */
#errorContainer {
    min-height: 40px;
    margin: 10px 0;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: var(--font-base);
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    display: none;
    /* Hidden by default */
}

#errorContainer.active {
    display: block;
    animation: slideIn 0.3s ease;
}

.error-message {
    display: block;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 10px 0;
    font-size: var(--font-base);
    font-weight: 600;
    text-align: center;
}

.error-message.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    color: #ef4444;
}

.error-message.warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
    color: #f59e0b;
}

.error-message.info {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid #3b82f6;
    color: #3b82f6;
}

.error-message.success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid #10b981;
    color: #10b981;
}

.error-message.critical {
    background: rgba(220, 38, 38, 0.2);
    border: 2px solid #dc2626;
    color: #fca5a5;
    font-weight: 700;
    animation: pulse 1s infinite;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}
/* ===== FIX 1: SCROLLABLE TRADE CARDS CONTAINER ===== */

/* Remove all conflicting .trade-cards-container rules except the first one */
.trade-cards-container {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 8px !important;
  overflow-y: auto !important;
  min-height: 120px !important;
  max-height: 280px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border-radius: 8px !important;
  margin: 0 !important;
}

/* Fix parent containers for proper scrolling */
.trading-tables {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    gap: 4px;
    margin-bottom: 4px;
}

.trade-history-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.recent-trades {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Make sure header doesn't shrink */
.recent-trades-header {
    flex-shrink: 0;
}
/* ===== FIX 2: TRADE PREVIEW DISPLAY ===== */
#summary2 {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin: 8px 0 !important;
    min-height: 80px !important;
    max-height: none !important;
    overflow: visible !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    font-family: 'Inter', sans-serif !important;
    line-height: 1.4 !important;
    display: none !important;
}

#summary2 div {
    margin: 4px 0;
    padding: 2px 0;
    display: block !important;
    clear: both !important;
}

#summary2 div strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #3b82f6 !important;
    display: inline-block !important;
    min-width: 80px !important;
}

#summary2 div:first-child strong {
    color: #10b981 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#summary2 div:nth-child(2) {
    color: #cbd5e1 !important;
    font-size: 12px !important;
}

#summary2 div:nth-child(3) {
    color: #10b981 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

#summary2 div:nth-child(4) {
    color: #ef4444 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}


#evenSection.active {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.6) !important;
    border: 2px solid #10b981 !important;
}

#oddSection.active {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.6) !important;
    border: 2px solid #ef4444 !important;
}

#evenSection.inactive, #oddSection.inactive {
    opacity: 0.5 !important;
    filter: brightness(0.7) !important;
}
/* Enhanced button active states */
#evenSection.active {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(16, 185, 129, 0.6) !important;
    border: 2px solid #10b981 !important;
    z-index: 10 !important;
}

#oddSection.active {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(239, 68, 68, 0.6) !important;
    border: 2px solid #ef4444 !important;
    z-index: 10 !important;
}

#evenSection.inactive, #oddSection.inactive {
    opacity: 0.6 !important;
    filter: brightness(0.7) !important;
}

/* Exit reason styling in cards */
.trade-item .exit-reason.take_profit {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.trade-item .exit-reason.stop_loss {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.trade-item .exit-reason.manual {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

/* Open contracts table styling */
#openContractsTable th {
    font-size: 10px !important;
    padding: 4px 2px !important;
}

#openContractsTable td {
    font-size: 11px !important;
    padding: 6px 2px !important;
    white-space: nowrap;
}



@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Replace ALL existing .trade-cards-container CSS with this: */
.trade-cards-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px !important;
    overflow-y: auto !important;
    min-height: 120px !important;
    max-height: 280px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border-radius: 8px !important;
    margin: 0 !important;
}

/* Ensure parent containers allow scrolling */
.trading-tables {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    gap: 4px;
    margin-bottom: 4px;
}

.trade-history-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.recent-trades {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Fix popup container as well */
.trade-cards-popup-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}
/* ===== FIX SCROLLABLE TRADE CARDS - ADD TO CSS ===== */
.trade-cards-container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px !important;
    overflow-y: auto !important;
    min-height: 120px !important;
    max-height: 280px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border-radius: 8px !important;
    margin: 0 !important;
}

.trade-cards-popup-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* Exit reason styling */
.trade-item .exit-reason {
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

.trade-item .exit-reason.tp {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}

.trade-item .exit-reason.sl {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

.trade-item .exit-reason.manual {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
}

.trade-item .exit-reason.expired {
    background: rgba(148, 163, 184, 0.1) !important;
    color: #94a3b8 !important;
}
/* Open Contracts Table Styling */
#openContractsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 14px;
}

#openContractsTable th {
    background-color: #1f2937;
    color: #f3f4f6;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    border-bottom: 2px solid #374151;
}

#openContractsTable td {
    padding: 10px;
    border-bottom: 1px solid #374151;
    text-align: center;
}

/* Color classes for table cells */
.profit-green {
    color: #10b981 !important;
    font-weight: bold;
}

.loss-red {
    color: #ef4444 !important;
    font-weight: bold;
}

.tp-green {
    color: #10b981 !important;
    font-weight: bold;
}

.sl-red {
    color: #ef4444 !important;
    font-weight: bold;
}

.buy-blue {
    color: #3b82f6 !important;
    font-weight: bold;
}

.sell-orange {
    color: #f59e0b !important;
    font-weight: bold;
}