/*
Neon Dark Glassmorphism CSS Design System
Version: v0.0.1
Author: Antigravity Team
*/
:root {
--bg-dark: #0b0f19;
--card-bg: rgba(17, 24, 39, 0.45);
--card-border: rgba(255, 255, 255, 0.08);
--text-primary: #f3f4f6;
--text-secondary: #9ca3af;
--text-muted: #6b7280;
--primary: #06b6d4;
/* Ciano Neon */
--primary-glow: rgba(6, 182, 212, 0.3);
--secondary: #a855f7;
/* Roxo */
--success: #10b981;
/* Verde Neon */
--success-glow: rgba(16, 185, 129, 0.2);
--danger: #ef4444;
/* Vermelho Neon */
--danger-glow: rgba(239, 68, 68, 0.2);
--warning: #f59e0b;
--transition-fast: 0.2s ease;
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Global Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-dark);
color: var(--text-primary);
font-family: 'Outfit', sans-serif;
min-height: 100vh;
overflow-x: hidden;
position: relative;
line-height: 1.5;
}
/* Background Glowing Blobs */
.blob {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
filter: blur(120px);
z-index: -1;
opacity: 0.25;
pointer-events: none;
}
.blob-cyan {
background: var(--primary);
top: 10%;
left: -100px;
animation: floatBlob 20s infinite alternate;
}
.blob-magenta {
background: var(--secondary);
bottom: 10%;
right: -100px;
animation: floatBlob 25s infinite alternate-reverse;
}
@keyframes floatBlob {
0% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(50px, 30px) scale(1.1);
}
100% {
transform: translate(-30px, -50px) scale(0.9);
}
}
/* Header */
header {
background: rgba(15, 23, 42, 0.6);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--card-border);
padding: 1.2rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.header-logo {
display: flex;
align-items: center;
gap: 0.75rem;
}
.logo-icon {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 8px var(--primary);
flex-shrink: 0;
}
.logo-text h1 {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.025em;
background: linear-gradient(to right, var(--text-primary), var(--primary));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.logo-text p {
font-size: 0.75rem;
color: var(--text-secondary);
}
.header-user-status {
display: flex;
align-items: center;
gap: 1rem;
}
.badge {
background: var(--primary-glow);
border: 1px solid var(--primary);
color: var(--primary);
font-size: 0.7rem;
font-weight: 700;
padding: 0.25rem 0.6rem;
border-radius: 9999px;
letter-spacing: 0.05em;
box-shadow: 0 0 8px var(--primary-glow);
}
.badge.real-mode {
background: var(--success-glow);
border-color: var(--success);
color: var(--success);
box-shadow: 0 0 8px var(--success-glow);
}
.user-email {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
/* Custom Flag Language Dropdown */
.lang-dropdown-wrapper {
position: relative;
display: inline-block;
}
.lang-dropdown-btn {
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(6, 182, 212, 0.3);
color: var(--text-primary);
font-size: 0.85rem;
font-weight: 600;
padding: 0.35rem 0.75rem;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
outline: none;
transition: all 0.25s ease;
box-shadow: 0 0 12px rgba(6, 182, 212, 0.15);
}
.lang-dropdown-btn:hover {
border-color: var(--primary);
box-shadow: 0 0 15px var(--primary-glow);
background: rgba(15, 23, 42, 0.95);
}
.dropdown-arrow {
font-size: 0.6rem;
color: var(--text-secondary);
transition: transform 0.25s ease;
}
.lang-dropdown-wrapper.open .dropdown-arrow {
transform: rotate(180deg);
}
.lang-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: rgba(15, 23, 42, 0.95);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid var(--card-border);
border-radius: 10px;
padding: 0.4rem;
min-width: 155px;
display: none;
flex-direction: column;
gap: 0.25rem;
z-index: 999;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(6, 182, 212, 0.2);
}
.lang-dropdown-wrapper.open .lang-dropdown-menu {
display: flex;
}
.lang-option {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.65rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.lang-option:hover {
background: rgba(6, 182, 212, 0.15);
transform: translateX(2px);
}
.lang-option.selected {
background: rgba(6, 182, 212, 0.25);
border-left: 3px solid var(--primary);
}
.lang-name {
font-size: 0.85rem;
color: var(--text-primary);
font-weight: 500;
flex-grow: 1;
}
.lang-badge {
font-size: 0.7rem;
color: var(--primary);
font-weight: 700;
background: rgba(6, 182, 212, 0.15);
padding: 0.1rem 0.4rem;
border-radius: 4px;
}
/* Crisp SVG Flag Icons */
.flag-icon {
display: inline-block;
width: 22px;
height: 16px;
border-radius: 3px;
background-size: cover;
background-position: center;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.2);
flex-shrink: 0;
}
.flag-br {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-us {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-es {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-de {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-it {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-in {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-cn {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-jp {
background-image: url('data:image/svg+xml;utf8,');
}
/* Container */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
/* Dashboard Grid Layout (2 Equal Spacious Columns) */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: start;
}
@media (max-width: 1024px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
}
/* Close Trade Button */
.btn-close-trade {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
color: #ffffff !important;
padding: 5px 12px !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
border-radius: 6px !important;
border: none !important;
white-space: nowrap !important;
cursor: pointer;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
transition: all 0.2s ease;
}
.btn-close-trade:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
}
/* Glassmorphism Cards */
.card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 1.5rem;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
transition: var(--transition-normal);
}
.card:hover {
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
}
.card-glowing {
position: relative;
}
.card-glowing::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 16px;
box-shadow: 0 0 15px var(--primary-glow);
opacity: 0.5;
pointer-events: none;
z-index: -1;
}
.card-header-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem 1rem;
margin-bottom: 1rem;
}
.card-header-row h3 {
min-width: 0;
flex: 1 1 auto;
}
.card-header-row small {
flex: 0 1 320px;
text-align: right;
}
h3 {
font-size: 1.15rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.card-description {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.4;
}
/* Auth Card Styling */
.auth-card {
max-width: 420px;
margin: 6rem auto;
padding: 2.5rem 2rem;
}
.auth-card h2 {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.25rem;
}
.auth-toggle {
margin-top: 1.5rem;
}
.auth-toggle a {
color: var(--primary);
text-decoration: none;
font-size: 0.85rem;
transition: var(--transition-fast);
}
.auth-toggle a:hover {
text-decoration: underline;
}
/* Forms controls */
.form-group {
margin-bottom: 1.25rem;
}
.form-row {
display: flex;
gap: 1rem;
}
.flex-1 {
flex: 1;
}
label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.4rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
input,
select {
width: 100%;
background: rgba(15, 23, 42, 0.7);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 0.75rem 1rem;
color: var(--text-primary);
font-family: inherit;
font-size: 0.9rem;
outline: none;
transition: var(--transition-fast);
}
input:focus,
select:focus {
border-color: var(--primary);
box-shadow: 0 0 10px rgba(6, 182, 212, 0.25);
}
/* Override browser autofill's light background so it doesn't clash with the dark theme */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: var(--text-primary);
-webkit-box-shadow: 0 0 0 1000px #0f172a inset;
box-shadow: 0 0 0 1000px #0f172a inset;
caret-color: var(--text-primary);
transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
select option {
background-color: var(--bg-dark);
color: var(--text-primary);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition-normal);
outline: none;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
.btn-cyan {
background: var(--primary);
color: var(--bg-dark);
box-shadow: 0 4px 14px rgba(6, 182, 212, 0.4);
}
.btn-cyan:hover:not(:disabled) {
background: #0891b2;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(6, 182, 212, 0.5);
}
.btn-cyan:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);
}
.btn-block {
display: flex;
width: 100%;
}
.btn-primary {
background: var(--primary);
color: var(--bg-dark);
box-shadow: 0 4px 14px rgba(6, 182, 212, 0.4);
}
.btn-primary:hover {
background: #0891b2;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(6, 182, 212, 0.5);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.08);
border-color: var(--card-border);
color: var(--text-primary);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
}
.btn-success {
background: var(--success);
color: var(--bg-dark);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.btn-success:hover {
background: #059669;
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}
.btn-danger {
background: var(--danger);
color: var(--text-primary);
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}
.btn-danger:hover {
background: #dc2626;
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}
.btn-sm {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
border-radius: 6px;
}
.btn-group {
display: flex;
gap: 0.75rem;
}
.btn-group .btn {
flex: 1;
}
/* Mode Toggle buttons */
.toggle-container {
display: flex;
background: rgba(15, 23, 42, 0.6);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 0.25rem;
gap: 0.25rem;
}
.toggle-btn {
flex: 1;
background: transparent;
border: none;
color: var(--text-secondary);
padding: 0.6rem 0.8rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition-fast);
}
.toggle-btn.active {
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#btn-mode-real.active {
background: var(--success-glow);
color: var(--success);
}
/* Indicators */
.pulse-indicator {
width: 8px;
height: 8px;
background: var(--success);
border-radius: 50%;
box-shadow: 0 0 10px var(--success);
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}
}
/* Alerts */
.alert {
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
margin-bottom: 1.25rem;
border: 1px solid transparent;
}
.alert-danger {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
.alert-info {
background: rgba(6, 182, 212, 0.15);
border-color: rgba(6, 182, 212, 0.3);
color: #9cdbff;
}
.alert-success {
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.3);
color: #a7f3d0;
}
/* Price Panel */
.price-container {
display: flex;
flex-direction: column;
margin-bottom: 1.5rem;
}
.price-label {
font-size: 0.75rem;
color: var(--text-secondary);
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.05em;
}
.price-value {
font-size: 2.2rem;
font-weight: 800;
color: #fff;
letter-spacing: -0.03em;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
/* Metrics List */
.metrics-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.metric-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: var(--text-secondary);
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.metric-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.metric-val {
font-weight: 600;
color: var(--text-primary);
}
.metric-val.trend-up {
color: var(--success);
text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}
.metric-val.trend-down {
color: var(--danger);
text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}
/* Machine learning panel */
.ml-result-panel {
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 1rem;
margin-top: 1rem;
}
/* Simulator Veredict Panel */
.sim-veredict-box {
margin-top: 1.5rem;
position: relative;
z-index: 1;
clear: both;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 1.25rem;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.veredict-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.veredict-badge {
background: var(--primary-glow);
border: 1px solid var(--primary);
color: var(--primary);
font-size: 0.75rem;
font-weight: 700;
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.veredict-badge.alta {
background: var(--success-glow);
border-color: var(--success);
color: var(--success);
}
.veredict-badge.baixa {
background: var(--danger-glow);
border-color: var(--danger);
color: var(--danger);
}
#lbl-sim-veredict {
font-size: 0.95rem;
font-weight: 700;
}
.sim-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
.sim-stat-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--card-border);
border-radius: 6px;
padding: 0.5rem;
text-align: center;
}
.sim-stat-card .label {
display: block;
font-size: 0.65rem;
color: var(--text-secondary);
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.sim-stat-card .value {
font-size: 0.9rem;
font-weight: 700;
color: #fff;
}
.alvo-prices {
font-size: 0.85rem;
color: var(--text-secondary);
display: flex;
flex-direction: column;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.02);
padding: 0.75rem;
border-radius: 6px;
border-left: 3px solid var(--primary);
}
.text-green {
color: var(--success);
}
.text-red {
color: var(--danger);
}
.text-yellow {
color: var(--warning);
}
.text-danger {
color: var(--danger);
}
.text-warning {
color: var(--warning);
}
.text-muted {
color: var(--text-muted);
}
.text-cyan {
color: var(--primary);
}
.text-magenta {
color: var(--secondary);
}
.text-gold {
color: var(--warning);
}
/* Wallet balance row */
.wallet-balance-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
}
.keys-config-panel {
margin-top: 1rem;
font-size: 0.8rem;
}
.keys-config-panel a {
color: var(--primary);
text-decoration: none;
}
.keys-config-panel a:hover {
text-decoration: underline;
}
#binance-keys-form {
margin-top: 0.75rem;
padding: 1rem;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--card-border);
border-radius: 8px;
}
hr {
border: 0;
height: 1px;
background: var(--card-border);
margin: 1.5rem 0;
}
/* Quick trade styles */
.quick-trade-box h4 {
font-size: 0.9rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
/* Grid columns & Responsiveness */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.trade-history-card {
grid-column: span 2;
}
/* History Ledger Styles */
.history-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 400px;
overflow-y: auto;
padding-right: 0.5rem;
}
.admin-users-table-wrap .table-responsive {
overflow-x: auto;
}
.admin-users-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.admin-users-table th,
.admin-users-table td {
padding: 0.7rem 0.9rem;
text-align: left;
border-bottom: 1px solid var(--card-border);
white-space: nowrap;
}
.admin-users-table th {
color: var(--text-secondary);
font-weight: 600;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.03em;
}
.admin-users-actions {
display: flex;
gap: 0.5rem;
}
.history-item {
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 0.85rem 1.2rem;
font-size: 0.85rem;
}
.history-details {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.history-title {
font-weight: 700;
}
.history-meta {
font-size: 0.75rem;
color: var(--text-secondary);
}
.history-pnl {
text-align: right;
font-weight: 700;
}
.history-pnl.win {
color: var(--success);
}
.history-pnl.loss {
color: var(--danger);
}
/* Dialog Overlay */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.dialog {
max-width: 400px;
width: 90%;
}
/* Audit log detail modal carries much richer content (multiple detail cards,
vote breakdown grid) than the generic 400px .dialog it also has, so it needs
its own width and a fixed header/footer with an internally scrolling body —
otherwise on shorter viewports the header (close ✕) and footer (dismiss
button) get pushed off-screen with no way to reach them. */
.audit-modal-card {
max-width: 820px;
width: 92%;
max-height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.audit-modal-card .dialog-header {
flex-shrink: 0;
}
.audit-modal-card .dialog-body {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
.audit-modal-card .dialog-footer {
flex-shrink: 0;
}
/* Footer */
footer {
text-align: center;
padding: 3rem 1.5rem;
font-size: 0.75rem;
color: var(--text-muted);
}
/* Media Queries for Mobile Responsiveness */
@media (max-width: 968px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.trade-history-card {
grid-column: span 1;
}
}
@media (max-width: 600px) {
header {
padding: 1rem;
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.form-row {
flex-direction: column;
gap: 0;
}
.price-value {
font-size: 1.8rem;
}
.container {
padding: 1rem;
}
}
/* Password Toggle Visibility Styles */
.password-input-container {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.password-input-container input {
padding-right: 2.8rem;
}
.btn-toggle-password {
position: absolute;
right: 0.75rem;
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 1.15rem;
cursor: pointer;
padding: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
outline: none;
transition: var(--transition-fast);
z-index: 10;
}
.btn-toggle-password:hover {
color: var(--primary);
transform: scale(1.1);
}
/* Hide default browser password reveal/clear icons (Edge, Chrome, Safari) */
.password-input-container input::-ms-reveal,
.password-input-container input::-ms-clear {
display: none;
}
/* Chart Card & Container Styles */
.chart-card {
margin-bottom: 2rem;
padding: 1.5rem;
}
.chart-container {
width: 100%;
height: 400px;
margin-top: 1rem;
border-radius: 12px;
overflow: hidden;
position: relative;
background: rgba(15, 23, 42, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.chart-legend {
display: flex;
align-items: center;
font-size: 1rem;
gap: 8px;
}
.btn-reset-zoom {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #cbd5e1;
font-size: 0.72rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
cursor: pointer;
transition: var(--transition-fast);
margin-left: 4px;
}
.btn-reset-zoom:hover {
background: rgba(0, 242, 254, 0.12);
border-color: rgba(0, 242, 254, 0.4);
color: #fff;
}
@media (max-width: 768px) {
.chart-container {
height: 300px;
}
}
/* Strategy Selector Grid */
.strategy-selector-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
margin-top: 10px;
}
.strategy-card {
background: rgba(30, 41, 59, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 12px;
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
transition: all var(--transition-fast) ease;
-webkit-user-select: none;
user-select: none;
}
.strategy-card:hover {
background: rgba(30, 41, 59, 0.6);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.strategy-card.active {
background: rgba(59, 130, 246, 0.15);
border-color: var(--primary);
box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}
.strategy-card-icon {
font-size: 1.4rem;
}
.strategy-card-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.strategy-card-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
}
.strategy-card-desc {
font-size: 0.72rem;
color: var(--text-muted);
line-height: 1.3;
}
/* Version Display Badge */
.version-display {
text-align: center;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.25);
margin-top: 15px;
font-weight: 500;
}
.autocomplete-input {
width: 100%;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
padding: 10px 14px;
border-radius: 8px;
outline: none;
transition: var(--transition-fast);
}
.autocomplete-input:focus {
border-color: var(--primary);
box-shadow: 0 0 8px rgba(0, 242, 254, 0.2);
}
/* Chart Countdown Badge (inline in OHLC bar, next to the live clock).
margin-left:auto lives here (the FIRST of the pair) so it absorbs the row's
free space and drags the clock along right after it via the flex gap —
putting it on the clock instead doesn't pull the countdown badge with it. */
.chart-countdown-inline {
margin-left: auto;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 8px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.8rem;
color: #cbd5e1;
z-index: 10;
pointer-events: none;
}
.trade-status-badge {
background: rgba(16, 185, 129, 0.2);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.4);
padding: 2px 8px;
border-radius: 4px;
font-weight: 600;
}
/* Presets & Help Bar */
.strategy-preset-bar {
margin-bottom: 12px;
}
.preset-label-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.btn-text-help {
background: none;
border: none;
color: var(--primary);
font-size: 0.8rem;
cursor: pointer;
font-weight: 600;
text-decoration: underline;
}
.preset-buttons-grid {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.btn-preset {
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text);
padding: 6px 12px;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition-fast);
}
.btn-preset:hover {
background: rgba(59, 130, 246, 0.2);
border-color: var(--primary);
}
/* History Header Actions */
.history-actions-row {
display: flex;
gap: 8px;
align-items: center;
}
/* Wide Modals & Settings */
.modal-wide {
max-width: 650px !important;
width: 90% !important;
}
.settings-sections {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 12px;
}
.settings-block {
background: rgba(30, 41, 59, 0.3);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 16px;
}
.settings-block h4 {
margin-bottom: 12px;
color: var(--primary);
font-size: 0.95rem;
}
.checkbox-row {
margin-bottom: 10px;
}
.checkbox-container {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.85rem;
}
/* Help Modal Content */
.help-content {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 400px;
overflow-y: auto;
padding-right: 6px;
margin-top: 12px;
}
.help-item {
background: rgba(30, 41, 59, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 12px;
}
.help-item h4 {
font-size: 0.9rem;
color: var(--primary);
margin-bottom: 4px;
}
.help-item p {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.4;
}
.highlight-box {
background: rgba(59, 130, 246, 0.15);
border-color: var(--primary);
}
/* Auth & Navigation Initial States (FOUC Flash Prevention) */
html.is-authenticated #auth-section {
display: none !important;
}
html.is-authenticated #dashboard-section {
display: block !important;
}
html.is-authenticated #user-profile-info {
display: flex !important;
}
html.is-guest #auth-section {
display: block !important;
}
html.is-guest #dashboard-section {
display: none !important;
}
html.is-guest #user-profile-info {
display: none !important;
}
html.is-guest #btn-sidebar-toggle,
html.is-guest #btn-theme-toggle,
html.is-guest #lang-dropdown-wrapper,
html.is-guest .app-sidebar,
html.is-guest #sidebar-backdrop {
display: none !important;
}
/* Lock Screen Overlay */
html.is-screen-locked #lock-screen-overlay {
display: flex !important;
z-index: 999999 !important;
}
html.is-screen-locked #dashboard-section,
html.is-screen-locked #auth-section,
html.is-screen-locked header,
html.is-screen-locked .blob {
display: none !important;
}
.lock-screen-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #0b0f19;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
}
.lock-card {
max-width: 420px;
width: 90%;
text-align: center;
padding: 2.5rem;
}
.lock-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.lock-bot-status {
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #10b981;
border-radius: 8px;
padding: 8px 12px;
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
}
/* Robot Status Icon Badge with Hover Tooltip */
.chart-header-left {
display: flex;
align-items: center;
gap: 14px;
}
.bot-status-icon-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(255, 255, 255, 0.15);
font-size: 1.15rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-user-select: none;
user-select: none;
opacity: 0.6;
}
/* .help-tooltip-trigger (defined later in this file, for the generic global-tooltip-box
system) shares this element and would otherwise shrink the emoji via its own 0.85rem
font-size winning by source order — .bot-emoji has no font-size of its own, so it
inherits directly from this badge and needs the larger size pinned explicitly. */
.bot-status-icon-badge.help-tooltip-trigger {
font-size: 1.15rem;
}
.bot-status-icon-badge.active {
opacity: 1;
background: rgba(16, 185, 129, 0.15);
border-color: #10b981;
box-shadow: 0 0 14px rgba(16, 185, 129, 0.45);
animation: botIconGlow 2s infinite alternate;
}
@keyframes botIconGlow {
0% {
box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
border-color: rgba(16, 185, 129, 0.6);
}
100% {
box-shadow: 0 0 18px rgba(16, 185, 129, 0.7);
border-color: #10b981;
}
}
.bot-hover-tooltip {
position: absolute;
top: 50%;
left: calc(100% + 10px);
transform: translateY(-50%);
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: #cbd5e1;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
pointer-events: none;
z-index: 25;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.bot-status-icon-badge.active .bot-hover-tooltip {
border-color: rgba(16, 185, 129, 0.5);
color: #10b981;
background: rgba(6, 78, 59, 0.9);
}
.bot-status-icon-badge:hover .bot-hover-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(2px);
}
/* Header User Profile Layout Fix */
.user-profile {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: nowrap;
}
.user-email {
font-size: 0.85rem;
color: var(--text-secondary);
white-space: nowrap;
margin-right: 4px;
}
.trading-mode-badge {
background: rgba(0, 242, 254, 0.1);
border: 1px solid rgba(0, 242, 254, 0.3);
color: var(--primary);
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.05em;
white-space: nowrap;
display: inline-flex;
align-items: center;
}
.sidebar-user-block {
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-user-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--text-secondary);
}
.sidebar-user-text {
min-width: 0;
}
.sidebar-user-label {
display: block;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
opacity: 0.75;
}
.sidebar-logout-link {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
width: 100%;
margin-top: 12px;
padding: 8px 0;
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: color 0.15s ease;
}
.sidebar-logout-link svg {
width: 16px;
height: 16px;
}
.sidebar-logout-link:hover {
color: var(--danger, #ef4444);
}
/* Left Side Drawer for Settings */
.drawer-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(15, 23, 42, 0.75);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 9000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
display: flex;
}
.drawer-overlay.active {
opacity: 1;
visibility: visible;
}
.settings-drawer {
position: fixed;
top: 0;
left: 0;
width: 520px;
max-width: 95vw;
height: 100vh;
background: #0f172a;
border-right: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 10px 0 35px rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
z-index: 9001;
transform: translateX(-100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-overlay.active .settings-drawer {
transform: translateX(0);
}
.drawer-header {
padding: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
justify-content: space-between;
align-items: flex-start;
background: rgba(30, 41, 59, 0.4);
}
.drawer-tab-nav {
display: flex;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(15, 23, 42, 0.9);
}
.drawer-tab-btn {
flex: 1;
padding: 12px 14px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-secondary);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition-fast);
outline: none;
}
.drawer-tab-btn:hover {
color: #fff;
background: rgba(255, 255, 255, 0.04);
}
.drawer-tab-btn.active {
color: var(--primary);
border-bottom-color: var(--primary);
background: rgba(0, 242, 254, 0.05);
}
.drawer-tab-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.drawer-title-group h3 {
font-size: 1.15rem;
color: var(--text-primary);
margin-bottom: 4px;
}
.drawer-subtitle {
font-size: 0.78rem;
color: var(--text-secondary);
}
.btn-drawer-close {
background: none;
border: none;
color: var(--text-secondary);
font-size: 1.25rem;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: var(--transition-fast);
}
.btn-drawer-close:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.drawer-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.drawer-section {
background: rgba(30, 41, 59, 0.3);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
padding: 1.25rem;
}
.drawer-section-title {
font-size: 0.85rem;
color: var(--primary);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
.drawer-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.drawer-row:last-child {
border-bottom: none;
}
.drawer-row-disabled {
opacity: 0.5;
pointer-events: none;
}
.drawer-row-note {
font-size: 0.78rem;
line-height: 1.4;
color: var(--text-muted);
background: rgba(245, 158, 11, 0.08);
border: 1px dashed rgba(245, 158, 11, 0.3);
border-radius: 6px;
padding: 0.5rem 0.75rem;
margin-bottom: 0.75rem;
}
.drawer-row-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--text-primary);
display: flex;
flex-direction: column;
gap: 2px;
cursor: pointer;
flex: 1;
padding-right: 12px;
}
.drawer-row-label small {
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 400;
}
.drawer-row-control {
display: flex;
align-items: center;
}
.inline-input-group {
display: flex;
align-items: center;
gap: 6px;
}
.drawer-input-sm {
width: 70px;
text-align: center;
background: rgba(15, 23, 42, 0.8);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 0.85rem;
outline: none;
}
.drawer-input-sm:focus {
border-color: var(--primary);
box-shadow: 0 0 8px rgba(0, 242, 254, 0.3);
}
.input-unit {
font-size: 0.8rem;
color: var(--text-secondary);
}
.drawer-form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 1rem;
}
.drawer-form-group label {
font-size: 0.82rem;
color: var(--text-secondary);
}
.drawer-input {
width: 100%;
background: rgba(15, 23, 42, 0.8);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
padding: 10px 14px;
border-radius: 8px;
font-size: 0.85rem;
outline: none;
}
.drawer-input:focus {
border-color: var(--primary);
box-shadow: 0 0 8px rgba(0, 242, 254, 0.3);
}
.drawer-footer {
padding: 1.25rem 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(30, 41, 59, 0.4);
display: flex;
gap: 12px;
}
.drawer-footer button {
flex: 1;
}
.custom-toggle {
width: 18px;
height: 18px;
accent-color: var(--primary);
cursor: pointer;
}
.drawer-row-stack {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
background: rgba(30, 41, 59, 0.4);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
margin-bottom: 12px;
}
.drawer-row-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.drawer-row-sub {
margin-top: 4px;
}
.sub-label {
font-size: 0.85rem;
color: #94a3b8;
}
.help-box-tip {
background: rgba(14, 165, 233, 0.1);
border-left: 3px solid #0ea5e9;
border-radius: 4px;
padding: 8px 12px;
font-size: 0.82rem;
line-height: 1.4;
color: #cbd5e1;
margin-top: 4px;
}
.help-box-tip strong {
color: #38bdf8;
}
/* DIRECTIONAL PREDICTION BADGES & ANIMATIONS */
.direction-badge-box {
margin: 10px 0 15px 0;
}
.prediction-direction-badge {
padding: 8px 20px;
border-radius: 30px;
font-size: 1.15rem;
font-weight: 800;
letter-spacing: 0.06em;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.direction-buy {
background: rgba(16, 185, 129, 0.15);
border: 2px solid #10b981;
color: #10b981;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
}
.direction-sell {
background: rgba(239, 68, 68, 0.15);
border: 2px solid #ef4444;
color: #ef4444;
box-shadow: 0 0 20px rgba(239, 68, 68, 0.35);
}
.direction-hold {
background: rgba(245, 158, 11, 0.15);
border: 2px solid #f59e0b;
color: #f59e0b;
box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
}
.direction-arrow {
font-size: 1.35rem;
display: inline-block;
animation: arrowPulse 1.2s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes arrowPulse {
0% {
transform: scale(1) translateY(0);
}
100% {
transform: scale(1.25) translateY(-3px);
}
}
.horizon-desc {
font-size: 0.78rem;
color: var(--text-secondary);
display: block;
}
/* ARCHITECTURE GUIDE BOX IN DRAWER */
.nn-architecture-guide {
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(0, 242, 254, 0.25);
border-radius: 8px;
padding: 10px 12px;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.45;
}
.nn-architecture-guide .guide-title {
color: var(--primary);
font-weight: 700;
display: block;
margin-bottom: 6px;
}
.nn-architecture-guide code {
background: rgba(0, 242, 254, 0.15);
color: #4facfe;
padding: 2px 5px;
border-radius: 4px;
font-weight: 700;
}
/* DRAWER ROW HEADER & FIXED HELP TOOLTIP TRIGGERS */
.drawer-row-header {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
color: var(--text-primary);
position: relative;
}
.help-tooltip-trigger {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
color: var(--primary);
font-size: 0.85rem;
line-height: 1;
-webkit-user-select: none;
user-select: none;
transition: color 0.2s ease;
}
.help-tooltip-trigger:hover {
color: #00f2fe;
transform: none;
/* Mantém o ícone 100% fixo sem qualquer deslocamento */
}
/* GLOBAL FLOATING TOOLTIP BOX (SUPERIMPOSES OVER ALL DRAWERS & MODALS) */
.global-tooltip-box {
position: fixed;
background: #0f172a;
color: #f1f5f9;
border: 1px solid rgba(0, 242, 254, 0.6);
padding: 10px 14px;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 400;
line-height: 1.45;
white-space: normal;
width: 270px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.95);
pointer-events: none;
z-index: 999999;
/* Fica por CIMA de qualquer gaveta, modal ou scrollbar */
opacity: 0;
transition: opacity 0.15s ease;
}
/* WALLET PNL PERFORMANCE SUMMARY */
.wallet-pnl-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
padding: 0.75rem;
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
}
html.light-theme .wallet-pnl-summary {
background: #f8fafc !important;
border-color: #e2e8f0 !important;
}
.pnl-summary-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem 0.25rem;
background: rgba(255, 255, 255, 0.025);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: transform 0.15s ease, background 0.15s ease;
}
html.light-theme .pnl-summary-card {
background: #ffffff !important;
border-color: #e2e8f0 !important;
}
.pnl-summary-card:hover {
background: rgba(255, 255, 255, 0.04);
transform: translateY(-1px);
}
.pnl-summary-card .pnl-card-title {
font-size: 0.68rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.2rem;
text-align: center;
}
.pnl-summary-card .pnl-card-value {
font-size: 0.92rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.pnl-summary-card .pnl-card-sub {
font-size: 0.72rem;
font-weight: 500;
margin-top: 0.15rem;
}
/* TRADINGVIEW / BINANCE STYLE CHART ENHANCEMENTS */
.chart-container {
position: relative;
width: 100%;
height: 500px;
background: #0f172a;
border-radius: 0 0 12px 12px;
overflow: hidden;
}
#tradingview-chart {
width: 100%;
height: 620px;
}
@media (max-width: 768px) {
#tradingview-chart {
height: 420px;
}
}
.chart-ohlc-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 6px 14px;
background: rgba(15, 23, 42, 0.95);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-family: 'JetBrains Mono', monospace, Roboto, sans-serif;
font-size: 0.8rem;
color: #94a3b8;
z-index: 5;
}
.chart-ohlc-bar .ohlc-tag {
font-weight: 700;
color: #f1f5f9;
background: rgba(255, 255, 255, 0.08);
padding: 2px 8px;
border-radius: 4px;
margin-right: 4px;
}
.chart-ohlc-bar .ohlc-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.chart-ohlc-bar .ohlc-lbl {
color: #64748b;
font-weight: 500;
}
.chart-ohlc-bar .ohlc-val {
color: #f8fafc;
font-weight: 600;
}
.chart-ohlc-bar .ohlc-change {
font-weight: 700;
padding: 1px 6px;
border-radius: 3px;
}
.chart-ohlc-bar .ohlc-change.pos {
color: #10b981;
background: rgba(16, 185, 129, 0.12);
}
.chart-ohlc-bar .ohlc-change.neg {
color: #ef4444;
background: rgba(239, 68, 68, 0.12);
}
/* REAL-TIME BINANCE CLOCK OVERLAY (TOP-RIGHT OF OHLC BAR) */
.chart-live-clock-inline {
background: rgba(30, 41, 59, 0.85);
border: 1px solid rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 3px 10px;
border-radius: 6px;
font-family: 'JetBrains Mono', monospace, sans-serif;
font-size: 0.78rem;
font-weight: 600;
color: #e2e8f0;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* UTILITY CLASSES TO REPLACE INLINE STYLES */
.d-none {
display: none;
}
.sub-muted-note {
opacity: 0.6;
font-size: 0.75rem;
display: block;
margin-top: 2px;
}
.drawer-input-w80 {
width: 80px;
}
.drawer-input-w85 {
width: 85px;
}
/* SYSTEM AUDIT & EXECUTION LOG PANEL STYLES */
.card-audit-log {
grid-column: 1 / -1;
margin-top: 0;
border: 1px solid rgba(6, 182, 212, 0.2);
background: rgba(11, 15, 25, 0.95);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
border-radius: 12px;
}
.audit-filter-select,
.audit-filter-search {
background: rgba(15, 23, 42, 0.8) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: #e2e8f0 !important;
font-size: 0.8rem !important;
}
.audit-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
}
.audit-toolbar > div:first-child {
flex: 1 1 480px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.audit-toolbar > div:last-child {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
margin-left: auto;
}
.audit-filter-label {
display: inline-block !important;
margin-bottom: 0 !important;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.audit-filter-select {
width: auto !important;
min-width: 150px;
}
.audit-filter-search {
width: 180px !important;
}
@media (min-width: 768px) {
.card-audit-log .card-header small {
white-space: nowrap !important;
}
.audit-filter-label {
white-space: nowrap !important;
}
}
.audit-log-stream-container {
max-height: 420px;
overflow-y: auto;
background: #060913;
font-family: 'JetBrains Mono', monospace;
font-size: 0.82rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.audit-log-row {
display: grid;
grid-template-columns: 145px 175px 115px 1fr 65px 55px;
align-items: center;
gap: 8px;
padding: 8px 18px 8px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.audit-log-row:hover {
background: rgba(6, 182, 212, 0.12);
}
.audit-col-time {
color: #64748b;
font-size: 0.75rem;
white-space: nowrap;
}
.audit-col-badge {
display: flex;
align-items: center;
}
.audit-col-ticker {
font-size: 0.78rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 8px;
}
.audit-col-details {
color: #94a3b8;
font-size: 0.78rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.audit-col-ping {
display: flex;
justify-content: center;
}
.audit-col-action {
display: flex;
justify-content: flex-end;
}
.audit-badge {
padding: 2px 8px;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.audit-badge-info {
background: rgba(56, 189, 248, 0.15);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.3);
}
.audit-badge-success {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.audit-badge-warn {
background: rgba(245, 158, 11, 0.15);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.3);
}
.audit-badge-danger {
background: rgba(239, 68, 68, 0.15);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.audit-log-time {
color: #64748b;
font-size: 0.75rem;
}
.audit-log-action {
color: #f8fafc;
font-weight: 600;
}
.audit-log-details {
color: #94a3b8;
font-size: 0.78rem;
}
/* INTERACTIVE AUDIT MODAL STYLES */
.modal-backdrop-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(3, 7, 18, 0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 1000000;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
.lock-logout-link {
font-size: 0.82rem;
text-decoration: underline;
cursor: pointer;
}
.modal-card-lg {
background: #0b0f19;
border: 1px solid rgba(6, 182, 212, 0.3);
border-radius: 14px;
max-width: 680px;
width: 100%;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(6, 182, 212, 0.15);
overflow: hidden;
}
.audit-story-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
margin-top: 10px;
}
.audit-story-card {
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 12px;
}
.audit-story-card-full {
grid-column: 1 / -1;
}
.audit-story-card-title {
font-size: 0.78rem;
color: #06b6d4;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 8px;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
}
.audit-metric-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 4px 12px;
padding: 4px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
font-size: 0.82rem;
}
.audit-metric-label {
color: #94a3b8;
flex-shrink: 0;
}
.audit-metric-value {
color: #f1f5f9;
font-weight: 600;
font-family: 'JetBrains Mono', monospace;
text-align: right;
word-break: break-word;
overflow-wrap: anywhere;
min-width: 0;
}
/* CHART HEADER ROW & ALIGNMENT */
.chart-header-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
margin-bottom: 14px;
width: 100%;
}
.chart-header-left h3 {
margin: 0;
padding: 0;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.2;
}
/* LINK TOGGLE STYLING (NO UGLY BLUE UNDERLINE) */
.link-toggle {
color: #06b6d4 !important;
text-decoration: none !important;
font-size: 0.85rem;
font-weight: 600;
transition: color 0.2s ease;
display: inline-block;
}
.link-toggle:hover {
color: #22d3ee !important;
text-decoration: underline !important;
}
/* LOGIN SCREEN LANGUAGE SELECTOR */
.auth-lang-select {
background: rgba(15, 23, 42, 0.8) !important;
border: 1px solid rgba(6, 182, 212, 0.3) !important;
color: #f1f5f9 !important;
border-radius: 8px !important;
padding: 8px 12px !important;
font-size: 0.9rem !important;
width: 100%;
}
/* ==========================================================================
LIGHT THEME OVERRIDES (PREMIUM WHITE MODE DESIGN SYSTEM)
========================================================================== */
html.light-theme,
html.light-theme body {
background-color: #f8fafc !important;
color: #0f172a !important;
}
/* Cards, Modals, Dialogs & Backdrops */
html.light-theme .card,
html.light-theme .card-glass,
html.light-theme .dialog,
html.light-theme .modal-card,
html.light-theme .lock-card,
html.light-theme .auth-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 4px 25px rgba(15, 23, 42, 0.06) !important;
color: #0f172a !important;
}
/* Header & Brand */
html.light-theme header {
background: #ffffff !important;
border-bottom: 1px solid #e2e8f0 !important;
}
html.light-theme .brand-title,
html.light-theme .card-title,
html.light-theme h1, html.light-theme h2, html.light-theme h3, html.light-theme h4, html.light-theme h5,
html.light-theme label,
html.light-theme .price-badge,
html.light-theme .ticker-badge {
color: #0f172a !important;
}
html.light-theme .btn-reset-zoom {
background: #f1f5f9 !important;
border-color: #cbd5e1 !important;
color: #334155 !important;
}
html.light-theme .btn-reset-zoom:hover {
background: #e0f2fe !important;
border-color: #38bdf8 !important;
color: #0f172a !important;
}
html.light-theme .brand-subtitle,
html.light-theme .user-email {
color: #475569 !important;
}
/* Custom Flag Dropdowns */
html.light-theme .custom-flag-btn,
html.light-theme .lang-dropdown-btn {
background: #f1f5f9 !important;
border-color: #cbd5e1 !important;
color: #0f172a !important;
box-shadow: none !important;
}
/* Execution mode toggle (Simulation/Real) and strategy quick-preset buttons */
html.light-theme .toggle-container {
background: #f1f5f9 !important;
border-color: #cbd5e1 !important;
}
html.light-theme .toggle-btn {
color: #475569 !important;
}
html.light-theme .toggle-btn.active {
background: #ffffff !important;
color: #0f172a !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
}
html.light-theme .btn-preset {
background: #f1f5f9 !important;
border-color: #cbd5e1 !important;
color: #0f172a !important;
}
html.light-theme .btn-preset:hover {
background: #e0f2fe !important;
border-color: var(--primary) !important;
}
/* Chart "next candle" countdown badge */
html.light-theme .chart-countdown-inline {
background: #ffffff !important;
border-color: #e2e8f0 !important;
color: #334155 !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}
html.light-theme .lang-dropdown-menu {
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}
html.light-theme .lang-option {
color: #1e293b !important;
}
html.light-theme .lang-option:hover,
html.light-theme .lang-option.selected {
background: #f0f9ff !important;
color: #0284c7 !important;
}
/* Settings Drawer (Fixes washed out text & dark blue background) */
html.light-theme .settings-drawer {
background: #ffffff !important;
border-right: 1px solid #cbd5e1 !important;
box-shadow: 10px 0 35px rgba(0, 0, 0, 0.12) !important;
color: #0f172a !important;
}
html.light-theme .drawer-header {
background: #f8fafc !important;
border-bottom: 1px solid #e2e8f0 !important;
}
html.light-theme .drawer-tab-nav {
background: #f1f5f9 !important;
border-bottom: 1px solid #e2e8f0 !important;
}
html.light-theme .drawer-tab-btn {
color: #475569 !important;
}
html.light-theme .drawer-tab-btn:hover {
color: #0f172a !important;
background: #e2e8f0 !important;
}
html.light-theme .drawer-tab-btn.active {
color: #0284c7 !important;
border-bottom-color: #0284c7 !important;
background: #e0f2fe !important;
}
html.light-theme .drawer-section {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
}
html.light-theme .drawer-section-title {
color: #0284c7 !important;
}
html.light-theme .drawer-row {
border-bottom-color: #f1f5f9 !important;
}
html.light-theme .drawer-row-label {
color: #0f172a !important;
}
html.light-theme .drawer-row-label span {
color: #0f172a !important;
}
html.light-theme .drawer-row-label small,
html.light-theme .input-unit,
html.light-theme .drawer-subtitle {
color: #64748b !important;
}
html.light-theme .drawer-input,
html.light-theme .drawer-input-sm {
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
color: #0f172a !important;
}
html.light-theme .drawer-footer {
background: #f8fafc !important;
border-top: 1px solid #e2e8f0 !important;
}
html.light-theme .btn-drawer-close {
color: #64748b !important;
}
html.light-theme .btn-drawer-close:hover {
color: #0f172a !important;
background: #e2e8f0 !important;
}
/* Indicators & Strategy Cards */
html.light-theme .indicator-row,
html.light-theme .strategy-card {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
color: #0f172a !important;
}
html.light-theme .strategy-card:hover {
background: #f1f5f9 !important;
border-color: #cbd5e1 !important;
}
html.light-theme .strategy-card.active {
background: #f0f9ff !important;
border-color: #0284c7 !important;
color: #0369a1 !important;
}
html.light-theme .indicator-label,
html.light-theme .strategy-desc {
color: #475569 !important;
}
html.light-theme .indicator-value,
html.light-theme .strategy-title {
color: #0f172a !important;
}
/* AI Brain & ML Result Panel */
html.light-theme .ml-result-panel,
html.light-theme .ai-stats-card,
html.light-theme .prediction-card {
background: #f1f5f9 !important;
border: 1px solid #cbd5e1 !important;
color: #0f172a !important;
}
html.light-theme .ml-result-panel .text-slate,
html.light-theme .ml-result-panel small,
html.light-theme .text-muted {
color: #475569 !important;
}
html.light-theme .predicted-price-value {
color: #0f172a !important;
}
html.light-theme .price-value {
color: #0f172a !important;
text-shadow: none !important;
}
html.light-theme .metric-val {
color: #0f172a !important;
}
/* Wallet & Quick Trading Panel */
html.light-theme .wallet-pnl-bar,
html.light-theme .wallet-stat-card,
html.light-theme .wallet-stat-box {
background: #f8fafc !important;
border: 1px solid #cbd5e1 !important;
color: #0f172a !important;
}
html.light-theme .wallet-stat-label {
color: #475569 !important;
}
html.light-theme .wallet-balance-amount {
color: #0f172a !important;
}
/* Chart & OHLC Bar */
html.light-theme .chart-ohlc-bar {
background: #f1f5f9 !important;
border-bottom: 1px solid #e2e8f0 !important;
color: #334155 !important;
}
html.light-theme .ohlc-tag,
html.light-theme .ohlc-lbl {
color: #64748b !important;
}
html.light-theme .ohlc-val {
color: #0f172a !important;
}
html.light-theme .chart-live-clock-inline,
html.light-theme .bot-status-icon-badge {
background: #f1f5f9 !important;
border: 1px solid #cbd5e1 !important;
color: #0f172a !important;
}
/* Recent History & Audit Stream */
html.light-theme .history-item {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
color: #0f172a !important;
}
html.light-theme .history-item:hover {
background: #f0f9ff !important;
}
html.light-theme .history-ticker,
html.light-theme .audit-log-action {
color: #0f172a !important;
}
html.light-theme .history-sub,
html.light-theme .audit-col-time {
color: #64748b !important;
}
html.light-theme .audit-log-stream-container {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
}
html.light-theme .audit-log-row {
border-bottom: 1px solid #e2e8f0 !important;
color: #1e293b !important;
}
html.light-theme .audit-log-row:hover {
background: #f0f9ff !important;
}
/* Audit Log Detail Modal */
html.light-theme .audit-story-card {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
color: #0f172a !important;
}
html.light-theme .audit-story-card-title {
color: #0284c7 !important;
}
html.light-theme .audit-metric-label {
color: #475569 !important;
}
html.light-theme .audit-metric-value {
color: #0f172a !important;
}
/* General Text & Inputs Overrides */
html.light-theme .text-slate {
color: #334155 !important;
}
html.light-theme small {
color: #64748b !important;
}
html.light-theme input,
html.light-theme select,
html.light-theme textarea {
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
color: #0f172a !important;
}
html.light-theme input::placeholder,
html.light-theme textarea::placeholder {
color: #94a3b8 !important;
}
/* Buttons Overrides */
html.light-theme .btn-secondary,
html.light-theme .btn-outline-cyan {
background: #f1f5f9 !important;
border-color: #cbd5e1 !important;
color: #1e293b !important;
}
html.light-theme .btn-secondary:hover,
html.light-theme .btn-outline-cyan:hover {
background: #e2e8f0 !important;
color: #0f172a !important;
}
/* Help Box Tip */
html.light-theme .help-box-tip {
background: #f0f9ff !important;
border: 1px solid #bae6fd !important;
color: #0369a1 !important;
}
/* Global Floating Tooltip Box (the small "i" info popups) */
html.light-theme .global-tooltip-box {
background: #f0f9ff !important;
color: #0369a1 !important;
border: 1px solid #7dd3fc !important;
box-shadow: 0 12px 35px rgba(15, 23, 42, 0.18) !important;
}
/* Override base header style for .main-header */
header.main-header {
padding: 12px 24px;
background: rgba(11, 15, 25, 0.9);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: sticky;
top: 0;
z-index: 1060;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: space-between;
}
.main-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
background: rgba(11, 15, 25, 0.9);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: sticky;
top: 0;
z-index: 1060;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
.header-right {
display: flex;
align-items: center;
gap: 12px;
}
.btn-hamburger {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #f8fafc;
font-size: 1.3rem;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.btn-hamburger:hover {
background: rgba(6, 182, 212, 0.15);
border-color: var(--cyan);
color: var(--cyan);
}
/* SIDEBAR DRAWER */
.app-sidebar {
position: fixed;
top: 65px;
left: 0;
width: 270px;
height: calc(100vh - 65px);
background: rgba(11, 15, 25, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-right: 1px solid rgba(255, 255, 255, 0.08);
padding: 20px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1050;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
}
.app-sidebar.open {
transform: translateX(0);
}
.sidebar-backdrop {
position: fixed;
top: 65px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
z-index: 1040;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.sidebar-backdrop.show {
opacity: 1;
pointer-events: auto;
}
/* Body Pinned Shift */
body.sidebar-pinned .app-sidebar {
transform: translateX(0);
box-shadow: none;
}
body.sidebar-pinned .app-main-content {
margin-left: 270px;
transition: margin-left 0.3s ease;
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-pin-sidebar {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #94a3b8;
padding: 4px 10px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-pin-sidebar.pinned {
background: rgba(6, 182, 212, 0.2);
border-color: var(--cyan);
color: var(--cyan);
}
.btn-close-sidebar {
background: transparent;
border: none;
color: #94a3b8;
font-size: 1.1rem;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
}
.btn-close-sidebar:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.1);
}
.sidebar-menu {
display: flex;
flex-direction: column;
gap: 8px;
}
.sidebar-nav-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 16px;
background: transparent;
border: 1px solid transparent;
border-radius: 12px;
color: #94a3b8;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
}
/* Two-class selector outranks the single-class `.sidebar-nav-item` above on
specificity, regardless of source order, so this reliably wins where a plain
`.d-none { display:none }` (equal specificity, declared earlier in this file) does
not. Without this, the admin-only "Usuários" button stays visible to every user —
confirmed in production: JS was correctly toggling the class, CSS just never hid it. */
.sidebar-nav-item.d-none {
display: none;
}
.sidebar-nav-item:hover {
background: rgba(255, 255, 255, 0.05);
color: #f8fafc;
transform: translateX(4px);
}
.sidebar-nav-item.active {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(168, 85, 247, 0.18));
border: 1px solid rgba(6, 182, 212, 0.4);
color: var(--cyan);
box-shadow: 0 4px 15px rgba(6, 182, 212, 0.15);
}
.sidebar-footer {
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* Light Theme Overrides for Header & Sidebar Drawer */
html.light-theme .main-header {
background: #ffffff !important;
border-bottom: 1px solid #e2e8f0 !important;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}
html.light-theme .btn-hamburger {
background: #f1f5f9 !important;
border-color: #cbd5e1 !important;
color: #0f172a !important;
}
html.light-theme .app-sidebar {
background: #ffffff !important;
border-right: 1px solid #e2e8f0 !important;
box-shadow: 4px 0 20px rgba(15, 23, 42, 0.08) !important;
}
html.light-theme .sidebar-header,
html.light-theme .sidebar-footer {
border-color: #e2e8f0 !important;
}
html.light-theme .sidebar-nav-item {
color: #475569 !important;
}
html.light-theme .sidebar-nav-item:hover {
background: #f1f5f9 !important;
color: #0f172a !important;
}
html.light-theme .sidebar-nav-item.active {
background: #e0f2fe !important;
border-color: #0284c7 !important;
color: #0284c7 !important;
}
html.light-theme .btn-pin-sidebar {
background: #f1f5f9 !important;
border-color: #cbd5e1 !important;
color: #475569 !important;
}
html.light-theme .btn-pin-sidebar.pinned {
background: #e0f2fe !important;
border-color: #0284c7 !important;
color: #0284c7 !important;
}
/* ==========================================================================
UTILITY SPACING & GAP CLASSES
========================================================================== */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
/* Ticker above chart legend margin spacing */
#chart-legend-ticker {
margin-right: 8px;
}
/* Light Theme Contrast overrides */
html.light-theme .app-sidebar .sidebar-brand-title strong {
color: #0f172a !important;
}
html.light-theme .app-sidebar .sidebar-brand-title small {
color: #0284c7 !important;
}
html.light-theme .btn-close-sidebar {
color: #475569 !important;
}
html.light-theme .btn-close-sidebar:hover {
color: #0f172a !important;
background: #f1f5f9 !important;
}
html.light-theme .sidebar-user-email {
color: #0f172a !important;
}
html.light-theme select option {
background-color: #ffffff !important;
color: #0f172a !important;
}
html.light-theme .logo-text h1 {
background: linear-gradient(to right, #0f172a, #0891b2) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
html.light-theme .blob {
opacity: 0.06 !important;
}
/* ==================== MARKET SCANNER TAB (Analysis & AI) ==================== */
.badge.bg-green {
background: var(--success-glow);
border-color: var(--success);
color: var(--success);
box-shadow: 0 0 8px var(--success-glow);
}
.badge.bg-danger {
background: var(--danger-glow);
border-color: var(--danger);
color: var(--danger);
box-shadow: 0 0 8px var(--danger-glow);
}
.badge.bg-secondary {
background: rgba(156, 163, 175, 0.12);
border-color: rgba(156, 163, 175, 0.35);
color: var(--text-secondary);
box-shadow: none;
}
.progress-bar-bg {
width: 100%;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
border-radius: 999px;
transition: width 0.4s ease;
}
.progress-bar-fill.bg-cyan { background: var(--primary); }
.progress-bar-fill.bg-green { background: var(--success); }
/* Whale / institutional summary row */
.whale-cards-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.whale-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 1rem 1.25rem;
}
.whale-title {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.whale-title-row {
display: flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.5rem;
}
.whale-title-row .whale-title {
margin-bottom: 0;
}
.whale-value {
display: block;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.25;
}
.whale-card small {
display: block;
margin-top: 0.25rem;
font-size: 0.72rem;
color: var(--text-muted);
}
/* Pareto chart */
.pareto-chart-container {
width: 100%;
}
.pareto-legend {
display: flex;
gap: 1.25rem;
margin-bottom: 0.5rem;
font-size: 0.75rem;
color: var(--text-secondary);
}
.pareto-legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.pareto-legend-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
display: inline-block;
}
.pareto-svg-wrap {
width: 100%;
height: auto;
display: block;
}
.pareto-bar {
fill: var(--primary);
transition: opacity 0.15s ease;
cursor: pointer;
}
.pareto-bar:hover {
opacity: 0.7;
}
.pareto-line {
fill: none;
stroke: var(--warning);
stroke-width: 1.5;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.pareto-dot {
fill: var(--warning);
stroke: var(--bg-dark);
stroke-width: 1.5;
cursor: pointer;
vector-effect: non-scaling-stroke;
}
.pareto-value-label {
fill: var(--text-primary);
font-size: 12px;
font-weight: 600;
text-anchor: middle;
}
.pareto-axis-label {
fill: var(--text-secondary);
font-size: 12px;
text-anchor: middle;
}
.pareto-gridline {
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
/* Scanner directives table — soft row lines */
.table-custom {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.table-custom thead th {
text-align: left;
padding: 0.65rem 0.85rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
border-bottom: 1px solid var(--card-border);
white-space: nowrap;
}
.table-custom tbody td {
padding: 0.7rem 0.85rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: var(--text-primary);
white-space: nowrap;
}
.table-custom tbody tr:last-child td {
border-bottom: none;
}
.table-custom tbody tr:hover td {
background: rgba(255, 255, 255, 0.025);
}
.table-responsive {
overflow-x: auto;
}
html.light-theme .whale-card {
background: #ffffff !important;
border-color: #e2e8f0 !important;
}
html.light-theme .table-custom tbody td {
border-color: #eef2f6 !important;
color: #0f172a !important;
}
html.light-theme .table-custom tbody tr:hover td {
background: #f8fafc !important;
}
html.light-theme .pareto-gridline {
stroke: rgba(15, 23, 42, 0.08) !important;
}
html.light-theme .pareto-value-label,
html.light-theme .oee-gauge-value {
fill: #0f172a !important;
}
html.light-theme .pareto-axis-label,
html.light-theme .oee-gauge-edge-label {
fill: #64748b !important;
}
/* ==================== PERFORMANCE DASHBOARD TAB ==================== */
.oee-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.oee-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.oee-label {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
}
.oee-value {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.2;
}
.oee-gauge-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 0.75rem 1.25rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.oee-gauge-svg {
width: 100%;
max-width: 180px;
height: auto;
display: block;
}
.oee-gauge-value {
fill: var(--text-primary);
font-size: 28px;
font-weight: 700;
}
.oee-gauge-edge-label {
fill: var(--text-muted);
font-size: 11px;
font-weight: 600;
}
.oee-gauge-track {
stroke: rgba(255, 255, 255, 0.08);
}
.oee-gauge-needle {
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.oee-gauge-needle-base {
fill: #fff;
stroke: var(--bg-dark);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.oee-gauge-target-tick {
stroke: var(--danger);
stroke-width: 3;
stroke-linecap: round;
cursor: pointer;
vector-effect: non-scaling-stroke;
}
.oee-gauge-card .oee-label {
margin-top: 0.25rem;
}
/* Pacing card */
.pacing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
.pacing-item {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 1rem 1.25rem;
}
.pacing-title {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.35rem;
}
.pacing-amount {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
}
/* OEE month-over-month trend lines */
.oee-trend-line-last {
fill: none;
stroke: var(--text-muted);
stroke-width: 1.5;
stroke-dasharray: 5 4;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.oee-trend-line-this {
fill: none;
stroke: var(--primary);
stroke-width: 1.75;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.oee-average-line {
stroke: var(--secondary);
stroke-width: 1.25;
stroke-dasharray: 3 4;
cursor: pointer;
vector-effect: non-scaling-stroke;
}
.oee-target-line {
stroke: var(--danger);
stroke-width: 1.25;
stroke-dasharray: 6 3;
cursor: pointer;
vector-effect: non-scaling-stroke;
}
/* Annual cumulative chart */
.annual-chart-wrapper {
width: 100%;
}
.annual-area-fill {
fill: var(--primary);
opacity: 0.12;
stroke: none;
}
.annual-target-line {
fill: none;
stroke: var(--warning);
stroke-width: 1.5;
stroke-dasharray: 6 4;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
/* Buy vs Sell daily bar chart */
.buysell-bar-buy {
fill: var(--success);
cursor: pointer;
transition: opacity 0.15s ease;
}
.buysell-bar-sell {
fill: var(--danger);
cursor: pointer;
transition: opacity 0.15s ease;
}
.buysell-bar-buy:hover,
.buysell-bar-sell:hover {
opacity: 0.75;
}
html.light-theme .oee-card,
html.light-theme .oee-gauge-card,
html.light-theme .pacing-item {
background: #ffffff !important;
border-color: #e2e8f0 !important;
}
html.light-theme .oee-gauge-track {
stroke: rgba(15, 23, 42, 0.08) !important;
}
html.light-theme .oee-gauge-needle {
stroke: #1e293b !important;
}
html.light-theme .oee-gauge-needle-base {
fill: #1e293b !important;
stroke: #ffffff !important;
}
/* Strategy voting transparency panel ("what the bot is seeing now") */
.vote-header-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.9rem;
}
.vote-filter-row {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.vote-filter-badge {
font-size: 0.78rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--card-border);
}
.vote-filter-ok {
color: var(--success);
border-color: rgba(34, 197, 94, 0.35);
background: rgba(34, 197, 94, 0.08);
}
.vote-filter-blocked {
color: var(--danger);
border-color: rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.08);
}
.vote-chip-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.6rem;
}
.vote-chip {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.8rem;
border-radius: 10px;
border: 1px solid var(--card-border);
background: var(--card-bg);
font-size: 0.82rem;
}
/* Strategy labels vary a lot in length across languages (e.g. "MACD Histogram Turning",
"Histograma MACD Virando") — without min-width:0 a flex child won't shrink below its
content's natural width, so a long label just overflowed the chip into its neighbor
instead of wrapping. */
.vote-chip span {
min-width: 0;
overflow-wrap: break-word;
font-size: 0.76rem;
line-height: 1.2;
}
.vote-chip strong {
flex-shrink: 0;
white-space: nowrap;
font-size: 0.76rem;
}
.vote-chip-weight {
font-weight: 600;
opacity: 0.75;
font-size: 0.7rem;
}
.vote-chip-buy {
border-color: rgba(34, 197, 94, 0.35);
}
.vote-chip-sell {
border-color: rgba(239, 68, 68, 0.35);
}
.vote-chip-neutral {
opacity: 0.75;
}
html.light-theme .vote-chip {
background: #ffffff !important;
border-color: #e2e8f0 !important;
color: #0f172a !important;
}
html.light-theme .vote-chip-buy {
border-color: rgba(34, 197, 94, 0.4) !important;
}
html.light-theme .vote-chip-sell {
border-color: rgba(239, 68, 68, 0.4) !important;
}
/* Multi-ticker slot switcher — one chip per bot_configs row the user has, shown above
the ticker/timeframe inputs in the Config card. */
.ticker-slots-strip {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.85rem;
}
.ticker-slot-chip {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--card-border);
background: var(--card-bg);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.ticker-slot-chip:hover {
border-color: var(--accent-cyan, #22d3ee);
}
.ticker-slot-chip.selected {
border-color: var(--accent-cyan, #22d3ee);
background: rgba(34, 211, 238, 0.1);
}
.ticker-slot-chip .slot-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #64748b;
flex-shrink: 0;
}
.ticker-slot-chip.slot-running .slot-dot {
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
}
.ticker-slot-chip .slot-remove {
margin-left: 0.15rem;
opacity: 0.55;
font-size: 0.85rem;
line-height: 1;
}
.ticker-slot-chip .slot-remove:hover {
opacity: 1;
color: #ef4444;
}
.ticker-slot-chip-add {
display: flex;
align-items: center;
padding: 0.35rem 0.7rem;
border-radius: 999px;
border: 1px dashed var(--card-border);
background: transparent;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
opacity: 0.85;
}
.ticker-slot-chip-add:hover {
opacity: 1;
border-color: var(--accent-cyan, #22d3ee);
}
html.light-theme .ticker-slot-chip {
background: #ffffff !important;
border-color: #e2e8f0 !important;
color: #0f172a !important;
}
html.light-theme .ticker-slot-chip.selected {
border-color: #06b6d4 !important;
background: rgba(6, 182, 212, 0.08) !important;
}
.vote-decision-banner {
margin-top: 0.75rem;
padding: 0.65rem 1rem;
border-radius: 10px;
font-weight: 700;
text-align: center;
}
.vote-decision-buy {
background: rgba(34, 197, 94, 0.12);
color: var(--success);
border: 1px solid rgba(34, 197, 94, 0.35);
}
.vote-decision-wait {
background: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
border: 1px solid var(--card-border);
}
.vote-decision-blocked {
background: rgba(239, 68, 68, 0.12);
color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.35);
}
/* Global toast notification */
.global-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--card-bg);
border: 1px solid var(--card-border);
color: var(--text-primary);
padding: 0.7rem 1.25rem;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
font-size: 0.88rem;
font-weight: 600;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
max-width: 90vw;
text-align: center;
}
.global-toast.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
html.light-theme .global-toast {
background: #ffffff !important;
border-color: #e2e8f0 !important;
color: #0f172a !important;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15) !important;
}
/* ===== Comparativo de Configurações (Dashboard) ===== */
.cmp-filters { display: flex; gap: 12px; flex-wrap: wrap; }
.cmp-filter { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-secondary); min-width: 150px; }
.cmp-summary { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.8; }
.cmp-summary strong { color: var(--text-primary); }
.cmp-subtitle { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.cmp-table th, .cmp-table td { white-space: nowrap; vertical-align: top; }
.cmp-table td.cmp-label-cell { white-space: normal; min-width: 170px; max-width: 280px; }
.cmp-table td.cmp-exits-cell { white-space: normal; min-width: 230px; }
.cmp-names { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.cmp-lowsample { color: var(--warning); cursor: help; }
.cmp-chip { display: inline-block; padding: 1px 8px; margin: 1px 4px 1px 0; border-radius: 999px; font-size: 0.72rem; border: 1px solid currentColor; }
.cmp-chip-reversal { color: var(--primary); }
.cmp-chip-takeProfit, .cmp-chip-trailing { color: var(--success); }
.cmp-chip-breakeven { color: var(--warning); }
.cmp-chip-stopLoss { color: var(--danger); }
.cmp-chip-pavan { color: var(--secondary); }
.cmp-chip-manual, .cmp-chip-unknown { color: var(--text-secondary); }
.cmp-sub { display: block; font-size: 0.72rem; color: var(--text-muted); font-weight: 400; }
.cmp-chip small { opacity: 0.8; }
/* ===== Mobile layout fixes =====
Phone browsers widen the layout viewport to fit any overflowing content instead of
clipping it, so ONE wide element (a long unbreakable strategy list, the chart header
row, a decorative background blob) used to make the whole page ~1000px wide and push
everything off the right edge of the screen. `overflow-x: hidden` on alone isn't
honored for that in mobile Chrome — it has to be on too. */
html {
overflow-x: hidden;
}
/* Grid/flex children default to min-width:auto (= the longest unbreakable word), which is
what let a comma-separated strategy list stretch a whole grid column. */
.grid-column,
.dashboard-grid > *,
.card {
min-width: 0;
}
/* Only the description side may break mid-word (long comma-separated strategy lists);
the PnL/status side keeps its natural width so a value never wraps letter by letter. */
.history-details {
min-width: 0;
overflow-wrap: anywhere;
}
.history-item > .text-right {
flex-shrink: 0;
white-space: nowrap;
margin-left: 0.75rem;
}
@media (max-width: 768px) {
.dashboard-grid {
grid-template-columns: minmax(0, 1fr);
}
.chart-card {
padding: 1rem;
}
.chart-header-row,
.chart-header-left,
.chart-legend {
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
}
@media (max-width: 768px) {
/* Audit-log header: title, filters and buttons stack instead of squeezing the title
into a sliver next to the toolbar and pushing "Apagar Logs" off the edge. */
.card-audit-log .card-header {
flex-direction: column;
align-items: stretch !important;
}
.card-audit-log .card-header > div,
.audit-toolbar > div {
min-width: 0;
}
.audit-toolbar > div:first-child {
flex: 1 1 100%;
}
.audit-toolbar > div:first-child > .flex-grow-1 {
flex: 1 1 100%;
}
.audit-toolbar > div:last-child {
margin-left: 0;
width: 100%;
justify-content: flex-start;
}
.audit-filter-label {
display: none !important;
}
.audit-filter-select {
flex: 1 1 100%;
width: 100% !important;
}
.audit-filter-search {
width: 100% !important;
}
}
@media (max-width: 600px) {
/* A small side gutter so cards don't touch the screen edge. */
.app-main-content {
padding-left: 10px;
padding-right: 10px;
}
}