:root {
  --bg: #0f0f1a;
  --bg2: #1a1a2e;
  --bg3: #16213e;
  --accent: #e94560;
  --accent2: #0f3460;
  --text: #eee;
  --text-dim: #888;
  --green: #00c853;
  --red: #ff1744;
  --yellow: #ffd600;
  --border: #2a2a4a;
  --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Login */
.login-container {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
.login-box {
  background: var(--bg2); border-radius: var(--radius);
  padding: 2rem; width: 320px; text-align: center;
}
.login-box h1 { font-size: 1.5rem; margin-bottom: 1rem; }
.login-box input {
  width: 100%; padding: .75rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg3); color: var(--text);
  font-size: 1rem; margin-bottom: 1rem; outline: none;
}
.login-box input:focus { border-color: var(--accent); }
.login-box button {
  width: 100%; padding: .75rem; border: none; border-radius: 8px;
  background: var(--accent); color: white; font-size: 1rem;
  cursor: pointer; font-weight: 600;
}
.login-box button:hover { opacity: .9; }

/* Layout */
.app { display: flex; flex-direction: column; min-height: 100vh; }

.nav {
  display: flex; gap: .5rem; padding: .75rem 1rem;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  overflow-x: auto; position: sticky; top: 0; z-index: 10;
}
.nav button {
  padding: .5rem 1rem; border: 1px solid var(--border);
  border-radius: 8px; background: transparent; color: var(--text-dim);
  cursor: pointer; white-space: nowrap; font-size: .875rem;
}
.nav button.active {
  background: var(--accent); color: white; border-color: var(--accent);
}

.content { flex: 1; padding: 1rem; max-width: 1200px; margin: 0 auto; width: 100%; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.card {
  background: var(--bg2); border-radius: var(--radius);
  padding: 1.25rem; border: 1px solid var(--border);
}
.card-label { font-size: .75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.card-value { font-size: 1.75rem; font-weight: 700; margin-top: .25rem; }
.card-value.positive { color: var(--green); }
.card-value.negative { color: var(--red); }

/* Charts */
.chart-container {
  background: var(--bg2); border-radius: var(--radius);
  padding: 1rem; border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.chart-container h3 { font-size: .875rem; color: var(--text-dim); margin-bottom: .75rem; }
.chart-container canvas { width: 100% !important; max-height: 300px; }

/* Tables */
.table-container {
  background: var(--bg2); border-radius: var(--radius);
  border: 1px solid var(--border); overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th { text-align: left; padding: .75rem 1rem; color: var(--text-dim); font-weight: 500; border-bottom: 1px solid var(--border); }
td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
tr:hover { background: rgba(255,255,255,.02); }

.badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 4px;
  font-size: .75rem; font-weight: 600;
}
.badge-pending { background: rgba(255,214,0,.15); color: var(--yellow); }
.badge-won { background: rgba(0,200,83,.15); color: var(--green); }
.badge-lost { background: rgba(255,23,68,.15); color: var(--red); }
.badge-void { background: rgba(136,136,136,.15); color: var(--text-dim); }

.amount-pos { color: var(--green); }
.amount-neg { color: var(--red); }

/* Terminal */
.terminal-container {
  background: var(--bg2); border-radius: var(--radius);
  border: 1px solid var(--border);
  height: calc(100vh - 120px);
  padding: .5rem;
  position: relative;
}
.terminal-container .xterm { height: 100%; }
.terminal-status {
  position: absolute; top: .5rem; right: .75rem;
  font-size: .75rem; padding: .2rem .5rem;
  border-radius: 4px; z-index: 5;
}
.terminal-status.connected { background: rgba(0,200,83,.15); color: var(--green); }
.terminal-status.disconnected { background: rgba(255,23,68,.15); color: var(--red); }

/* Empty state */
.empty { text-align: center; padding: 3rem; color: var(--text-dim); }

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }

/* Mobile */
@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .charts-grid { grid-template-columns: 1fr; }
  .card-value { font-size: 1.25rem; }
  .content { padding: .5rem; }
}