:root {
  --background: 220 20% 7%;
  --card: 220 18% 10%;
  --sidebar-bg: 220 18% 8%;
  --border: 220 14% 18%;
  --foreground: 210 20% 92%;
  --muted: 215 14% 50%;
  --primary: 142 71% 45%;
  --red: 0 79% 63%;
  --yellow: 43 89% 58%;
  --blue: 213 89% 63%;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

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

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection { background: hsl(var(--primary) / .35); }

/* ---------- layout ---------- */

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: hsl(var(--sidebar-bg));
  border-right: 1px solid hsl(var(--border));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem 1.1rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: .8rem;
}
.brand-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: hsl(var(--primary));
  box-shadow: 0 0 8px hsl(var(--primary) / .8);
  flex-shrink: 0;
}

.nav-list { display: flex; flex-direction: column; gap: 2px; padding: .5rem; }
.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem;
  border-radius: 6px;
  color: hsl(var(--muted));
  font-size: .72rem;
  letter-spacing: .06em;
  font-weight: 600;
  border: 1px solid transparent;
}
.nav-item:hover { color: hsl(var(--foreground)); background: hsl(var(--card)); }
.nav-item.active {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / .1);
  border-color: hsl(var(--primary) / .25);
}
.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; }

.sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.1rem;
  border-top: 1px solid hsl(var(--border));
  font-size: .68rem;
  color: hsl(var(--muted));
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.sidebar-footer .status { display: flex; align-items: center; gap: .45rem; color: hsl(var(--primary)); }
.sidebar-footer .status .dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--primary)); }
.sim-tag {
  color: hsl(var(--yellow));
  border: 1px solid hsl(var(--yellow) / .3);
  background: hsl(var(--yellow) / .08);
  padding: .2rem .4rem;
  border-radius: 4px;
  letter-spacing: .05em;
  width: fit-content;
}

.main { flex: 1; min-width: 0; padding: 2rem 2.25rem; max-width: 1100px; }

.page-title { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; margin: 0 0 .3rem; }
.page-sub { color: hsl(var(--muted)); font-size: .78rem; margin: 0 0 1.5rem; }

/* ---------- controls ---------- */

.search-row { display: flex; gap: .6rem; margin-bottom: 1.5rem; }
.input, select {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  border-radius: 6px;
  padding: .7rem .9rem;
  font-family: var(--mono);
  font-size: .78rem;
  outline: none;
}
.input:focus, select:focus { border-color: hsl(var(--primary) / .5); }
.input { flex: 1; }
.input::placeholder { color: hsl(var(--muted)); }

.btn {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 6px;
  padding: .7rem 1.3rem;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: hsl(var(--primary)); color: hsl(220 20% 7%); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-outline {
  background: transparent;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.btn-outline:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); }
.btn-ghost { background: transparent; border: none; color: hsl(var(--muted)); padding: .35rem .5rem; }
.btn-ghost:hover { color: hsl(var(--red)); }
.btn-sm { padding: .45rem .8rem; font-size: .68rem; }
.btn-block { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; }

/* ---------- panels ---------- */

.panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  padding: 1.25rem;
}
.panel + .panel { margin-top: 1rem; }
.panel-title {
  font-size: .68rem;
  letter-spacing: .08em;
  color: hsl(var(--muted));
  font-weight: 700;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }

.stat-box {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  padding: .85rem 1rem;
}
.stat-label { font-size: .65rem; color: hsl(var(--muted)); letter-spacing: .06em; margin-bottom: .4rem; }
.stat-value { font-size: 1.15rem; font-weight: 700; }
.stat-sub { font-size: .68rem; color: hsl(var(--muted)); margin-top: .2rem; }

.up { color: hsl(var(--primary)); }
.down { color: hsl(var(--red)); }
.neutral { color: hsl(var(--yellow)); }

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3.5rem 1rem;
  color: hsl(var(--muted));
  gap: .75rem;
  text-align: center;
}
.empty-state .icon-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  display: flex; align-items: center; justify-content: center;
}

.loading-row {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  color: hsl(var(--muted));
  font-size: .75rem;
}
.spinner {
  width: 14px; height: 14px;
  border: 2px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

textarea {
  width: 100%;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  border-radius: 6px;
  padding: .7rem .8rem;
  font-family: var(--mono);
  font-size: .72rem;
  resize: vertical;
  min-height: 80px;
  outline: none;
}
textarea:focus { border-color: hsl(var(--primary) / .5); }

input[type="range"] { width: 100%; accent-color: hsl(var(--primary)); }

/* ---------- lists / rows ---------- */

.row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
}
.row + .row { margin-top: .5rem; }
.row-title { font-weight: 700; font-size: .78rem; }
.row-sub { font-size: .68rem; color: hsl(var(--muted)); margin-top: .15rem; }

.tag {
  display: inline-flex;
  padding: .12rem .45rem;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.tag-buy { background: hsl(var(--primary) / .15); color: hsl(var(--primary)); }
.tag-sell { background: hsl(var(--red) / .15); color: hsl(var(--red)); }
.tag-active { background: hsl(var(--blue) / .15); color: hsl(var(--blue)); }
.tag-triggered { background: hsl(var(--yellow) / .15); color: hsl(var(--yellow)); }

.tabs { display: flex; gap: .4rem; margin-bottom: .75rem; }
.tab {
  padding: .4rem .8rem;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted));
  cursor: pointer;
  background: transparent;
}
.tab.active { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .4); background: hsl(var(--primary) / .08); }

table { width: 100%; border-collapse: collapse; font-size: .72rem; }
th { text-align: left; color: hsl(var(--muted)); font-weight: 600; padding: .5rem .6rem; border-bottom: 1px solid hsl(var(--border)); letter-spacing: .04em; }
td { padding: .55rem .6rem; border-bottom: 1px solid hsl(var(--border) / .6); }
tr:last-child td { border-bottom: none; }

.toast-wrap { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex; flex-direction: column; gap: .5rem; z-index: 50; }
.toast {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--primary));
  border-radius: 6px;
  padding: .75rem 1rem;
  font-size: .72rem;
  min-width: 220px;
  box-shadow: 0 8px 24px hsl(0 0% 0% / .35);
  animation: slidein .15s ease-out;
}
.toast strong { display: block; margin-bottom: .15rem; }
.toast.err { border-left-color: hsl(var(--red)); }
@keyframes slidein { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.mobile-topbar { display: none; }

@media (max-width: 820px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; min-height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .brand { padding: .9rem; }
  .nav-list { flex-direction: row; padding: .5rem; }
  .sidebar-footer { display: none; }
  .main { padding: 1.25rem; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
}