:root {
    --color-accent: #97FCE4; 
    --color-accent-hover: #75D4BE; 
    --bg-dark: #000000;
    --surface-dark: #070707; 
    --text-dark: #e4e4e7; 
    --text-muted-dark: #a1a1aa; 
    --border-dark: #262729;
    /* UPDATED: Positive PNL now uses the accent color */
    --pnl-positive-color: var(--color-accent); 
    --pnl-negative-color: #ef4444;
}

body { 
    /* The solid background color is kept as a fallback */
    background-color: var(--bg-dark) !important; 
    /* NEW: Using the user-provided radial gradients for a subtle effect */
    background-image: radial-gradient(circle at 10% 20%, rgba(0, 244, 216, 0.1) 0%, transparent 30%),
                      radial-gradient(circle at 90% 80%, rgba(0, 244, 228, 0.1) 0%, transparent 40%) !important;
    background-attachment: fixed; /* Ensures the gradient stays in place on scroll */
    color: var(--text-dark); 
    font-family: 'Inter', sans-serif; 
}

.surface-card { 
    background-color: var(--surface-dark); 
    border: 1px solid var(--border-dark); 
    border-radius: 1rem; 
    padding: 1.5rem; 
}

.bot-card { 
    background-color: var(--surface-dark); 
    border: 1px solid var(--border-dark); 
    border-radius: 1rem; 
    overflow: hidden; 
    /* min-height: 380px; */ /* REMOVED to allow card to shrink */
}

/* =============================================================== */
/* Action Button Styles                                            */
/* =============================================================== */
.action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-dark);
    border: 1px solid var(--border-dark);
    border-radius: 1rem; /* 16px */
    padding: 0.75rem; /* 12px */
    color: var(--text-muted-dark);
    text-align: center;
    transition: all 0.2s ease-in-out;
    text-decoration: none; /* Remove underline from links */
    aspect-ratio: 1 / 1; /* Make the button square */
}

.action-button:hover {
    background-color: var(--border-dark);
    color: var(--text-dark);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.action-button i {
    color: var(--color-accent); /* Make icons use the accent color */
}
/* =============================================================== */
/* END: Action Button Styles                                       */
/* =============================================================== */



.thin-scrollbar::-webkit-scrollbar { 
    width: 6px; 
    height: 6px; 
}

.thin-scrollbar::-webkit-scrollbar-track { 
    background: transparent; 
}

.thin-scrollbar::-webkit-scrollbar-thumb { 
    background-color: #4b5563; 
    border-radius: 10px; 
}

.spinner { 
    width: 40px; 
    height: 40px; 
    border: 4px solid var(--border-dark); 
    border-top-color: var(--color-accent); 
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    to { transform: rotate(360deg); } 
}

.btn-accent { 
    background-color: var(--color-accent); 
    color: #111827; 
    font-weight: 700; 
    transition: all 0.2s; 
    padding: 0.75rem 1.5rem; 
    border-radius: 0.75rem; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.5rem; 
}

.btn-accent:hover:not(:disabled) { 
    background-color: var(--color-accent-hover); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 15px rgba(170, 244, 0, 0.2); 
}

.btn-accent:disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
}



.btn-danger { 
    font-weight: 700; 
    transition: all 0.2s; 
    border-radius: 0.75rem !important; 
    display: inline-flex; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 0.5rem !important; 
}


.btn-danger:hover:not(:disabled) { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 15px rgba(244, 0, 0, 0.2); 
}


.themed-input { 
    background-color: #000; 
    border: 1px solid var(--border-dark); 
    color: var(--text-dark); 
    border-radius: 0.5rem; 
    padding: 0.75rem; 
    font-size: 1.25rem; 
    font-weight: bold; 
    text-align: center; 
}

.modal-overlay { 
    background-color: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(8px); 
}

.pnl-positive { 
    color: var(--pnl-positive-color); 
}

.pnl-negative { 
    color: var(--pnl-negative-color); 
}

.direction-long { 
    background-color: rgba(170, 244, 0, 0.1); /* Accent color with opacity */
    color: var(--pnl-positive-color); 
    padding: 2px 6px; 
    border-radius: 4px; 
    font-weight: 500; 
}

.direction-short { 
    background-color: rgba(239, 68, 68, 0.1); 
    color: var(--pnl-negative-color); 
    padding: 2px 6px; 
    border-radius: 4px; 
    font-weight: 500; 
}

.chart-container { 
    position: relative; 
    height: 70px; 
    width: 100%; 
    margin-bottom: 1rem; 
}

/* Custom Slider Styles */
input[type=range] { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 100%; 
    height: 8px; 
    background: var(--border-dark); 
    border-radius: 5px; 
    outline: none; 
    opacity: 0.7; 
    transition: opacity .2s; 
    margin-top: 1rem; 
    margin-bottom: 0.5rem; 
}

input[type=range]:hover { 
    opacity: 1; 
}

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    appearance: none; 
    width: 20px; 
    height: 20px; 
    background: var(--color-accent); 
    border-radius: 50%; 
    cursor: pointer; 
    border: 3px solid var(--surface-dark); 
}

input[type=range]::-moz-range-thumb { 
    width: 20px; 
    height: 20px; 
    background: var(--color-accent); 
    border-radius: 50%; 
    cursor: pointer; 
    border: 3px solid var(--surface-dark); 
}


.color-logo{
    color: var(--color-accent) !important; 
}



.bot-tab-content:not(.active) {
    display: none !important;
}

/* --- NEW: Responsive Pagination Styles --- */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
    gap: 4px;
    flex-wrap: wrap; /* Allow wrapping on very small screens as a fallback */
}
.pagination-button {
    background-color: #374151;
    color: #D1D5DB;
    border: none;
    padding: 8px 16px; /* Original padding */
    margin: 0 2px; /* Reduced margin for tighter packing */
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, padding 0.2s, font-size 0.2s; /* Add transitions */
    font-weight: 500;
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center;
    justify-content: center;
    line-height: 1; /* Ensure consistent height */
    white-space: nowrap; /* Prevent text from wrapping inside button */
}
.pagination-button:hover:not(:disabled) {
    background-color: #4B5563;
}
.pagination-button.active {
    background-color: var(--color-accent);
    color: #000;
    font-weight: bold;
}
.pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pagination-ellipsis {
    color: #6b7280;
    margin: 0 4px; /* Reduced margin */
    font-weight: 500;
    align-self: center; /* Vertically align ellipsis with buttons */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 640px) {
    .pagination-controls {
        gap: 2px; /* Reduce gap further */
    }
    .pagination-button {
        padding: 8px 12px; /* Reduce horizontal padding */
        font-size: 0.875rem; /* Slightly smaller font */
    }
}

/* On very small screens, hide text labels for Prev/Next */
@media (max-width: 480px) {
    .pagination-button .pagination-text {
        display: none; /* Hide text on very small screens */
    }
    /* Adjust padding for Prev/Next buttons when text is hidden */
    .pagination-button.prev-btn, .pagination-button.next-btn {
        padding: 8px 12px;
    }
    /* Make number buttons smaller */
    .pagination-button:not(.prev-btn):not(.next-btn) {
        padding: 8px;
        min-width: 36px; /* Ensure a minimum tap area */
    }
}