:root {
  --bg: #050914;
  --sidebar: #070d1a;
  --panel: #0d1628;
  --panel-2: #101d33;
  --panel-3: #13233d;
  --border: #243858;
  --border-soft: rgba(255, 255, 255, 0.08);

  --text: #edf4ff;
  --muted: #8fa4c4;
  --muted-2: #5f7598;

  --blue: #3b82f6;
  --cyan: #22d3ee;
  --green: #00e676;
  --red: #ff5252;
  --yellow: #ffd54f;
  --orange: #ff9800;

  --shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 32%),
    radial-gradient(circle at top right, rgba(0, 230, 118, 0.10), transparent 28%),
    var(--bg);
  color: var(--text);
}

button,
input,
select {
  font-family: inherit;
}

.terminal-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
}

/* SIDEBAR */

.sidebar {
  background: linear-gradient(180deg, #060b16, #050914);
  border-right: 1px solid var(--border-soft);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brand-box {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 8px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--green));
  color: #03111d;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(59, 130, 246, 0.25);
}

.brand-box h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.brand-box p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.side-nav {
  display: grid;
  gap: 9px;
}

.nav-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 13px 14px;
  border-radius: 14px;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: 0.2s ease;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.nav-btn.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(34, 211, 238, 0.10));
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--blue);
}

.server-card {
  margin-top: auto;
  background: rgba(13, 22, 40, 0.85);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 14px;
}

.server-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 14px;
}

.server-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

/* COMMON */

.dot {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: var(--yellow);
}

.dot.green {
  background: var(--green);
  box-shadow: 0 0 18px rgba(0, 230, 118, 0.65);
}

.dot.red {
  background: var(--red);
  box-shadow: 0 0 18px rgba(255, 82, 82, 0.65);
}

.dot.warning {
  background: var(--yellow);
}

.main-area {
  padding: 18px;
  min-width: 0;
}

.topbar {
  min-height: 76px;
  background: rgba(13, 22, 40, 0.88);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  margin-bottom: 18px;
}

.topbar h2 {
  margin: 0;
  font-size: 25px;
}

.topbar p {
  margin: 6px 0 0;
  color: var(--muted);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

select,
input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
}

.mode-pill,
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 800;
}

.mode-pill {
  color: var(--yellow);
  border: 1px solid rgba(255, 213, 79, 0.5);
  background: rgba(255, 213, 79, 0.11);
}

.live-pill {
  color: var(--green);
  border: 1px solid rgba(0, 230, 118, 0.45);
  background: rgba(0, 230, 118, 0.08);
}

.page {
  display: none;
}

.page.active {
  display: block;
}

.panel {
  background: rgba(13, 22, 40, 0.88);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow);
  min-width: 0;
}

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

.panel-header h3 {
  margin: 0;
  font-size: 18px;
}

.panel-header span {
  color: var(--muted);
  font-size: 12px;
}

.full-panel {
  min-height: calc(100vh - 115px);
}

/* MARKET CARDS */

.market-cards {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.6fr 1fr 0.8fr;
  gap: 14px;
  margin-bottom: 16px;
}

.market-card {
  background: linear-gradient(180deg, rgba(16, 29, 51, 0.95), rgba(13, 22, 40, 0.95));
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 15px;
  min-height: 92px;
}

.market-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 9px;
}

.market-card strong {
  display: block;
  font-size: 24px;
}

.market-card small {
  display: block;
  color: var(--green);
  margin-top: 6px;
}

/* MAIN TERMINAL GRID */

.terminal-grid {
  display: grid;
  grid-template-columns: 220px minmax(440px, 1fr) 310px;
  gap: 16px;
  margin-bottom: 16px;
}

.watchlist-panel {
  min-height: 500px;
}

.watch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  padding: 13px;
  margin-bottom: 10px;
}

.watch-item.active {
  border-color: rgba(59, 130, 246, 0.65);
  background: rgba(59, 130, 246, 0.12);
}

.watch-item strong {
  display: block;
  font-size: 14px;
}

.watch-item small {
  color: var(--muted);
  font-size: 11px;
}

.watch-item span {
  color: var(--green);
  font-weight: 800;
}

.chart-panel {
  min-height: 500px;
}

.timeframe-box {
  display: flex;
  gap: 6px;
}

.timeframe-box button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 7px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.timeframe-box button:hover {
  color: var(--text);
  border-color: var(--blue);
}

.chart-box {
  height: 430px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(180deg, #091326, #07101e);
  background-size: 48px 48px;
}

.chart-center-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  z-index: 2;
}

.chart-center-text h2 {
  margin: 0 0 8px;
  color: var(--text);
}

.chart-center-text p {
  max-width: 520px;
  margin: 0 auto;
  color: var(--muted);
}

.price-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 3;
}

.price-line span {
  position: absolute;
  right: 12px;
  top: -12px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}

.resistance-line {
  top: 22%;
  background: rgba(255, 82, 82, 0.75);
}

.resistance-line span {
  color: #fff;
  background: rgba(255, 82, 82, 0.85);
}

.entry-line {
  top: 48%;
  background: rgba(255, 213, 79, 0.75);
}

.entry-line span {
  color: #151006;
  background: rgba(255, 213, 79, 0.95);
}

.support-line {
  top: 72%;
  background: rgba(0, 230, 118, 0.75);
}

.support-line span {
  color: #00150a;
  background: rgba(0, 230, 118, 0.95);
}

/* SIGNAL PANEL */

.signal-panel {
  min-height: 500px;
}

.final-signal-box {
  border-radius: 18px;
  padding: 22px;
  text-align: center;
  background: rgba(255, 213, 79, 0.10);
  border: 1px solid rgba(255, 213, 79, 0.45);
  margin-bottom: 14px;
}

.final-signal-box span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}

.final-signal-box strong {
  display: block;
  color: var(--yellow);
  font-size: 25px;
  line-height: 1.2;
}

.final-signal-box.buy {
  background: rgba(0, 230, 118, 0.10);
  border-color: rgba(0, 230, 118, 0.5);
}

.final-signal-box.buy strong {
  color: var(--green);
}

.final-signal-box.sell {
  background: rgba(255, 82, 82, 0.10);
  border-color: rgba(255, 82, 82, 0.5);
}

.final-signal-box.sell strong {
  color: var(--red);
}

.signal-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.signal-mini-grid div,
.active-range-card {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  padding: 14px;
}

.signal-mini-grid span,
.active-range-card span,
.trade-setup-grid span,
.sr-box span,
.option-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.signal-mini-grid strong,
.active-range-card strong,
.trade-setup-grid strong,
.sr-box strong,
.option-summary strong {
  display: block;
  font-size: 20px;
}

.active-range-card {
  margin-top: 12px;
}

.active-range-card small {
  color: var(--green);
}

/* BOTTOM AREA */

.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sr-box {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--panel-2);
}

.sr-box.support {
  border-color: rgba(0, 230, 118, 0.38);
}

.sr-box.support strong {
  color: var(--green);
}

.sr-box.resistance {
  border-color: rgba(255, 82, 82, 0.38);
}

.sr-box.resistance strong {
  color: var(--red);
}

.trade-setup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.trade-setup-grid div {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  padding: 14px;
}

/* OPTION CHAIN */

.option-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.option-summary div {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 14px;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

th,
td {
  padding: 12px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  background: #0a1324;
  color: var(--muted);
  font-size: 12px;
  z-index: 4;
}

td {
  color: var(--text);
  font-size: 13px;
}

tr:hover td {
  background: rgba(255, 255, 255, 0.035);
}

tr.atm-row td {
  background: rgba(255, 213, 79, 0.13);
  color: var(--yellow);
  font-weight: 900;
}

.ce-strong {
  background: rgba(255, 82, 82, 0.16);
  color: #ffb1b1;
  font-weight: 800;
}

.pe-strong {
  background: rgba(0, 230, 118, 0.14);
  color: #9dffc5;
  font-weight: 800;
}

.strike-cell {
  color: var(--yellow);
  font-weight: 900;
}

/* SUPPORT PAGE */

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.level-list {
  display: grid;
  gap: 10px;
}

.level-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 14px;
}

.level-card strong {
  font-size: 22px;
}

.level-card small {
  color: var(--muted);
}

.level-card.support-level strong {
  color: var(--green);
}

.level-card.resistance-level strong {
  color: var(--red);
}

.tag {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(59, 130, 246, 0.12);
  color: var(--blue);
  border: 1px solid rgba(59, 130, 246, 0.35);
}

/* STRATEGY */

.strategy-box {
  display: grid;
  gap: 14px;
}

.strategy-section {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 15px;
}

.strategy-section h4 {
  margin: 0 0 10px;
}

.strategy-section p {
  margin: 7px 0;
  color: var(--muted);
}

/* POSITIONS */

.account-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.account-card {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 14px;
}

.account-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.account-card strong {
  display: block;
  font-size: 20px;
}

/* SETTINGS */

.settings-panel {
  max-width: 1000px;
}

.settings-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.settings-form label {
  color: var(--muted);
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.settings-form button {
  grid-column: 1 / -1;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: white;
  font-weight: 900;
  padding: 14px;
  cursor: pointer;
}

.settings-form button:hover {
  filter: brightness(1.08);
}

pre {
  margin-top: 16px;
  background: #030712;
  color: var(--green);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 14px;
  overflow: auto;
}

/* RESPONSIVE */

@media (max-width: 1250px) {
  .terminal-grid {
    grid-template-columns: 1fr;
  }

  .watchlist-panel,
  .chart-panel,
  .signal-panel {
    min-height: auto;
  }

  .market-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .bottom-grid,
  .two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .terminal-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
  }

  .topbar {
    display: grid;
    gap: 14px;
  }

  .topbar-right {
    flex-wrap: wrap;
  }

  .market-cards,
  .option-summary,
  .sr-row,
  .trade-setup-grid,
  .signal-mini-grid,
  .settings-form,
  .account-grid {
    grid-template-columns: 1fr;
  }
}

.hidden {
  display: none !important;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.25), transparent 34%),
    radial-gradient(circle at bottom right, rgba(0, 230, 118, 0.14), transparent 30%),
    #050914;
}

.login-card {
  width: 100%;
  max-width: 430px;
  background: rgba(13, 22, 40, 0.92);
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--shadow);
  text-align: center;
}

.login-logo {
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--green));
  color: #03111d;
  font-weight: 900;
  font-size: 22px;
}

.login-card h1 {
  margin: 0;
  font-size: 26px;
}

.login-card p {
  margin: 8px 0 22px;
  color: var(--muted);
}

.login-form {
  display: grid;
  gap: 14px;
  text-align: left;
}

.login-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.login-form button,
.logout-btn {
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: white;
  font-weight: 900;
  padding: 14px;
  cursor: pointer;
}

.login-form button:hover,
.logout-btn:hover {
  filter: brightness(1.08);
}

.login-error {
  min-height: 22px;
  margin-top: 14px;
  color: var(--red);
  font-weight: 800;
  font-size: 13px;
}

.login-note {
  display: block;
  margin-top: 10px;
  color: var(--muted-2);
}

.logout-btn {
  width: 100%;
  margin-top: auto;
}

.signal-buy {
  background: linear-gradient(135deg, rgba(0, 255, 120, 0.25), rgba(0, 255, 120, 0.08));
  border-color: rgba(0, 255, 120, 0.7);
}

.signal-sell {
  background: linear-gradient(135deg, rgba(255, 40, 40, 0.25), rgba(255, 40, 40, 0.08));
  border-color: rgba(255, 40, 40, 0.7);
}

.signal-neutral {
  background: linear-gradient(135deg, rgba(255, 220, 0, 0.18), rgba(255, 220, 0, 0.06));
  border-color: rgba(255, 220, 0, 0.6);
}

.option-table tbody tr td:nth-child(5) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

/* ===============================
   PHASE 5A - OPTION CHAIN STRENGTH COLORS
   =============================== */

#optionChainTable td {
  transition: background 0.2s ease, color 0.2s ease;
}

.strength-cell-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  font-weight: 700;
}

.strength-percent {
  font-size: 12px;
}

.strength-value {
  font-size: 11px;
  opacity: 0.95;
}

.strength-call-100 {
  background: #ff0000 !important;
  color: #ffffff !important;
  font-weight: 800;
}

.strength-put-100 {
  background: #00ff00 !important;
  color: #000000 !important;
  font-weight: 800;
}

.strength-active-75 {
  background: #fff200 !important;
  color: #000000 !important;
  font-weight: 800;
}

.atm-row td {
  background: #ffe599 !important;
  color: #000000 !important;
  font-weight: 800;
}

.atm-row .strength-call-100 {
  background: #ff0000 !important;
  color: #ffffff !important;
}

.atm-row .strength-put-100 {
  background: #00ff00 !important;
  color: #000000 !important;
}

.atm-row .strength-active-75 {
  background: #fff200 !important;
  color: #000000 !important;
}

.strike-cell {
  background: #1f2937 !important;
  color: #ffffff !important;
  font-weight: 900;
  font-size: 14px;
}

.positive-text {
  color: #00ff88 !important;
  font-weight: 700;
}

.negative-text {
  color: #ff4d4d !important;
  font-weight: 700;
}

.empty-table {
  text-align: center;
  padding: 20px;
  color: #aaa;
}
/* ===============================
   PHASE 5A - OPTION CHAIN STRENGTH COLORS
   =============================== */

.option-table td {
  transition: background 0.2s ease, color 0.2s ease;
  text-align: center;
}

.strength-cell-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  font-weight: 700;
}

.strength-percent {
  font-size: 12px;
}

.strength-value {
  font-size: 11px;
  opacity: 0.95;
}

.strength-call-100 {
  background: #ff0000 !important;
  color: #ffffff !important;
  font-weight: 800;
}

.strength-put-100 {
  background: #00ff00 !important;
  color: #000000 !important;
  font-weight: 800;
}

.strength-active-75 {
  background: #fff200 !important;
  color: #000000 !important;
  font-weight: 800;
}

.atm-row td {
  background: #ffe599 !important;
  color: #000000 !important;
  font-weight: 800;
}

.atm-row .strength-call-100 {
  background: #ff0000 !important;
  color: #ffffff !important;
}

.atm-row .strength-put-100 {
  background: #00ff00 !important;
  color: #000000 !important;
}

.atm-row .strength-active-75 {
  background: #fff200 !important;
  color: #000000 !important;
}

.strike-cell {
  background: #1f2937 !important;
  color: #ffffff !important;
  font-weight: 900;
  font-size: 14px;
}

.empty-table {
  text-align: center;
  padding: 20px;
  color: #aaa;
}
.itm-call-cell {
  background: #fff7cc !important;
  color: #000000 !important;
}

.itm-put-cell {
  background: #fff7cc !important;
  color: #000000 !important;
}

/* =====================================================
   Z2H FINAL SAFE FIX
   Menu overlay + Option Chain UI restore + Color logic
   ===================================================== */

/* =========================
   MENU / SIDEBAR FIX
   ========================= */

.terminal-shell {
  display: block !important;
  min-height: 100vh !important;
}

.main-area {
  width: 100% !important;
  margin-left: 0 !important;
  padding: 14px !important;
  min-width: 0 !important;
}

.sidebar {
  position: fixed !important;
  top: 0 !important;
  left: -320px !important;
  width: 300px !important;
  height: 100vh !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  transition: left 0.25s ease !important;
  background: linear-gradient(180deg, #060b16, #050914) !important;
  border-right: 1px solid rgba(56, 189, 248, 0.35) !important;
  padding: 18px !important;
}

.sidebar.open {
  left: 0 !important;
}

.menu-toggle-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  background: #07111f !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  z-index: 100000 !important;
}

.topbar {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.topbar > div:first-of-type {
  flex: 1 !important;
}

.sidebar-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  z-index: 99998 !important;
  display: none !important;
}

.sidebar-backdrop.show {
  display: block !important;
}

.sidebar .nav-btn,
.brand-box {
  cursor: pointer !important;
}

/* =========================
   OPTION CHAIN PAGE RESTORE
   ========================= */

/* Important: Spot / ATM / Expiry / Last Update ko hide nahi karna */
#page-optionchain .panel-header,
#page-optionchain .option-summary {
  display: flex !important;
}

/* Option summary UI restore */
#page-optionchain .option-summary {
  gap: 12px !important;
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
}

#page-optionchain .option-summary > div {
  min-width: 150px !important;
  background: linear-gradient(180deg, #101d33, #0d1628) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
}

#page-optionchain .option-summary span {
  display: block !important;
  color: #8fa4c4 !important;
  font-size: 12px !important;
  margin-bottom: 6px !important;
}

#page-optionchain .option-summary strong {
  color: #ffffff !important;
  font-size: 20px !important;
}

/* Panel normal rahe */
#page-optionchain .panel,
#page-optionchain .full-panel {
  padding: 16px !important;
  border-radius: 20px !important;
  overflow: visible !important;
}

/* Sirf table area scroll hoga */
.option-chain-table-wrap {
height: calc(100vh - 120px) !important;
max-height: calc(100vh - 120px) !important;
  overflow: auto !important;
  position: relative !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 14px !important;
  background: #07111f !important;
}

/* Table layout */
.z2h-clean-option-table {
  width: 100% !important;
  min-width: 1320px !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #07111f !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Sticky header only table ke andar */
.z2h-clean-option-table thead th {
  position: sticky !important;
  z-index: 50 !important;
}

.z2h-clean-option-table thead tr.z2h-main-head th {
  top: 0 !important;
  z-index: 70 !important;
}

.z2h-clean-option-table thead tr.z2h-sub-head th {
  top: 48px !important;
  z-index: 60 !important;
}

/* Common cell */
.z2h-clean-option-table th,
.z2h-clean-option-table td {
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 6px 6px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  height: 56px !important;
}

/* Column width */
.z2h-clean-option-table .c-iv {
  width: 100px !important;
}

.z2h-clean-option-table .c-oichg {
  width: 105px !important;
}

.z2h-clean-option-table .c-oi {
  width: 110px !important;
}

.z2h-clean-option-table .c-vol {
  width: 115px !important;
}

.z2h-clean-option-table .c-ltp {
  width: 110px !important;
}

.z2h-clean-option-table .c-rev {
  width: 80px !important;
}

.z2h-clean-option-table .c-strike {
  width: 150px !important;
}

/* Header colors */
.z2h-call-head {
  background: linear-gradient(180deg, #4b0b11, #230507) !important;
  color: #ff5b5b !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
}

.z2h-put-head {
  background: linear-gradient(180deg, #073f20, #041a0d) !important;
  color: #43f283 !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
}

.z2h-strike-head {
  background: linear-gradient(180deg, #062b46, #05101f) !important;
  color: #8ecbff !important;
  border-left: 2px solid rgba(56, 189, 248, 0.65) !important;
  border-right: 2px solid rgba(56, 189, 248, 0.65) !important;
}

.z2h-strike-head div {
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

.z2h-strike-head small {
  display: block !important;
  margin-top: 3px !important;
  color: #facc15 !important;
  font-size: 11px !important;
}

/* Sub header */
.z2h-sub-head th {
  height: 36px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.z2h-sub-head th:nth-child(-n+6) {
  background: #451015 !important;
  color: #ff7777 !important;
}

.z2h-sub-head th:nth-child(7) {
  background: #062a44 !important;
  color: #35d7ff !important;
}

.z2h-sub-head th:nth-child(n+8) {
  background: #063d22 !important;
  color: #48ee87 !important;
}

/* Body cells */
.z2h-clean-option-table tbody td {
  height: 56px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* Call / Put base */
.z2h-call {
  background: #18202c !important;
  color: #ffffff !important;
}

.z2h-put {
  background: #111a2b !important;
  color: #ffffff !important;
}

/* ITM / OTM soft yellow logic */
.z2h-itm {
  background: rgba(255, 247, 204, 0.18) !important;
  color: #fff7cc !important;
}

.z2h-otm {
  background: rgba(20, 31, 48, 0.96) !important;
}

/* Strike column */
.z2h-strike {
  background: linear-gradient(180deg, #062a44, #03101d) !important;
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  border-left: 2px solid rgba(56, 189, 248, 0.7) !important;
  border-right: 2px solid rgba(56, 189, 248, 0.7) !important;
}

/* ATM row */
.z2h-atm td {
  background: rgba(250, 204, 21, 0.26) !important;
  color: #fff7ad !important;
}

.z2h-atm .z2h-strike {
  background: linear-gradient(180deg, #a16207, #062a44) !important;
  color: #ffffff !important;
}

/* Two line values */
.z2h-dual {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.12 !important;
  gap: 3px !important;
}

.z2h-pct {
  font-size: 15px !important;
  font-weight: 900 !important;
}

.z2h-val {
  font-size: 15px !important;
  font-weight: 900 !important;
}

.z2h-ltp {
  font-size: 18px !important;
  font-weight: 900 !important;
}

.z2h-chg {
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* Text colors */
.z2h-green-text {
  color: #33f28b !important;
}

.z2h-red-text {
  color: #ff4d4d !important;
}

.z2h-white-text {
  color: #ffffff !important;
}

/* Strength color logic */
.z2h-call-max {
  background: #b91c1c !important;
  color: #ffffff !important;
}

.z2h-put-max {
  background: #16a34a !important;
  color: #ffffff !important;
}

.z2h-active-cell {
  background: #fff200 !important;
  color: #000000 !important;
}
/* ===============================
   Z2H Yellow Strength Levels
   75% ke baad percentage ke hisaab se yellow dark hoga
   =============================== */

.z2h-yellow-75 {
  background: #fff9a6 !important;
  color: #000000 !important;
}

.z2h-yellow-80 {
  background: #fff36b !important;
  color: #000000 !important;
}

.z2h-yellow-85 {
  background: #ffeb3b !important;
  color: #000000 !important;
}

.z2h-yellow-90 {
  background: #facc15 !important;
  color: #000000 !important;
}

.z2h-yellow-95 {
  background: #f59e0b !important;
  color: #000000 !important;
}

/* Old class support bhi rakho */
.strength-call-100 {
  background: #ff0000 !important;
  color: #ffffff !important;
}

.strength-put-100 {
  background: #00ff00 !important;
  color: #000000 !important;
}

.strength-active-75 {
  background: #fff200 !important;
  color: #000000 !important;
}

.atm-row td {
  background: #ffe599 !important;
  color: #000000 !important;
}

.itm-call-cell,
.itm-put-cell {
  background: #fff7cc !important;
  color: #000000 !important;
}

.otm-call-cell,
.otm-put-cell {
  background: #eef3f8 !important;
  color: #111827 !important;
}

/* Empty */
.z2h-empty {
  padding: 22px !important;
  color: #94a3b8 !important;
  font-size: 16px !important;
}
.strategy-controls {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #1f2a44;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.75);
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-group label {
  font-size: 12px;
  color: #94a3b8;
}

.control-group select,
.control-group input {
  background: #020617;
  color: #e5e7eb;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 9px 10px;
  min-width: 150px;
  outline: none;
}

.primary-btn {
  background: #2563eb;
  color: #ffffff;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 700;
}

.primary-btn:hover {
  background: #1d4ed8;
}

.strategy-status {
  margin-left: auto;
  display: flex;
  gap: 12px;
  color: #cbd5e1;
  font-size: 13px;
  align-items: center;
}

.strategy-table-wrap {
  max-height: 72vh;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid #1f2937;
}

.strategy-history-table {
  min-width: 2800px;
  border-collapse: collapse;
  font-size: 12px;
}

.strategy-history-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #0f172a;
  color: #93c5fd;
  white-space: nowrap;
}

.strategy-history-table td {
  vertical-align: top;
  white-space: nowrap;
}

.strategy-history-table .multi-line {
  white-space: normal;
  min-width: 150px;
  max-width: 220px;
  line-height: 1.35;
}

.signal-buy {
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
  font-weight: 800;
}

.signal-sell {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  font-weight: 800;
}

.signal-neutral {
  background: rgba(234, 179, 8, 0.22);
  color: #fde68a;
  font-weight: 800;
}

.empty-state,
.error-box {
  padding: 16px;
  border-radius: 12px;
  background: #0f172a;
  color: #cbd5e1;
}

.error-box {
  color: #fca5a5;
}
.date-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-control input {
  min-width: 150px;
}

.date-clear-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #334155;
  border-radius: 10px;
  background: #111827;
  color: #fca5a5;
  cursor: pointer;
  font-weight: 900;
  font-size: 15px;
}

.date-clear-btn:hover {
  background: #7f1d1d;
  color: #ffffff;
  border-color: #ef4444;
}

/* ===============================
   PHASE 5D - POSITION MANAGEMENT UI FIX
   History + Live Position Table
   =============================== */

.position-filter-box {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.75);
}

.position-filter-box label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.position-filter-box select,
.position-filter-box input {
  min-width: 150px;
  height: 40px;
  background: #020617;
  color: #e5e7eb;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 8px 10px;
  outline: none;
}

.position-filter-box button {
  height: 40px;
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
}

.position-filter-box button:hover {
  filter: brightness(1.12);
}

/* Top summary cards */
#accountBox.account-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 14px 0 16px;
}

#accountBox .account-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.9));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

#accountBox .account-card span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

#accountBox .account-card strong {
  display: block;
  color: #e5e7eb;
  font-size: 22px;
  font-weight: 900;
}

/* Position table wrapper */
#page-positions .table-wrap {
  width: 100%;
  max-height: 68vh;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.72);
}

/* Position table */
#page-positions table {
  width: 100%;
  min-width: 1500px;
  border-collapse: collapse;
  font-size: 12px;
}

#page-positions th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #0f172a;
  color: #93c5fd;
  padding: 11px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(148, 163, 184, 0.20);
  font-weight: 900;
}

#page-positions td {
  padding: 10px;
  color: #e5e7eb;
  white-space: nowrap;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  vertical-align: middle;
}

#page-positions tbody tr:hover td {
  background: rgba(59, 130, 246, 0.10);
}

#page-positions td:nth-child(1) {
  color: #facc15;
  font-weight: 900;
}

#page-positions td:nth-child(6),
#page-positions td:nth-child(7),
#page-positions td:nth-child(8),
#page-positions td:nth-child(9) {
  font-weight: 900;
}

/* Badge colors */
.position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
}

.position-badge.open {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.42);
}

.position-badge.closed {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.32);
}

.position-badge.buy {
  background: rgba(34, 197, 94, 0.22);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.48);
}

.position-badge.sell {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.48);
}

.position-badge.neutral {
  background: rgba(234, 179, 8, 0.18);
  color: #fde68a;
  border-color: rgba(234, 179, 8, 0.38);
}

/* Profit / Loss helper classes for next live table */
.pnl-profit,
.profit-text {
  color: #86efac !important;
  font-weight: 900;
}

.pnl-loss,
.loss-text {
  color: #fca5a5 !important;
  font-weight: 900;
}

.pnl-flat,
.flat-text {
  color: #fde68a !important;
  font-weight: 900;
}

/* Live position table future support */
.live-position-box {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 16px;
  background: rgba(34, 197, 94, 0.06);
}

.live-position-title {
  margin: 0 0 10px;
  color: #86efac;
  font-size: 15px;
  font-weight: 900;
}

.live-position-table-wrap {
  width: 100%;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.live-position-table {
  width: 100%;
  min-width: 1500px;
  border-collapse: collapse;
  font-size: 12px;
}

.live-position-table th {
  background: #0f172a;
  color: #93c5fd;
  padding: 10px;
  white-space: nowrap;
  text-align: left;
}

.live-position-table td {
  padding: 10px;
  white-space: nowrap;
  border-top: 1px solid rgba(148, 163, 184, 0.10);
}

/* Mobile */
@media (max-width: 900px) {
  .position-filter-box {
    align-items: stretch;
  }

  .position-filter-box label,
  .position-filter-box button {
    width: 100%;
  }

  .position-filter-box select,
  .position-filter-box input {
    width: 100%;
  }

  #accountBox.account-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  #accountBox.account-grid {
    grid-template-columns: 1fr;
  }
}
/* ===============================
   POSITION MANAGEMENT PAGE FIX
   Live + History table style
================================ */

.position-page-panel {
  overflow: hidden;
}

.position-filter-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.position-filter-box select,
.position-filter-box input {
  min-width: 130px;
  height: 42px;
}

.position-filter-box button {
  height: 42px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(34, 211, 238, 0.10));
  color: var(--text);
  border-radius: 12px;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
}

.position-filter-box button:hover {
  border-color: var(--blue);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.25);
}

#closePaperPositionBtn {
  background: linear-gradient(135deg, rgba(255, 82, 82, 0.28), rgba(255, 152, 0, 0.12));
  border-color: rgba(255, 82, 82, 0.45);
}

.position-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
}

.position-stat-card {
  background: linear-gradient(180deg, rgba(16, 29, 51, 0.96), rgba(8, 15, 29, 0.96));
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 14px;
  min-height: 82px;
}

.position-stat-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.position-stat-card strong {
  display: block;
  font-size: 24px;
  line-height: 1.1;
}

.position-stat-card.profit strong,
.profit-text {
  color: var(--green) !important;
}

.position-stat-card.loss strong,
.loss-text {
  color: var(--red) !important;
}

.flat-text {
  color: var(--yellow) !important;
}

.buy-text {
  color: var(--green) !important;
  font-weight: 900;
}

.sell-text {
  color: var(--red) !important;
  font-weight: 900;
}

.position-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
}

.position-section-title h3 {
  margin: 0;
  font-size: 18px;
}

.position-section-title span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.position-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(7, 13, 26, 0.72);
}

.live-position-wrap {
  border-color: rgba(0, 230, 118, 0.25);
  box-shadow: inset 0 0 0 1px rgba(0, 230, 118, 0.06);
}

.position-table {
  width: 100%;
  min-width: 1350px;
  border-collapse: collapse;
  font-size: 12px;
}

.position-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #101d33;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11px;
  border-bottom: 1px solid var(--border-soft);
  padding: 11px 10px;
  text-align: left;
  white-space: nowrap;
}

.position-table tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  padding: 10px;
  color: var(--text);
  white-space: nowrap;
}

.position-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.08);
}

.live-position-row {
  background: rgba(0, 230, 118, 0.055);
}

.live-position-row td {
  font-weight: 800;
}

.empty-state {
  color: var(--muted) !important;
  text-align: center !important;
  padding: 18px !important;
}

@media (max-width: 1100px) {
  .position-stats-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .position-filter-box {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .position-stats-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .position-filter-box select,
  .position-filter-box input,
  .position-filter-box button {
    width: 100%;
  }
}

/* =====================================================
   PHASE 6A LOGIN / TERMINAL VISIBILITY FIX
   Login page par terminal kabhi bhi niche nahi dikhega
   ===================================================== */

.hidden {
  display: none !important;
}

body.login-mode #loginScreen {
  display: flex !important;
}

body.login-mode #terminalShell {
  display: none !important;
}

body.terminal-mode #loginScreen {
  display: none !important;
}

body.terminal-mode #terminalShell {
  display: flex !important;
}

/* =====================================================
   LOGIN PAGE CENTER FIX
   ===================================================== */

.login-screen {
  min-height: 100vh !important;
  width: 100vw !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

body.login-mode .login-screen {
  display: flex !important;
}

.login-card {
  margin: 0 auto !important;
}
/* =====================================================
   ADMIN SIGNUP REQUEST STATUS UI
   ===================================================== */

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
}

.status-pill.pending {
  border-color: rgba(250, 204, 21, 0.55);
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
}

.status-pill.approved {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.status-pill.rejected {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}

.mini-btn {
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.10);
  color: #e0f2fe;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mini-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* =====================================================
   ADMIN PANEL - TRADING TERMINAL INSIDE ADMIN
   ===================================================== */

.admin-terminal-panel {
  height: calc(100vh - 150px);
  overflow: hidden;
}

.admin-terminal-frame {
  width: 100%;
  height: calc(100vh - 235px);
  min-height: 650px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 18px;
  background: #050914;
}

/* ===============================
   ADMIN / MASTER PANEL PAGE
   =============================== */

.admin-master-btn {
  border-color: rgba(34, 197, 94, 0.55) !important;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(56, 189, 248, 0.12)) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.admin-master-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.admin-master-card {
  background: linear-gradient(180deg, #101d33, #0d1628);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 18px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-master-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 197, 94, 0.65);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.admin-master-card h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 20px;
}

.admin-master-card p {
  margin: 0;
  color: #9fb3d1;
  line-height: 1.5;
}

.admin-master-note {
  margin-top: 18px;
  background: #020617;
  color: #00ff88;
  border-radius: 16px;
  padding: 16px;
  font-family: Consolas, monospace;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

@media (max-width: 900px) {
  .admin-master-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   PHASE 6A ADMIN / MASTER PANEL FRONTEND
   ===================================================== */

.admin-shell .main-area {
  overflow-y: auto;
}

.admin-side-nav .nav-btn {
  font-size: 15px;
}

.admin-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 18px;
  margin-bottom: 18px;
}

.admin-action-btn {
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: linear-gradient(180deg, #101d33, #0b1324);
  color: #e5efff;
  padding: 18px;
  border-radius: 18px;
  text-align: left;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.admin-action-btn span {
  display: block;
  margin-top: 8px;
  color: #93c5fd;
  font-size: 13px;
  font-weight: 700;
}

.admin-action-btn:hover {
  border-color: rgba(34, 211, 238, 0.75);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(34, 211, 238, 0.10));
}

.admin-action-btn.danger {
  border-color: rgba(255, 82, 82, 0.45);
}

.admin-terminal-panel {
  height: calc(100vh - 120px);
}

.admin-terminal-frame {
  width: 100%;
  height: calc(100% - 60px);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 18px;
  background: #020617;
}

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

.admin-placeholder-box {
  margin-top: 12px;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.78);
}

.admin-placeholder-box h3 {
  margin-bottom: 8px;
}

.admin-placeholder-box p {
  color: var(--muted);
  margin-bottom: 14px;
}

.admin-button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.permission-grid label {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.45);
  color: #e5efff;
  font-weight: 800;
}

.permission-grid input {
  margin-right: 8px;
}

.status-pill {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.status-pill.pending {
  color: #fde68a;
  border-color: rgba(253, 230, 138, 0.45);
  background: rgba(253, 230, 138, 0.10);
}

.status-pill.approved,
.status-pill.active {
  color: #00e676;
  border-color: rgba(0, 230, 118, 0.45);
  background: rgba(0, 230, 118, 0.10);
}

.status-pill.rejected,
.status-pill.blocked {
  color: #ff5252;
  border-color: rgba(255, 82, 82, 0.45);
  background: rgba(255, 82, 82, 0.10);
}

.mini-btn.danger {
  border-color: rgba(255, 82, 82, 0.45) !important;
  color: #ffb4b4 !important;
}

@media (max-width: 1200px) {
  .admin-action-grid,
  .permission-grid {
    grid-template-columns: 1fr;
  }

  .admin-terminal-panel {
    height: 620px;
  }
}

/* =====================================================
   ADMIN PAGE BACK BUTTON
   ===================================================== */

.admin-back-row {
  margin-top: 18px;
  padding: 16px 0 4px;
  display: flex;
  justify-content: flex-start;
}

.admin-back-btn {
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(34, 211, 238, 0.12));
  color: #e5efff;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.admin-back-btn:hover {
  border-color: rgba(34, 211, 238, 0.9);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.34), rgba(34, 211, 238, 0.20));
}

/* =====================================================
   ADMIN MODAL - APPROVE / REJECT SIGNUP
   ===================================================== */

.admin-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-modal.hidden {
  display: none !important;
}

.admin-modal-card {
  width: min(520px, 96vw);
  background: linear-gradient(180deg, #101d33, #0b1324);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.admin-modal-header h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 22px;
}

.admin-modal-header p {
  margin: 0;
  color: #93c5fd;
  font-size: 13px;
}

.modal-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 82, 82, 0.45);
  background: rgba(255, 82, 82, 0.10);
  color: #ffb4b4;
  font-size: 22px;
  cursor: pointer;
}

.admin-form-label {
  display: block;
  margin: 12px 0 6px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 900;
}

.admin-form-input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #020617;
  color: #ffffff;
  border-radius: 12px;
  padding: 12px;
  outline: none;
  font-size: 14px;
}

.admin-form-input:focus {
  border-color: rgba(34, 211, 238, 0.75);
}

.admin-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.admin-modal-card pre {
  margin-top: 14px;
  max-height: 120px;
}

/* =====================================================
   USER MANAGEMENT TABLE SMALL FIX
   ===================================================== */

#user-management .table-wrap {
  margin-top: 18px;
}

#user-management table th,
#user-management table td {
  white-space: nowrap;
}

#user-management table td small {
  color: #93c5fd;
  line-height: 1.6;
}

#user-management .market-cards {
  margin-bottom: 12px;
}

/* =====================================================
   PAGE PERMISSIONS
   ===================================================== */

.permission-table-wrap {
  margin-top: 16px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 8px;
  min-width: 310px;
}

.permission-grid label,
.permission-input-label {
  display: grid;
  gap: 5px;
  font-size: 11px;
  font-weight: 900;
  color: #93c5fd;
}

.permission-select,
.permission-input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #020617;
  color: #ffffff;
  border-radius: 10px;
  padding: 8px;
  outline: none;
  font-weight: 800;
}

.permission-select:focus,
.permission-input:focus {
  border-color: rgba(34, 211, 238, 0.75);
}

.permission-input {
  margin-bottom: 8px;
  min-width: 220px;
}

#page-permissions table th,
#page-permissions table td {
  vertical-align: top;
}

/* =====================================================
   PAGE PERMISSIONS SEARCH / FILTER
   ===================================================== */

.permission-filter-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 14px 0 16px;
  flex-wrap: wrap;
}

.permission-search-input {
  max-width: 460px;
}

.permission-status-filter {
  max-width: 190px;
}

/* =====================================================
   BROKER API CONTROL
   ===================================================== */

.broker-api-table-wrap {
  margin-top: 16px;
}

#broker-api-control table th,
#broker-api-control table td {
  vertical-align: top;
}

.broker-api-info {
  display: grid;
  gap: 8px;
  min-width: 190px;
}

.broker-action-col {
  display: grid;
  gap: 8px;
  min-width: 150px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.4px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.12);
  color: #e5e7eb;
  text-transform: uppercase;
}

.status-active {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
}

.status-blocked {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.status-pending {
  border-color: rgba(234, 179, 8, 0.55);
  background: rgba(234, 179, 8, 0.12);
  color: #fde68a;
}

/* ==================================================
   ADMIN TRADE & P&L REPORT
================================================== */

.admin-filter-panel {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  align-items: end;
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-form-group label {
  font-size: 12px;
  color: #94a3b8;
}

.admin-form-group input,
.admin-form-group select {
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}

.admin-form-group input:focus,
.admin-form-group select:focus {
  border-color: rgba(56, 189, 248, 0.8);
}

.admin-filter-actions {
  justify-content: end;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-summary-card {
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  padding: 14px;
}

.admin-summary-card span {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 8px;
}

.admin-summary-card strong {
  font-size: 20px;
  color: #f8fafc;
}

.admin-two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.admin-table-card {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.admin-card-title {
  font-weight: 700;
  color: #e5e7eb;
  margin-bottom: 12px;
}

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

.admin-wide-table {
  max-height: 520px;
  overflow: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 850px;
}

.admin-table th,
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  text-align: left;
  white-space: nowrap;
  font-size: 13px;
}

.admin-table th {
  color: #93c5fd;
  background: #020617;
  position: sticky;
  top: 0;
  z-index: 2;
}

.admin-table td {
  color: #e5e7eb;
}

.admin-table small {
  color: #94a3b8;
}

.admin-pnl-profit {
  color: #22c55e !important;
  font-weight: 800;
}

.admin-pnl-loss {
  color: #ef4444 !important;
  font-weight: 800;
}

.admin-pnl-flat {
  color: #cbd5e1 !important;
  font-weight: 700;
}

.admin-status-open {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  font-weight: 700;
  font-size: 12px;
}

.admin-status-closed {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  font-weight: 700;
  font-size: 12px;
}

@media (max-width: 1200px) {
  .admin-filter-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .admin-summary-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .admin-two-column-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .admin-filter-grid {
    grid-template-columns: 1fr;
  }

  .admin-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==================================================
   ADMIN TRADE DETAIL MODAL
================================================== */

.admin-small-btn {
  background: rgba(14, 165, 233, 0.16);
  border: 1px solid rgba(125, 211, 252, 0.45);
  color: #bae6fd;
  border-radius: 8px;
  padding: 7px 11px;
  font-weight: 800;
  cursor: pointer;
}

.admin-small-btn:hover {
  background: rgba(14, 165, 233, 0.28);
}

.trade-detail-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.82);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

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

.trade-detail-modal-box {
  width: min(1180px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: #0f172a;
  border: 1px solid rgba(125, 211, 252, 0.35);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.trade-detail-modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #0f172a;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.trade-detail-modal-header h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 24px;
}

.trade-detail-modal-header p {
  margin: 6px 0 0 0;
  color: #94a3b8;
}

.trade-detail-close-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(239, 68, 68, 0.16);
  color: #fecaca;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.trade-detail-body {
  padding: 20px;
}

.trade-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
}

.trade-detail-card {
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 16px;
}

.trade-detail-card h4 {
  margin: 0 0 14px 0;
  color: #93c5fd;
  font-size: 16px;
}

.trade-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding: 9px 0;
}

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

.trade-detail-row span {
  color: #94a3b8;
}

.trade-detail-row strong {
  color: #e5e7eb;
  text-align: right;
}

.trade-detail-full {
  margin-top: 16px;
}

.trade-detail-full p {
  margin: 0;
  color: #e5e7eb;
  line-height: 1.6;
}

.trade-detail-full pre {
  margin: 0;
  background: #020617;
  color: #d1d5db;
  border-radius: 10px;
  padding: 14px;
  overflow: auto;
  max-height: 360px;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.trade-detail-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fecaca;
  padding: 14px;
  border-radius: 12px;
}

@media (max-width: 900px) {
  .trade-detail-grid {
    grid-template-columns: 1fr;
  }
}

.pnl-positive {
  color: #19d37b !important;
}

.pnl-negative {
  color: #ff4d4f !important;
}

#user-live-monitor .market-card strong {
  font-size: 22px;
}

#user-live-monitor .table-wrap table th,
#user-live-monitor .table-wrap table td {
  white-space: nowrap;
  vertical-align: top;
}

.admin-small-input {
  width: 100%;
  min-width: 80px;
  background: #07111f;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #e5e7eb;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 12px;
  outline: none;
}

.admin-small-input:focus {
  border-color: rgba(34, 197, 94, 0.7);
}

.admin-filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 14px 0;
}

.admin-filter-input {
  background: #07111f;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 220px;
  outline: none;
}

.admin-filter-input:focus {
  border-color: rgba(34, 197, 94, 0.7);
}

/* ===============================
   LOGIN PAGE - SIGNUP ACCESS
================================ */
.login-actions-row {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.signup-link-btn {
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(14, 165, 233, 0.08);
  color: #38bdf8;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

.signup-link-btn:hover {
  background: rgba(14, 165, 233, 0.18);
}

.signup-access-box {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 6, 23, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.signup-access-box.hidden {
  display: none;
}

.signup-access-card {
  width: 100%;
  max-width: 480px;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  padding: 18px;
}

.signup-access-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.signup-access-head h2 {
  margin: 0;
  color: #e5e7eb;
  font-size: 22px;
}

.signup-access-head p {
  margin: 5px 0 0;
  color: #94a3b8;
  font-size: 13px;
}

.signup-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.signup-access-form {
  display: grid;
  gap: 10px;
}

.signup-access-form label {
  display: grid;
  gap: 5px;
  color: #cbd5e1;
  font-size: 13px;
}

.signup-access-form input,
.signup-access-form select,
.signup-access-form textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: #020617;
  color: #e5e7eb;
  border-radius: 10px;
  padding: 10px 11px;
  outline: none;
}

.signup-access-form textarea {
  min-height: 76px;
  resize: vertical;
}

.signup-access-form button[type="submit"] {
  margin-top: 6px;
  border: none;
  background: #16a34a;
  color: white;
  padding: 11px 14px;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 800;
}

.signup-access-msg {
  margin-top: 12px;
  font-size: 13px;
  color: #cbd5e1;
}

.signup-access-msg.success {
  color: #22c55e;
}

.signup-access-msg.error {
  color: #ef4444;
}

/* ===============================
   SIGNUP SUCCESS SCREEN
================================ */
.signup-success-box {
  margin-top: 18px;
  padding: 22px 16px;
  border-radius: 16px;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.35);
  text-align: center;
}

.signup-success-box.hidden {
  display: none;
}

.signup-success-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #16a34a;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
}

.signup-success-box h3 {
  margin: 0;
  color: #22c55e;
  font-size: 20px;
  font-weight: 900;
}

.signup-success-box p {
  margin: 8px 0 16px;
  color: #cbd5e1;
  font-size: 14px;
}

.signup-success-box button {
  border: none;
  background: #16a34a;
  color: white;
  padding: 10px 22px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
}

/* =====================================================
   Z2H USER PANEL
===================================================== */

.user-body {
  margin: 0;
  background: #070b16;
  color: #e5edf8;
  font-family: Arial, sans-serif;
}

.user-shell {
  min-height: 100vh;
  display: flex;
  background: #070b16;
}

.user-sidebar {
  width: 270px;
  min-height: 100vh;
  background: #0d1424;
  border-right: 1px solid #23304a;
  padding: 16px;
  box-sizing: border-box;
}

.user-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.user-logo {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #ffffff;
}

.user-brand h1 {
  margin: 0;
  font-size: 18px;
}

.user-brand p {
  margin: 3px 0 0;
  color: #94a3b8;
  font-size: 13px;
}

.user-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-nav-btn {
  width: 100%;
  border: 1px solid #283750;
  background: #111a2e;
  color: #dbeafe;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font-weight: 700;
}

.user-nav-btn:hover,
.user-nav-btn.active {
  background: #1e40af;
  border-color: #3b82f6;
}

.user-nav-btn.permission-blocked {
  opacity: 0.45;
  background: #1f2937;
  border-color: #374151;
}

.user-logout-btn {
  width: 100%;
  margin-top: 20px;
  border: 0;
  background: #dc2626;
  color: #ffffff;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
}

.user-main {
  flex: 1;
  padding: 18px;
  box-sizing: border-box;
  overflow: auto;
}

.user-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0d1424;
  border: 1px solid #23304a;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.user-topbar h2 {
  margin: 0;
  font-size: 24px;
}

.user-topbar p {
  margin: 5px 0 0;
  color: #9ca3af;
}

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

.user-pill {
  background: #111827;
  border: 1px solid #334155;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
}

.user-refresh-btn {
  border: 1px solid #22c55e;
  background: #16a34a;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 900;
}

.user-status-box {
  background: #111827;
  border: 1px solid #334155;
  color: #dbeafe;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.user-status-box.success {
  color: #22c55e;
  border-color: #166534;
}

.user-status-box.error {
  color: #ff4d4d;
  border-color: #7f1d1d;
}

.user-page {
  display: none;
}

.user-page.active {
  display: block;
}

.user-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.user-card,
.user-panel-card {
  background: #0d1424;
  border: 1px solid #23304a;
  border-radius: 18px;
  padding: 16px;
}

.user-card span {
  display: block;
  color: #9ca3af;
  font-size: 13px;
  margin-bottom: 8px;
}

.user-card strong {
  font-size: 22px;
  color: #ffffff;
}

.user-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.user-panel-card h3 {
  margin: 0 0 14px;
  font-size: 18px;
}

.user-info-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #1f2a3d;
  padding: 10px 0;
  gap: 10px;
}

.user-info-row span {
  color: #9ca3af;
}

.user-info-row strong {
  color: #ffffff;
  text-align: right;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}

.permission-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.permission-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #334155;
  background: #111827;
  border-radius: 12px;
  padding: 10px 12px;
}

.permission-item span {
  color: #cbd5e1;
  font-size: 13px;
}

.permission-item strong {
  font-size: 13px;
}

.permission-item.allowed strong {
  color: #22c55e;
}

.permission-item.blocked strong {
  color: #ef4444;
}

.access-ok {
  color: #22c55e;
  font-weight: 900;
}

.access-block {
  color: #ef4444;
  font-weight: 900;
}

.user-open-link {
  display: inline-block;
  margin-top: 10px;
  background: #2563eb;
  color: #ffffff;
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 900;
}

@media (max-width: 900px) {
  .user-shell {
    flex-direction: column;
  }

  .user-sidebar {
    width: 100%;
    min-height: auto;
  }

  .user-topbar,
  .user-top-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .user-card-grid,
  .user-two-col,
  .permission-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   USER MAIN TERMINAL PAGE
===================================================== */

.user-terminal-layout {
  display: grid;
  grid-template-columns: 220px 1fr 300px;
  gap: 14px;
  min-height: 620px;
}

.user-terminal-left,
.user-terminal-center,
.user-terminal-right {
  background: #0d1424;
  border: 1px solid #23304a;
  border-radius: 18px;
  padding: 14px;
}

.user-terminal-left h3,
.user-terminal-right h3,
.user-chart-top h3 {
  margin: 0 0 12px;
}

.user-symbol-btn {
  width: 100%;
  border: 1px solid #334155;
  background: #111827;
  color: #dbeafe;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 9px;
  cursor: pointer;
  font-weight: 900;
  text-align: left;
}

.user-symbol-btn.active,
.user-symbol-btn:hover {
  background: #1e40af;
  border-color: #3b82f6;
}

.user-terminal-info {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.user-terminal-info div {
  border: 1px solid #25324a;
  background: #111827;
  border-radius: 12px;
  padding: 10px;
}

.user-terminal-info span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 5px;
}

.user-terminal-info strong {
  color: #ffffff;
  font-size: 15px;
}

.user-chart-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.user-chart-top p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 13px;
}

.user-tf-buttons {
  display: flex;
  gap: 8px;
}

.user-tf-btn {
  border: 1px solid #334155;
  background: #111827;
  color: #dbeafe;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 900;
}

.user-tf-btn.active,
.user-tf-btn:hover {
  background: #16a34a;
  border-color: #22c55e;
}

.user-terminal-chart {
  width: 100%;
  height: 540px;
  background: #0b1220;
  border: 1px solid #1f2a3d;
  border-radius: 14px;
  overflow: hidden;
}

.user-signal-card {
  border: 1px solid #334155;
  background: #111827;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}

.user-signal-card span,
.user-signal-grid span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 6px;
}

.user-signal-card strong {
  font-size: 22px;
  color: #ffffff;
}

.user-signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.user-signal-grid div {
  border: 1px solid #25324a;
  background: #111827;
  border-radius: 12px;
  padding: 10px;
}

.user-signal-grid strong {
  color: #ffffff;
  font-size: 14px;
}

.signal-buy {
  color: #22c55e !important;
}

.signal-sell {
  color: #ef4444 !important;
}

.signal-confusion {
  color: #f59e0b !important;
}

.signal-range {
  color: #38bdf8 !important;
}

.user-terminal-note {
  margin-top: 14px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
  background: #111827;
  border: 1px solid #25324a;
  border-radius: 12px;
  padding: 10px;
}

@media (max-width: 1200px) {
  .user-terminal-layout {
    grid-template-columns: 1fr;
  }

  .user-terminal-chart {
    height: 420px;
  }
}

/* =====================================================
   FINAL USER PANEL ADMIN-LIKE 3 LINE SIDEBAR
===================================================== */

.user-shell {
  display: block !important;
  min-height: 100vh;
  background: #070b16;
}

.user-main {
  width: 100% !important;
  min-height: 100vh;
  margin-left: 0 !important;
  padding: 18px 24px !important;
  box-sizing: border-box;
}

.user-sidebar {
  position: fixed !important;
  top: 0;
  left: -310px !important;
  width: 290px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  z-index: 10001;
  background: #0d1424;
  border-right: 1px solid #23304a;
  transition: left 0.25s ease;
  overflow-y: auto;
  box-shadow: 20px 0 50px rgba(0, 0, 0, 0.45);
}

.user-sidebar.user-sidebar-open {
  left: 0 !important;
}

.user-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
}

.user-sidebar-overlay.active {
  display: block;
}

.user-main-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  background: #0d1424 !important;
  border: 1px solid #23304a !important;
  border-radius: 22px !important;
  padding: 24px 28px !important;
  margin-bottom: 18px !important;
}

.user-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.user-menu-toggle {
  display: flex !important;
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  border: 1px solid #0891b2 !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border-radius: 18px !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  line-height: 1;
}

.user-menu-toggle:hover {
  background: #123453 !important;
  border-color: #22d3ee !important;
}

.user-topbar h2 {
  margin: 0 !important;
  color: #f8fafc !important;
  font-size: 34px !important;
  line-height: 1.1;
  font-weight: 900;
}

.user-topbar p {
  margin: 8px 0 0 !important;
  color: #9fb2cc !important;
  font-size: 20px !important;
}

.user-status-box {
  margin-bottom: 18px !important;
}

@media (max-width: 900px) {
  .user-main {
    padding: 12px !important;
  }

  .user-main-header {
    padding: 18px !important;
    align-items: flex-start !important;
  }

  .user-header-left {
    align-items: flex-start;
  }

  .user-menu-toggle {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    font-size: 30px !important;
  }

  .user-topbar h2 {
    font-size: 26px !important;
  }

  .user-topbar p {
    font-size: 15px !important;
  }

  .user-top-actions {
    width: 100%;
  }
}
/* =====================================================
   USER OPTION CHAIN FINAL COMPACT SAME ADMIN COLOR
   ===================================================== */

#user-page-optionchain {
  padding: 6px !important;
  overflow: hidden !important;
}

#user-page-optionchain .user-oc-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}

#user-page-optionchain .user-oc-top h2 {
  font-size: 20px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  color: #ffffff !important;
}

#user-page-optionchain .user-oc-top p {
  font-size: 12px !important;
  margin: 3px 0 0 !important;
  color: #9fb2d0 !important;
}

#user-page-optionchain .user-oc-controls {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

#user-page-optionchain .user-oc-controls select,
#user-page-optionchain .user-oc-controls button {
  height: 32px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  background: #07111f !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#user-page-optionchain .user-oc-controls button {
  cursor: pointer !important;
  background: #ffffff !important;
  color: #111827 !important;
}

#user-page-optionchain .user-oc-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

#user-page-optionchain .user-oc-summary > div {
  min-width: 115px !important;
  padding: 6px 9px !important;
  border-radius: 10px !important;
  background: #101826 !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
}

#user-page-optionchain .user-oc-summary span {
  display: block !important;
  font-size: 10px !important;
  color: #9fb2d0 !important;
  line-height: 1.1 !important;
}

#user-page-optionchain .user-oc-summary b {
  display: block !important;
  margin-top: 2px !important;
  font-size: 13px !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
}

#user-page-optionchain .user-oc-status {
  font-size: 12px !important;
  margin: 4px 0 8px !important;
  color: #9fb2d0 !important;
}

#user-page-optionchain .user-oc-status.success {
  color: #22c55e !important;
}

#user-page-optionchain .user-oc-status.error {
  color: #ef4444 !important;
}

#user-page-optionchain .user-oc-status.info {
  color: #93c5fd !important;
}

#user-page-optionchain .user-oc-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
  border-radius: 8px !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  background: #020817 !important;
  max-height: calc(100vh - 170px) !important;
}

#user-page-optionchain .user-oc-table {
  width: 100% !important;
  min-width: 1180px !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
  background: #08111f !important;
}

#user-page-optionchain .user-oc-table th,
#user-page-optionchain .user-oc-table td {
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 3px 4px !important;
  height: 32px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

#user-page-optionchain .user-oc-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#user-page-optionchain .user-oc-call-title {
  background: #4b070c !important;
  color: #ff5b68 !important;
  font-size: 22px !important;
  letter-spacing: 8px !important;
  height: 36px !important;
}

#user-page-optionchain .user-oc-put-title {
  background: #063819 !important;
  color: #39ff88 !important;
  font-size: 22px !important;
  letter-spacing: 8px !important;
  height: 36px !important;
}

#user-page-optionchain .user-oc-strike-title {
  background: #0a3352 !important;
  color: #9ed4ff !important;
  font-size: 20px !important;
  font-weight: 1000 !important;
  height: 36px !important;
}

#user-page-optionchain .user-oc-strike-title small {
  display: block !important;
  font-size: 10px !important;
  color: #ffe44d !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
}

#user-page-optionchain .user-oc-call-head {
  background: #581018 !important;
  color: #ff7b86 !important;
}

#user-page-optionchain .user-oc-put-head {
  background: #074d25 !important;
  color: #3dff91 !important;
}

#user-page-optionchain .user-oc-strike-head {
  background: #0b3556 !important;
  color: #2ed9ff !important;
}

#user-page-optionchain .user-oc-call-side {
  background: #101c2d !important;
}

#user-page-optionchain .user-oc-put-side {
  background: #101c2d !important;
}

#user-page-optionchain .user-oc-strike-cell {
  background: #021429 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
}

#user-page-optionchain .user-oc-data-cell,
#user-page-optionchain .user-oc-ltp-cell,
#user-page-optionchain .user-oc-rev-cell,
#user-page-optionchain .user-oc-iv-cell {
  color: #f8fafc !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#user-page-optionchain .user-oc-cell-main {
  font-size: 12px !important;
  font-weight: 1000 !important;
  color: #fff7c2 !important;
  line-height: 1.05 !important;
}

#user-page-optionchain .user-oc-cell-sub {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.05 !important;
  margin-top: 2px !important;
}

#user-page-optionchain .user-oc-green-text {
  color: #20ff85 !important;
}

#user-page-optionchain .user-oc-red-text {
  color: #ff4d5d !important;
}

/* CE max = RED */
#user-page-optionchain .user-oc-call-max {
  background: #6b1118 !important;
  color: #ffffff !important;
}

/* PE max = GREEN */
#user-page-optionchain .user-oc-put-max {
  background: #08672f !important;
  color: #ffffff !important;
}

/* 75 to 99 strength yellow step */
#user-page-optionchain .user-oc-yellow-75 {
  background: rgba(255, 234, 0, 0.16) !important;
}

#user-page-optionchain .user-oc-yellow-80 {
  background: rgba(255, 234, 0, 0.23) !important;
}

#user-page-optionchain .user-oc-yellow-85 {
  background: rgba(255, 234, 0, 0.32) !important;
}

#user-page-optionchain .user-oc-yellow-90 {
  background: rgba(255, 234, 0, 0.43) !important;
}

#user-page-optionchain .user-oc-yellow-95 {
  background: rgba(255, 234, 0, 0.58) !important;
}

/* ATM row full yellow shade */
#user-page-optionchain .user-oc-atm-row td {
  background: rgba(179, 126, 12, 0.36) !important;
}

#user-page-optionchain .user-oc-atm-row .user-oc-strike-cell,
#user-page-optionchain .user-oc-atm-strike {
  background: linear-gradient(180deg, #a86b05, #08283a) !important;
  color: #ffffff !important;
}

#user-page-optionchain .user-oc-empty {
  height: 70px !important;
  font-size: 14px !important;
  color: #9fb2d0 !important;
  background: #08111f !important;
}

/* Compact column width */
#user-page-optionchain .user-oc-table th:nth-child(1),
#user-page-optionchain .user-oc-table td:nth-child(1),
#user-page-optionchain .user-oc-table th:nth-child(13),
#user-page-optionchain .user-oc-table td:nth-child(13) {
  width: 82px !important;
}

#user-page-optionchain .user-oc-table th:nth-child(2),
#user-page-optionchain .user-oc-table td:nth-child(2),
#user-page-optionchain .user-oc-table th:nth-child(12),
#user-page-optionchain .user-oc-table td:nth-child(12) {
  width: 88px !important;
}

#user-page-optionchain .user-oc-table th:nth-child(3),
#user-page-optionchain .user-oc-table td:nth-child(3),
#user-page-optionchain .user-oc-table th:nth-child(11),
#user-page-optionchain .user-oc-table td:nth-child(11) {
  width: 88px !important;
}

#user-page-optionchain .user-oc-table th:nth-child(4),
#user-page-optionchain .user-oc-table td:nth-child(4),
#user-page-optionchain .user-oc-table th:nth-child(10),
#user-page-optionchain .user-oc-table td:nth-child(10) {
  width: 92px !important;
}

#user-page-optionchain .user-oc-table th:nth-child(5),
#user-page-optionchain .user-oc-table td:nth-child(5),
#user-page-optionchain .user-oc-table th:nth-child(9),
#user-page-optionchain .user-oc-table td:nth-child(9) {
  width: 86px !important;
}

#user-page-optionchain .user-oc-table th:nth-child(6),
#user-page-optionchain .user-oc-table td:nth-child(6),
#user-page-optionchain .user-oc-table th:nth-child(8),
#user-page-optionchain .user-oc-table td:nth-child(8) {
  width: 62px !important;
}

#user-page-optionchain .user-oc-table th:nth-child(7),
#user-page-optionchain .user-oc-table td:nth-child(7) {
  width: 90px !important;
}

/* ==================================================
   USER PANEL - OPTION CHAIN COMPACT UI
   Admin option-chain style ka user copy
   ================================================== */

.user-oc-topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.user-oc-topbar h2 {
  margin: 0;
  font-size: 18px;
  color: #e5e7eb;
}

.user-oc-topbar p {
  margin: 4px 0 0;
  font-size: 11px;
  color: #9ca3af;
}

.user-oc-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.user-oc-select,
.user-oc-refresh-btn {
  background: #101827;
  color: #e5e7eb;
  border: 1px solid #253247;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  outline: none;
}

.user-oc-refresh-btn {
  cursor: pointer;
  background: #163153;
}

.user-oc-refresh-btn:hover {
  background: #1e426d;
}

.user-oc-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.user-oc-summary-card {
  background: #0c1422;
  border: 1px solid #1f2c3f;
  border-radius: 10px;
  padding: 7px 9px;
}

.user-oc-summary-card span {
  display: block;
  font-size: 10px;
  color: #9ca3af;
  margin-bottom: 3px;
}

.user-oc-summary-card strong {
  display: block;
  font-size: 13px;
  color: #f9fafb;
}

.user-status-box {
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 8px;
  font-size: 11px;
  border: 1px solid #263348;
}

.user-status-box.info {
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.10);
}

.user-status-box.success {
  color: #86efac;
  background: rgba(22, 163, 74, 0.10);
}

.user-status-box.error {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.10);
}

.user-oc-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #1f2c3f;
  border-radius: 10px;
  background: #07111f;
  max-height: calc(100vh - 260px);
}

.user-oc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 1120px;
  font-size: 10px;
  color: #d1d5db;
}

.user-oc-table th,
.user-oc-table td {
  border: 1px solid #172236;
  padding: 2px 3px;
  text-align: center;
  vertical-align: middle;
  height: 26px;
  line-height: 1.05;
  white-space: nowrap;
}

.user-oc-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  font-size: 10px;
  font-weight: 700;
}

.user-oc-call-title {
  background: #3b1116;
  color: #fecaca;
}

.user-oc-put-title {
  background: #0f3b24;
  color: #bbf7d0;
}

.user-oc-strike-title,
.user-oc-strike-head {
  background: #1f2937;
  color: #facc15;
}

.user-oc-strike-title small {
  display: block;
  font-size: 8px;
  color: #9ca3af;
  margin-top: 2px;
}

.user-oc-call-head {
  background: #251018;
  color: #fecaca;
}

.user-oc-put-head {
  background: #10251a;
  color: #bbf7d0;
}

.user-oc-cell {
  background: #0b1320;
}

.user-oc-call {
  color: #fecaca;
}

.user-oc-put {
  color: #bbf7d0;
}

.user-oc-call-itm {
  background: rgba(239, 68, 68, 0.12);
}

.user-oc-put-itm {
  background: rgba(34, 197, 94, 0.12);
}

.user-oc-strike-cell {
  background: #111827;
  color: #f9fafb;
  font-size: 11px;
  font-weight: 800;
}

.user-oc-atm-row td {
  outline: 1px solid rgba(250, 204, 21, 0.85);
}

.user-oc-atm-strike {
  background: #facc15 !important;
  color: #111827 !important;
}

.user-oc-dual {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  justify-content: center;
  min-height: 20px;
}

.user-oc-dual div {
  font-size: 9px;
  line-height: 1;
  opacity: 0.92;
}

.user-oc-dual strong {
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}

.user-oc-green-text {
  color: #22c55e !important;
}

.user-oc-red-text {
  color: #ef4444 !important;
}

.user-oc-empty {
  color: #9ca3af;
  padding: 18px !important;
  font-size: 12px;
}

/* CALL 100% = red, PUT 100% = green */
.user-oc-call-100 {
  background: rgba(239, 68, 68, 0.88) !important;
  color: #ffffff !important;
}

.user-oc-put-100 {
  background: rgba(34, 197, 94, 0.88) !important;
  color: #052e16 !important;
}

/* 75% to 95% yellow shade, jaise admin option chain strength highlight */
.user-oc-yellow-75 {
  background: rgba(234, 179, 8, 0.34) !important;
  color: #fef3c7 !important;
}

.user-oc-yellow-80 {
  background: rgba(234, 179, 8, 0.44) !important;
  color: #fef3c7 !important;
}

.user-oc-yellow-85 {
  background: rgba(234, 179, 8, 0.54) !important;
  color: #fff7b0 !important;
}

.user-oc-yellow-90 {
  background: rgba(234, 179, 8, 0.66) !important;
  color: #111827 !important;
}

.user-oc-yellow-95 {
  background: rgba(234, 179, 8, 0.78) !important;
  color: #111827 !important;
}

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

  .user-oc-summary-grid {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }

  .user-oc-table {
    min-width: 1080px;
    font-size: 9px;
  }
}

/* ==================================================
   USER OPTION CHAIN FIX
   ATM / ITM yellow row 100% red-green ko cover na kare
   ================================================== */

/* CALL side 100% hamesha red rahega */
.user-oc-table tbody tr td.user-oc-call-100,
.user-oc-table tbody tr.user-oc-atm-row td.user-oc-call-100,
.user-oc-table tbody tr.user-oc-atm-row td.user-oc-call.user-oc-call-100,
.user-oc-table tbody tr.user-oc-atm-row td.user-oc-call-itm.user-oc-call-100,
.user-oc-table tbody tr.user-oc-atm-row td.user-oc-cell.user-oc-call-100 {
  background: #b91c1c !important;
  color: #ffffff !important;
}

/* PUT side 100% hamesha green rahega */
.user-oc-table tbody tr td.user-oc-put-100,
.user-oc-table tbody tr.user-oc-atm-row td.user-oc-put-100,
.user-oc-table tbody tr.user-oc-atm-row td.user-oc-put.user-oc-put-100,
.user-oc-table tbody tr.user-oc-atm-row td.user-oc-put-itm.user-oc-put-100,
.user-oc-table tbody tr.user-oc-atm-row td.user-oc-cell.user-oc-put-100 {
  background: #16a34a !important;
  color: #ffffff !important;
}

/* 100% cell ke andar text bhi white rahe */
.user-oc-table tbody tr td.user-oc-call-100 *,
.user-oc-table tbody tr td.user-oc-put-100 * {
  color: #ffffff !important;
}

/* ATM strike cell yellow rahe, lekin data cell 100% ko overwrite na kare */
.user-oc-atm-row .user-oc-atm-strike {
  background: linear-gradient(180deg, #a16207, #062a44) !important;
  color: #ffffff !important;
}

/* Yellow 75-95 sirf tab lage jab 100% class nahi hai */
.user-oc-table tbody tr td.user-oc-yellow-75:not(.user-oc-call-100):not(.user-oc-put-100) {
  background: rgba(234, 179, 8, 0.34) !important;
}

.user-oc-table tbody tr td.user-oc-yellow-80:not(.user-oc-call-100):not(.user-oc-put-100) {
  background: rgba(234, 179, 8, 0.44) !important;
}

.user-oc-table tbody tr td.user-oc-yellow-85:not(.user-oc-call-100):not(.user-oc-put-100) {
  background: rgba(234, 179, 8, 0.54) !important;
}

.user-oc-table tbody tr td.user-oc-yellow-90:not(.user-oc-call-100):not(.user-oc-put-100) {
  background: rgba(234, 179, 8, 0.66) !important;
}

.user-oc-table tbody tr td.user-oc-yellow-95:not(.user-oc-call-100):not(.user-oc-put-100) {
  background: rgba(234, 179, 8, 0.78) !important;
}

/* =====================================================
   USER PANEL - S/R LEVELS
   ===================================================== */

.user-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.user-page-head h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  color: #f8fbff;
}

.user-page-head p {
  margin: 6px 0 0;
  color: #aebbd0;
  font-size: 16px;
}

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

.user-mini-select,
.user-mini-btn {
  height: 44px;
  border-radius: 12px;
  border: 1px solid #28415f;
  background: #0f1a2b;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  padding: 0 14px;
  outline: none;
}

.user-mini-btn {
  cursor: pointer;
  background: #174bd6;
  border-color: #2d6cff;
}

.user-mini-btn:hover {
  filter: brightness(1.08);
}

.user-sr-status-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.user-sr-status-card {
  border: 1px solid #263a55;
  background: #101a2a;
  border-radius: 18px;
  padding: 16px;
}

.user-sr-status-card span {
  display: block;
  font-size: 13px;
  color: #9fb0c7;
  margin-bottom: 6px;
}

.user-sr-status-card strong {
  display: block;
  font-size: 20px;
  color: #ffffff;
}

.user-sr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.user-sr-panel {
  border: 1px solid #263a55;
  background: #0e1727;
  border-radius: 22px;
  overflow: hidden;
}

.user-sr-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #263a55;
}

.user-sr-panel-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.user-sr-panel-head span {
  color: #9fb0c7;
  font-size: 14px;
  font-weight: 700;
}

.resistance-panel .user-sr-panel-head h2 {
  color: #ff5c5c;
}

.support-panel .user-sr-panel-head h2 {
  color: #28f58a;
}

.user-sr-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.user-sr-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #2b405c;
  background: #121d2f;
}

.user-sr-card.resistance-level {
  border-left: 5px solid #ff4d4d;
}

.user-sr-card.support-level {
  border-left: 5px solid #20e67a;
}

.user-sr-left strong {
  display: block;
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 3px;
}

.user-sr-left small {
  display: block;
  color: #9fb0c7;
  font-size: 13px;
}

.user-sr-price {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
}

.user-empty-state {
  color: #9fb0c7;
  font-size: 15px;
  padding: 14px;
  border: 1px dashed #304762;
  border-radius: 14px;
  background: #0b1322;
}

@media (max-width: 900px) {
  .user-page-head,
  .user-page-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .user-sr-status-row,
  .user-sr-grid {
    grid-template-columns: 1fr;
  }
}


.user-strategy-table-wrap {
  width: 100%;
  max-height: calc(100vh - 230px);
  overflow: auto;
  border: 1px solid #1f3554;
  border-radius: 12px;
  background: #08111f;
}

.user-strategy-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #ffffff;
}

.user-strategy-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #101b2e;
  color: #79b8ff;
  padding: 10px 8px;
  border: 1px solid #1f3554;
  white-space: nowrap;
  text-align: center;
  font-weight: 800;
}

.user-strategy-table td {
  padding: 10px 8px;
  border: 1px solid #1f3554;
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
  background: #0d1729;
}

.user-strategy-table td.multi-line {
  white-space: pre-line;
  line-height: 1.35;
  min-width: 130px;
}

.user-signal-buy {
  background: #104b39 !important;
  color: #22f57a !important;
  font-weight: 900 !important;
}

.user-signal-sell {
  background: #54202c !important;
  color: #ff4b4b !important;
  font-weight: 900 !important;
}

.user-signal-wait {
  background: #47431c !important;
  color: #fff176 !important;
  font-weight: 900 !important;
}

.user-empty-cell {
  text-align: center !important;
  padding: 24px !important;
  color: #b8c7dd !important;
}

.user-strategy-table-wrap {
  width: 100%;
  max-height: calc(100vh - 230px);
  overflow: auto;
  border: 1px solid #1f3554;
  border-radius: 12px;
  background: #08111f;
}

.user-strategy-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #ffffff;
}

.user-strategy-table th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #101b2e;
  color: #79b8ff;
  padding: 10px 8px;
  border: 1px solid #1f3554;
  white-space: nowrap;
  text-align: center;
  font-weight: 800;
}

.user-strategy-table td {
  padding: 10px 8px;
  border: 1px solid #1f3554;
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
  background: #0d1729;
}

.user-strategy-table td.multi-line {
  white-space: pre-line;
  line-height: 1.35;
  min-width: 130px;
}

.user-signal-buy {
  background: #104b39 !important;
  color: #22f57a !important;
  font-weight: 900 !important;
}

.user-signal-sell {
  background: #54202c !important;
  color: #ff4b4b !important;
  font-weight: 900 !important;
}

.user-signal-wait {
  background: #47431c !important;
  color: #fff176 !important;
  font-weight: 900 !important;
}

.user-empty-cell {
  text-align: center !important;
  padding: 24px !important;
  color: #b8c7dd !important;
}
/* ==============================
   USER STRATEGY TOP STATUS LINE
   ============================== */

.user-strategy-top-line {
  width: 100%;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.7fr 0.8fr 1.5fr;
  gap: 10px;
  align-items: stretch;
  margin: 12px 0 14px 0;
}

.user-strategy-message-cell,
.user-strategy-info-cell,
.user-strategy-control-cell {
  min-height: 54px;
  background: #0f1a2d;
  border: 1px solid #263a5a;
  border-radius: 14px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-strategy-message-cell span,
.user-strategy-info-cell span {
  font-size: 12px;
  color: #9db8dc;
  line-height: 16px;
}

.user-strategy-message-cell strong,
.user-strategy-info-cell strong {
  font-size: 17px;
  color: #ffffff;
  line-height: 22px;
  font-weight: 800;
  white-space: nowrap;
}

.user-strategy-message-cell {
  border-color: #08784b;
  background: #061f1a;
}

.user-strategy-message-cell strong {
  color: #32ff99;
  font-size: 15px;
}

.user-strategy-control-cell {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.user-strategy-control-cell select {
  min-width: 150px;
  height: 42px;
}

.user-strategy-control-cell button {
  height: 42px;
  padding: 0 18px;
}

@media (max-width: 1200px) {
  .user-strategy-top-line {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .user-strategy-control-cell {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .user-strategy-top-line {
    grid-template-columns: 1fr;
  }

  .user-strategy-control-cell {
    flex-direction: column;
    align-items: stretch;
  }

  .user-strategy-control-cell select,
  .user-strategy-control-cell button {
    width: 100%;
  }
}

/* =====================================================
   USER STRATEGY PAGE COMPACT FIX
   Paste at VERY END of frontend/css/style.css
===================================================== */

/* Strategy top info/card row compact */
#user-page-strategy .user-mini-cards {
  display: grid !important;
  grid-template-columns: 1.8fr 0.55fr 0.75fr 0.45fr 0.5fr 1fr !important;
  gap: 8px !important;
  margin: 10px 0 12px !important;
  align-items: stretch !important;
}

/* Message box + all mini cards compact */
#user-page-strategy .user-table-status,
#user-page-strategy .user-mini-card {
  padding: 8px 12px !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  line-height: 1.1 !important;
}

/* Message card text */
#user-page-strategy .user-table-status {
  font-size: 13px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
}

/* Card label text */
#user-page-strategy .user-mini-card span {
  font-size: 12px !important;
  line-height: 1.05 !important;
  margin-bottom: 4px !important;
}

/* Card value text */
#user-page-strategy .user-mini-card b {
  font-size: 18px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

/* Symbol select/date/refresh box compact */
#user-page-strategy .user-page-actions {
  gap: 8px !important;
  align-items: center !important;
}

#user-page-strategy .user-input-small,
#user-page-strategy input[type="date"],
#user-page-strategy .user-btn,
#user-page-strategy button {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

/* Strategy table wrapper: more screen space */
#user-page-strategy .user-strategy-table-wrap {
  max-height: calc(100vh - 255px) !important;
  border-radius: 10px !important;
}

/* Strategy table compact */
#user-page-strategy .user-strategy-table {
  font-size: 12px !important;
}

#user-page-strategy .user-strategy-table th,
#user-page-strategy .user-strategy-table td {
  padding: 5px 7px !important;
  height: 34px !important;
  min-height: 34px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* Signal cells also compact */
#user-page-strategy .user-strategy-table .signal-up,
#user-page-strategy .user-strategy-table .signal-down,
#user-page-strategy .user-strategy-table .signal-buy,
#user-page-strategy .user-strategy-table .signal-sell,
#user-page-strategy .user-strategy-table .signal-range,
#user-page-strategy .user-strategy-table .signal-confusion,
#user-page-strategy .user-strategy-table .signal-no-trade {
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 5px 7px !important;
}

/* Header title box compact only strategy page */
#user-page-strategy .user-page-head {
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  border-radius: 14px !important;
}

#user-page-strategy .user-page-head p {
  font-size: 13px !important;
  margin: 0 !important;
}

/* Mobile safety */
@media (max-width: 1100px) {
  #user-page-strategy .user-mini-cards {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }

  #user-page-strategy .user-strategy-table-wrap {
    max-height: calc(100vh - 300px) !important;
  }
}

/* ==================================================
   LEMONN TRADE SETTING
   ================================================== */

.lemonn-cards {
  grid-template-columns: repeat(5, 1fr);
}

.lemonn-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
  margin-bottom: 16px;
}

.lemonn-sub-panel {
  min-height: auto;
}

.lemonn-form {
  grid-template-columns: repeat(2, 1fr);
}

.lemonn-history-panel {
  margin-top: 16px;
}

.lemonn-filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.lemonn-filter-row input,
.lemonn-filter-row select {
  min-width: 150px;
}

.lemonn-payload-box h4 {
  margin: 14px 0 0;
  color: var(--muted);
}

.lemonn-response-cell {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  background: rgba(255,255,255,0.04);
}

.status-pill.status-active,
.status-active {
  color: var(--green);
  border-color: rgba(0, 230, 118, 0.45);
  background: rgba(0, 230, 118, 0.09);
}

.status-pill.status-blocked,
.status-blocked {
  color: var(--red);
  border-color: rgba(255, 82, 82, 0.45);
  background: rgba(255, 82, 82, 0.09);
}

.status-pill.status-pending,
.status-pending {
  color: var(--yellow);
  border-color: rgba(255, 213, 79, 0.45);
  background: rgba(255, 213, 79, 0.10);
}

@media (max-width: 1250px) {
  .lemonn-cards {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 800px) {
  .lemonn-cards,
  .lemonn-form {
    grid-template-columns: 1fr;
  }
}
/* ==================================================
   LEMONN TRADE SETTING FINAL CLEAN UI
   ================================================== */

.lemonn-main-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lemonn-cards {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.lemonn-settings-panel {
  margin-top: 0;
}

.lemonn-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px 16px;
  align-items: end;
}

.lemonn-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
}

.lemonn-form input,
.lemonn-form select {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(8, 22, 45, 0.95);
  color: var(--text);
  padding: 0 14px;
  outline: none;
  font-size: 14px;
}

.lemonn-url-field {
  grid-column: span 2;
}

.lemonn-save-btn {
  height: 46px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(90deg, #3f7cff, #20c7d9);
}

#lemonnSettingStatus {
  margin-top: 14px;
  min-height: 115px;
  max-height: 210px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.4;
}

.lemonn-history-panel {
  margin-top: 0;
}

.lemonn-filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.lemonn-filter-row input,
.lemonn-filter-row select {
  height: 38px;
  min-width: 145px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: rgba(8, 22, 45, 0.95);
  color: var(--text);
  padding: 0 10px;
}

.lemonn-history-panel .table-wrap {
  overflow-x: auto;
}

.lemonn-history-panel table {
  min-width: 1200px;
}

.lemonn-response-cell {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  background: rgba(255,255,255,0.04);
}

.status-pill.status-active,
.status-active {
  color: var(--green);
  border-color: rgba(0, 230, 118, 0.45);
  background: rgba(0, 230, 118, 0.09);
}

.status-pill.status-blocked,
.status-blocked {
  color: var(--red);
  border-color: rgba(255, 82, 82, 0.45);
  background: rgba(255, 82, 82, 0.09);
}

.status-pill.status-pending,
.status-pending {
  color: var(--yellow);
  border-color: rgba(255, 213, 79, 0.45);
  background: rgba(255, 213, 79, 0.10);
}

@media (max-width: 1250px) {
  .lemonn-cards {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .lemonn-form {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .lemonn-url-field {
    grid-column: span 2;
  }
}

@media (max-width: 800px) {
  .lemonn-cards,
  .lemonn-form {
    grid-template-columns: 1fr;
  }

  .lemonn-url-field {
    grid-column: span 1;
  }

  .lemonn-filter-row {
    align-items: stretch;
  }

  .lemonn-filter-row input,
  .lemonn-filter-row select,
  .lemonn-filter-row button {
    width: 100%;
  }
}
/* ==================================================
   TOP BAR LEMONN API STATUS
   ================================================== */

.lemonn-top-api-status {
  height: 36px;
  min-width: 155px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
  white-space: nowrap;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
}

.lemonn-top-api-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.lemonn-api-idle {
  color: var(--muted);
  border-color: var(--border-soft);
  background: rgba(255,255,255,0.04);
}

.lemonn-api-success {
  color: var(--green);
  border-color: rgba(0, 230, 118, 0.45);
  background: rgba(0, 230, 118, 0.10);
}

.lemonn-api-error {
  color: var(--red);
  border-color: rgba(255, 82, 82, 0.50);
  background: rgba(255, 82, 82, 0.12);
}

.lemonn-api-wait {
  color: var(--yellow);
  border-color: rgba(255, 213, 79, 0.50);
  background: rgba(255, 213, 79, 0.12);
}

.lemonn-api-test {
  color: #67d5ff;
  border-color: rgba(103, 213, 255, 0.45);
  background: rgba(103, 213, 255, 0.10);
}

.lemonn-api-off {
  color: #b8c2d6;
  border-color: rgba(184, 194, 214, 0.35);
  background: rgba(184, 194, 214, 0.08);
}

@media (max-width: 900px) {
  .lemonn-top-api-status {
    min-width: auto;
    width: 100%;
  }
}
/* ==================================================
   LEMONN PAYLOAD PREVIEW
   ================================================== */

.lemonn-payload-preview-box {
  margin-top: 14px;
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.30);
  overflow: hidden;
}

.lemonn-payload-preview-title {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  color: #67d5ff;
  border-bottom: 1px solid rgba(34, 211, 238, 0.20);
  background: rgba(34, 211, 238, 0.08);
}

#lemonnPayloadPreview {
  margin: 0;
  min-height: 230px;
  max-height: 360px;
  overflow: auto;
  padding: 14px;
  color: #00ff88;
  background: #020711;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre;
}
/* =====================================================
   ADMIN SECURITY & DATA CONTROL
===================================================== */

.security-control-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.security-card {
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

.security-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.security-card p {
  margin: 0 0 14px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
}

.security-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.security-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #94a3b8;
  font-size: 12px;
}

.security-form-grid input,
.security-form-grid select {
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}

.security-form-grid input:focus,
.security-form-grid select:focus {
  border-color: rgba(56, 189, 248, 0.8);
}

.security-card pre {
  margin-top: 12px;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #dbeafe;
  border-radius: 12px;
  padding: 12px;
  white-space: pre-wrap;
  max-height: 240px;
  overflow: auto;
}

.danger-zone {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(127, 29, 29, 0.18);
}

.mini-btn.danger {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}

.mini-btn.danger:hover {
  background: rgba(239, 68, 68, 0.3);
}

@media (max-width: 1000px) {
  .security-form-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   USER TERMINAL CHART OHLC INFO ROW
   ===================================================== */

.user-chart-info-row {
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.65);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.user-chart-info-row .chart-ohlc-info {
  color: #e5efff;
  font-weight: 800;
}

.user-chart-info-row .chart-crosshair-info {
  color: #93c5fd;
  font-weight: 700;
}

@media (max-width: 800px) {
  .user-chart-info-row {
    display: grid;
    gap: 6px;
  }
}

/* =====================================================
   USER MAIN TERMINAL - FULL CHART MODE
   ===================================================== */

.user-chart-full-btn,
.user-chart-back-btn {
  border: 1px solid rgba(59, 130, 246, 0.55);
  background: rgba(59, 130, 246, 0.15);
  color: #dbeafe;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.user-chart-full-btn:hover,
.user-chart-back-btn:hover {
  background: rgba(59, 130, 246, 0.28);
  color: #ffffff;
}

.user-chart-back-btn {
  display: none;
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.16);
}

/* Full mode me outer topbar/status/header hide */
#user-page-terminal.user-chart-full-mode {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050914;
  padding: 8px;
  overflow: hidden;
}

/* Watchlist and signal panel hide */
#user-page-terminal.user-chart-full-mode .user-terminal-left,
#user-page-terminal.user-chart-full-mode .user-terminal-right {
  display: none !important;
}

/* Layout only chart */
#user-page-terminal.user-chart-full-mode .user-terminal-layout {
  display: block !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  padding: 0;
  margin: 0;
}

/* Center chart full */
#user-page-terminal.user-chart-full-mode .user-terminal-center {
  width: 100% !important;
  height: calc(100vh - 16px) !important;
  max-height: calc(100vh - 16px) !important;
  overflow: hidden !important;
  margin: 0;
  padding: 8px;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: #050914 !important;
}
/* Chart top compact */
#user-page-terminal.user-chart-full-mode .user-chart-top {
  min-height: auto;
  margin: 0 0 6px;
  padding: 0;
  border: none !important;
  background: transparent !important;
}

#user-page-terminal.user-chart-full-mode .user-chart-top h3,
#user-page-terminal.user-chart-full-mode .user-chart-top p {
  display: none !important;
}

/* Full button hide, back button show */
#user-page-terminal.user-chart-full-mode #userChartFullBtn {
  display: none !important;
}

#user-page-terminal.user-chart-full-mode #userChartBackBtn {
  display: inline-flex !important;
}

/* OHLC row compact */
#user-page-terminal.user-chart-full-mode .user-chart-info-row {
  margin: 0 0 6px;
  padding: 6px 8px;
  border-radius: 8px;
}

/* Chart height big */
#user-page-terminal.user-chart-full-mode #userTerminalChart {
  height: calc(100vh - 92px) !important;
  min-height: calc(100vh - 92px) !important;
  width: 100% !important;
}

/* Normal mode me back button hidden */
#userChartBackBtn {
  display: none;
}
.user-terminal-chart {
  min-height: 520px;
}

/* =====================================================
   USER FULL CHART BACK FIX
   Back ke baad normal page overflow na ho
   ===================================================== */

body.user-chart-full-body-lock {
  overflow: hidden !important;
}

/* Normal mode me terminal page fixed/fullscreen nahi rahega */
#user-page-terminal:not(.user-chart-full-mode) {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* Normal mode me layout apne original grid par wapas */
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-layout {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* Normal mode me center panel full-screen height carry na kare */
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-center {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* Normal mode chart ka fixed proper height */
#user-page-terminal:not(.user-chart-full-mode) #userTerminalChart {
  height: 520px !important;
  min-height: 520px !important;
  max-height: 520px !important;
  width: 100% !important;
}
/* =====================================================
   FINAL FIX - USER CHART FULLSCREEN BACK OVERFLOW
   Back ke baad page bada / screen se bahar nahi jayega
   ===================================================== */

body.user-chart-full-body-lock {
  overflow: hidden !important;
}

/* Normal mode force reset */
#user-page-terminal:not(.user-chart-full-mode) {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* Normal layout ko screen ke andar force rakho */
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-layout {
  display: grid !important;
  grid-template-columns: 330px minmax(0, 1fr) 450px !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Normal me chart center overflow na kare */
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-center {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Normal me left/right apne size me rahe */
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-left,
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-right {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Normal chart size fixed, full-screen height carry nahi karega */
#user-page-terminal:not(.user-chart-full-mode) #userTerminalChart {
  width: 100% !important;
  max-width: 100% !important;
  height: 520px !important;
  min-height: 520px !important;
  max-height: 520px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Lightweight chart canvas bhi container ke bahar nahi jayega */
#user-page-terminal:not(.user-chart-full-mode) #userTerminalChart table,
#user-page-terminal:not(.user-chart-full-mode) #userTerminalChart canvas {
  max-width: 100% !important;
}

/* Full mode */
#user-page-terminal.user-chart-full-mode {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  background: #050914 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

#user-page-terminal.user-chart-full-mode .user-terminal-left,
#user-page-terminal.user-chart-full-mode .user-terminal-right {
  display: none !important;
}

#user-page-terminal.user-chart-full-mode .user-terminal-layout {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

#user-page-terminal.user-chart-full-mode .user-terminal-center {
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 16px) !important;
  max-height: calc(100vh - 16px) !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 8px !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: #050914 !important;
  box-sizing: border-box !important;
}

#user-page-terminal.user-chart-full-mode .user-chart-top {
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#user-page-terminal.user-chart-full-mode .user-chart-top h3,
#user-page-terminal.user-chart-full-mode .user-chart-top p {
  display: none !important;
}

#user-page-terminal.user-chart-full-mode .user-chart-info-row {
  margin: 0 0 6px !important;
}

#user-page-terminal.user-chart-full-mode #userTerminalChart {
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 92px) !important;
  min-height: calc(100vh - 92px) !important;
  max-height: calc(100vh - 92px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#user-page-terminal.user-chart-full-mode #userChartFullBtn {
  display: none !important;
}

#user-page-terminal.user-chart-full-mode #userChartBackBtn {
  display: inline-flex !important;
}

#userChartBackBtn {
  display: none;
}

/* Medium screen me columns adjust */
@media (max-width: 1400px) {
  #user-page-terminal:not(.user-chart-full-mode) .user-terminal-layout {
    grid-template-columns: 280px minmax(0, 1fr) 380px !important;
  }
}

@media (max-width: 1100px) {
  #user-page-terminal:not(.user-chart-full-mode) .user-terminal-layout {
    grid-template-columns: 1fr !important;
  }

  #user-page-terminal:not(.user-chart-full-mode) #userTerminalChart {
    height: 480px !important;
    min-height: 480px !important;
    max-height: 480px !important;
  }
}
/* =====================================================
   FINAL USER MAIN TERMINAL SIZE ARRANGE
   Watchlist chhota + Signal panel chhota + Chart bada
   ===================================================== */

/* Normal mode main layout */
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-layout {
  display: grid !important;
  grid-template-columns: 230px minmax(0, 1fr) 300px !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
}

/* Watchlist panel compact */
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-left {
  width: 230px !important;
  max-width: 230px !important;
  min-width: 230px !important;
  padding: 14px !important;
}

/* Watchlist buttons compact */
#user-page-terminal:not(.user-chart-full-mode) .user-symbol-btn {
  min-height: 52px !important;
  padding: 10px 14px !important;
  font-size: 16px !important;
}

/* Left info cards compact */
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-info > div {
  padding: 12px 14px !important;
  min-height: auto !important;
}

/* Chart center maximum width */
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-center {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px !important;
}

/* Chart height bada */
#user-page-terminal:not(.user-chart-full-mode) #userTerminalChart {
  height: 620px !important;
  min-height: 620px !important;
  max-height: 620px !important;
  width: 100% !important;
}

/* Signal panel compact */
#user-page-terminal:not(.user-chart-full-mode) .user-terminal-right {
  width: 300px !important;
  max-width: 300px !important;
  min-width: 300px !important;
  padding: 14px !important;
}

/* Signal panel cards compact */
#user-page-terminal:not(.user-chart-full-mode) .user-signal-card {
  padding: 14px 16px !important;
  min-height: auto !important;
  margin-bottom: 12px !important;
}

/* Final signal / action text controlled */
#user-page-terminal:not(.user-chart-full-mode) .user-signal-card strong {
  font-size: 22px !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  max-width: 100% !important;
  word-break: break-word !important;
}

/* Action bada text panel se bahar na jaye */
#user-page-terminal:not(.user-chart-full-mode) #userAction {
  font-size: 20px !important;
}

/* Signal grid compact */
#user-page-terminal:not(.user-chart-full-mode) .user-signal-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

#user-page-terminal:not(.user-chart-full-mode) .user-signal-grid > div {
  padding: 12px 14px !important;
  min-height: 82px !important;
}

#user-page-terminal:not(.user-chart-full-mode) .user-signal-grid strong {
  font-size: 16px !important;
}

/* OHLC row single line friendly */
#user-page-terminal:not(.user-chart-full-mode) .user-chart-info-row {
  padding: 10px 14px !important;
  gap: 12px !important;
}

#user-page-terminal:not(.user-chart-full-mode) .user-chart-info-row .chart-ohlc-info,
#user-page-terminal:not(.user-chart-full-mode) .user-chart-info-row .chart-crosshair-info {
  font-size: 13px !important;
}

/* Timeframe buttons compact */
#user-page-terminal:not(.user-chart-full-mode) .user-tf-buttons {
  gap: 8px !important;
}

#user-page-terminal:not(.user-chart-full-mode) .user-tf-btn,
#user-page-terminal:not(.user-chart-full-mode) .user-chart-full-btn {
  padding: 8px 13px !important;
  min-width: auto !important;
}

/* Medium screen adjust */
@media (max-width: 1450px) {
  #user-page-terminal:not(.user-chart-full-mode) .user-terminal-layout {
    grid-template-columns: 210px minmax(0, 1fr) 280px !important;
    gap: 12px !important;
  }

  #user-page-terminal:not(.user-chart-full-mode) .user-terminal-left {
    width: 210px !important;
    max-width: 210px !important;
    min-width: 210px !important;
  }

  #user-page-terminal:not(.user-chart-full-mode) .user-terminal-right {
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
  }

  #user-page-terminal:not(.user-chart-full-mode) #userTerminalChart {
    height: 600px !important;
    min-height: 600px !important;
    max-height: 600px !important;
  }

  #user-page-terminal:not(.user-chart-full-mode) #userAction {
    font-size: 18px !important;
  }
}
/* =====================================================
   FINAL USER STRATEGY PAGE FIT FIX
   Top summary one-line + compact table inside page
   ===================================================== */

/* Page horizontal bahar na jaye */
.user-body,
.user-shell,
.user-main,
#user-page-strategy {
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Strategy page padding compact */
#user-page-strategy.user-page-section,
#user-page-strategy {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Top line: message + cards + controls same line */
#user-page-strategy .user-strategy-top-line {
  display: grid !important;
  grid-template-columns:
    minmax(360px, 1fr)
    110px
    140px
    120px
    125px
    minmax(520px, auto) !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  margin: 0 0 8px 0 !important;
  box-sizing: border-box !important;
}

/* Message card compact, long text same line me cut */
#user-page-strategy .user-strategy-message-cell {
  min-width: 0 !important;
  height: 66px !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#user-page-strategy .user-strategy-message-cell span {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

#user-page-strategy #userStrategyStatus {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

/* Symbol / Last Update / Rows / Status cards compact */
#user-page-strategy .user-strategy-info-cell {
  height: 66px !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#user-page-strategy .user-strategy-info-cell span {
  font-size: 12px !important;
  line-height: 1.1 !important;
}

#user-page-strategy .user-strategy-info-cell strong {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 19px !important;
  line-height: 1.15 !important;
}

/* Controls ek hi line me */
#user-page-strategy .user-strategy-control-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  height: 66px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#user-page-strategy .user-strategy-control-cell select,
#user-page-strategy .user-strategy-control-cell input {
  height: 42px !important;
  min-height: 42px !important;
  padding: 7px 10px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

#user-page-strategy #userStrategySymbol {
  width: 150px !important;
  min-width: 150px !important;
}

#user-page-strategy #userStrategyDate {
  width: 145px !important;
  min-width: 145px !important;
}

#user-page-strategy .user-strategy-control-cell .user-btn {
  height: 42px !important;
  min-height: 42px !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  min-width: auto !important;
}

#user-page-strategy #userStrategyLoadMoreBtn {
  max-width: 125px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Table wrapper page ke andar rahe, page bahar nahi jaye */
#user-page-strategy #userStrategyTableWrap,
#user-page-strategy .user-strategy-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 350px) !important;
  min-height: 360px !important;
  overflow: auto !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

/* Table compact */
#user-page-strategy .user-strategy-table {
  width: max-content !important;
  min-width: 1550px !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

/* Header compact sticky */
#user-page-strategy .user-strategy-table th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  padding: 6px 7px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  height: 34px !important;
}

/* Cell compact */
#user-page-strategy .user-strategy-table td {
  padding: 5px 7px !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  height: 34px !important;
  max-width: 130px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Multi line cells ko bhi jyada bada nahi hone dena */
#user-page-strategy .user-strategy-table td.multi-line {
  white-space: pre-line !important;
  line-height: 1.05 !important;
  max-width: 145px !important;
  max-height: 44px !important;
  overflow: hidden !important;
}

/* Important columns thoda controlled */
#user-page-strategy .user-strategy-table th:nth-child(1),
#user-page-strategy .user-strategy-table td:nth-child(1) {
  max-width: 70px !important;
}

#user-page-strategy .user-strategy-table th:nth-child(2),
#user-page-strategy .user-strategy-table td:nth-child(2) {
  max-width: 75px !important;
}

#user-page-strategy .user-strategy-table th:nth-child(3),
#user-page-strategy .user-strategy-table td:nth-child(3) {
  max-width: 95px !important;
}

#user-page-strategy .user-strategy-table th:nth-child(4),
#user-page-strategy .user-strategy-table td:nth-child(4),
#user-page-strategy .user-strategy-table th:nth-child(5),
#user-page-strategy .user-strategy-table td:nth-child(5) {
  max-width: 85px !important;
}

/* Horizontal scrollbar table ke andar rahe */
#user-page-strategy .user-strategy-table-wrap::-webkit-scrollbar {
  height: 10px !important;
  width: 10px !important;
}

#user-page-strategy .user-strategy-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.65) !important;
  border-radius: 999px !important;
}

/* 1500px se chhote screen par cards aur compact */
@media (max-width: 1500px) {
  #user-page-strategy .user-strategy-top-line {
    grid-template-columns:
      minmax(300px, 1fr)
      95px
      120px
      105px
      110px
      minmax(455px, auto) !important;
    gap: 6px !important;
  }

  #user-page-strategy .user-strategy-info-cell strong {
    font-size: 17px !important;
  }

  #user-page-strategy #userStrategySymbol {
    width: 125px !important;
    min-width: 125px !important;
  }

  #user-page-strategy #userStrategyDate {
    width: 128px !important;
    min-width: 128px !important;
  }

  #user-page-strategy .user-strategy-control-cell .user-btn {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
}
/* =====================================================
   USER STRATEGY TOP CARD TEXT FIT FIX
   Bold text card ke andar rahega, bahar nahi jayega
   ===================================================== */

/* Message bold text fit */
#user-page-strategy #userStrategyStatus {
  font-size: clamp(13px, 1.05vw, 18px) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Symbol / Last Update / Rows / Status bold text fit */
#user-page-strategy .user-strategy-info-cell strong,
#user-page-strategy #userStrategyCardSymbol,
#user-page-strategy #userStrategyCardUpdate,
#user-page-strategy #userStrategyCardRows,
#user-page-strategy #userStrategyCardStatus {
  display: block !important;
  font-size: clamp(14px, 1.15vw, 20px) !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Info card label bhi compact */
#user-page-strategy .user-strategy-info-cell span {
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Card ke andar content vertical center + safe */
#user-page-strategy .user-strategy-info-cell {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  overflow: hidden !important;
}

/* Rows / Status card thoda aur compact text */
#user-page-strategy #userStrategyCardRows,
#user-page-strategy #userStrategyCardStatus {
  font-size: clamp(13px, 1vw, 18px) !important;
}

/* Button text bhi bahar na jaye */
#user-page-strategy #userStrategyLoadMoreBtn {
  max-width: 140px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* =====================================================
   USER POSITION MANAGEMENT FINAL UI
   Compact, inside-page scroll, 1s live P&L display
   ===================================================== */

#user-page-positions {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.user-pos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(13, 22, 40, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.user-pos-head h3 {
  margin: 0;
  font-size: 24px;
}

.user-pos-head p {
  margin: 4px 0 0;
  color: #9fb3d1;
  font-size: 13px;
}

.user-pos-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.user-pos-controls select,
.user-pos-controls input,
.user-pos-controls button {
  height: 42px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}

.user-pos-controls select {
  min-width: 135px;
}

.user-pos-controls input {
  min-width: 145px;
}

.user-pos-controls button {
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.16);
  color: #e5efff;
  padding: 0 12px;
  cursor: pointer;
}

#userPosManualCloseBtn {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(248, 113, 113, 0.16);
}

.user-pos-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.user-pos-stat-card {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}

.user-pos-stat-card span {
  display: block;
  color: #9fb3d1;
  font-size: 12px;
  margin-bottom: 6px;
}

.user-pos-stat-card strong {
  display: block;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-pos-stat-card.profit strong,
.profit-text {
  color: #22c55e !important;
  font-weight: 900;
}

.user-pos-stat-card.loss strong,
.loss-text {
  color: #ef4444 !important;
  font-weight: 900;
}

.flat-text {
  color: #facc15 !important;
  font-weight: 900;
}

.user-pos-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 8px;
}

.user-pos-section-title h4 {
  margin: 0;
  font-size: 18px;
}

.user-pos-section-title span {
  color: #9fb3d1;
  font-size: 12px;
}

.user-pos-section-title strong {
  color: #22c55e;
  font-size: 13px;
}

.user-pos-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.82);
}

.user-pos-history-wrap {
  max-height: calc(100vh - 560px);
  min-height: 260px;
}

.user-pos-table {
  width: max-content;
  min-width: 1500px;
  border-collapse: collapse;
}

.user-pos-table th,
.user-pos-table td {
  padding: 7px 8px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  white-space: nowrap;
  text-align: center;
  font-size: 12px !important;
  line-height: 1.15;
}

.user-pos-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #0b1426;
  color: #93c5fd;
  font-size: 12px !important;
  font-weight: 900;
}

.user-pos-table td {
  color: #e5efff;
  font-weight: 700;
}

.user-live-position-row td {
  background: rgba(34, 197, 94, 0.06);
}

.user-empty-cell {
  text-align: center !important;
  color: #9fb3d1 !important;
  padding: 18px !important;
}

.user-pos-table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.user-pos-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.65);
  border-radius: 999px;
}

@media (max-width: 1350px) {
  .user-pos-head {
    display: grid;
  }

  .user-pos-controls {
    overflow-x: auto;
  }

  .user-pos-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .user-pos-stats {
    grid-template-columns: 1fr 1fr;
  }
}
/* =====================================================
   USER TRADING / ORDER PANEL FINAL UI
   ===================================================== */

#user-page-trading {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.user-trade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(13, 22, 40, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.user-trade-head h3 {
  margin: 0;
  font-size: 24px;
}

.user-trade-head p {
  margin: 4px 0 0;
  color: #9fb3d1;
  font-size: 13px;
}

.user-trade-head-actions button,
.user-trade-action-row button,
.user-trade-mini-danger {
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.16);
  color: #e5efff;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.user-trade-wallet-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.user-trade-card {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}

.user-trade-card span {
  display: block;
  color: #9fb3d1;
  font-size: 12px;
  margin-bottom: 6px;
}

.user-trade-card strong {
  display: block;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-trade-main-grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.user-trade-panel {
  background: rgba(13, 22, 40, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  min-width: 0;
}

.user-trade-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.user-trade-panel-head h4 {
  margin: 0;
  font-size: 18px;
}

.user-trade-panel-head span {
  color: #9fb3d1;
  font-size: 12px;
}

.user-trade-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.user-trade-form label {
  color: #9fb3d1;
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
}

.user-trade-form select,
.user-trade-form input {
  height: 42px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  width: 100%;
}

.user-trade-ltp-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.user-trade-ltp-box > div {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 14px;
  padding: 12px;
}

.user-trade-ltp-box span {
  display: block;
  color: #9fb3d1;
  font-size: 12px;
  margin-bottom: 6px;
}

.user-trade-ltp-box strong {
  display: block;
  color: #22c55e;
  font-size: 22px;
  font-weight: 900;
}

.user-trade-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-trade-buy-btn {
  flex: 1;
  border-color: rgba(34, 197, 94, 0.55) !important;
  background: rgba(34, 197, 94, 0.18) !important;
  color: #bbf7d0 !important;
}

.user-trade-exit-btn {
  flex: 1;
  border-color: rgba(248, 113, 113, 0.55) !important;
  background: rgba(248, 113, 113, 0.18) !important;
  color: #fecaca !important;
}

.user-trade-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.82);
}

.user-trade-history-wrap {
  max-height: 310px;
}

.user-trade-table {
  width: max-content;
  min-width: 1150px;
  border-collapse: collapse;
}

.user-trade-table th,
.user-trade-table td {
  padding: 7px 8px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  white-space: nowrap;
  text-align: center;
  font-size: 12px !important;
  line-height: 1.15;
}

.user-trade-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #0b1426;
  color: #93c5fd;
  font-weight: 900;
}

.user-trade-table td {
  color: #e5efff;
  font-weight: 700;
}

.user-trade-mini-danger {
  height: 30px !important;
  padding: 0 10px !important;
  border-color: rgba(248, 113, 113, 0.55) !important;
  background: rgba(248, 113, 113, 0.18) !important;
  color: #fecaca !important;
}

@media (max-width: 1350px) {
  .user-trade-wallet-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .user-trade-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .user-trade-wallet-grid,
  .user-trade-form,
  .user-trade-ltp-box {
    grid-template-columns: 1fr;
  }

  .user-trade-head {
    display: grid;
  }
}
/* Trading page duplicate refresh row hide */
#user-page-trading .user-trade-head-hidden {
  display: none !important;
}


/* =====================================================
   USER BROKER API PAGE
   ===================================================== */

.user-broker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.82);
}

.user-broker-head h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.user-broker-head p {
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
}

.user-broker-actions {
  display: flex;
  gap: 10px;
}

.user-broker-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 14px 0;
}

.user-broker-card {
  background: rgba(15, 23, 42, 0.90);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  padding: 14px;
}

.user-broker-card span,
.user-broker-saved-box span,
.user-broker-fund-grid span,
.user-broker-summary-grid span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
  margin-bottom: 7px;
}

.user-broker-card strong {
  display: block;
  font-size: 20px;
  color: #e5efff;
}

.user-broker-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
  margin-bottom: 14px;
}

.user-broker-panel h3 {
  margin-top: 0;
}

.user-broker-form {
  display: grid;
  gap: 12px;
}

.user-broker-form label,
.user-broker-lot-box label {
  display: grid;
  gap: 7px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.user-broker-form input,
.user-broker-form select,
.user-broker-lot-box input {
  width: 100%;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.95);
  color: #e5efff;
  padding: 0 11px;
  outline: none;
}

.user-broker-btn-row,
.user-broker-lot-box {
  display: flex;
  align-items: end;
  gap: 10px;
}

.user-broker-primary-btn,
.user-broker-danger-btn {
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.45);
  padding: 0 14px;
  cursor: pointer;
  font-weight: 900;
}

.user-broker-primary-btn {
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.22);
}

.user-broker-danger-btn {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(248, 113, 113, 0.16);
}

.user-broker-saved-box,
.user-broker-fund-grid,
.user-broker-summary-grid {
  display: grid;
  gap: 10px;
}

.user-broker-saved-box {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 14px;
}

.user-broker-fund-grid {
  grid-template-columns: repeat(2, 1fr);
}

.user-broker-summary-grid {
  grid-template-columns: repeat(7, 1fr);
  margin: 12px 0 14px;
}

.user-broker-saved-box div,
.user-broker-fund-grid div,
.user-broker-summary-grid div {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.75);
}

.user-broker-saved-box strong,
.user-broker-fund-grid strong,
.user-broker-summary-grid strong {
  color: #e5efff;
  font-size: 15px;
  word-break: break-word;
}

.user-broker-lot-box {
  margin-top: 14px;
}

.user-broker-lot-box label {
  flex: 1;
}

.user-broker-note {
  margin: 12px 0 0;
  color: #fbbf24;
  font-size: 12px;
  line-height: 1.4;
}

.user-broker-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.user-broker-table-head h3 {
  margin: 0 0 6px;
}

.user-broker-table-head p {
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
}

.user-broker-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.82);
}

.user-broker-table {
  width: max-content;
  min-width: 1200px;
  border-collapse: collapse;
}

.user-broker-table th,
.user-broker-table td {
  padding: 8px 9px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  white-space: nowrap;
  text-align: center;
  font-size: 12px !important;
}

.user-broker-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #0b1426;
  color: #93c5fd;
  font-weight: 900;
}

.user-broker-table td {
  color: #e5efff;
  font-weight: 700;
}

.broker-status-success {
  color: #86efac !important;
}

.broker-status-failed {
  color: #fecaca !important;
}

.broker-status-skipped {
  color: #facc15 !important;
}

.broker-status-timeout {
  color: #fdba74 !important;
}

.broker-status-pending {
  color: #93c5fd !important;
}

@media (max-width: 1200px) {
  .user-broker-layout {
    grid-template-columns: 1fr;
  }

  .user-broker-summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .user-broker-head,
  .user-broker-table-head {
    display: grid;
  }

  .user-broker-card-grid,
  .user-broker-saved-box,
  .user-broker-fund-grid,
  .user-broker-summary-grid {
    grid-template-columns: 1fr;
  }

  .user-broker-btn-row,
  .user-broker-lot-box {
    display: grid;
  }
}

.user-page-extra-note {
  margin: 6px 0 0;
  color: #93c5fd;
  font-size: 13px;
  line-height: 1.35;
}
/* =====================================================
   USER TOP HEADER COMPACT FIX
   Broker page / user page top area ko patla aur clean karo
   ===================================================== */

.user-main {
  padding: 12px !important;
}

.user-main-header,
.user-topbar {
  padding: 10px 14px !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  min-height: auto !important;
}

.user-header-left {
  gap: 12px !important;
}

.user-menu-toggle {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  font-size: 22px !important;
  border-radius: 12px !important;
  border-width: 1px !important;
}

.user-topbar h2 {
  margin: 0 !important;
  font-size: 26px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
}

.user-topbar p {
  margin: 3px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: #9fb2cc !important;
}

.user-page-extra-note {
  margin: 4px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  color: #8fb3e8 !important;
}

.user-top-actions {
  gap: 8px !important;
}

.user-pill {
  padding: 5px 10px !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.user-pill span,
#userTopName {
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.user-refresh-btn {
  padding: 7px 12px !important;
  min-height: 32px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  line-height: 1 !important;
}

.user-status-box {
  margin-bottom: 10px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* Mobile me bhi compact rahe */
@media (max-width: 900px) {
  .user-main {
    padding: 10px !important;
  }

  .user-main-header,
  .user-topbar {
    padding: 10px 12px !important;
  }

  .user-menu-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 20px !important;
  }

  .user-topbar h2 {
    font-size: 22px !important;
  }

  .user-topbar p {
    font-size: 11px !important;
  }

  .user-pill span,
  #userTopName {
    font-size: 11px !important;
  }

  .user-refresh-btn {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }
}
/* ==================================================
   SUPPORT TICKET SYSTEM
   User Contact Support + Admin Support Tickets
   ================================================== */

.support-grid {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: 14px;
}

.support-card,
.support-sheet-settings-panel,
.support-ticket-panel {
  background: rgba(8, 16, 28, 0.96);
  border: 1px solid rgba(71, 85, 105, 0.65);
  border-radius: 14px;
  padding: 14px;
}

.support-card h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #e5e7eb;
}

.support-card label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 12px;
  color: #94a3b8;
}

.support-input {
  width: 100%;
  background: #020617;
  border: 1px solid #334155;
  color: #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}

.support-input:focus {
  border-color: #38bdf8;
}

.support-textarea {
  min-height: 110px;
  resize: vertical;
}

.support-primary-btn,
.support-small-btn {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  background: #2563eb;
  font-weight: 800;
}

.support-primary-btn {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
}

.support-small-btn {
  padding: 7px 10px;
  font-size: 12px;
}

.support-primary-btn:hover,
.support-small-btn:hover {
  background: #1d4ed8;
}

.support-msg {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
}

.support-msg.ok {
  color: #22c55e;
}

.support-msg.bad {
  color: #ef4444;
}

.support-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.support-head p {
  margin: 4px 0 0;
  color: #94a3b8;
  font-size: 12px;
}

.support-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 10px;
}

.support-table,
.support-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.support-table th,
.support-table td,
.support-admin-table th,
.support-admin-table td {
  border-bottom: 1px solid rgba(51, 65, 85, 0.65);
  padding: 8px;
  text-align: left;
  vertical-align: top;
  color: #cbd5e1;
}

.support-table th,
.support-admin-table th {
  background: rgba(15, 23, 42, 0.95);
  color: #93c5fd;
  font-weight: 800;
  position: sticky;
  top: 0;
  z-index: 1;
}

.support-status {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
}

.support-status-open {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

.support-status-progress {
  background: rgba(234, 179, 8, 0.18);
  color: #facc15;
}

.support-status-replied {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

.support-status-resolved {
  background: rgba(20, 184, 166, 0.18);
  color: #2dd4bf;
}

.support-status-closed {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}

.support-filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.support-url-field {
  grid-column: 1 / -1;
}

.support-long-text {
  max-width: 280px;
  white-space: pre-wrap;
  line-height: 1.35;
}

.support-reply-box {
  width: 240px;
  min-height: 70px;
  background: #020617;
  color: #e5e7eb;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 7px;
  font-size: 12px;
  resize: vertical;
}

.support-mini-select {
  background: #020617;
  color: #e5e7eb;
  border: 1px solid #334155;
  border-radius: 7px;
  padding: 6px;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .support-grid {
    grid-template-columns: 1fr;
  }

  .support-head,
  .support-filter-row {
    align-items: stretch;
    flex-direction: column;
  }
}
/* ==================================================
   USER DASHBOARD COMPACT FIX - FINAL
   Top cards small height + small text + no overflow
   ================================================== */

.user-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.user-card {
  min-width: 0 !important;
  min-height: 86px !important;
  padding: 14px 16px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.user-card span {
  font-size: 13px !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

.user-card strong {
  display: block !important;
  max-width: 100% !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Allowed Symbols ko aur compact rakho */
#dashSymbols {
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Top user pill/test chhota */
.user-pill {
  padding: 5px 11px !important;
  min-height: 30px !important;
  font-size: 12px !important;
  border-radius: 16px !important;
}

#userTopName {
  font-size: 12px !important;
  line-height: 1 !important;
  max-width: 90px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Refresh button compact */
.user-refresh-btn {
  padding: 7px 14px !important;
  min-height: 32px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}

/* Dashboard top spacing compact */
.user-main {
  padding-top: 10px !important;
}

.user-status-box {
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  font-size: 13px !important;
}

.user-main-header {
  min-height: 74px !important;
  padding: 12px 18px !important;
  margin-bottom: 10px !important;
}

.user-topbar h2 {
  font-size: 30px !important;
  line-height: 1.1 !important;
}

.user-topbar p {
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* User details / permission card thoda upar compact */
.user-two-col {
  gap: 12px !important;
}

.user-panel-card {
  padding: 16px !important;
  border-radius: 18px !important;
}

.user-panel-card h3 {
  font-size: 20px !important;
  margin-bottom: 12px !important;
}

@media (max-width: 1100px) {
  .user-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 650px) {
  .user-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==================================================
   HISTORICAL OPTION CHAIN COMPACT UI
   Admin + User same compact page
================================================== */

.hist-oc-panel {
  width: 100%;
  height: calc(100vh - 105px);
  min-height: 620px;
  background: #07111f;
  border: 1px solid rgba(76, 160, 255, 0.24);
  border-radius: 12px;
  padding: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hist-oc-topbar {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 6px;
  background: #0b1526;
  border: 1px solid rgba(76, 160, 255, 0.22);
  border-radius: 10px;
}

.hist-oc-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  margin-right: 4px;
  white-space: nowrap;
}

.hist-oc-input {
  height: 32px;
  min-width: 115px;
  background: #101b2d;
  color: #eaf3ff;
  border: 1px solid rgba(120, 170, 255, 0.28);
  border-radius: 8px;
  padding: 0 9px;
  font-size: 13px;
  outline: none;
}

#histOcTimeSelect {
  min-width: 105px;
  font-weight: 800;
}

.hist-oc-btn,
.hist-oc-step-btn,
.hist-oc-round-btn {
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: #173c78;
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  padding: 0 12px;
}

.hist-oc-btn {
  background: #1d55d8;
}

.hist-oc-step-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(27, 79, 135, 0.38);
}

.hist-oc-step-btn {
  background: transparent;
  color: #d7eaff;
  min-width: 62px;
}

.hist-oc-step-btn.active {
  background: #777b86;
  color: #ffffff;
}

.hist-oc-round-btn {
  width: 34px;
  padding: 0;
  border-radius: 50%;
  background: #8fc4ff;
  color: #07111f;
  font-size: 18px;
}

.hist-oc-meta {
  margin-left: auto;
  color: #b7d7ff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.hist-oc-sr-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  background: #091524;
  border: 1px solid rgba(120, 170, 255, 0.18);
}

.hist-sr-col {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 5px;
}

.hist-sr-col span {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.hist-sr-res span {
  background: rgba(180, 24, 32, 0.35);
  color: #ffb6b6;
  border: 1px solid rgba(255, 95, 95, 0.22);
}

.hist-sr-sup span {
  background: rgba(0, 125, 62, 0.32);
  color: #aaffc8;
  border: 1px solid rgba(70, 255, 150, 0.2);
}

.hist-oc-status {
  min-height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #dbeafe;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.22);
}

.hist-oc-status.success {
  color: #7cffb0;
  background: rgba(0, 120, 70, 0.18);
  border-color: rgba(0, 255, 140, 0.25);
}

.hist-oc-status.error {
  color: #ffb4b4;
  background: rgba(140, 0, 20, 0.2);
  border-color: rgba(255, 90, 90, 0.25);
}

.hist-oc-status.info {
  color: #b7d7ff;
  background: rgba(59, 130, 246, 0.14);
}

.hist-oc-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(120, 170, 255, 0.16);
  background: #06101d;
}

.hist-oc-table {
  width: 100%;
}

.hist-oc-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}

@media (max-width: 1200px) {
  .hist-oc-panel {
    height: auto;
    min-height: 620px;
  }

  .hist-oc-meta {
    width: 100%;
    margin-left: 0;
  }

  .hist-oc-sr-strip {
    grid-template-columns: 1fr;
  }

  .hist-sr-col {
    grid-template-columns: repeat(2, minmax(90px, 1fr));
  }
}
.hist-oc-picker {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: #101b2d;
  color: #9db7d7;
  border: 1px solid rgba(120, 170, 255, 0.32);
  border-radius: 9px;
  font-weight: 900;
  font-size: 12px;
}

.hist-oc-picker span {
  color: #9db7d7;
  font-size: 12px;
  font-weight: 900;
}

.hist-oc-picker .hist-oc-input {
  min-width: 118px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b8d7ff;
  font-size: 15px;
  font-weight: 900;
}

.hist-oc-picker .hist-oc-input:focus {
  outline: none;
}

.hist-oc-picker input[type="date"]::-webkit-calendar-picker-indicator,
.hist-oc-picker input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
  cursor: pointer;
}