:root {
  --bg: #f3f5f8;
  --panel: #ffffff;
  --text: #18202b;
  --muted: #6a7484;
  --line: #dde3eb;
  --accent: #1c5d99;
  --accent-dark: #133d63;
  --soft: #eaf2fb;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bd-navbar {
  background: #142033;
  box-shadow: 0 10px 28px rgba(20, 32, 51, .18);
}

.hero-card {
  background: #142033;
  color: #fff;
  border-radius: 28px;
  min-height: 420px;
}

.eyebrow {
  color: #7da8d4;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}

.badge-soft {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  padding: .55rem .75rem;
}

.join-panel {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  padding: 28px;
}

.panel, .info-card, .term-card, .admin-tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(23, 40, 60, .05);
}

.info-card, .term-card {
  padding: 22px;
  height: 100%;
}

.info-card h3 {
  font-size: 1.08rem;
}

.info-card p, .term-card p {
  color: var(--muted);
  margin-bottom: 0;
}

.trade-topbar {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: stretch;
}

.top-metric, .public-round {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 16px;
  min-width: 130px;
}

.top-metric span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}

.top-metric strong {
  font-size: 1.2rem;
}

.company-list {
  display: grid;
  gap: 8px;
  max-height: 650px;
  overflow: auto;
}

.company-item {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 10px 12px;
  cursor: pointer;
  transition: .15s ease;
}

.company-item:hover, .company-item.active {
  border-color: var(--accent);
  background: var(--soft);
}

.company-item .ticker {
  font-weight: 800;
}

.company-item .meta {
  color: var(--muted);
  font-size: .78rem;
}

.company-item .price-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.price-badge, .code-pill {
  background: var(--soft);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
}

.news-list {
  display: grid;
  gap: 10px;
  max-height: 650px;
  overflow: auto;
}

.news-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  margin-bottom: 8px;
}

.news-card p {
  color: var(--muted);
  font-size: .9rem;
  margin: 6px 0;
}

.news-card span {
  display: inline-block;
  background: #f0f3f7;
  color: #39485a;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .75rem;
}

.score-item, .score-row, .mover {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.score-item:last-child, .score-row:last-child, .mover:last-child {
  border-bottom: 0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .78rem;
  background: #edf0f4;
}

.status-running { background: #e8f6ee; color: #176a3b; }
.status-waiting { background: #eef4ff; color: #1b56a2; }
.status-paused { background: #fff4d9; color: #9c6500; }
.status-finished { background: #f0eef8; color: #563d7c; }

.player-pill {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
}

.switch-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px 12px 38px;
  background: #fff;
}

.result-number {
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 800;
  color: var(--accent-dark);
}

.strategy-box, .nomination {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #f8fafc;
  padding: 14px;
}

.nomination span, .nomination em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: .86rem;
}

.nomination strong {
  font-size: 1.15rem;
}

.admin-tile {
  display: block;
  padding: 26px;
  color: var(--text);
  text-decoration: none;
  height: 100%;
}

.admin-tile span, .admin-tile em {
  display: block;
  color: var(--muted);
  font-style: normal;
}

.admin-tile strong {
  font-size: 3rem;
  color: var(--accent-dark);
}

.mobile-tabs {
  display: flex;
  overflow-x: auto;
  gap: 8px;
}

.tab-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 13px;
  white-space: nowrap;
}

.tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

@media (max-width: 991px) {
  .trade-topbar {
    grid-template-columns: 1fr 1fr;
  }
  .pane {
    display: none;
  }
  .pane.active {
    display: block;
  }
}

@media (min-width: 992px) {
  .pane {
    display: block !important;
  }
}

@media (max-width: 576px) {
  .trade-topbar {
    grid-template-columns: 1fr;
  }
  .hero-card {
    border-radius: 20px;
  }
}

.hint-box {
  border: 1px dashed rgba(80, 100, 130, .35);
  border-radius: 14px;
  padding: .85rem 1rem;
  background: rgba(248, 250, 252, .8);
  color: #475569;
  font-size: .92rem;
}
.btn.active {
  box-shadow: inset 0 0 0 2px rgba(15, 23, 42, .18);
}
.strategy-box, .nomination {
  border-radius: 14px;
  background: rgba(15, 23, 42, .04);
  padding: .9rem 1rem;
}

/* Trading chart area */
.chart-toolbar {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
}

.candle-chart {
  width: 100%;
  min-height: 330px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.candle-chart svg {
  display: block;
  width: 100%;
  height: 320px;
}

.chart-caption {
  color: var(--muted);
  font-size: .9rem;
}

.chart-grid {
  stroke: #e5eaf0;
  stroke-width: 1;
}

.chart-axis-line {
  stroke: #cfd8e3;
  stroke-width: 1.4;
}

.chart-axis, .chart-round, .chart-volume-label {
  fill: #6a7484;
  font-size: 11px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.chart-round {
  text-anchor: middle;
}

.candle .wick {
  stroke-width: 2.2;
  stroke-linecap: round;
}

.candle .body {
  stroke-width: 1.2;
}

.candle-up .wick,
.candle-up .body {
  stroke: #177245;
}

.candle-up .body {
  fill: #e2f4ea;
}

.candle-down .wick,
.candle-down .body {
  stroke: #a3333d;
}

.candle-down .body {
  fill: #f8e3e6;
}

.volume-bar {
  fill: #d8e1eb;
  opacity: .9;
}

.company-item {
  text-align: left;
  width: 100%;
}

@media (max-width: 576px) {
  .candle-chart,
  .candle-chart svg {
    min-height: 280px;
    height: 280px;
  }
}

/* Revised trading workspace */
.trade-topbar {
  grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(104px, auto));
}

.trade-title-block {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 16px;
}

.round-progress {
  height: 7px;
  background: #e9eef5;
  border-radius: 999px;
  overflow: hidden;
}

.round-progress > div {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width .45s ease;
}

.top-metric small {
  display: block;
  font-size: .76rem;
  color: var(--muted);
  margin-top: 2px;
}

.live-market-note {
  background: #f6f9fd;
  border: 1px dashed #cbd7e6;
  color: #536273;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: .84rem;
}

.chart-panel {
  position: relative;
}

.market-pulse {
  position: fixed;
  top: 74px;
  left: 50%;
  z-index: 1060;
  transform: translate(-50%, -18px);
  background: #142033;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .24);
  border-radius: 999px;
  padding: 10px 18px;
  opacity: 0;
  pointer-events: none;
  transition: .28s ease;
}

.market-pulse.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.candle-live .wick,
.candle-live .body {
  stroke-dasharray: 4 3;
  animation: candlePulse 1.2s ease-in-out infinite;
}

.candle-live .body {
  fill-opacity: .9;
}

.live-dot {
  fill: #1c5d99;
  stroke: #fff;
  stroke-width: 2;
  animation: liveDotPulse 1.2s ease-in-out infinite;
}

.live-price {
  white-space: nowrap;
}

@keyframes candlePulse {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}

@keyframes liveDotPulse {
  0%, 100% { r: 4; opacity: .72; }
  50% { r: 6; opacity: 1; }
}

.micro-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: .74rem;
  margin-top: 4px;
}

.trade-card {
  position: sticky;
  top: 82px;
}

.quick-order-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.order-estimate {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 11px;
  color: #405064;
  font-weight: 600;
}

.briefing-list,
.briefing-movers {
  display: grid;
  gap: 8px;
}

.briefing-card {
  border: 1px solid #e3e9f2;
  background: #fbfdff;
  border-radius: 14px;
  padding: 10px 11px;
}

.briefing-card p {
  color: var(--muted);
  margin: 5px 0;
  font-size: .86rem;
}

.briefing-card span {
  display: inline-flex;
  border-radius: 999px;
  background: #edf3fb;
  color: #36526d;
  padding: 3px 8px;
  font-size: .74rem;
}

.briefing-mover {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 8px 10px;
}

.briefing-mover span {
  color: var(--muted);
  font-size: .82rem;
}

.briefing-mover em {
  font-style: normal;
  font-weight: 700;
}

.capital-chart {
  width: 100%;
  min-height: 120px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.capital-chart svg {
  display: block;
  width: 100%;
  height: 130px;
}

.capital-line {
  fill: none;
  stroke: #1c5d99;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capital-chart circle {
  fill: #1c5d99;
  stroke: #fff;
  stroke-width: 2;
}

.capital-grid {
  stroke: #dfe6ef;
  stroke-width: 1;
}

.compact-scroll {
  max-height: 310px;
  overflow: auto;
}

@media (max-width: 1200px) {
  .trade-topbar {
    grid-template-columns: 1fr repeat(3, minmax(108px, auto));
  }
}

@media (max-width: 991px) {
  .trade-topbar {
    grid-template-columns: 1fr 1fr;
  }
  .trade-card {
    position: static;
  }
}

@media (max-width: 576px) {
  .trade-topbar {
    grid-template-columns: 1fr;
  }
  .quick-order-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .market-pulse {
    width: calc(100% - 24px);
    border-radius: 18px;
    text-align: center;
  }
}

.waiting-hero {
  background: #fff;
}

.waiting-status {
  display: inline-flex;
  border: 1px solid #d8e3ef;
  background: #f7faff;
  color: #405064;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .9rem;
}

/* Trading workspace validation fix */
.trade-topbar {
  grid-template-columns: minmax(230px, 1.45fr) repeat(7, minmax(104px, auto));
}
.metric-cash {
  border-color: rgba(25, 135, 84, .35);
  background: #fff;
}
.metric-cash strong {
  color: #137044;
}
.market-state-panel {
  background: #fff;
}
.market-index {
  border-radius: 999px;
  padding: 7px 11px;
  background: #f4f7fb;
  border: 1px solid var(--line);
  font-weight: 800;
  white-space: nowrap;
}
.market-hint {
  border: 1px dashed #cbd7e6;
  background: #f8fbff;
  border-radius: 13px;
  padding: 9px 10px;
  color: #48576a;
  font-size: .86rem;
}
.market-sectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.market-sectors > div,
.market-leaders > div,
.compact-news-item,
.cash-breakdown {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 13px;
}
.market-sectors > div {
  padding: 8px 9px;
}
.market-sectors span,
.cash-breakdown span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
}
.market-sectors strong {
  display: block;
  font-size: .84rem;
}
.market-leaders {
  display: grid;
  gap: 6px;
}
.market-leaders h3 {
  font-size: .78rem;
  margin: 4px 0 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.market-leaders > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  font-size: .86rem;
}
.compact-news-list {
  display: grid;
  gap: 7px;
}
.compact-news-item {
  padding: 9px 10px;
}
.compact-news-item strong {
  display: block;
  font-size: .86rem;
  line-height: 1.2;
}
.compact-news-item span {
  display: inline-flex;
  margin-top: 5px;
  border-radius: 999px;
  background: #eef4fb;
  color: #36526d;
  padding: 2px 7px;
  font-size: .72rem;
}
.cash-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  overflow: hidden;
}
.cash-breakdown strong {
  display: block;
  padding: 10px 10px 0;
  color: #111827;
}
.cash-breakdown span {
  padding: 0 10px 10px;
}
.cash-breakdown strong:not(:first-child),
.cash-breakdown span:not(:nth-child(2)) {
  border-left: 1px solid var(--line);
}
@media (max-width: 1400px) {
  .trade-topbar {
    grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(104px, auto));
  }
}
@media (max-width: 991px) {
  .trade-topbar {
    grid-template-columns: 1fr 1fr;
  }
  .market-sectors,
  .cash-breakdown {
    grid-template-columns: 1fr;
  }
  .cash-breakdown strong:not(:first-child),
  .cash-breakdown span:not(:nth-child(2)) {
    border-left: 0;
  }
}

/* Three-screen trading cockpit */
.workspace-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  position: sticky;
  top: 72px;
  z-index: 12;
  padding: 8px;
  background: rgba(243, 245, 248, .92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(221, 227, 235, .85);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(23, 40, 60, .06);
}

.workspace-tab {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 16px;
  padding: 12px 14px;
  text-align: left;
  transition: .15s ease;
}

.workspace-tab span,
.workspace-tab small {
  display: block;
}

.workspace-tab span {
  font-weight: 800;
}

.workspace-tab small {
  color: var(--muted);
  font-size: .78rem;
  margin-top: 2px;
}

.workspace-tab:hover,
.workspace-tab.active {
  border-color: var(--accent);
  background: #fff;
  color: var(--accent-dark);
}

.workspace-tab.active {
  box-shadow: inset 0 0 0 2px rgba(28, 93, 153, .12);
}

.workspace-section {
  display: none;
}

.workspace-section.active {
  display: block;
}

.terminal-list {
  max-height: min(62vh, 690px);
}

.ohlc-scroll {
  max-height: 210px;
}

#trade-workspace .trade-card,
#trade-workspace #company-card,
#news-market-workspace .panel,
#portfolio-workspace .panel,
.workspace-section {
  scroll-margin-top: 150px;
}

@media (max-width: 991px) {
  .workspace-tabs {
    top: 64px;
    grid-template-columns: 1fr;
  }

  .workspace-tab {
    padding: 10px 12px;
  }

  .pane,
  .pane.active {
    display: block !important;
  }
}

@media (max-width: 576px) {
  .workspace-tabs {
    position: static;
  }
}


/* Admin password and readable settings */
.admin-logout-link {
  color: rgba(255, 255, 255, .72) !important;
  text-decoration: none;
}
.admin-logout-link:hover {
  color: #fff !important;
}
.admin-login-card {
  margin-top: 8vh;
}
.admin-settings-table td:first-child {
  width: 280px;
  white-space: nowrap;
}
.config-pre {
  max-height: 420px;
  overflow: auto;
  margin: 0;
  padding: 10px 12px;
  background: #f6f8fa;
  border: 1px solid var(--line);
  border-radius: 12px;
  white-space: pre-wrap;
}

/* Three-screen trading cockpit refinements */
.terminal-grid,
.news-market-grid,
.portfolio-grid {
  align-items: stretch;
}
.news-market-grid .panel,
.portfolio-grid .panel {
  min-height: min(72vh, 760px);
}
.market-state-full .compact-news-list,
.news-list {
  max-height: min(50vh, 560px);
  overflow: auto;
}
.market-state-full .market-leaders {
  grid-template-columns: 1fr;
}
.portfolio-scroll,
.orders-scroll {
  max-height: min(58vh, 620px);
}
#scoreboard-list {
  max-height: min(62vh, 680px);
  overflow: auto;
}
.workspace-section {
  min-height: 50vh;
}
.workspace-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .workspace-tabs {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .admin-settings-table td:first-child {
    width: auto;
    white-space: normal;
  }
  .news-market-grid .panel,
  .portfolio-grid .panel {
    min-height: auto;
  }
}

/* Unified scrolling status + tabs block */
.trade-sticky-shell {
  position: sticky;
  top: 72px;
  z-index: 12;
  padding: 10px;
  background: rgba(243, 245, 248, .96);
  border: 1px solid rgba(221, 227, 235, .9);
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(23, 40, 60, .06);
}
.trade-sticky-shell .workspace-tabs {
  position: static;
  top: auto;
  z-index: auto;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.workspace-tab:hover,
.workspace-tab.active {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent-dark);
}
.metric-cash {
  background: #fff;
}
@media (max-width: 768px) {
  .trade-sticky-shell {
    position: static;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}