:root {
  color-scheme: dark;

  --bg:
    #080b14;

  --panel:
    #101625;

  --panel2:
    #151d30;

  --text:
    #f4f7ff;

  --muted:
    #8e9ab7;

  --line:
    rgba(255,255,255,.08);

  --accent:
    #8a68ff;

  --accent2:
    #3dd9ff;

  --positive:
    #38e8a0;

  --negative:
    #ff647d;

  --warning:
    #ffc85c;
}

* {
  box-sizing:
    border-box;
}

html,
body {
  margin:
    0;

  min-height:
    100%;

  background:
    radial-gradient(
      circle at top,
      #141b36 0,
      var(--bg) 42%
    );

  color:
    var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body {
  min-height:
    100vh;
}

.topbar {
  position:
    sticky;

  top:
    0;

  z-index:
    20;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    18px 28px;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(8,11,20,.88);

  backdrop-filter:
    blur(14px);
}

.brand {
  font-size:
    20px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  background:
    linear-gradient(
      90deg,
      var(--accent2),
      #b48cff
    );

  -webkit-background-clip:
    text;

  color:
    transparent;
}

.subtitle {
  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    13px;
}

.runtime {
  display:
    flex;

  gap:
    8px;

  align-items:
    center;

  color:
    var(--muted);

  font-size:
    13px;
}

.dot {
  width:
    9px;

  height:
    9px;

  border-radius:
    50%;

  background:
    var(--warning);

  box-shadow:
    0 0 12px currentColor;
}

.dot.ok {
  background:
    var(--positive);
}

.dot.bad {
  background:
    var(--negative);
}

main {
  max-width:
    1500px;

  margin:
    0 auto;

  padding:
    26px;
}

.overview {
  display:
    grid;

  grid-template-columns:
    repeat(
      6,
      minmax(0,1fr)
    );

  gap:
    14px;

  margin-bottom:
    18px;
}

.stat,
.panel {
  border:
    1px solid var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(21,29,48,.96),
      rgba(12,17,30,.96)
    );

  box-shadow:
    0 18px 60px
    rgba(0,0,0,.22);
}

.stat {
  padding:
    16px 18px;

  border-radius:
    16px;
}

.stat span {
  display:
    block;

  color:
    var(--muted);

  font-size:
    12px;
}

.stat strong {
  display:
    block;

  margin-top:
    7px;

  font-size:
    27px;
}

.panel {
  margin-bottom:
    18px;

  padding:
    18px;

  border-radius:
    18px;
}

.panel-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    16px;
}

.panel-head h1,
.panel-head h2 {
  margin:
    0;

  font-size:
    20px;
}

.panel-head p {
  margin:
    5px 0 0;

  color:
    var(--muted);

  font-size:
    12px;
}

select,
button {
  min-height:
    38px;

  border:
    1px solid var(--line);

  border-radius:
    10px;

  background:
    var(--panel2);

  color:
    var(--text);

  padding:
    0 12px;

  font:
    inherit;
}

button {
  cursor:
    pointer;
}

button:hover {
  border-color:
    rgba(138,104,255,.55);
}

.symbols {
  display:
    flex;

  gap:
    8px;

  overflow-x:
    auto;

  padding-bottom:
    12px;
}

.symbol {
  white-space:
    nowrap;
}

.symbol.active {
  border-color:
    var(--accent);

  background:
    rgba(138,104,255,.18);
}

.chart-wrap {
  position:
    relative;

  width:
    100%;

  height:
    430px;

  border:
    1px solid var(--line);

  border-radius:
    14px;

  overflow:
    hidden;

  background:
    #090d18;
}

#chart {
  width:
    100%;

  height:
    100%;
}

.chart-message {
  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  color:
    var(--muted);

  pointer-events:
    none;
}

.chart-message.hidden {
  display:
    none;
}

.table-wrap {
  overflow-x:
    auto;
}

table {
  width:
    100%;

  border-collapse:
    collapse;

  min-width:
    960px;
}

th,
td {
  padding:
    13px 12px;

  border-bottom:
    1px solid var(--line);

  text-align:
    left;

  font-size:
    13px;
}

th {
  color:
    var(--muted);

  font-weight:
    600;
}

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

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

.wait {
  color:
    var(--muted);
}

.status {
  display:
    inline-flex;

  padding:
    5px 9px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.06);
}

.empty {
  text-align:
    center;

  color:
    var(--muted);
}

.footer-note {
  padding:
    8px 2px 28px;

  color:
    var(--muted);

  text-align:
    center;

  font-size:
    12px;
}

@media (
  max-width:
  1000px
) {
  .overview {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }
}

@media (
  max-width:
  620px
) {
  main {
    padding:
      14px;
  }

  .topbar {
    padding:
      14px;
  }

  .overview {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .chart-wrap {
    height:
      340px;
  }
}

/* =========================================================
   BHAVYA AI — PRIVATE OWNER AUTH
   ========================================================= */

.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.login-body {
  min-height: 100vh;
}

.login-shell {
  min-height: 100vh;
  max-width: none;
  padding: 24px;

  display: grid;
  place-items: center;
}

.login-card {
  width: min(440px, 100%);

  padding: 30px;

  border: 1px solid var(--line);
  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(21,29,48,.98),
      rgba(10,14,26,.98)
    );

  box-shadow:
    0 28px 90px
    rgba(0,0,0,.38);
}

.login-card h1 {
  margin:
    18px 0 4px;

  font-size:
    28px;
}

.login-subtitle {
  margin:
    0 0 26px;

  color:
    var(--muted);
}

.login-card form {
  display:
    grid;

  gap:
    18px;
}

.login-card label {
  display:
    grid;

  gap:
    8px;

  color:
    var(--muted);

  font-size:
    13px;
}

.login-card input {
  width:
    100%;

  min-height:
    46px;

  border:
    1px solid var(--line);

  border-radius:
    11px;

  outline:
    none;

  background:
    #0a0f1d;

  color:
    var(--text);

  padding:
    0 13px;

  font:
    inherit;
}

.login-card input:focus {
  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px
    rgba(138,104,255,.13);
}

.login-button {
  margin-top:
    4px;

  min-height:
    46px;

  background:
    linear-gradient(
      100deg,
      rgba(61,217,255,.15),
      rgba(138,104,255,.25)
    );

  border-color:
    rgba(138,104,255,.5);

  font-weight:
    700;
}

.login-button:disabled {
  opacity:
    .65;

  cursor:
    default;
}

.login-message {
  min-height:
    20px;

  margin-top:
    16px;

  color:
    var(--negative);

  font-size:
    13px;
}

.login-security {
  margin-top:
    22px;

  padding-top:
    18px;

  border-top:
    1px solid var(--line);

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.6;
}

@media (
  max-width:
  620px
) {
  .top-actions {
    gap:
      8px;
  }

  .runtime span:last-child {
    display:
      none;
  }

  .login-shell {
    padding:
      15px;
  }

  .login-card {
    padding:
      23px;
  }
}

/* =========================================================
   BHAVYA SIGNAL DETAIL MODAL
   ========================================================= */

.signal-row {
  cursor: pointer;
  transition:
    background .16s ease,
    transform .16s ease;
}

.signal-row:hover {
  background:
    rgba(138,104,255,.07);
}

.signal-row:focus-visible {
  outline:
    2px solid var(--accent);

  outline-offset:
    -2px;
}

.modal-open {
  overflow: hidden;
}

.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: grid;
  place-items: center;

  padding: 24px;
}

.detail-modal.hidden {
  display: none;
}

.detail-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(2,5,12,.78);

  backdrop-filter:
    blur(8px);
}

.detail-dialog {
  position: relative;
  z-index: 1;

  width:
    min(1180px, 100%);

  max-height:
    calc(100vh - 48px);

  overflow-y: auto;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #121a2d,
      #090e19
    );

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.55);
}

.detail-header {
  position: sticky;
  top: 0;
  z-index: 4;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;

  padding:
    22px 24px;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(13,19,33,.95);

  backdrop-filter:
    blur(12px);
}

.detail-eyebrow {
  color:
    var(--accent2);

  font-size: 11px;
  font-weight: 800;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}

.detail-header h2 {
  margin:
    6px 0 3px;

  font-size: 24px;
}

.detail-subtitle {
  color:
    var(--muted);

  font-size: 12px;
}

.detail-close {
  width: 40px;
  min-width: 40px;
  height: 40px;

  padding: 0;

  font-size: 24px;
}

.detail-loading {
  padding: 60px 24px;

  color:
    var(--muted);

  text-align: center;
}

.detail-content {
  padding:
    22px 24px 28px;
}

.detail-content.hidden {
  display: none;
}

.detail-content section {
  margin-bottom: 26px;
}

.detail-content h3 {
  margin:
    0 0 13px;

  font-size: 14px;

  color:
    #dce4ff;
}

.detail-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap: 10px;
}

.detail-card,
.detail-kv {
  border:
    1px solid var(--line);

  border-radius: 12px;

  background:
    rgba(255,255,255,.025);
}

.detail-card {
  padding: 12px;
}

.detail-card span,
.detail-kv span {
  display: block;

  color:
    var(--muted);

  font-size: 10px;

  text-transform:
    uppercase;

  letter-spacing:
    .04em;
}

.detail-card strong {
  display: block;

  margin-top: 5px;

  font-size: 13px;
}

.reason-list {
  display: grid;
  gap: 8px;
}

.reason-item {
  display: grid;

  grid-template-columns:
    28px 1fr;

  gap: 10px;

  align-items: flex-start;

  padding: 10px 12px;

  border:
    1px solid var(--line);

  border-radius: 11px;

  background:
    rgba(255,255,255,.02);
}

.reason-item > span {
  display: grid;
  place-items: center;

  width: 24px;
  height: 24px;

  border-radius: 50%;

  background:
    rgba(138,104,255,.16);

  color:
    #cabbff;

  font-size: 10px;
  font-weight: 700;
}

.reason-item p {
  margin: 2px 0 0;

  color:
    #d5dcf0;

  font-size: 12px;
  line-height: 1.55;
}

.detail-kv-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap: 8px;
}

.detail-kv {
  padding: 10px;
}

.detail-kv strong {
  display: block;

  margin-top: 5px;

  overflow-wrap: anywhere;

  font-size: 12px;
}

.detail-columns {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap: 14px;
}

.detail-json {
  min-height: 120px;
  max-height: 300px;

  overflow: auto;

  margin: 0;

  padding: 13px;

  border:
    1px solid var(--line);

  border-radius: 12px;

  background:
    #070b14;

  color:
    #bfc9df;

  font:
    11px/1.55
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.timeline {
  position: relative;

  display: grid;

  gap: 0;
}

.timeline-item {
  position: relative;

  display: grid;

  grid-template-columns:
    18px 1fr;

  gap: 10px;

  padding:
    6px 0 17px;
}

.timeline-item:not(:last-child)::before {
  content: "";

  position: absolute;

  left: 5px;
  top: 18px;
  bottom: -2px;

  width: 1px;

  background:
    var(--line);
}

.timeline-dot {
  position: relative;
  z-index: 1;

  width: 11px;
  height: 11px;

  margin-top: 4px;

  border-radius: 50%;

  background:
    var(--accent2);

  box-shadow:
    0 0 12px
    rgba(61,217,255,.35);
}

.timeline-item strong {
  font-size: 12px;
}

.timeline-meta {
  margin-top: 3px;

  color:
    var(--muted);

  font-size: 10px;
}

.timeline-item p {
  margin:
    5px 0 0;

  color:
    #c7d0e4;

  font-size: 11px;
}

.detail-empty {
  color:
    var(--muted);
}

@media (
  max-width: 900px
) {
  .detail-grid,
  .detail-kv-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}

@media (
  max-width: 650px
) {
  .detail-modal {
    padding: 0;
  }

  .detail-dialog {
    width: 100%;
    height: 100%;
    max-height: 100vh;

    border-radius: 0;
  }

  .detail-columns {
    grid-template-columns:
      1fr;
  }

  .detail-grid,
  .detail-kv-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .detail-header,
  .detail-content {
    padding-left: 15px;
    padding-right: 15px;
  }
}