:root {
    --bg-black: #05080c;
    --card-bg: #0d131a;
    --card-border: #16222f;
    --green-primary: #10b981;
    --green-bright: #00ff88;
    --green-glow: rgba(0, 255, 136, 0.2);
    --danger: #ef4444;
    --text-main: #f1f5f9;
    --text-muted: #64748b;
    --font-sans: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-sans); }
body { background-color: var(--bg-black); color: var(--text-main); min-height: 100vh; }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(5, 8, 12, 0.88); backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center; z-index: 999;
}
.modal-card {
    background-color: var(--card-bg); border: 1px solid var(--green-primary);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.15); padding: 32px; border-radius: 16px;
    width: 90%; max-width: 400px; text-align: center;
}
.modal-header h2 { font-size: 20px; color: var(--text-main); margin-top: 8px; }
.modal-header p { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
.modal-tabs { display: flex; gap: 8px; background-color: var(--bg-black); padding: 4px; border-radius: 8px; margin-bottom: 20px; }
.tab-btn { flex: 1; background: transparent; border: none; color: var(--text-muted); padding: 8px; font-weight: 600; font-size: 13px; cursor: pointer; border-radius: 6px; }
.tab-btn.active { background-color: var(--card-bg); color: var(--green-bright); }
.btn-primary-block { width: 100%; background-color: var(--green-bright); color: #000; border: none; padding: 12px; border-radius: 8px; font-weight: 800; cursor: pointer; margin-top: 10px; }

/* Navbar */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 28px; background-color: var(--card-bg); border-bottom: 1px solid var(--card-border); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-container { display: flex; flex-direction: column; }
.brand-text { font-weight: 800; font-size: 22px; letter-spacing: 1.5px; color: #ffffff; line-height: 1; }
.brand-subtext { font-size: 8px; font-weight: 700; letter-spacing: 1.2px; color: var(--green-bright); margin-top: 4px; }

.nav-menu { display: flex; align-items: center; gap: 20px; }
.nav-link { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 600; transition: 0.2s; }
.nav-link:hover, .nav-link.active { color: var(--green-bright); }
.nav-link.highlight { background-color: rgba(16, 185, 129, 0.1); border: 1px solid var(--green-primary); padding: 6px 14px; border-radius: 20px; color: var(--green-bright); }
.nav-link.highlight:hover { background-color: var(--green-primary); color: #000; }

.connection-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.offline { background-color: var(--danger); }
.dot.online { background-color: var(--green-bright); box-shadow: 0 0 10px var(--green-bright); }

.btn-user-login { background-color: transparent; border: 1px solid var(--card-border); color: var(--text-main); padding: 8px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.btn-oauth { background-color: var(--green-primary); color: #000; padding: 8px 16px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 13px; }
.user-badge { display: flex; align-items: center; gap: 8px; background-color: var(--bg-black); border: 1px solid var(--green-primary); padding: 6px 12px; border-radius: 6px; font-family: var(--font-mono); font-size: 13px; }
.account-tag { background-color: var(--green-primary); color: #000; padding: 2px 6px; border-radius: 4px; font-weight: 800; font-size: 11px; }

.dashboard { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 63px); }
.sidebar { background-color: var(--bg-black); border-right: 1px solid var(--card-border); padding: 20px 12px; }
.sidebar-header { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding-left: 8px; }
.sidebar-header h2 { font-size: 12px; text-transform: uppercase; color: var(--text-muted); letter-spacing: 1px; }
.pyramid-mini, .pyramid-small { color: var(--green-bright); }
.bot-list { display: flex; flex-direction: column; gap: 8px; }
.bot-card { display: flex; align-items: center; gap: 12px; padding: 12px; background-color: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text-main); cursor: pointer; text-align: left; transition: 0.2s; }
.bot-card:hover { background-color: var(--card-bg); }
.bot-card.active { background-color: var(--card-bg); border-color: var(--green-primary); box-shadow: inset 3px 0 0 var(--green-bright); }
.bot-icon { color: var(--green-bright); font-size: 12px; }
.bot-info h3 { font-size: 13px; font-weight: 700; }
.bot-info p { font-size: 11px; color: var(--text-muted); }

.workspace { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card { background-color: var(--card-bg); border: 1px solid var(--card-border); padding: 16px; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.stat-card.highlight-card { border-color: var(--green-primary); background: linear-gradient(180deg, var(--card-bg) 0%, rgba(16, 185, 129, 0.05) 100%); }
.stat-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
.stat-value { font-size: 20px; font-weight: 800; font-family: var(--font-mono); }
.stat-value.profit, .stat-value.highlight { color: var(--green-bright); }

.panels-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; }
.panel { background-color: var(--card-bg); border: 1px solid var(--card-border); padding: 20px; border-radius: 10px; }
.panel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.panel-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }
.bot-config-form { display: flex; flex-direction: column; gap: 14px; }
.input-group { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.input-group label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.input-group input { background-color: var(--bg-black); border: 1px solid var(--card-border); color: var(--green-bright); padding: 10px; border-radius: 6px; font-family: var(--font-mono); font-size: 14px; }
.btn-start { background-color: var(--green-primary); color: #000; border: none; padding: 14px; border-radius: 6px; font-weight: 800; cursor: pointer; margin-top: 8px; }

.terminal-panel { display: flex; flex-direction: column; }
.terminal-log { background-color: var(--bg-black); border: 1px solid var(--card-border); border-radius: 6px; padding: 14px; flex-grow: 1; min-height: 260px; font-family: var(--font-mono); font-size: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.log-item.system { color: var(--green-primary); }
.log-item.success { color: var(--green-bright); }
.log-item.error { color: var(--danger); }