:root {
  --ql-bg: #090d14;
  --ql-bg-soft: #0f1623;
  --ql-panel: #121c2b;
  --ql-panel-strong: #172437;
  --ql-text: #f2f6ff;
  --ql-muted: #9aaccc;
  --ql-border: rgba(155, 177, 212, 0.2);
  --ql-border-strong: rgba(255, 194, 82, 0.35);
  --ql-sol: #ffc252;
  --ql-sol-deep: #cf9838;
  --ql-moon: #8bb7ff;
  --ql-moon-deep: #4d7bc9;
  --ql-good: #26cb85;
  --ql-bad: #ff6d6d;
  --ql-shadow: 0 18px 46px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Segoe UI", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ql-text);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 194, 82, 0.12), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(139, 183, 255, 0.14), transparent 42%),
    linear-gradient(180deg, var(--ql-bg) 0%, var(--ql-bg-soft) 100%);
  min-height: 100vh;
}

a {
  color: var(--ql-moon);
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 20px 48px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  background: linear-gradient(130deg, rgba(18, 28, 43, 0.88), rgba(23, 36, 55, 0.92));
  border: 1px solid var(--ql-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--ql-shadow);
}

.brand-wrap {
  display: flex;
  gap: 14px;
  align-items: center;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ql-border);
  padding: 4px;
}

.brand-parent {
  margin: 0;
  color: var(--ql-sol);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

h1 {
  margin: 1px 0;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
}

.brand-tagline {
  margin: 0;
  color: var(--ql-muted);
  font-size: 0.8rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge {
  background: linear-gradient(160deg, rgba(255, 194, 82, 0.26), rgba(207, 152, 56, 0.3));
  border: 1px solid var(--ql-border-strong);
  color: #ffe8b7;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  white-space: nowrap;
}

.secondary-btn,
.logout-btn,
.primary-btn {
  border: 1px solid var(--ql-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ql-text);
  font-weight: 600;
  padding: 9px 14px;
  background: rgba(15, 24, 38, 0.8);
  transition: 0.16s ease;
}

.secondary-btn:hover,
.logout-btn:hover,
.primary-btn:hover {
  border-color: var(--ql-moon);
  background: rgba(30, 45, 69, 0.95);
}

.logout-btn {
  border-color: rgba(255, 109, 109, 0.45);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.card,
.panel,
.metric-card,
.chart-box {
  background: linear-gradient(170deg, rgba(18, 28, 43, 0.88), rgba(18, 28, 43, 0.96));
  border: 1px solid var(--ql-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--ql-shadow);
}

.card span {
  display: block;
  color: var(--ql-muted);
  margin-bottom: 8px;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.card strong {
  font-size: 1.5rem;
  color: #f8fbff;
}

.panel {
  margin-top: 16px;
}

.panel h2 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 1.14rem;
}

.symbol-page-title h2 {
  margin: 0;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip {
  background: rgba(139, 183, 255, 0.1);
  border: 1px solid rgba(139, 183, 255, 0.36);
  border-radius: 999px;
  padding: 7px 12px;
  color: #d9e8ff;
  font-size: 0.85rem;
}

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

/* Grouped tables stack several related fields per cell so wide datasets fit
   the viewport without horizontal scrolling. */
.grouped-table {
  table-layout: fixed;
}

.grouped-table th,
.grouped-table td {
  padding: 8px 7px;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.grouped-table td .cell-main,
.grouped-table td .cell-sub {
  display: block;
}

.cell-main {
  font-weight: 600;
  line-height: 1.35;
}

.cell-sub {
  font-size: 0.76rem;
  color: var(--ql-muted);
  line-height: 1.4;
  white-space: normal;
}

.cell-sub.wrap {
  overflow-wrap: anywhere;
}

.pl-up {
  color: var(--ql-good);
}

.pl-down {
  color: var(--ql-bad);
}

.grouped-table td.cell-monitoring .decision-badge {
  margin-bottom: 4px;
}

/* The exit control sits in a narrow dark cell, where a plain secondary button
   reads as inert text; these keep the affordance obvious at every status. */
td a.exit-action {
  display: block;
  text-align: center;
  padding: 7px 6px;
}

td a.secondary-btn.exit-action {
  border-color: var(--ql-border-strong);
  background: rgba(32, 48, 72, 0.95);
  color: #dbe9ff;
}

td a.secondary-btn.exit-action:hover {
  border-color: var(--ql-moon);
  background: rgba(45, 66, 99, 0.98);
}

td a.primary-btn.exit-action {
  margin-top: 0;
}

.action-state {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ql-muted);
}

/* Explicit widths: fixed layout would otherwise give every column an equal share. */
.positions-table th:nth-child(1) { width: 7%; }
.positions-table th:nth-child(2) { width: 9%; }
.positions-table th:nth-child(3) { width: 10%; }
.positions-table th:nth-child(4) { width: 9%; }
.positions-table th:nth-child(5) { width: 11%; }
.positions-table th:nth-child(6) { width: 9%; }
.positions-table th:nth-child(7) { width: 18%; }
.positions-table th:nth-child(8) { width: 8%; }
.positions-table th:nth-child(9) { width: 10%; }
.positions-table th:nth-child(10) { width: 9%; }

.trades-table th:nth-child(1) { width: 10%; }
.trades-table th:nth-child(2) { width: 14%; }
.trades-table th:nth-child(3) { width: 11%; }
.trades-table th:nth-child(4) { width: 11%; }
.trades-table th:nth-child(5) { width: 11%; }
.trades-table th:nth-child(6) { width: 11%; }
.trades-table th:nth-child(7) { width: 11%; }
.trades-table th:nth-child(8) { width: 12%; }
.trades-table th:nth-child(9) { width: 9%; }

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

th,
td {
  padding: 9px 8px;
  text-align: left;
  border-bottom: 1px solid var(--ql-border);
}

td {
  overflow-wrap: break-word;
  word-break: normal;
}

td a.secondary-btn,
td a.primary-btn,
td button.secondary-btn,
td button.primary-btn {
  display: inline-block;
  padding: 6px 8px;
  font-size: 0.78rem;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
}

th {
  color: var(--ql-muted);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(10, 16, 26, 0.55);
  overflow-wrap: break-word;
}

tbody tr:hover {
  background: rgba(139, 183, 255, 0.06);
}

.symbol-link {
  color: #e2eeff;
  text-decoration: none;
  font-weight: 700;
}

.symbol-link:hover {
  color: var(--ql-sol);
}

.signal {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.76rem;
}

.signal.buy {
  background: rgba(38, 203, 133, 0.18);
  color: var(--ql-good);
}

.signal.sell {
  background: rgba(255, 109, 109, 0.16);
  color: var(--ql-bad);
}

.signal.hold,
.signal.no-trade {
  background: rgba(139, 183, 255, 0.15);
  color: var(--ql-moon);
}

/* Decision Engine / exit-intelligence badges: same visual language, distinct color per state. */
.decision-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.decision-badge.decision-buy,
.decision-badge.status-protect {
  background: rgba(38, 203, 133, 0.18);
  color: var(--ql-good);
}

.decision-badge.decision-watch,
.decision-badge.status-watch,
.decision-badge.status-pending {
  background: rgba(255, 194, 82, 0.2);
  color: #ffe3ac;
}

.decision-badge.decision-pass,
.decision-badge.status-exit-review,
.decision-badge.status-stop-breached {
  background: rgba(255, 109, 109, 0.16);
  color: var(--ql-bad);
}

.decision-badge.status-stop-breached {
  border: 1px solid var(--ql-bad);
  box-shadow: 0 0 0 2px rgba(255, 109, 109, 0.25);
}

.decision-badge.decision-owned {
  background: rgba(139, 183, 255, 0.15);
  color: var(--ql-moon);
}

.decision-badge.status-hold {
  background: rgba(139, 183, 255, 0.15);
  color: var(--ql-moon);
}

.decision-reasons {
  margin: 0;
  padding-left: 16px;
  font-size: 0.8rem;
  color: var(--ql-muted);
}

.decision-reasons li {
  margin-bottom: 2px;
}

.empty-state {
  color: var(--ql-muted);
  margin: 0;
}

.backtest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.metric-card h3 {
  margin-top: 0;
  margin-bottom: 11px;
}

.metric-card .metric-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ql-border);
  font-size: 0.9rem;
}

.metric-card .metric-row:last-child {
  border-bottom: none;
}

.chart-box svg {
  width: 100%;
  height: 220px;
  display: block;
  background: rgba(7, 12, 21, 0.55);
  border-radius: 10px;
  border: 1px solid var(--ql-border);
}

.score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.score-pill {
  min-width: 78px;
  text-align: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 194, 82, 0.2);
  color: #ffe3ac;
  border: 1px solid rgba(255, 194, 82, 0.45);
  font-weight: 700;
}

.score-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ql-border);
}

.score-row:last-child {
  border-bottom: none;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.metric {
  border: 1px solid var(--ql-border);
  border-radius: 10px;
  background: rgba(10, 16, 27, 0.45);
  padding: 10px;
}

.metric span {
  display: block;
  color: var(--ql-muted);
  font-size: 0.74rem;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.breakdown-card {
  border: 1px solid var(--ql-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  background: rgba(12, 19, 31, 0.5);
}

.breakdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 1rem;
}

.breakdown-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--ql-muted);
  font-size: 0.83rem;
  margin-bottom: 8px;
}

.breakdown-card p {
  margin: 0;
  line-height: 1.48;
}

.breakdown-total {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--ql-border);
  font-size: 1.04rem;
  text-align: right;
}

.login-body {
  display: grid;
  place-items: center;
}

.login-shell {
  width: min(470px, 92vw);
  padding: 28px 0;
}

.login-card {
  background: linear-gradient(165deg, rgba(15, 24, 37, 0.95), rgba(11, 17, 27, 0.95));
  border: 1px solid var(--ql-border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--ql-shadow);
}

.login-brand {
  text-align: center;
  margin-bottom: 16px;
}

.login-logo {
  width: 104px;
  height: 104px;
  object-fit: contain;
  margin-bottom: 6px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

/* ---------------------------------------------------------------------- */
/* Responsive layout: stop page-level sideways scrolling and dense-table  */
/* overflow. Desktop keeps compact fixed-layout tables; below the tablet  */
/* breakpoint every wrapped table becomes a stacked, labeled card list.   */
/* ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .container {
    padding: 22px 14px 36px;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .topbar-actions {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

@media (max-width: 480px) {
  .summary-grid,
  .metric-grid,
  .backtest-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .trade-table-wrap {
    overflow-x: hidden;
  }

  .trade-table-wrap table,
  .trade-table-wrap tbody,
  .trade-table-wrap tr,
  .trade-table-wrap td {
    display: block;
    width: 100%;
  }

  .trade-table-wrap thead {
    display: none;
  }

  .trade-table-wrap tr {
    border: 1px solid var(--ql-border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(12, 19, 31, 0.5);
  }

  .trade-table-wrap tbody tr:hover {
    background: rgba(12, 19, 31, 0.5);
  }

  .trade-table-wrap td {
    padding: 6px 0;
    border-bottom: 1px solid var(--ql-border);
  }

  .trade-table-wrap td:last-child {
    border-bottom: none;
  }

  .trade-table-wrap td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--ql-muted);
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
  }

  /* Logical field grouping on the Positions card (identity / price&P&L / risk&stop / monitoring / broker&status). */
  .trade-table-wrap td.td-group-start {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ql-border);
  }

  /* Card mode drops the fixed column widths and puts the label beside the lead value. */
  .grouped-table {
    table-layout: auto;
  }

  .grouped-table td .cell-main {
    display: inline;
  }

  .grouped-table td .cell-sub {
    white-space: normal;
  }

  .trade-table-wrap td a.secondary-btn,
  .trade-table-wrap td a.primary-btn,
  .trade-table-wrap td button.secondary-btn,
  .trade-table-wrap td button.primary-btn {
    display: block;
    width: 100%;
    white-space: normal;
    text-align: center;
    margin-top: 6px;
    box-sizing: border-box;
  }
}

.brand-app {
  letter-spacing: 0.12em;
  font-size: 1.6rem;
}

.workspace-pill {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(139, 183, 255, 0.45);
  color: #d8e8ff;
  background: rgba(139, 183, 255, 0.14);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

label {
  display: block;
  margin-top: 12px;
  margin-bottom: 5px;
  color: #d8e4fb;
  font-weight: 600;
  font-size: 0.92rem;
}

input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--ql-border);
  background: rgba(6, 11, 20, 0.76);
  color: var(--ql-text);
}

input:focus {
  outline: none;
  border-color: var(--ql-sol);
  box-shadow: 0 0 0 3px rgba(255, 194, 82, 0.18);
}

.primary-btn {
  margin-top: 16px;
  width: 100%;
  color: #1c1300;
  border-color: rgba(255, 194, 82, 0.5);
  background: linear-gradient(140deg, var(--ql-sol), var(--ql-sol-deep));
  text-align: center;
}

.primary-btn:hover {
  border-color: rgba(255, 194, 82, 0.75);
  background: linear-gradient(140deg, #ffd588, #d9a44a);
}

.error {
  margin-top: 10px;
  margin-bottom: 8px;
  color: #ffc8c8;
  background: rgba(255, 109, 109, 0.13);
  border: 1px solid rgba(255, 109, 109, 0.4);
  padding: 0.7rem 0.9rem;
  border-radius: 9px;
}

.philosophy {
  margin: 16px 0 0;
  color: var(--ql-muted);
  text-align: center;
  font-size: 0.82rem;
}

@media (max-width: 860px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}