:root {
  --kite-bg: #f4f6fa;
  --kite-surface: #ffffff;
  --kite-border: #e2e8f0;
  --kite-border-light: #edf2f7;
  --kite-blue: #387ed1;
  --kite-blue-hover: #2b6cb0;
  --kite-blue-light: #eef5fc;
  --kite-buy: #10b981;
  --kite-buy-hover: #059669;
  --kite-buy-light: #ecfdf5;
  --kite-sell: #ff5722;
  --kite-sell-hover: #e04412;
  --kite-sell-light: #fff3ed;
  --kite-danger: #ef4444;
  --kite-text: #0f172a;
  --kite-text-muted: #64748b;
  --kite-text-subtle: #94a3b8;
  --font-family: 'DM Sans', system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  height: 100%;
  overflow: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-family);
  color: var(--kite-text);
  background: var(--kite-bg);
  min-width: 320px;
  max-width: 100vw;
  width: 100%;
  height: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: transparent;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--kite-blue);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Google Material Symbols base utility */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  user-select: none;
}

/* ==========================================================================
   TOPBAR: ZERODHA KITE / MCX Control STYLE
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  height: 52px;
  background: var(--kite-surface);
  border-bottom: 1px solid var(--kite-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  outline: none;
}

.brand-link:focus,
.brand-link:focus-visible {
  outline: none;
}

.brand-logo {
  height: 50px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  display: block;
}

.indices-ticker {
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 1px solid var(--kite-border);
  padding-left: 10px;
}

.index-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.2px;
  font-weight: 700;
  padding: 3px 6px;
  background: #f8fafc;
  border: 1px solid var(--kite-border-light);
  border-radius: 4px;
  white-space: nowrap;
}

.index-name {
  color: var(--kite-text-muted);
  font-size: 10.08px;
  letter-spacing: 0.3px;
  font-weight: 700;
}

.index-val {
  color: var(--kite-text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.index-chg {
  font-size: 10.08px;
  font-weight: 700;
}

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

.index-chg.negative {
  color: var(--kite-danger);
}

/* Center Top Navigation Menu */
.top-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  flex-shrink: 0;
}

.nav-link {
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  font-size: 13.44px;
  font-weight: 600;
  color: var(--kite-text-muted);
  background: transparent;
  border: none;
  position: relative;
  transition: color 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.nav-link:hover {
  color: var(--kite-blue);
  background: #f8fafc;
}

.nav-link.active {
  color: var(--kite-blue);
  font-weight: 750;
  background: transparent;
}

/* Clean Kite Bottom Active Indicator */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background-color 0.15s ease;
}

.nav-link.active::after {
  background: var(--kite-blue);
}

/* Eliminate focus rectangle box from navigation buttons */
.nav-link:focus,
.nav-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.nav-icon {
  font-size: 14.56px;
}

.nav-badge {
  background: var(--kite-blue-light);
  color: var(--kite-blue);
  font-size: 10.08px;
  font-weight: 750;
  padding: 1px 4px;
  border-radius: 10px;
}

/* Right Status & User */
.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.clock {
  font-size: 11.76px;
  font-weight: 600;
  color: var(--kite-text-muted);
  font-variant-numeric: tabular-nums;
  padding-right: 2px;
  white-space: nowrap;
}

.tag {
  font-size: 10.08px;
  font-weight: 750;
  letter-spacing: 0.2px;
  padding: 3px 7px;
  border-radius: 12px;
  border: 1px solid var(--kite-border);
  background: #f8fafc;
  color: var(--kite-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1.2;
}

.tag.success {
  background: var(--kite-buy-light);
  border-color: #bbf2db;
  color: var(--kite-buy-hover);
}

.tag.danger {
  background: var(--kite-sell-light);
  border-color: #ffd6cb;
  color: var(--kite-sell);
}

.tag.neutral {
  background: #f8fafc;
  border-color: var(--kite-border);
  color: var(--kite-text-muted);
}

.tag .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid var(--kite-border);
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 4px;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kite-blue);
  color: #fff;
  font-size: 10.64px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.user-meta {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 11.76px;
  font-weight: 750;
  color: var(--kite-text);
  line-height: 1.1;
}

.user-mode {
  font-size: 9.52px;
  font-weight: 600;
  color: var(--kite-text-muted);
  line-height: 1.1;
}

/* Header styles are governed by the dedicated MCX Control & MCX Control header system below */

/* ==========================================================================
   GLOBAL ALERTS & CONTEXT BAR
   ========================================================================== */
.alert {
  background: #fff8eb;
  border: 1px solid #f9e2ba;
  color: #92540d;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.44px;
  font-weight: 600;
}

.alert-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert button {
  font-size: 18px;
  color: #92540d;
  padding: 0 4px;
}

.context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--kite-border-light);
}

.breadcrumbs {
  font-size: 12.32px;
  font-weight: 700;
  color: var(--kite-text-subtle);
  letter-spacing: 0.6px;
}

.breadcrumbs i {
  font-style: normal;
  padding: 0 6px;
  color: #cbd5e1;
}

.breadcrumbs b {
  color: var(--kite-text);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13.44px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn.primary {
  background: var(--kite-blue);
  color: #fff;
  border: 1px solid var(--kite-blue);
}

.btn.primary:hover:not(:disabled) {
  background: var(--kite-blue-hover);
  box-shadow: 0 3px 10px rgba(56, 126, 209, 0.25);
}

.btn.secondary {
  background: #fff;
  color: var(--kite-text-muted);
  border: 1px solid var(--kite-border);
}

.btn.secondary:hover:not(:disabled) {
  background: #f8fafc;
  color: var(--kite-blue);
  border-color: var(--kite-blue);
}

.btn.danger-btn {
  background: #fff5f5;
  color: var(--kite-danger);
  border: 1px solid #fed7d7;
}

.btn.danger-btn:hover:not(:disabled) {
  background: #fed7d7;
}

/* ==========================================================================
   MAIN CONTENT & VIEWS
   ========================================================================== */
.main-content {
  padding: 0;
  max-width: 100%;
  width: 100%;
  margin: 0;
  height: calc(100vh - 52px);
  overflow: hidden;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

#view-trade.active {
  display: block;
  height: 100%;
  overflow: hidden;
}

#view-positions.active,
#view-orders.active,
#view-history.active,
#view-settings.active,
#view-portfolio.active {
  display: block;
  padding: 18px 24px 40px;
  max-width: 1720px;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;
}

/* ==========================================================================
   TERMINAL VIEW: ZERODHA SPLIT LAYOUT
   ========================================================================== */
.terminal-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* LEFT COLUMN: WATCHLIST PANE */
.watchlist-pane {
  flex: 0 0 375px;
  width: 375px;
  background: var(--kite-surface);
  border: 1px solid var(--kite-border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  position: sticky;
  max-height: calc(100vh - 10px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.watchlist-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--kite-border-light);
  background: #fff;
}

.watchlist-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.smallcap {
  font-size: 10.64px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--kite-text-subtle);
}

.watchlist-title-row h2 {
  font-size: 15.68px;
  font-weight: 750;
  color: var(--kite-text);
  margin-top: 2px;
}

.thin {
  font-weight: 600;
  font-size: 12.32px;
  color: var(--kite-text-muted);
}

.mini-pill {
  font-size: 10.08px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
  background: #f1f5f9;
  color: var(--kite-text-muted);
}

.mini-pill.muted {
  background: #f1f5f9;
  color: var(--kite-text-subtle);
}

/* Product Badges (Intraday vs Overnight) */
.product-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.64px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.product-badge.intraday {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.product-badge.overnight {
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

.product-badge.mini {
  font-size: 9.52px;
  padding: 1px 4px;
  border-radius: 3px;
}

.pos-qty-num {
  font-weight: 700;
  color: #0f172a;
}

.pos-lots-tag {
  display: inline-block;
  margin-left: 3px;
  font-size: 12.32px;
  font-weight: 600;
  color: #64748b;
}

/* MarketWatch View Tabs */
.mw-tabs {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: transparent;
  padding: 4px 2px 8px 2px;
  margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mw-tabs::-webkit-scrollbar {
  display: none;
}

.mw-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 3px;
  font-size: 11.2px;
  font-weight: 750;
  color: var(--kite-text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  min-width: 0;
}

.mw-tab:hover {
  color: var(--kite-blue);
  background: rgba(255, 255, 255, 0.6);
}

.mw-tab.active {
  background: #ffffff;
  color: var(--kite-blue);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.mw-tab-icon {
  font-size: 12.32px;
  color: #f59e0b;
}

.mw-count-badge {
  font-size: 10.08px;
  font-weight: 800;
  background: var(--kite-blue-light);
  color: var(--kite-blue);
  padding: 1px 5px;
  border-radius: 10px;
}

/* MCX Commodity Quick Selection Pills */
.commodity-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 0 0 10px;
  scrollbar-width: none;
}

.commodity-pills::-webkit-scrollbar {
  display: none;
}

.comm-pill {
  padding: 4px 8px;
  font-size: 10.08px;
  font-weight: 750;
  color: var(--kite-text-muted);
  background: #f8fafc;
  border: 1px solid var(--kite-border);
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
}

.comm-pill:hover {
  background: #fff;
  border-color: #f59e0b;
  color: #d97706;
}

.comm-pill.active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #b45309;
}

/* Enhanced Search Wrap */
.watch-search-wrap {
  position: relative;
  margin-bottom: 10px;
}

.search-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-lens {
  position: absolute;
  left: 10px;
  font-size: 13.44px;
  color: var(--kite-text-subtle);
  pointer-events: none;
}

.watch-search-input {
  width: 100%;
  height: 36px;
  background: #f8fafc;
  border: 1px solid var(--kite-border);
  border-radius: 6px;
  padding: 0 28px 0 32px;
  font-size: 12.88px;
  color: var(--kite-text);
  outline: none;
  transition: all 0.15s ease;
}

.clear-search-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--kite-text-subtle);
  font-size: 13.44px;
  font-weight: 750;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 4px;
}

.clear-search-btn:hover {
  color: var(--kite-danger);
  background: #fee2e2;
}

/* Search Dropdown Flyout */
.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.16), 0 6px 16px -2px rgba(15, 23, 42, 0.08);
  z-index: 1050;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: searchFlyout 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes searchFlyout {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11.2px;
  font-weight: 750;
  color: #64748b;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.search-tip {
  font-size: 10.08px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

.search-category-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0 8px;
  border-bottom: 1px solid #e2e8f0;
  scrollbar-width: none;
}

.search-category-tabs::-webkit-scrollbar {
  display: none;
}

.search-category-tabs button {
  flex: 0 0 auto;
  padding: 8px 10px 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 12.32px;
  cursor: pointer;
}

.search-category-tabs button:hover,
.search-category-tabs button.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.search-results-list {
  overflow-y: auto;
  max-height: 360px;
}

.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.12s ease;
  cursor: pointer;
  background: #ffffff;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: #f8fbff;
}

.search-result-item {
  min-height: 56px;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
}

.search-type-circle {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid #ffcaca;
  border-radius: 50%;
  background: #fff4f4;
  color: #ef4444;
  font-size: 11.2px;
  font-weight: 700;
}

.search-type-circle.opt {
  border-color: #d2b8ff;
  background: #f5edff;
  color: #7c3aed;
}

.search-type-circle.mcx {
  border-color: #f5d89a;
  background: #fff8e8;
  color: #a16207;
}

.search-type-circle.eq {
  border-color: #b9e4cf;
  background: #effaf4;
  color: #16804b;
}

.search-result-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.search-result-title-row,
.search-result-detail-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-result-title-row .search-symbol-title {
  flex: 0 1 auto;
}

.search-exchange-tag {
  padding: 1px 4px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10.08px;
  white-space: nowrap;
}

.search-expiry-text {
  color: #475569;
  font-size: 11.2px;
  white-space: nowrap;
}

.search-option-side {
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10.08px;
  font-weight: 700;
}

.search-option-side.ce {
  color: #4f46e5;
  background: #ede9fe;
}

.search-option-side.pe {
  color: #b45309;
  background: #fff1dc;
}

.search-result-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  flex: 0 0 auto;
}

.search-result-controls .search-price-val {
  font-size: 11.2px;
  line-height: 1;
}

.search-result-controls .search-actions-group {
  gap: 3px;
}

.search-result-controls .search-pin-btn,
.search-result-controls .search-trade-btn {
  font-size: 8.96px;
  padding: 2px 4px;
}

/* Line 1: Badge + Symbol (Left) & Live Price (Right) */
.search-item-line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.search-ident-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.search-symbol-title {
  font-size: 13.44px;
  font-weight: 750;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.search-price-val {
  font-size: 13.44px;
  font-weight: 750;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
  margin-left: auto;
}

.search-price-val.has-price {
  color: #0f172a;
}

.search-price-val.no-price {
  color: #94a3b8;
  font-weight: 600;
}

/* Line 2: Company/Subtitle (Left) & Actions (Right) */
.search-item-line2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.search-desc-sub {
  font-size: 11.76px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.search-actions-group {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}

.search-pin-btn {
  font-size: 10.64px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.3;
  white-space: nowrap;
}

.search-pin-btn:hover {
  border-color: #f59e0b;
  color: #d97706;
  background: #fffbeb;
}

.search-pin-btn.pinned {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #b45309;
}

.search-trade-btn {
  font-size: 10.64px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1.3;
  white-space: nowrap;
}

.search-trade-btn:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.index-badge {
  font-size: 9.52px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.index-badge.nifty {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.index-badge.banknifty {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.index-badge.mcx,
.index-badge.crudeoil,
.index-badge.gold,
.index-badge.goldm,
.index-badge.goldpetal,
.index-badge.goldguinea,
.index-badge.silver,
.index-badge.naturalgas,
.index-badge.copper,
.index-badge.zinc,
.index-badge.lead,
.index-badge.aluminium {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.index-badge.nse {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* Watchlist Item Actions (hover pin / delete buttons) */
.watch-action-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.watch-remove-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--kite-text-subtle);
  font-size: 13.44px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s ease;
  padding: 0;
}

.watch-row:hover .watch-remove-btn {
  color: var(--kite-text-muted);
}

.watch-remove-btn:hover {
  color: var(--kite-danger) !important;
  background: #fee2e2;
  border-color: #fca5a5;
}

.watch-add-pin-btn {
  font-size: 10.64px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--kite-border);
  background: #fff;
  color: var(--kite-text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
}

.watch-add-pin-btn:hover {
  border-color: #f59e0b;
  color: #d97706;
  background: #fffbeb;
}

.watch-add-pin-btn.active {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #b45309;
}

/* Empty watchlist state */
.empty-watchlist-box {
  padding: 32px 18px;
  text-align: center;
  color: var(--kite-text-subtle);
}

.empty-watchlist-icon {
  font-size: 26px;
  margin-bottom: 6px;
  color: #f59e0b;
}

.empty-watchlist-box h3 {
  font-size: 14.56px;
  font-weight: 750;
  color: var(--kite-text);
  margin-bottom: 4px;
}

.empty-watchlist-box p {
  font-size: 12.32px;
  line-height: 1.4;
  color: var(--kite-text-muted);
  max-width: 250px;
  margin: 0 auto;
}

/* Filter controls toolbar */
.watch-toolbar {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 8px;
  align-items: flex-end;
  margin-top: 6px;
}

.field-compact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.field-compact span {
  font-size: 9.52px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--kite-text-subtle);
}

.field-compact select {
  width: 100%;
  height: 32px;
  font-size: 12.32px;
  font-weight: 600;
  color: var(--kite-text);
  border: 1px solid var(--kite-border);
  border-radius: 5px;
  background: #fff;
  padding: 0 6px;
  outline: none;
}

.field-compact select:focus {
  border-color: var(--kite-blue);
}

.track-btn {
  height: 32px;
  padding: 0 10px;
  font-size: 12.32px;
}

/* Watchlist table headers */
.watch-head {
  display: grid;
  grid-template-columns: 1.6fr 0.85fr 0.75fr;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid var(--kite-border-light);
  font-size: 10.08px;
  font-weight: 800;
  color: var(--kite-text-subtle);
  letter-spacing: 0.5px;
}

.watch-head span:nth-child(2),
.watch-head span:nth-child(3) {
  text-align: right;
}

/* Scrollable watch rows */
.watch-rows {
  flex: 1;
  overflow-y: auto;
  min-height: 280px;
}

.watch-row {
  width: 100%;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 1.6fr 0.85fr 0.75fr;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
  transition: all 0.12s ease;
  text-align: left;
  cursor: pointer;
}

.watch-row:hover {
  background: #f8fbff;
  box-shadow: inset 3px 0 0 var(--kite-blue);
}

.watch-row.active {
  background: #eef5fc;
  box-shadow: inset 4px 0 0 var(--kite-blue);
}

.watch-info-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.watch-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.type-badge {
  font-size: 9.52px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  line-height: 1.2;
}

.type-badge.ce {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.type-badge.pe {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.type-badge.fut {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.type-badge.eq {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.contract-title {
  font-size: 12.32px;
  font-weight: 750;
  color: var(--kite-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contract-subtitle {
  font-size: 10.64px;
  color: var(--kite-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.watch-price-col {
  text-align: right;
  min-width: 0;
}

.watch-price {
  font-size: 13.44px;
  font-weight: 750;
  color: var(--kite-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.source {
  font-size: 9.52px;
  font-weight: 800;
  text-align: right;
  color: var(--kite-text-subtle);
  line-height: 1;
}

.source.live {
  color: var(--kite-buy);
}

.watch-foot {
  padding: 9px 16px;
  font-size: 10.64px;
  color: var(--kite-text-subtle);
  background: #f8fafc;
  border-top: 1px solid var(--kite-border-light);
  display: flex;
  align-items: center;
  gap: 7px;
}

.live-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kite-buy);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Holdings accordion inside watchlist pane */
.holdings-drawer {
  border-top: 1px solid var(--kite-border);
  background: #fff;
}

.holdings-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--kite-border-light);
}

.text-btn {
  font-size: 11.2px;
  font-weight: 750;
  color: var(--kite-blue);
}

.mini-list {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden !important;
  padding: 4px 12px;
  scrollbar-width: thin;
}

.mini-position {
  padding: 8px 6px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.mini-position:hover {
  background: #f8fafc;
}

.mini-pos-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.mini-title-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.mini-pos-symbol {
  font-size: 12.32px;
  font-weight: 700;
  color: var(--kite-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  min-width: 0;
}

.mini-position .mini-pnl {
  font-size: 13.44px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

.mini-pos-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.mini-desc {
  font-size: 11.2px;
  color: var(--kite-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.mini-act-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 0;
}

.mini-act-row .row-btn {
  font-size: 11.2px;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.3;
}

.pnl {
  font-size: 13.44px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

/* RIGHT COLUMN: WORKSPACE PANE */
.workspace-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* TOP METRICS STRIP: KITE FUNDS BAR */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  background: var(--kite-surface);
  border: 1px solid var(--kite-border);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease;
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.64px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--kite-text-muted);
}

.metric-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 15.68px;
}

.metric-icon.green {
  background: #e6f9f0;
  color: var(--kite-buy);
}

.metric-icon.blue {
  background: #eaf2fd;
  color: var(--kite-blue);
}

.metric-icon.orange {
  background: #fff1ec;
  color: var(--kite-sell);
}

.metric-icon.purple {
  background: #f3eafd;
  color: #8b5cf6;
}

.metric-card strong {
  display: block;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--kite-text);
  margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
}

.metric-card small {
  display: block;
  font-size: 11.2px;
  color: var(--kite-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.negative {
  color: var(--kite-danger) !important;
}

/* TRADING GRID: CHART/DEPTH + ORDER PAD */
.trade-grid {
  display: grid;
  grid-template-columns: minmax(380px, 1.25fr) minmax(360px, 0.95fr);
  gap: 16px;
  align-items: start;
}

.panel {
  background: var(--kite-surface);
  border: 1px solid var(--kite-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

/* CHART & DEPTH CARD */
.chart-panel {
  display: flex;
  flex-direction: column;
}

.quote-head {
  padding: 16px 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.quote-head-main {
  min-width: 0;
  flex: 1;
}

.quote-overhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.exch-badge {
  font-size: 9.52px;
  font-weight: 800;
  padding: 1.5px 5.5px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

.exch-badge.nfo {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.exch-badge.mcx {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.selected-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.selected-symbol {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.25px;
  word-spacing: 2.5px;
  color: var(--kite-text);
  margin: 0;
  line-height: 1.25;
}

.selected-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.32px;
  font-weight: 600;
  color: var(--kite-text-muted);
  margin-top: 5px;
  line-height: 1.4;
  flex-wrap: wrap;
}

.selected-meta-dot {
  color: #cbd5e1;
  font-size: 10.08px;
}

.selected-meta-highlight {
  color: var(--kite-text);
  font-weight: 750;
}

.quote-head-right {
  flex-shrink: 0;
}

.table-contract-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.table-contract-title {
  font-weight: 750;
  color: var(--kite-text);
  font-size: 12.88px;
  letter-spacing: 0.2px;
  word-spacing: 1.5px;
}

.mini-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.quote-line {
  padding: 0 20px 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.quote-line strong {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--kite-text);
  font-variant-numeric: tabular-nums;
}

.delta {
  font-size: 12.32px;
  font-weight: 700;
  color: var(--kite-text-subtle);
}

/* ========================================================
   TradingView Professional Terminal Styles (Light Theme)
   ======================================================== */
.tv-chart-console {
  margin: 0 20px 14px;
  background: #ffffff;
  border: 1px solid #e0e3eb;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(19, 23, 34, 0.05);
  font-family: 'DM Sans', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}

.tv-top-toolbar {
  height: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  background: #ffffff;
  border-bottom: 1px solid #f0f3fa;
  gap: 8px;
  user-select: none;
}

.tv-toolbar-left,
.tv-toolbar-right {
  display: flex;
  align-items: center;
  gap: 3px;
}

.tv-divider {
  width: 1px;
  height: 18px;
  background: #e0e3eb;
  margin: 0 3px;
}

.tv-btn {
  background: transparent;
  border: none;
  height: 28px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 12.88px;
  font-weight: 500;
  color: #131722;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  line-height: 1;
}

.tv-btn:hover {
  background: #f0f3fa;
  color: #2962ff;
}

.tv-btn.active {
  background: #f0f3fa;
  color: #2962ff;
  font-weight: 700;
}

.tv-icon-btn {
  width: 28px;
  padding: 0;
  font-size: 14.56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tv-icon-btn .material-symbols-outlined,
.tv-fs-btn .material-symbols-outlined {
  font-size: 17.92px;
  line-height: 1;
}

.tv-save-btn {
  background: #f0f3fa;
  font-weight: 600;
  color: #2962ff;
}

.tv-portal-link {
  text-decoration: none;
  color: #787b86;
  font-size: 12.32px;
  border: 1px solid #e0e3eb;
  border-radius: 4px;
  padding: 0 6px;
  height: 26px;
}

.tv-portal-link:hover {
  color: #2962ff;
  border-color: #2962ff;
}

.tv-instant-orders-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.32px;
  font-weight: 600;
  color: #131722;
}

.tv-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
}

.tv-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.tv-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.2s;
  border-radius: 16px;
}

.tv-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.tv-switch input:checked+.tv-slider {
  background-color: #089981;
}

.tv-switch input:checked+.tv-slider:before {
  transform: translateX(14px);
}

/* Main Body with Sidebar */
.tv-chart-body {
  display: flex;
  position: relative;
  height: 480px;
  min-height: 480px;
  background: #ffffff;
}

.tv-draw-sidebar {
  width: 42px;
  min-width: 42px;
  border-right: 1px solid #f0f3fa;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 2px;
  user-select: none;
  z-index: 5;
}

.tv-tool-btn {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #606266;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15.12px;
  transition: all 0.15s ease;
}

.tv-tool-btn .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.tv-tool-btn:hover {
  background: #f0f3fa;
  color: #2962ff;
}

.tv-tool-btn.active {
  background: #f0f3fa;
  color: #2962ff;
}

.tv-tool-divider {
  width: 20px;
  height: 1px;
  background: #e0e3eb;
  margin: 4px 0;
}

/* Canvas Area */
.tv-canvas-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.tv-chart-container {
  width: 100%;
  height: 100%;
}

/* In-Chart Floating Overlays */
.tv-inchart-header {
  position: absolute;
  top: 8px;
  left: 14px;
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tv-contract-info,
.tv-instant-bar,
.tv-volume-readout {
  pointer-events: auto;
}

.tv-contract-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.44px;
  flex-wrap: wrap;
}

.tv-contract-title {
  font-weight: 750;
  color: #131722;
  letter-spacing: -0.2px;
}

.tv-market-dot {
  color: #089981;
  font-size: 10.08px;
  line-height: 1;
}

.tv-ohlc-readout {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.32px;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #787b86;
}

.tv-ohlc-readout b {
  color: #131722;
  font-weight: 600;
}

.tv-ohlc-delta.positive {
  color: #089981;
  font-weight: 600;
}

.tv-ohlc-delta.negative {
  color: #f23645;
  font-weight: 600;
}

/* In-Chart Instant Buy / Sell Bar */
.tv-instant-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.tv-order-btn {
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12.88px;
  font-weight: 750;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: all 0.15s ease;
  font-family: inherit;
}

.tv-buy-btn {
  background: #089981;
}

.tv-buy-btn:hover {
  background: #067a68;
}

.tv-sell-btn {
  background: #f23645;
}

.tv-sell-btn:hover {
  background: #d32f2f;
}

.tv-qty-stepper input {
  width: 34px;
  height: 26px;
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12.88px;
  background: #ffffff;
  color: #131722;
}

.tv-volume-readout {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.76px;
  color: #089981;
  font-weight: 600;
  margin-top: 2px;
}

.tv-vol-toggle {
  background: transparent;
  border: none;
  font-size: 10.08px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 3px;
}

/* Bottom Toolbar */
.tv-bottom-toolbar {
  height: 32px;
  min-height: 32px;
  border-top: 1px solid #f0f3fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 12.32px;
  color: #787b86;
  background: #ffffff;
  user-select: none;
}

.tv-bottom-left,
.tv-bottom-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tv-ranges,
.tv-scales {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tv-range-btn,
.tv-scale-btn {
  background: transparent;
  border: none;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11.76px;
  font-weight: 600;
  color: #787b86;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tv-range-btn:hover,
.tv-scale-btn:hover {
  color: #131722;
  background: #f0f3fa;
}

.tv-range-btn.active,
.tv-scale-btn.active {
  color: #2962ff;
  background: #f0f3fa;
  font-weight: 700;
}

.tv-broker-badge {
  font-size: 11.2px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.tv-broker-badge .badge-dot {
  color: #089981;
  font-size: 8.96px;
}

.tv-clock {
  font-size: 11.76px;
  font-weight: 600;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}

.tv-watermark {
  position: absolute;
  bottom: 8px;
  left: 12px;
  z-index: 2;
  pointer-events: none;
}

.tv-logo-badge {
  display: inline-block;
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  font-weight: 900;
  font-size: 11.76px;
  color: #94a3b8;
  letter-spacing: -0.5px;
}

/* Fullscreen Mode */
.tv-chart-console.tv-fullscreen-active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  border: none !important;
}

.tv-chart-console.tv-fullscreen-active .tv-chart-body {
  flex: 1 1 auto !important;
  height: calc(100vh - 70px) !important;
  min-height: calc(100vh - 70px) !important;
}

body.has-tv-fullscreen {
  overflow: hidden !important;
}

/* Custom Candlestick Tooltip */
.chart-candle-tooltip {
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  border: 1px solid var(--kite-border);
  font-size: 12.32px;
  min-width: 130px;
}

.chart-candle-tooltip.bull {
  border-left: 3px solid #10b981;
}

.chart-candle-tooltip.bear {
  border-left: 3px solid #ef4444;
}

.tooltip-time {
  font-size: 10.64px;
  font-weight: 800;
  color: var(--kite-text-subtle);
  margin-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 3px;
}

.tooltip-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11.76px;
  color: var(--kite-text-muted);
  line-height: 1.5;
}

.tooltip-row b {
  color: var(--kite-text);
  font-variant-numeric: tabular-nums;
}

.gridline {
  stroke: #edf2f7;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  color: var(--kite-text-muted);
}

.chart-empty div {
  font-size: 26px;
  color: var(--kite-blue);
}

.chart-empty strong {
  font-size: 12.88px;
}

.chart-empty small {
  font-size: 11.2px;
  color: var(--kite-text-subtle);
}

/* PRICE & SPREAD STRIP */
.price-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr 1fr;
  gap: 10px;
  padding: 0 20px 14px;
}

.price-panel,
.spread-panel {
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid var(--kite-border-light);
  background: #f8fafc;
}

.price-panel span,
.spread-panel small {
  font-size: 10.64px;
  font-weight: 800;
  color: var(--kite-text-muted);
  letter-spacing: 0.5px;
}

.price-panel span small {
  font-size: 9.52px;
  font-weight: 600;
  opacity: 0.8;
}

.price-panel strong,
.spread-panel strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}

.bid-panel strong {
  color: var(--kite-buy);
}

.ask-panel strong {
  color: var(--kite-danger);
}

.spread-panel strong {
  color: var(--kite-blue);
  font-size: 16.8px;
}

.price-panel small,
.spread-panel span {
  font-size: 10.64px;
  color: var(--kite-text-subtle);
}

.spread-panel {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 5-LEVEL DEPTH DISPLAY */
.depth-table-container {
  margin: 0 20px 14px;
  border: 1px solid var(--kite-border-light);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.depth-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  background: #f8fafc;
  border-bottom: 1px solid var(--kite-border-light);
  font-size: 10.08px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--kite-text-muted);
}

.depth-mode-tag {
  color: var(--kite-blue);
  font-size: 9.52px;
}

.depth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.depth-col {
  padding: 4px 0;
}

.depth-col:first-child {
  border-right: 1px solid var(--kite-border-light);
}

.depth-col-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 4px 10px;
  font-size: 9.52px;
  font-weight: 800;
  color: var(--kite-text-subtle);
  border-bottom: 1px solid #f1f5f9;
}

.depth-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 4px 10px;
  font-size: 11.2px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid #f8fafc;
}

.depth-bids .depth-row span:first-child {
  color: var(--kite-buy);
  font-weight: 750;
}

.depth-asks .depth-row span:first-child {
  color: var(--kite-danger);
  font-weight: 750;
}

.chart-caption {
  display: flex;
  justify-content: space-between;
  padding: 9px 20px;
  border-top: 1px solid var(--kite-border-light);
  font-size: 10.64px;
  font-weight: 750;
  color: var(--kite-text-subtle);
}

/* ==========================================================================
   ORDER WINDOW: ZERODHA KITE STYLE ORDER PAD
   ========================================================================== */
.order-panel {
  background: #fff;
}

.order-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--kite-border-light);
}

.order-window-head h2 {
  font-size: 16.8px;
  font-weight: 800;
  color: var(--kite-text);
  margin-top: 2px;
}

.paper-badge {
  background: var(--kite-buy-light);
  color: var(--kite-buy);
  font-size: 10.64px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 5px;
}

/* Buy / Sell Toggle */
.order-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 20px 10px;
}

.side {
  padding: 10px;
  border-radius: 7px;
  font-size: 14.56px;
  font-weight: 800;
  border: 1px solid var(--kite-border);
  background: #f8fafc;
  color: var(--kite-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.12s ease;
}

.side small {
  font-size: 10.08px;
  font-weight: 600;
  opacity: 0.8;
}

.side.buy.active {
  background: var(--kite-blue);
  border-color: var(--kite-blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(56, 126, 209, 0.25);
}

.side.sell.active {
  background: var(--kite-sell);
  border-color: var(--kite-sell);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.25);
}

/* Product Pills */
.product-pills {
  display: flex;
  gap: 6px;
  padding: 0 20px 10px;
}

.product-pill {
  font-size: 10.64px;
  font-weight: 750;
  padding: 4px 8px;
  border-radius: 5px;
  background: #f1f5f9;
  color: var(--kite-text-muted);
}

.product-pill.active {
  background: var(--kite-blue-light);
  color: var(--kite-blue);
}

/* Form Fields */
.order-fields {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
  padding: 0 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field span {
  font-size: 10.64px;
  font-weight: 800;
  color: var(--kite-text-muted);
  letter-spacing: 0.5px;
}

.field select,
.field input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--kite-border);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13.44px;
  font-weight: 600;
  color: var(--kite-text);
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease;
}

.field select:focus,
.field input:focus {
  border-color: var(--kite-blue);
  box-shadow: 0 0 0 3px rgba(56, 126, 209, 0.12);
}

.field.full {
  padding: 10px 20px 0;
}

/* Stepper for Lots */
.stepper-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--kite-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.stepper-btn {
  width: 34px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #f8fafc;
  color: var(--kite-text);
  font-size: 16.8px;
  font-weight: 750;
  transition: background 0.12s ease;
}

.stepper-btn:hover {
  background: #edf2f7;
}

.stepper-wrap input {
  border: none;
  height: 38px;
  text-align: center;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

/* Target & Stop-Loss Bracket Controls */
.attached-sl-box {
  margin: 12px 20px 0;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--kite-border-light);
  border-radius: 8px;
}

.sl-toggle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.32px;
  font-weight: 750;
  color: var(--kite-text);
  cursor: pointer;
}

.checkbox-label input {
  width: 15px;
  height: 15px;
  accent-color: var(--kite-blue);
  cursor: pointer;
}

.attached-sl-controls {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bracket-subgroup {
  background: #fff;
  border: 1px solid var(--kite-border-light);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.64px;
  font-weight: 800;
  color: var(--kite-text-muted);
}

.muted-note {
  font-size: 10.08px;
  color: var(--kite-text-subtle);
}

.preset-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.preset-chip {
  padding: 4px 7px;
  border-radius: 5px;
  border: 1px solid var(--kite-border-light);
  background: #f8fafc;
  font-size: 10.64px;
  font-weight: 750;
  color: var(--kite-text-muted);
  transition: all 0.12s ease;
}

.preset-chip:hover {
  background: var(--kite-blue-light);
  color: var(--kite-blue);
  border-color: var(--kite-blue);
}

.attached-sl-input-wrap input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--kite-border);
  border-radius: 5px;
  padding: 0 8px;
  font-size: 12.88px;
  font-weight: 650;
  outline: none;
}

.attached-sl-input-wrap input:focus {
  border-color: var(--kite-blue);
}

.sl-risk-note {
  font-size: 10.64px;
  color: var(--kite-text-subtle);
  line-height: 1.4;
}

.execution-notice {
  margin: 12px 20px 0;
  padding: 8px 12px;
  background: #f0f7ff;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  font-size: 11.76px;
  color: #1e40af;
  line-height: 1.4;
}

/* Order Estimate Box */
.order-estimate {
  margin: 12px 20px 0;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--kite-border-light);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.order-estimate div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.2px;
}

.order-estimate span {
  color: var(--kite-text-muted);
  font-weight: 700;
}

.order-estimate b {
  font-size: 12.88px;
  color: var(--kite-text);
  font-variant-numeric: tabular-nums;
}

/* Primary Order CTA Button */
.trade-cta {
  display: block;
  width: calc(100% - 40px);
  margin: 14px 20px 0;
  padding: 13px;
  border-radius: 7px;
  font-size: 14.56px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
  background: var(--kite-blue);
  transition: all 0.15s ease;
}

.trade-cta:hover:not(:disabled) {
  background: var(--kite-blue-hover);
  box-shadow: 0 4px 14px rgba(56, 126, 209, 0.3);
}

.trade-cta.sell {
  background: var(--kite-sell);
}

.trade-cta.sell:hover:not(:disabled) {
  background: var(--kite-sell-hover);
  box-shadow: 0 4px 14px rgba(255, 87, 34, 0.3);
}

.order-note {
  font-size: 10.64px;
  color: var(--kite-text-subtle);
  padding: 8px 20px 16px;
  line-height: 1.4;
}

/* ==========================================================================
   DATA PANELS & TABLES: POSITIONS, ORDERS, HISTORY
   ========================================================================== */
.data-panel {
  min-height: 380px;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--kite-border-light);
}

.panel-heading h2 {
  font-size: 17.92px;
  font-weight: 800;
  color: var(--kite-text);
  margin-top: 2px;
}

/* ==========================================================================
   OPEN POSITIONS: AVAILABLE BALANCE & TOTAL P&L LIVE SUMMARY
   ========================================================================== */
.panel-heading-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pos-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12.32px;
  font-weight: 600;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.pos-stat-chip .chip-label {
  font-size: 11.2px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pos-stat-chip strong {
  font-size: 14.56px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.pos-chip-avail {
  background: #f0f7ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.pos-chip-avail .chip-label {
  color: #3b82f6;
}

.pos-chip-pnl {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.pos-chip-pnl.positive,
.pos-stat-chip strong.positive {
  color: #059669;
}

.pos-chip-pnl.negative,
.pos-stat-chip strong.negative {
  color: #dc2626;
}

/* Open Positions summary cards */
.open-pos-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 18px 22px 14px 22px;
  background: #ffffff;
  border-bottom: 1px solid var(--kite-border-light);
}

@media (min-width: 1600px) {
  .open-pos-kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .open-pos-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .open-pos-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.open-pos-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--kite-border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.open-pos-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}

.open-pos-kpi-card.avail-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  border-color: #dbeafe;
}

.open-pos-kpi-card.pnl-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafffc 100%);
}

.kpi-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f1f5f9;
}

.kpi-icon-box .material-symbols-outlined {
  font-size: 22px;
  color: #475569;
}

.kpi-icon-box.blue-box {
  background: #eff6ff;
}

.kpi-icon-box.blue-box .material-symbols-outlined {
  color: #2563eb;
}

.kpi-icon-box.green-box {
  background: #ecfdf5;
}

.kpi-icon-box.green-box .material-symbols-outlined {
  color: #059669;
}

.kpi-icon-box.red-box {
  background: #fef2f2;
}

.kpi-icon-box.red-box .material-symbols-outlined {
  color: #dc2626;
}

.kpi-icon-box.purple-box {
  background: #f5f3ff;
}

.kpi-icon-box.purple-box .material-symbols-outlined {
  color: #7c3aed;
}

.kpi-icon-box.teal-box {
  background: #f0fdfa;
}

.kpi-icon-box.teal-box .material-symbols-outlined {
  color: #0d9488;
}

.kpi-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kpi-label {
  font-size: 12.88px;
  font-weight: 600;
  color: var(--kite-text-muted);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.kpi-val {
  font-size: 17px;
  font-weight: 800;
  color: var(--kite-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.kpi-val.positive {
  color: #059669;
}

.kpi-val.negative {
  color: #dc2626;
}

.kpi-sub {
  font-size: 12.32px;
  color: var(--kite-text-subtle);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Positions Table Footer Summary Row */
.positions-tfoot-row td {
  background: #f8fafc !important;
  border-top: 2px solid #e2e8f0 !important;
  border-bottom: 1px solid var(--kite-border) !important;
  padding: 14px 18px !important;
  font-weight: 700;
}

.tfoot-summary-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tfoot-badge {
  font-size: 10.64px;
  font-weight: 800;
  letter-spacing: 0.6px;
  background: #1e293b;
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
}

.tfoot-count {
  font-size: 13.44px;
  font-weight: 600;
  color: var(--kite-text-muted);
}

.tfoot-invested {
  font-size: 15.12px;
  font-weight: 800;
  color: var(--kite-text);
  font-variant-numeric: tabular-nums;
}

.tfoot-pnl {
  font-size: 15.12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tfoot-pnl.positive {
  color: #059669;
}

.tfoot-pnl.negative {
  color: #dc2626;
}

.tfoot-avail-wrap {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tfoot-avail-label {
  font-size: 12.32px;
  font-weight: 600;
  color: var(--kite-text-muted);
  margin-right: 6px;
}

.tfoot-avail-wrap strong {
  font-size: 15.68px;
  font-weight: 800;
  color: #1e40af;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.44px;
  min-width: 720px;
}

th {
  background: #f8fafc;
  border-bottom: 1px solid var(--kite-border);
  padding: 12px 18px;
  text-align: left;
  font-size: 10.64px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--kite-text-muted);
}

td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--kite-border-light);
  color: var(--kite-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}

tbody tr:hover {
  background: #f8fbff;
}

td b {
  font-weight: 750;
  color: var(--kite-text);
}

td .subcell {
  display: block;
  font-size: 10.64px;
  color: var(--kite-text-subtle);
  margin-top: 2px;
}

.empty-inline,
.no-data {
  padding: 48px;
  text-align: center;
  color: var(--kite-text-subtle);
  font-size: 13.44px;
}

/* Action buttons in tables */
.row-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.32px;
  font-weight: 700;
  background: var(--kite-blue-light);
  color: var(--kite-blue);
  border: 1px solid #dbeafe;
  transition: all 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: inherit;
}

.row-btn:hover {
  background: #dbeafe;
}

.row-btn.cancel {
  background: #fff1f2;
  color: var(--kite-danger);
  border-color: #fecdd3;
}

.row-btn.exit-pos-btn {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-weight: 750;
  cursor: pointer;
}

.row-btn.share-position-btn {
  background: #eef8f1;
  color: #237348;
  border-color: #c9e8d3;
}

.share-position-control {
  position: relative;
  display: inline-flex;
}

.row-btn.share-position-btn:disabled {
  background: #edf0f2;
  color: #89939b;
  border-color: #d8dee3;
  cursor: not-allowed;
  opacity: .82;
}

.share-position-control[data-tooltip]:hover::after,
.share-position-control[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid #d5dee3;
  border-radius: 7px;
  background: #172b3d;
  color: #fff;
  font-size: 12.32px;
  font-weight: 550;
  line-height: 1.4;
  white-space: normal;
  box-shadow: 0 5px 18px rgba(20, 36, 50, .2);
  pointer-events: none;
}

.row-btn.share-position-btn:hover {
  background: #dff2e5;
  border-color: #9fd5b0;
}

.row-btn.share-position-btn:disabled:hover {
  background: #edf0f2;
  border-color: #d8dee3;
}

.row-btn.exit-pos-btn:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
  transform: translateY(-1px);
}

.row-btn.exit-pos-btn.mini {
  padding: 2px 8px;
  font-size: 11.2px;
  border-radius: 4px;
}

.row-btn.exit-pos-btn.confirming {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
  animation: pulseExit 0.8s infinite alternate ease-in-out;
}

@keyframes pulseExit {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.05);
  }
}

.row-btn.add-qty-btn {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  font-weight: 750;
  cursor: pointer;
}

.row-btn.add-qty-btn:hover {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.28);
  transform: translateY(-1px);
}

.aom-position-banner {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 12.88px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aom-position-banner .material-symbols-outlined {
  font-size: 18px;
  color: #059669;
}

.sl-action-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.mini-act-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.bracket-badge-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tgt-badge {
  font-size: 10.64px;
  font-weight: 750;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eff6ff;
  color: var(--kite-blue);
  border: 1px solid #dbeafe;
}

.sl-badge {
  font-size: 10.64px;
  font-weight: 750;
  padding: 2px 6px;
  border-radius: 4px;
  background: #fef2f2;
  color: var(--kite-danger);
  border: 1px solid #fee2e2;
}

.tgt-badge.none,
.sl-badge.none {
  background: #f8fafc;
  color: var(--kite-text-subtle);
  border-color: var(--kite-border-light);
}

/* ==========================================================================
   SETTINGS VIEW
   ========================================================================== */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.settings-panel {
  padding: 22px;
}

.settings-panel h2 {
  font-size: 17.92px;
  font-weight: 800;
  margin: 3px 0 16px;
}

.diagnostics {
  display: flex;
  flex-direction: column;
}

.diagnostics div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--kite-border-light);
  font-size: 12.88px;
}

.diagnostics span {
  color: var(--kite-text-muted);
}

.diagnostics b {
  color: var(--kite-text);
  font-variant-numeric: tabular-nums;
}

.actions-inline {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.settings-help {
  font-size: 12.32px;
  color: var(--kite-text-subtle);
  line-height: 1.6;
  margin: 14px 0;
}

/* ==========================================================================
   MODAL: BRACKET ORDER DIALOG
   ========================================================================== */
.sl-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 200;
  padding: 16px;
}

/* Keep exit confirmations above fixed navigation, menus and trade toasts. */
#exitModalBackdrop,
#bracketModalBackdrop {
  z-index: 100000;
}

.sl-modal-dialog {
  width: 100%;
  max-width: 450px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}

.modal-header {
  padding: 18px 20px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--kite-border-light);
}

.modal-header h3 {
  font-size: 16.8px;
  font-weight: 800;
  color: var(--kite-text);
  margin-top: 2px;
}

.modal-close-btn {
  font-size: 17.92px;
  color: var(--kite-text-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.modal-close-btn:hover {
  background: #f1f5f9;
}

.modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sl-contract-card {
  background: #f8fafc;
  border: 1px solid var(--kite-border-light);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sl-contract-card strong {
  font-size: 14.56px;
  color: var(--kite-text);
  display: block;
}

.sl-contract-card small {
  font-size: 11.2px;
  color: var(--kite-text-muted);
  display: block;
  margin-top: 2px;
}

.sl-contract-prices {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.76px;
  color: var(--kite-text-muted);
  text-align: right;
}

.sl-contract-prices b {
  color: var(--kite-text);
}

.modal-field-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bracket-lots-section {
  background: #f8fafc;
  border: 1px solid var(--kite-border-light);
  border-radius: 8px;
  padding: 10px 12px;
}

.bracket-lots-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.bracket-stepper {
  width: 120px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--kite-border);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.bracket-stepper input {
  width: 100%;
  height: 100% !important;
  border: none !important;
  text-align: center;
  font-weight: 750;
  font-size: 14.56px;
  padding: 0 !important;
  box-shadow: none !important;
}

.bracket-stepper button {
  width: 34px;
  height: 100%;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  border: none;
  font-size: 16.8px;
  font-weight: 750;
  color: var(--kite-text);
  cursor: pointer;
  transition: background 0.15s ease;
}

.bracket-stepper button:hover {
  background: #e2e8f0;
}

.bracket-lot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bracket-lot-chip {
  padding: 4px 8px;
  font-size: 12.32px;
  font-weight: 700;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  color: #334155;
  cursor: pointer;
  transition: all 0.12s ease;
}

.bracket-lot-chip:hover,
.bracket-lot-chip.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
}

.bracket-units-badge {
  font-size: 11.76px;
  font-weight: 750;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 7px;
  border-radius: 4px;
}

.bracket-lots-hint {
  font-size: 11.76px;
  color: #64748b;
  margin-top: 4px;
  display: block;
}

.modal-field-block input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--kite-border);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13.44px;
  font-weight: 650;
  outline: none;
}

.modal-field-block input:focus {
  border-color: var(--kite-blue);
  box-shadow: 0 0 0 3px rgba(56, 126, 209, 0.12);
}

.sl-risk-card {
  background: #f8fafc;
  border: 1px solid var(--kite-border-light);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--kite-text-muted);
}

.sl-risk-card div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.danger-text {
  color: var(--kite-danger) !important;
}

/* ==========================================================================
   TOAST NOTIFICATION & FOOTER
   ========================================================================== */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--kite-text);
  color: #fff;
  font-size: 13.44px;
  font-weight: 650;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
  z-index: 300;
  line-height: 1.4;
}

.footer {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--kite-border-light);
  display: flex;
  justify-content: space-between;
  font-size: 11.2px;
  color: var(--kite-text-subtle);
  letter-spacing: 0.3px;
}

.footer i {
  font-style: normal;
  padding: 0 4px;
}

/* ==========================================================================
   RESPONSIVE LAYOUTS
   ========================================================================== */
@media (max-width: 1200px) {
  .indices-ticker {
    display: none;
  }

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

@media (max-width: 992px) {
  .terminal-layout {
    flex-direction: column;
  }

  .terminal-layout .watchlist-pane {
    width: 100%;
    flex: none;
    position: static;
    max-height: 480px;
  }

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

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

@media (max-width: 768px) {
  .topbar {
    padding: 0 14px;
    height: auto;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
  }

  .top-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    border-top: 1px solid var(--kite-border-light);
    height: 44px;
  }

  .top-actions .user-pill {
    display: none;
  }

  .main-content {
    padding: 12px;
  }

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


/* ==========================================================================
   MCX Control AUTHENTIC DESIGN SYSTEM & CLONE EXTENSION
   ========================================================================== */

/* Topbar: MCX Control & MCX Control Style */
.angel-topbar {
  background: #ffffff;
  border-bottom: 1px solid #e0e3eb;
  height: 54px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  outline: none;
  flex-shrink: 0;
}

.mcx-control-logo {
  height: 30px;
  width: auto;
  max-width: 90px;
  display: block;
  object-fit: contain;
  transition: opacity 0.15s ease;
}

.brand-link:hover .mcx-control-logo {
  opacity: 0.88;
}

.angel-indices-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 14px;
  border-left: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.angel-index-pill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  cursor: default;
}

.angel-index-pill .index-top-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.angel-index-pill .index-title {
  font-size: 12.32px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.02em;
}

.angel-index-pill .index-chevron {
  font-size: 10.08px;
  color: #64748b;
}

.angel-index-pill .index-data-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.angel-index-pill .index-val {
  font-size: 13.44px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.angel-index-pill .index-chg {
  font-size: 12.32px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.angel-index-pill .index-chg.positive {
  color: #089981;
}

.angel-index-pill .index-chg.negative {
  color: #f23645;
}

/* Nav links */
.angel-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 2px;
  flex-shrink: 0;
  margin: 0 auto;
}

.angel-nav .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 0 16px;
  font-size: 15.12px;
  font-weight: 600;
  color: #64748b;
  border: none;
  border-radius: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
  position: relative;
  background: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
}

.angel-nav .nav-link:hover {
  color: #0f172a;
  background-color: rgba(241, 245, 249, 0.7);
}

.angel-nav .nav-link.active {
  color: #7c3aed;
  font-weight: 700;
  background-color: transparent;
}

.angel-nav .nav-link.active:hover {
  color: #6d28d9;
  background-color: rgba(124, 58, 237, 0.04);
}

.angel-nav .nav-link::after {
  display: none;
}

.angel-nav .nav-link.active::after {
  display: block;
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2.5px;
  background: #7c3aed;
  border-radius: 2px 2px 0 0;
  z-index: 2;
}

.angel-nav .nav-badge {
  background: #ede9fe;
  color: #6d28d9;
  font-size: 11.2px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  line-height: 1.2;
}

.angel-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.angel-top-actions .clock {
  font-size: 13.44px;
  font-weight: 600;
  color: #475569;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.angel-icon-btn {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.angel-icon-btn:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.angel-icon-btn .google-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

.angel-avatar {
  background: #ede9fe;
  color: #6d28d9;
  font-weight: 700;
  font-size: 13.44px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd6fe;
}

/* Responsive adjustments for Topbar */
@media (max-width: 1380px) {
  .angel-top-actions .clock {
    display: none;
  }
}

@media (max-width: 1280px) {
  #tickerBankNifty {
    display: none;
  }

  .angel-indices-ticker {
    padding-left: 12px;
    gap: 8px;
  }

  .angel-nav .nav-link {
    padding: 6px 9px;
    font-size: 14px;
    gap: 4px;
  }
}

@media (max-width: 992px) {
  #marketBadge {
    display: none;
  }

  .angel-nav {
    gap: 1px;
  }

  .angel-nav .nav-link {
    padding: 6px 7px;
    font-size: 13.44px;
  }

  .topbar-left {
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .angel-topbar {
    height: auto;
    min-height: 52px;
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .topbar-left {
    flex: 1;
    min-width: 0;
  }

  .angel-top-actions {
    margin-left: auto;
  }

  .angel-nav {
    order: 3;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #f1f5f9;
    padding-top: 6px;
    gap: 4px;
  }

  .angel-nav::-webkit-scrollbar {
    display: none;
  }

  .angel-nav .nav-link.active::after {
    bottom: -6px;
  }
}

@media (max-width: 480px) {
  .angel-indices-ticker {
    display: none;
  }

  .mcx-control-logo {
    height: 26px;
    max-width: 80px;
  }
}

/* ==========================================================================
   3-COLUMN MCX Control TERMINAL LAYOUT
   ========================================================================== */
.angel-terminal-layout {
  display: flex;
  height: calc(100vh - 52px);
  width: 100%;
  overflow: hidden;
  background: #ffffff;
}

/* Left Watchlist Column */
.angel-terminal-layout .watchlist-pane {
  width: 350px;
  min-width: 320px;
  max-width: 380px;
  flex-shrink: 0;
  border-right: 1px solid #e0e3eb;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
}

.angel-watch-header {
  padding: 12px 14px 6px;
  border-bottom: 1px solid #f0f3fa;
}

.angel-watch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.angel-watch-title {
  font-size: 16.8px;
  font-weight: 700;
  color: #0f172a;
}

.angel-watch-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.angel-tool-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 15.68px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.angel-tool-btn .material-symbols-outlined {
  font-size: 17.92px;
  line-height: 1;
}

.angel-tool-btn:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.mw-tabs-nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}

.mw-tabs-nav-wrap .angel-watch-tabs {
  flex: 1;
  margin-bottom: 0;
  scroll-behavior: smooth;
}

.mw-scroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 28px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #475569;
  font-size: 17.92px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 2px;
  user-select: none;
  transition: all 0.15s ease;
  line-height: 1;
}

.mw-scroll-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.angel-watch-tabs {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 2px 4px 2px;
  margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.angel-watch-tabs::-webkit-scrollbar {
  display: none;
}

.angel-watch-tabs .mw-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.88px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 5px 11px;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.angel-watch-tabs .mw-tab:hover {
  color: #1e293b;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.angel-watch-tabs .mw-tab.active {
  color: #ffffff;
  background: #2563eb;
  border-color: #2563eb;
  font-weight: 750;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.angel-watch-tabs .mw-tab-add,
.angel-watch-tabs .mw-tab-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  font-size: 15.68px;
  color: #64748b;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.angel-watch-tabs .mw-tab-add:hover,
.angel-watch-tabs .mw-tab-icon:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #2563eb;
}

.angel-search-box-inner {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0;
  gap: 6px;
}

.angel-search-box-inner input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.44px;
}

.search-filter-icon {
  font-size: 13.44px;
  color: #94a3b8;
}

.angel-watch-rows {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.angel-watch-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid #f0f3fa;
  font-size: 12.32px;
  font-weight: 700;
  color: #2563eb;
  cursor: pointer;
  background: #ffffff;
}

.angel-watch-foot:hover {
  background: #f8fafc;
}

/* ==========================================================================
   AUTHENTIC MCX Control WATCHLIST SCRIP ROW & HOVER ACTION PILL (Screenshot 2)
   ========================================================================== */
.angel-watch-row {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  background: #ffffff;
  transition: background 0.15s ease;
  user-select: none;
}

.angel-watch-row:hover {
  background: #f8fafc;
}

.angel-watch-row.active {
  background: #f0f5ff;
  border-left: 3px solid #2563eb;
}

.watch-row-line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.watch-sym-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.watch-sym-name {
  font-size: 14.56px;
  font-weight: 700;
  color: #0f172a;
}

.watch-seg-tag {
  font-size: 11.2px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 3px;
  padding: 1px 4px;
}

.watch-sparkle {
  font-size: 11.2px;
  color: #8b5cf6;
}

.watch-price-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.watch-ltp {
  font-size: 14.56px;
  font-weight: 700;
  color: #0f172a;
}

.watch-dir-icon {
  font-size: 17.92px;
  line-height: 1;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.watch-dir-icon.up {
  color: #089981;
}

.watch-dir-icon.down {
  color: #f23645;
}

.watch-row-line2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.watch-meta-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.watch-expiry-strike {
  font-size: 12.32px;
  color: #64748b;
}

.watch-type-pill {
  font-size: 11.2px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
}

.watch-type-pill.ce {
  background: #ede9fe;
  color: #7c3aed;
}

.watch-type-pill.pe {
  background: #ffedd5;
  color: #ea580c;
}

.watch-type-pill.fut {
  background: #e0f2fe;
  color: #0369a1;
}

.watch-type-pill.eq {
  background: #f0fdf4;
  color: #166534;
}

.watch-chg-right {
  font-size: 12.32px;
  font-weight: 600;
}

.watch-chg-right.positive {
  color: #089981;
}

.watch-chg-right.negative {
  color: #f23645;
}

/* Floating Hover Action Pill (Screenshot 2) */
.watch-hover-pill {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: 1px solid #e0e3eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12), 0 1px 4px rgba(15, 23, 42, 0.08);
  padding: 3px 5px;
  gap: 5px;
  align-items: center;
  z-index: 30;
}

.watch-hover-pill::before {
  content: '';
  position: absolute;
  top: -5px;
  z-index: -1;
  left: 20px;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-left: 1px solid #e0e3eb;
  border-top: 1px solid #e0e3eb;
  transform: rotate(45deg);
}

.angel-watch-row:hover .watch-hover-pill {
  display: flex;
}

.wh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.wh-btn-buy {
  background: #089981;
  color: #ffffff;
  font-weight: 700;
  font-size: 14.56px;
  width: 28px;
  height: 28px;
}

.wh-btn-buy:hover {
  background: #067a67;
  box-shadow: 0 2px 6px rgba(8, 153, 129, 0.4);
}

.wh-btn-sell {
  background: #f23645;
  color: #ffffff;
  font-weight: 700;
  font-size: 14.56px;
  width: 28px;
  height: 28px;
}

.wh-btn-sell:hover {
  background: #d42735;
  box-shadow: 0 2px 6px rgba(242, 54, 69, 0.4);
}

.wh-btn-icon {
  background: transparent;
  color: #475569;
  font-size: 15.68px;
  width: 26px;
  height: 26px;
}

.wh-btn-icon .material-symbols-outlined {
  font-size: 17.92px;
  line-height: 1;
}

.wh-btn-icon:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* ==========================================================================
   CENTER HERO CHART WORKSPACE (Screenshot 1)
   ========================================================================== */
.hero-workspace {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
}

.chart-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid #f0f3fa;
  background: #ffffff;
  flex-shrink: 0;
}

.chart-subnav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.chart-subtab {
  font-size: 14.56px;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 2px;
  position: relative;
}

.chart-subtab:hover {
  color: #0f172a;
}

.chart-subtab.active {
  color: #6d28d9;
  font-weight: 700;
}

.chart-subtab.active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 0;
  right: 0;
  height: 2px;
  background: #7c3aed;
  border-radius: 2px;
}

.chart-subnav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-scalper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13.44px;
  font-weight: 700;
  color: #6d28d9;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-scalper:hover {
  background: #ede9fe;
}

.btn-grid-layout {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 15.68px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-grid-layout .material-symbols-outlined {
  font-size: 17.92px;
  line-height: 1;
}

.btn-grid-layout:hover {
  color: #0f172a;
  background: #f8fafc;
}

/* Full Width TradingView Console */
.hero-tv-console {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
}

.hero-tv-console .tv-chart-body {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

/* Bottom Accordion Drawer */
.bottom-depth-drawer {
  padding: 16px;
  background: #f8fafc;
  border-top: 1px solid #e0e3eb;
}

.angel-metrics {
  margin-bottom: 16px;
}

.angel-depth-container {
  background: #ffffff;
  border: 1px solid #e0e3eb;
  border-radius: 8px;
  overflow: hidden;
}

.depth-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid #f0f3fa;
}

.depth-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.depth-main-title {
  font-size: 13.44px;
  font-weight: 700;
  color: #0f172a;
}

.selected-symbol-inline {
  font-size: 13.44px;
  font-weight: 600;
  color: #2563eb;
}

.depth-title-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.depth-ltp {
  font-size: 14.56px;
  font-weight: 700;
}

.depth-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #f8fafc;
  border-top: 1px solid #f0f3fa;
  font-size: 12.32px;
  color: #64748b;
}

/* ==========================================================================
   FAR RIGHT VERTICAL DOCK (Screenshot 1 & 4)
   ========================================================================== */
.angel-right-dock {
  width: 54px;
  flex-shrink: 0;
  border-left: 1px solid #e0e3eb;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 6px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.angel-right-dock::-webkit-scrollbar {
  display: none;
}

.dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  padding: 6px 2px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s ease;
}

.dock-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.dock-btn.active {
  color: #6d28d9;
}

.dock-icon {
  font-size: 20px;
  line-height: 1;
}

.dock-icon.material-symbols-outlined {
  font-size: 21px;
}

.dock-label {
  font-size: 10.08px;
  font-weight: 600;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
}

/* ==========================================================================
   MCX Control ORDER MODAL (Screenshot 3)
   ========================================================================== */
.angel-order-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.angel-order-backdrop[hidden],
.sl-modal-backdrop[hidden],
.modal-backdrop[hidden] {
  display: none !important;
}

.angel-order-modal {
  background: #ffffff;
  width: 430px;
  max-width: 95vw;
  border-radius: 12px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2), 0 4px 10px rgba(15, 23, 42, 0.08);
  border: 1px solid #e0e3eb;
  overflow: hidden;
  animation: aomPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes aomPop {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.angel-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #f0f3fa;
}

.aom-sym-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.aom-sym-line h3 {
  font-size: 15.68px;
  font-weight: 700;
  color: #0f172a;
}

.aom-type-pill {
  font-size: 11.2px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.aom-type-pill.ce {
  background: #ede9fe;
  color: #7c3aed;
}

.aom-type-pill.pe {
  background: #ffedd5;
  color: #ea580c;
}

.aom-type-pill.eq {
  background: #f0fdf4;
  color: #166534;
}

.aom-price-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.aom-price-line strong {
  font-size: 14.56px;
  font-weight: 700;
  color: #0f172a;
}

.aom-delta {
  font-size: 12.32px;
  font-weight: 600;
}

.aom-delta.positive {
  color: #089981;
}

.aom-delta.negative {
  color: #f23645;
}

.aom-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aom-side-toggle {
  display: flex;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.aom-side-btn {
  padding: 4px 10px;
  height: 26px;
  border-radius: 4px;
  font-size: 12.32px;
  font-weight: 750;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #64748b;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}

.aom-side-btn.buy.active {
  background: #089981;
  color: #ffffff;
}

.aom-side-btn.sell.active {
  background: #f23645;
  color: #ffffff;
}

.aom-icon-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 15.68px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.aom-icon-btn:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.aom-body {
  padding: 16px;
}

.aom-product-type-row,
.aom-order-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.aom-product-type-row .aom-label,
.aom-order-type-row .aom-label {
  margin-bottom: 0;
}

.aom-prod-sub {
  font-size: 10.08px;
  font-weight: 700;
  opacity: 0.65;
  margin-left: 2px;
  letter-spacing: 0.3px;
}

.aom-seg-btn.active .aom-prod-sub {
  opacity: 0.9;
  color: #4f46e5;
}

.aom-label {
  display: block;
  font-size: 12.88px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
}

.aom-segmented {
  display: flex;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.aom-seg-btn {
  padding: 4px 12px;
  font-size: 12.88px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.aom-seg-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.aom-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.aom-field-group {
  display: flex;
  flex-direction: column;
}

.aom-field-label-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.aom-lot-sub {
  font-size: 11.2px;
  color: #94a3b8;
}

.aom-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  height: 38px;
}

.aom-step-btn {
  width: 34px;
  height: 100%;
  background: #f8fafc;
  border: none;
  font-size: 17.92px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s ease;
}

.aom-step-btn:hover {
  background: #e2e8f0;
}

.aom-stepper input {
  flex: 1;
  border: none;
  text-align: center;
  font-size: 15.12px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  background: transparent;
}

.aom-field-group input[type="number"] {
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 15.12px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  background: #ffffff;
}

.aom-field-group input[type="number"]:disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}

.aom-field-group input[type="number"]:focus {
  border-color: #7c3aed;
}

.aom-bracket-check-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.aom-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.44px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.aom-bracket-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: #f8fafc;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  margin-bottom: 12px;
}

.aom-bracket-field {
  display: flex;
  flex-direction: column;
}

.aom-quick-chips {
  display: flex;
  gap: 3px;
  margin-bottom: 4px;
  overflow-x: auto;
}

.aom-chip {
  font-size: 10.08px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #e2e8f0;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.aom-chip:hover {
  background: #cbd5e1;
}

.aom-bracket-field input {
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13.44px;
}

.aom-funds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 12.88px;
  color: #64748b;
}

.aom-funds-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aom-funds-item strong {
  font-size: 15.68px;
  font-weight: 700;
  color: #0f172a;
}

.aom-submit-btn {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 8px;
  font-size: 15.68px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #ffffff;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aom-submit-btn.buy {
  background: #089981;
}

.aom-submit-btn.buy:hover:not(:disabled) {
  background: #067a67;
}

.aom-submit-btn.sell {
  background: #f23645;
}

.aom-submit-btn.sell:hover:not(:disabled) {
  background: #d42735;
}

.aom-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.aom-order-note {
  font-size: 12.32px;
  color: #94a3b8;
  text-align: center;
  margin-top: 8px;
  line-height: 1.3;
}

/* ==========================================================================
   PORTFOLIO VIEW (Screenshot 4)
   ========================================================================== */
.portfolio-page {
  padding: 20px 28px;
  margin: 0 auto;
}

.portfolio-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e3eb;
  padding-bottom: 10px;
  margin-bottom: 24px;
}

.portfolio-subtabs {
  display: flex;
  gap: 20px;
}

.port-subtab {
  font-size: 15.68px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  padding-bottom: 4px;
}

.port-subtab.active {
  color: #2563eb;
  font-weight: 700;
}

.port-subtab.active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 0;
  right: 0;
  height: 2px;
  background: #2563eb;
}

.btn-hide-watch {
  font-size: 12.32px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

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

.port-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e0e3eb;
  border-radius: 10px;
  padding: 16px 18px;
}

.port-kpi-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.port-kpi-icon-wrap .material-symbols-outlined {
  font-size: 20px;
  color: #3b82f6;
}

.port-kpi-icon-wrap.green {
  background: #ecfdf5;
}

.port-kpi-icon-wrap.green .material-symbols-outlined {
  color: #089981;
}

.port-kpi-meta {
  display: flex;
  flex-direction: column;
}

.port-kpi-title {
  font-size: 13.44px;
  color: #64748b;
  margin-bottom: 2px;
}

.port-kpi-val {
  font-size: 17.92px;
  font-weight: 700;
  color: #0f172a;
}

.port-section {
  margin-bottom: 28px;
}

.port-section-title {
  font-size: 17.92px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
}

.port-empty-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14.56px;
  color: #1e40af;
  margin-bottom: 14px;
}

.port-info-dot {
  font-weight: 700;
  color: #2563eb;
}

.port-invest-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.port-invest-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e0e3eb;
  border-radius: 8px;
  padding: 16px;
}

.port-invest-label {
  font-size: 15.68px;
  font-weight: 600;
  color: #0f172a;
}

.btn-invest-now {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13.44px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-invest-now:hover {
  background: #2563eb;
  color: #ffffff;
}

.port-mtf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.mtf-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e0e3eb;
  border-radius: 8px;
  padding: 16px;
}

.mtf-icon {
  font-size: 20px;
  color: #2563eb;
}

.mtf-content strong {
  display: block;
  font-size: 14.56px;
  color: #0f172a;
  margin-bottom: 2px;
}

.mtf-content p {
  font-size: 12.32px;
  color: #64748b;
  margin: 0;
}

.port-community-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #e0e3eb;
  padding-top: 20px;
}

.community-label {
  font-size: 15.68px;
  font-weight: 700;
  color: #0f172a;
}

.community-socials {
  display: flex;
  gap: 10px;
}

.social-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15.68px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
}

.social-circle.yt {
  background: #ff0000;
}

.social-circle.ig {
  background: #e1306c;
}

.social-circle.fb {
  background: #1877f2;
}

.social-circle.x {
  background: #000000;
}

.social-circle.in {
  background: #0a66c2;
}

/* ==========================================================================
   HERO WORKSPACE: OVERVIEW & OPTION CHAIN CONSOLES
   ========================================================================== */

.overview-console {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  overflow: hidden;
}

.overview-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.overview-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  flex-wrap: wrap;
  gap: 12px;
}

.oh-symbol-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.oh-title {
  font-size: 17px;
  font-weight: 750;
  color: #0f172a;
  margin: 0;
}

.oh-exch-badge {
  font-size: 11.2px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #0369a1;
}

.oh-type-pill {
  font-size: 11.2px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.oh-type-pill.ce {
  background: #ecfdf5;
  color: #065f46;
}

.oh-type-pill.pe {
  background: #fff1f2;
  color: #9f1239;
}

.oh-type-pill.eq {
  background: #e0f2fe;
  color: #0284c7;
}

.oh-stream-badge {
  font-size: 11.2px;
  font-weight: 600;
  color: #059669;
  background: #ecfdf5;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #a7f3d0;
}

.oh-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.88px;
  color: #64748b;
  margin-top: 4px;
}

.dot-sep {
  color: #cbd5e1;
}

.oh-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.oh-ltp-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.oh-ltp {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}

.oh-chg {
  font-size: 14.56px;
  font-weight: 700;
}

.oh-chg.positive {
  color: #10b981;
}

.oh-chg.negative {
  color: #ef4444;
}

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

.oh-btn {
  padding: 5px 14px;
  font-size: 12.88px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}

.oh-btn.buy {
  background: #10b981;
  color: #ffffff;
  border: none;
}

.oh-btn.buy:hover {
  background: #059669;
}

.oh-btn.sell {
  background: #ef4444;
  color: #ffffff;
  border: none;
}

.oh-btn.sell:hover {
  background: #dc2626;
}

.oh-btn.icon {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #64748b;
  padding: 5px 10px;
  font-size: 14.56px;
}

.oh-btn.icon.pinned {
  color: #f59e0b;
  border-color: #f59e0b;
}

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

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

.ov-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

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

.ov-card-title {
  font-size: 12.88px;
  font-weight: 750;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.ov-spread-badge {
  font-size: 12.32px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
}

.ov-ohlc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.ov-stat-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
}

.ov-stat-label {
  display: block;
  font-size: 10.64px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 2px;
}

.ov-stat-val {
  font-size: 13.44px;
  font-weight: 700;
  color: #0f172a;
}

.ov-range-bar-wrap {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.ov-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12.32px;
  color: #64748b;
  margin-bottom: 4px;
}

.ov-range-bar {
  position: relative;
  height: 5px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: visible;
}

.ov-range-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  border-radius: 3px;
  transition: width 0.3s;
}

.ov-range-pin {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 11px;
  background: #0f172a;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: left 0.3s;
}

.ov-stats-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ov-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.88px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f1f5f9;
}

.ov-k {
  color: #64748b;
  font-weight: 500;
}

.ov-v {
  color: #0f172a;
  font-weight: 700;
}

.ov-v.badge {
  background: #eff6ff;
  color: #2563eb;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.76px;
}

.ov-ratio-box {
  margin-bottom: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 10px;
}

.ov-ratio-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11.76px;
  margin-bottom: 4px;
}

.ov-ratio-labels .buy-label {
  color: #059669;
  font-weight: 600;
}

.ov-ratio-labels .sell-label {
  color: #dc2626;
  font-weight: 600;
}

.ov-ratio-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: #e2e8f0;
}

.ov-ratio-buy {
  background: #10b981;
  transition: width 0.3s;
}

.ov-ratio-sell {
  background: #ef4444;
  transition: width 0.3s;
}

.ov-depth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ov-depth-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  font-size: 10.64px;
  font-weight: 700;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 4px;
  text-align: right;
}

.ov-depth-head span:first-child {
  text-align: left;
}

.ov-depth-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ov-depth-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  font-size: 12.32px;
  padding: 3px 0;
  border-bottom: 1px solid #f8fafc;
  text-align: right;
}

.ov-depth-row span:first-child {
  text-align: left;
}

.ov-depth-side.bids .ov-depth-row span:last-child {
  color: #059669;
  font-weight: 700;
}

.ov-depth-side.asks .ov-depth-row span:first-child {
  color: #dc2626;
  font-weight: 700;
}

/* Option Chain Console */
.option-chain-console {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}

.oc-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 10px;
}

.oc-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.oc-index-pills {
  display: flex;
  gap: 3px;
  background: #f1f5f9;
  padding: 2px;
  border-radius: 6px;
}

.oc-index-btn {
  padding: 4px 10px;
  font-size: 12.32px;
  font-weight: 700;
  border-radius: 4px;
  color: #64748b;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.oc-index-btn.active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.oc-control-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.32px;
  font-weight: 700;
  color: #64748b;
}

.oc-select {
  padding: 3px 8px;
  font-size: 12.32px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
}

.oc-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.oc-spot-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.88px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 6px;
}

.oc-spot-title {
  font-weight: 600;
  color: #64748b;
}

.oc-spot-val {
  font-weight: 800;
  color: #0f172a;
}

.oc-spot-chg {
  font-weight: 700;
  font-size: 11.76px;
}

.oc-spot-chg.positive {
  color: #10b981;
}

.oc-spot-chg.negative {
  color: #ef4444;
}

.oc-pcr-pill {
  font-size: 12.32px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 6px;
  color: #334155;
}

.oc-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}

.oc-refresh-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.oc-table-wrap {
  flex: 1;
  overflow: auto;
  background: #ffffff;
}

.oc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.32px;
  text-align: right;
}

.oc-superhead-row th {
  padding: 5px 8px;
  font-size: 11.76px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
  border-bottom: 1px solid #cbd5e1;
  position: sticky;
  top: 0;
  z-index: 5;
}

.oc-superhead.calls {
  background: #ecfdf5;
  color: #065f46;
  border-right: 1px solid #cbd5e1;
}

.oc-superhead.puts {
  background: #fff1f2;
  color: #9f1239;
  border-left: 1px solid #cbd5e1;
}

.oc-superhead.strike {
  background: #f1f5f9;
  color: #1e293b;
  width: 100px;
  border-left: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
}

.oc-colhead-row th {
  padding: 5px 6px;
  font-size: 10.64px;
  font-weight: 700;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  position: sticky;
  top: 27px;
  z-index: 4;
}

.oc-th.action-th {
  width: 52px;
  text-align: center;
}

.oc-th.ltp-th {
  font-weight: 800;
  color: #0f172a;
}

.oc-th.strike-col {
  text-align: center;
  font-weight: 800;
  background: #f1f5f9;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  width: 100px;
}

.oc-tr {
  transition: background 0.1s;
}

.oc-tr:hover {
  background: #f8fafc;
}

.oc-td {
  padding: 4px 6px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.oc-td.itm-call {
  background: #fefce8;
}

.oc-td.itm-put {
  background: #fefce8;
}

.oc-td.strike-cell {
  text-align: center;
  font-weight: 800;
  color: #0f172a;
  background: #f8fafc;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

.oc-tr.atm-row {
  background: #e0f2fe !important;
}

.oc-tr.atm-row .oc-td.strike-cell {
  background: #0284c7 !important;
  color: #ffffff !important;
}

.oc-atm-tag {
  display: inline-block;
  font-size: 8.96px;
  font-weight: 800;
  background: #ffffff;
  color: #0284c7;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 3px;
  vertical-align: middle;
}

.oc-td.ltp-val {
  font-weight: 750;
  color: #0f172a;
  cursor: pointer;
}

.oc-td.ltp-val:hover {
  color: #2563eb;
  text-decoration: underline;
}

.oc-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10.64px;
  font-weight: 800;
  border-radius: 3px;
  margin: 0 1px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.1s;
}

.oc-act-btn.b {
  background: #10b981;
  color: #ffffff;
}

.oc-act-btn.b:hover {
  background: #059669;
}

.oc-act-btn.s {
  background: #ef4444;
  color: #ffffff;
}

.oc-act-btn.s:hover {
  background: #dc2626;
}

.oc-empty-td {
  text-align: center;
  padding: 40px;
  color: #64748b;
  font-size: 14.56px;
}

/* ========================================================
   MULTI-USER PROFILE & TESTING PORTAL MODAL STYLES
   ======================================================== */

.user-pill-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.interactive-user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 5px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.interactive-user-pill:hover,
.interactive-user-pill:focus-visible {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.user-header-details {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.user-header-name {
  font-size: 12.88px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

.user-header-margin {
  font-size: 11.2px;
  font-weight: 700;
  color: #059669;
}

.user-header-chevron {
  font-size: 12.32px;
  color: #94a3b8;
  margin-left: 2px;
  transition: transform 0.15s ease;
}

.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 290px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  z-index: 2000;
  animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-dropdown-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16.8px;
  flex-shrink: 0;
}

.user-dropdown-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.user-dropdown-name {
  font-size: 15.12px;
  font-weight: 700;
  color: #0f172a;
}

.user-dropdown-email {
  font-size: 12.32px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 3px;
  font-size: 11.2px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 1px 6px;
  border-radius: 4px;
}

.user-dropdown-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 10px;
  margin-top: 12px;
}

.user-stat-item {
  display: flex;
  flex-direction: column;
}

.user-stat-label {
  font-size: 10.64px;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.user-stat-val {
  font-size: 13.44px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 1px;
}

.user-dropdown-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 12px 0 10px;
}

.user-dropdown-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13.44px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.user-dropdown-btn .material-symbols-outlined {
  font-size: 18px;
}

.user-dropdown-btn.primary {
  background: #eff6ff;
  color: #2563eb;
}

.user-dropdown-btn.primary:hover {
  background: #dbeafe;
}

.user-dropdown-btn.danger {
  background: #fef2f2;
  color: #dc2626;
}

.user-dropdown-btn.danger:hover {
  background: #fee2e2;
}

.user-dropdown-btn.secondary {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.user-dropdown-btn.secondary:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* Modal Backdrop Overlay */
#loginModalBackdrop,
.modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 16px;
  box-sizing: border-box;
}

#loginModalBackdrop[hidden],
.modal-backdrop[hidden] {
  display: none !important;
}

/* Modal Dialog */
.login-modal-card {
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalScaleUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 100001;
}

@keyframes modalScaleUp {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.login-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.login-title-wrap h2 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.login-title-wrap p {
  font-size: 13.44px;
  color: #64748b;
  margin: 4px 0 0;
}

.login-modal-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.login-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.login-tab-strip {
  display: flex;
  gap: 8px;
  padding: 12px 24px 0;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.login-tab-btn {
  padding: 9px 16px;
  font-size: 13.44px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.login-tab-btn.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  background: #ffffff;
  border-radius: 6px 6px 0 0;
}

.login-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: calc(90vh - 170px);
}

.test-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.test-user-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.test-user-card:hover {
  border-color: #3b82f6;
  background: #f0f7ff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

.test-user-card.active-current-user {
  border-color: #059669;
  background: #f0fdf4;
  box-shadow: 0 0 0 1px #059669;
}

.test-user-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.test-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  font-weight: 800;
  font-size: 15.68px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.test-user-meta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.test-user-name {
  font-size: 15.12px;
  font-weight: 700;
  color: #0f172a;
}

.test-user-email {
  font-size: 12.88px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-user-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
}

.test-user-margin-pill {
  font-size: 12.32px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 12px;
}

.test-user-select-btn {
  padding: 6px 14px;
  background: #2563eb;
  color: #ffffff;
  font-size: 12.88px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.test-user-select-btn:hover {
  background: #1d4ed8;
}

.login-form {
  max-width: 440px;
  margin: 4px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.login-label-icon {
  font-size: 16.8px;
  color: #2563eb;
  vertical-align: middle;
}

.toggle-pass-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  padding: 2px 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.toggle-pass-btn:hover {
  color: #0f172a;
  background: #f1f5f9;
}

.input-highlight {
  border-color: #2563eb !important;
  animation: pulseHighlight 0.6s ease;
}

@keyframes pulseHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.2);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}

.login-hint-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 12.88px;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 4px;
}

.login-accounts-section {
  margin-top: 20px;
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.login-accounts-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 11.76px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.test-user-card.selected-card {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field label {
  font-size: 13.44px;
  font-weight: 700;
  color: #334155;
}

.login-field input {
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14.56px;
  background: #ffffff;
  transition: border-color 0.15s ease;
}

.login-field input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.login-hint {
  font-size: 12.32px;
  color: #64748b;
}

.login-error-msg {
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  border-radius: 6px;
  font-size: 13.44px;
  font-weight: 600;
}

.login-submit-btn {
  width: 100%;
  padding: 11px;
  background: #2563eb;
  color: #ffffff;
  font-size: 15.12px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 4px;
}

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

.login-modal-footer {
  padding: 12px 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.login-footer-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.32px;
  color: #64748b;
  font-weight: 600;
}

.login-footer-pill .material-symbols-outlined {
  font-size: 17.92px;
  color: #059669;
}

/* Live Price Tick Animations in Order Modal */
@keyframes livePriceTickUp {
  0% {
    background-color: rgba(5, 150, 105, 0.22);
    color: #059669;
  }

  100% {
    background-color: transparent;
  }
}

@keyframes livePriceTickDown {
  0% {
    background-color: rgba(220, 38, 38, 0.22);
    color: #dc2626;
  }

  100% {
    background-color: transparent;
  }
}

.price-tick-up {
  animation: livePriceTickUp 0.6s ease-out;
}

.price-tick-down {
  animation: livePriceTickDown 0.6s ease-out;
}

/* Watchlist Drag & Drop Reordering */
.watch-drag-handle {
  font-size: 16.8px;
  color: #94a3b8;
  cursor: grab;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  transition: opacity 0.15s ease, color 0.15s ease;
  user-select: none;
  flex-shrink: 0;
  margin-right: -2px;
}

.angel-watch-row:hover .watch-drag-handle {
  opacity: 0.85;
  color: #475569;
}

.angel-watch-row.draggable-watch-row {
  cursor: grab;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.15s ease;
}

.angel-watch-row.is-dragging {
  opacity: 0.4;
  background: #f8fafc !important;
  border: 1.5px dashed #2563eb !important;
  cursor: grabbing !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.angel-watch-row.drag-over-top {
  border-top: 2.5px solid #2563eb !important;
  background: #eff6ff !important;
}

.angel-watch-row.drag-over-bottom {
  border-bottom: 2.5px solid #2563eb !important;
  background: #eff6ff !important;
}

/* Highlight pulse when newly added item appears at the top */
@keyframes newItemTopPulse {
  0% {
    background-color: rgba(37, 99, 235, 0.22);
    transform: translateY(-4px);
  }

  50% {
    background-color: rgba(37, 99, 235, 0.08);
  }

  100% {
    background-color: transparent;
    transform: translateY(0);
  }
}

.watch-row-new-top {
  animation: newItemTopPulse 1.4s ease-out !important;
}

/* Exit Position Modal Enhancements */
.btn-exit-sell {
  background: #ef4444 !important;
  color: #fff !important;
  font-weight: 750 !important;
  border-radius: 8px !important;
  border: none !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
}

.btn-exit-sell:hover:not(:disabled) {
  background: #dc2626 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35) !important;
}

.btn-exit-sell:active:not(:disabled) {
  transform: translateY(0);
}

.btn-exit-sell:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Change Password Modal & Security UI */
.change-password-modal-card {
  max-width: 440px !important;
}

.change-password-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.change-password-icon-box .material-symbols-outlined {
  font-size: 24px;
}

.password-strength-container {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.password-strength-meter {
  width: 100%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.password-strength-bar {
  height: 100%;
  width: 0%;
  background: #cbd5e1;
  transition: width 0.25s ease, background-color 0.25s ease;
  border-radius: 999px;
}

.password-strength-label {
  font-size: 12.32px;
  color: #64748b;
  font-weight: 500;
}

.change-password-success-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.44px;
  font-weight: 600;
  animation: fadeIn 0.2s ease;
}

.change-password-btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.change-password-btn-row .btn.secondary {
  flex: 1;
  padding: 11px 16px;
  font-size: 14.56px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.change-password-btn-row .btn.secondary:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.change-password-btn-row .login-submit-btn {
  flex: 2;
  margin-top: 0;
}

.test-user-custom-pass-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11.2px;
  font-weight: 600;
  margin-left: 4px;
}

/* ==========================================================================
   MOBILE & RESPONSIVE DESIGN SYSTEM (PaperDesk Pro - MCX Control Style)
   ========================================================================== */

/* Defaults for desktop: hide mobile-only elements */
.mobile-bottom-nav {
  display: none;
}

.mobile-back-to-watch-btn {
  display: none;
}

.mobile-chart-action-bar {
  display: none;
}

@keyframes aomSlideUpMobile {
  from {
    transform: translateY(100%);
    opacity: 0.9;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* TABLETS & MOBILE DEVICES (<= 768px) */
@media (max-width: 768px) {

  html,
  body {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Main container locked strictly between sticky topbar (74px) and fixed bottom nav (56px) */
  main.main-content {
    height: calc(100vh - 74px - 56px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100vh - 74px - 56px - env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Topbar Mobile Ergonomics: 2-tier layout (Row 1: Logo + Actions, Row 2: Live Index Bar) */
  .angel-topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 74px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  }

  .angel-topbar .angel-nav,
  .angel-topbar .clock,
  .angel-topbar #marketBadge,
  .angel-topbar #feedBadge {
    display: none !important;
  }

  .topbar-left {
    display: contents !important;
  }

  .brand-link {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    padding-left: 12px !important;
  }

  .brand-link img {
    height: 24px !important;
    width: auto !important;
  }

  .angel-top-actions {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .angel-top-actions .super-admin-btn {
    align-items: center;
    justify-content: center;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12.32px !important;
    font-weight: 750 !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.25) !important;
  }

  .angel-top-actions .super-admin-btn:not([hidden]) {
    display: inline-flex !important;
  }

  .angel-top-actions .super-admin-btn[hidden],
  .super-admin-btn[hidden],
  #superAdminBtn[hidden] {
    display: none !important;
  }

  .angel-user-pill {
    padding: 2px 4px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .user-avatar {
    width: 24px !important;
    height: 24px !important;
    font-size: 11.2px !important;
  }

  .user-name,
  .user-balance-pill {
    display: none !important;
  }

  /* Live Indices Sub-Bar: 100% width, side-by-side NIFTY and SENSEX with zero cutoff */
  .angel-indices-ticker {
    order: 3 !important;
    width: 100% !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    gap: 8px !important;
  }

  .angel-index-pill {
    flex: 1 1 50% !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    gap: 4px !important;
  }

  #tickerNifty {
    justify-content: flex-start !important;
  }

  #tickerSensex {
    justify-content: flex-end !important;
    border-left: 1px solid #e2e8f0 !important;
    padding-left: 8px !important;
  }

  #tickerBankNifty {
    display: none !important;
  }

  .angel-index-pill .index-top-row {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .angel-index-pill .index-top-row .index-title {
    font-size: 11.2px !important;
    font-weight: 800 !important;
    color: #475569 !important;
  }

  .angel-index-pill .index-top-row .index-chevron {
    display: none !important;
  }

  .angel-index-pill .index-data-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .angel-index-pill .index-val {
    font-size: 12.32px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }

  .angel-index-pill .index-chg {
    font-size: 11.2px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  /* FIXED MOBILE BOTTOM NAVIGATION BAR */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    z-index: 990 !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -3px 12px rgba(15, 23, 42, 0.08) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    align-items: center !important;
    justify-content: space-around !important;
  }

  .mob-nav-item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: #64748b;
    font-size: 11.2px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    padding: 4px 0;
  }

  .mob-nav-item:active {
    transform: scale(0.92);
  }

  .mob-nav-item.active {
    color: #2563eb !important;
    font-weight: 750 !important;
  }

  .mob-nav-item * {
    pointer-events: none !important;
  }

  .mob-nav-icon {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .mob-nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mob-nav-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: #2563eb;
    color: #ffffff;
    font-size: 10.08px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.4);
  }

  /* TERMINAL LAYOUT MOBILE VIEW SWITCHING */
  .angel-terminal-layout {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
  }

  .angel-terminal-layout[data-mobile-view="watchlist"] .watchlist-pane {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 16px 0 !important;
    box-sizing: border-box !important;
  }

  .angel-terminal-layout[data-mobile-view="watchlist"] .angel-watch-rows {
    flex: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
  }

  .angel-terminal-layout[data-mobile-view="watchlist"] .holdings-drawer {
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 6px !important;
    background: #ffffff !important;
  }

  .angel-terminal-layout[data-mobile-view="watchlist"] .mini-list {
    max-height: none !important;
    overflow: visible !important;
    padding: 4px 8px !important;
  }

  .angel-terminal-layout[data-mobile-view="watchlist"] .mobile-chart-action-bar {
    display: none !important;
  }

  .angel-terminal-layout[data-mobile-view="watchlist"] .hero-workspace {
    display: none !important;
  }

  .angel-terminal-layout[data-mobile-view="chart"] .watchlist-pane {
    display: none !important;
  }

  .angel-terminal-layout[data-mobile-view="chart"] .hero-workspace {
    display: flex !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: 100% !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  /* Watchlist Ergonomics on Mobile */
  .watchlist-pane {
    padding: 0;
  }

  .angel-watch-header {
    padding: 8px 10px 4px 10px !important;
  }

  .mw-tabs-nav-wrap {
    padding: 0 !important;
  }

  .mw-tabs {
    gap: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .mw-tabs::-webkit-scrollbar {
    display: none;
  }

  .mw-tab {
    padding: 5px 10px !important;
    font-size: 12.32px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .watch-search-wrap {
    padding: 6px 0 !important;
  }

  .angel-search-box-inner {
    height: 36px !important;
  }

  .search-dropdown {
    position: fixed !important;
    top: 96px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: 65vh !important;
    z-index: 1000 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  }

  .angel-watch-rows {
    padding: 4px 8px !important;
  }

  .angel-watch-row {
    padding: 9px 10px !important;
    min-height: 52px !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  }

  .angel-watch-row:active {
    background: #f8fafc !important;
  }

  /* On mobile touch, hover toolbar is hidden because row click opens chart */
  .angel-watch-row .watch-hover-pill {
    display: none !important;
  }

  /* CHART SUBNAV & MOBILE BACK BUTTON */
  .chart-subnav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 8px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    min-height: 38px !important;
    flex-shrink: 0 !important;
  }

  .mobile-back-to-watch-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 4px 8px !important;
    font-size: 12.32px !important;
    font-weight: 750 !important;
    color: #2563eb !important;
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-back-to-watch-btn .material-symbols-outlined {
    font-size: 17.92px !important;
  }

  .mobile-back-to-watch-btn * {
    pointer-events: none !important;
  }

  .chart-subnav-left {
    display: flex !important;
    gap: 4px !important;
  }

  .chart-subtab {
    padding: 4px 8px !important;
    font-size: 12.32px !important;
  }

  /* MOBILE CHART DOCKED ACTION BAR: Sits cleanly right above the bottom nav (56px) without overlap */
  .mobile-chart-action-bar {
    display: flex !important;
    position: fixed !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 52px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 6px 12px !important;
    z-index: 980 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .mcab-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mcab-sym-line {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .mcab-sym-line strong {
    font-size: 13.44px;
    font-weight: 750;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .mcab-price-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.32px;
  }

  .mcab-ltp {
    font-weight: 750;
    color: #0f172a;
  }

  .mcab-chg {
    font-weight: 600;
  }

  .mcab-actions {
    display: flex;
    gap: 8px;
    flex: 1;
    max-width: 180px;
    justify-content: flex-end;
  }

  .mcab-btn {
    flex: 1;
    height: 36px;
    border: none;
    border-radius: 8px;
    font-size: 14.56px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }

  .mcab-btn.buy {
    background: #089981;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(8, 153, 129, 0.25);
  }

  .mcab-btn.buy:active {
    background: #067a67;
    transform: scale(0.96);
  }

  .mcab-btn.sell {
    background: #f23645;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(242, 54, 69, 0.25);
  }

  .mcab-btn.sell:active {
    background: #d32735;
    transform: scale(0.96);
  }

  /* TRADINGVIEW CANVAS & TOOLBARS ON MOBILE */
  .tv-top-toolbar {
    padding: 3px 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  .tv-top-toolbar::-webkit-scrollbar {
    display: none;
  }

  .tv-btn {
    padding: 3px 6px !important;
    font-size: 12.32px !important;
    height: 26px !important;
  }

  .tv-bottom-toolbar {
    padding: 3px 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-shrink: 0 !important;
  }

  .tv-bottom-toolbar::-webkit-scrollbar {
    display: none;
  }

  .tv-inchart-header {
    padding: 4px 6px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  .tv-contract-title {
    font-size: 11.2px !important;
    max-width: 90vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .tv-ohlc-readout {
    font-size: 10.08px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }

  .tv-volume-readout {
    display: none !important;
  }

  .tv-chart-container {
    height: 100% !important;
    min-height: 280px !important;
  }

  /* OVERVIEW CONSOLE ON MOBILE */
  .overview-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 8px !important;
  }

  .overview-col-left,
  .overview-col-right {
    width: 100% !important;
  }

  .overview-header-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .oh-right {
    width: 100% !important;
  }

  .oh-price-block {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .oh-actions {
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
  }

  .oh-btn {
    flex: 1 !important;
    height: 36px !important;
  }

  /* OPTION CHAIN CONSOLE ON MOBILE */
  .oc-top-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 6px 8px !important;
  }

  .oc-top-left {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .oc-top-right {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .oc-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 6px !important;
  }

  .oc-table {
    min-width: 700px !important;
  }

  .oc-th.strike-col,
  .oc-td.strike-cell {
    background: #f1f5f9 !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }

  /* Ensure hidden modals are ALWAYS hidden on mobile, even against !important rules */
  [hidden],
  [hidden="true"],
  .angel-order-backdrop[hidden],
  .sl-modal-backdrop[hidden],
  .modal-backdrop[hidden],
  #angelOrderBackdrop[hidden],
  #superAdminModalBackdrop[hidden],
  #adminMarginModalBackdrop[hidden],
  #exitModalBackdrop[hidden],
  #bracketModalBackdrop[hidden],
  #loginModalBackdrop[hidden],
  #changePasswordModalBackdrop[hidden] {
    display: none !important;
  }

  /* BOTTOM SHEET MODALS FOR MOBILE - Only when active / not hidden */
  .angel-order-backdrop:not([hidden]),
  .sl-modal-backdrop:not([hidden]),
  .modal-backdrop:not([hidden]) {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
  }

  .angel-order-modal,
  .sl-modal-dialog,
  .login-modal-card,
  .change-password-modal-card,
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    margin: 0 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25) !important;
    animation: aomSlideUpMobile 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  }

  .angel-order-modal::before,
  .sl-modal-dialog::before,
  .login-modal-card::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 999px;
    margin: 8px auto 6px auto;
  }

  .aom-header-actions {
    gap: 6px !important;
  }

  .aom-icon-btn,
  .modal-close-btn,
  .login-modal-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 17.92px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    border: none !important;
    color: #475569 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .aom-body {
    padding: 12px 14px 16px 14px !important;
  }

  .aom-form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .aom-submit-btn {
    height: 46px !important;
    font-size: 16.8px !important;
  }

  /* POSITIONS, ORDERS & PORTFOLIO VIEWS ON MOBILE */
  .view {
    display: none !important;
  }

  .view.active {
    display: block !important;
  }

  #view-trade.active {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #view-positions.active,
  #view-orders.active,
  #view-history.active,
  #view-portfolio.active,
  #view-settings.active {
    display: block !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 10px 24px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .panel.data-panel {
    padding: 10px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .panel-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .panel-heading-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* POSITIONS HEADER: Clean single-line header on mobile without duplicate stat chips */
  #view-positions .panel-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 2px 2px 8px 2px !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
  }

  #view-positions .panel-heading .smallcap {
    font-size: 11.2px !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
  }

  #view-positions .panel-heading h2 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 2px 0 0 0 !important;
  }

  #view-positions .panel-heading-right {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #view-positions .panel-heading-right .pos-stat-chip {
    display: none !important;
    /* duplicate chips hidden; 4 KPI cards right below display rich live data */
  }

  #view-positions .panel-heading-right .mini-pill {
    margin: 0 !important;
    padding: 3px 8px !important;
    font-size: 10.64px !important;
    font-weight: 750 !important;
  }

  /* Responsive 2-Column KPI Cards (Zero horizontal overflow) */
  .open-pos-kpi-grid,
  .portfolio-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .open-pos-kpi-card,
  .port-kpi-card {
    min-width: 0 !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  }

  .kpi-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .kpi-icon-box .material-symbols-outlined {
    font-size: 18px !important;
  }

  .kpi-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .kpi-label {
    font-size: 11.76px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #64748b !important;
    margin-bottom: 2px !important;
  }

  .kpi-val {
    font-size: 14.56px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    min-width: 0 !important;
  }

  .open-pos-kpi-card .kpi-val {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 3px !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .kpi-pct-badge {
    font-size: 11.2px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    opacity: 0.95 !important;
  }

  .kpi-sub {
    font-size: 10.64px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #64748b !important;
    margin-top: 2px !important;
    display: block !important;
  }

  /* ========================================================
     MOBILE ORDERS VIEW: ZERO HORIZONTAL SCROLL (Mobile Cards)
     ======================================================== */
  #view-orders .table-scroller {
    overflow-x: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #view-orders .table-scroller table,
  #view-orders .table-scroller tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #view-orders .table-scroller thead {
    display: none !important;
  }

  #view-orders .table-scroller tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "side status"
      "sym sym"
      "lots price"
      "current current"
      "time action" !important;
    row-gap: 8px !important;
    column-gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  #view-orders .table-scroller tr:has(.no-data) {
    display: block !important;
  }

  #view-orders .table-scroller tr:has(.no-data) td.no-data {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  #view-orders .ord-col-side {
    grid-area: side !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
  }

  #view-orders .ord-col-status {
    grid-area: status !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    border: none !important;
  }

  #view-orders .ord-col-sym {
    grid-area: sym !important;
    padding: 6px 0 2px 0 !important;
    border: none !important;
    border-top: 1px dashed #f1f5f9 !important;
  }

  #view-orders .ord-col-lots {
    grid-area: lots !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    font-size: 12.88px !important;
    border: none !important;
  }

  #view-orders .ord-col-fill {
    grid-area: price !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    font-size: 13.44px !important;
    border: none !important;
  }

  #view-orders .ord-col-current {
    grid-area: current !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    border: none !important;
  }

  #view-orders .ord-col-trigger {
    display: none !important;
  }

  #view-orders .ord-col-time {
    grid-area: time !important;
    padding: 0 !important;
    font-size: 11.76px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
  }

  #view-orders .ord-col-act {
    grid-area: action !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    border: none !important;
  }

  #view-orders .order-filter-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
  }

  #view-orders .order-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  #view-orders .order-filter-btn {
    padding: 5px 8px !important;
    font-size: 12.32px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ========================================================
     MOBILE POSITIONS VIEW: ZERO HORIZONTAL SCROLL (Mobile Cards)
     ======================================================== */
  #view-positions .table-scroller {
    overflow-x: hidden !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #view-positions .table-scroller table,
  #view-positions .table-scroller tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #view-positions .table-scroller thead,
  #view-positions .table-scroller tfoot {
    display: none !important;
  }

  #view-positions .table-scroller tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "name pnl"
      "qty avg"
      "inv mark"
      "bracket bracket"
      "actions actions" !important;
    row-gap: 8px !important;
    column-gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  #view-positions .table-scroller tr:has(.no-data) {
    display: block !important;
  }

  #view-positions .table-scroller tr:has(.no-data) td.no-data {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  #view-positions .pos-col-name {
    grid-area: name !important;
    padding: 0 !important;
    border: none !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #view-positions .table-contract-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  #view-positions .table-contract-title {
    font-size: 14.56px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    min-width: 0 !important;
  }

  #view-positions .pos-col-name .subcell {
    font-size: 11.76px !important;
    color: #64748b !important;
    margin-top: 3px !important;
    display: block !important;
  }

  #view-positions .pos-col-pnl {
    grid-area: pnl !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    text-align: right !important;
    font-size: 16.8px !important;
    font-weight: 800 !important;
    border: none !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  #view-positions .pos-col-qty {
    grid-area: qty !important;
    padding: 6px 0 0 0 !important;
    border: none !important;
    border-top: 1px dashed #f1f5f9 !important;
    font-size: 12.88px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #view-positions .pos-col-qty::before {
    content: "Qty: ";
    color: #64748b;
    font-weight: 500;
  }

  #view-positions .pos-col-avg {
    grid-area: avg !important;
    padding: 6px 0 0 0 !important;
    border: none !important;
    border-top: 1px dashed #f1f5f9 !important;
    text-align: right !important;
    font-size: 12.88px !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  #view-positions .pos-col-avg::before {
    content: "Avg: ";
    color: #64748b;
    font-weight: 500;
  }

  #view-positions .pos-col-inv {
    grid-area: inv !important;
    padding: 0 !important;
    border: none !important;
    font-size: 12.88px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #view-positions .pos-col-inv::before {
    content: "Invested: ";
    color: #64748b;
    font-weight: 500;
  }

  #view-positions .pos-col-mark {
    grid-area: mark !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
    font-size: 12.88px !important;
    font-weight: 700 !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  #view-positions .pos-col-mark::before {
    content: "LTP: ";
    color: #64748b;
    font-weight: 500;
  }

  #view-positions .pos-col-bracket {
    grid-area: bracket !important;
    padding: 4px 0 0 0 !important;
    border: none !important;
    width: 100% !important;
  }

  #view-positions .bracket-badge-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #view-positions .tgt-badge,
  #view-positions .sl-badge {
    padding: 4px 8px !important;
    font-size: 12.32px !important;
    border-radius: 6px !important;
  }

  #view-positions .pos-col-act {
    grid-area: actions !important;
    padding: 8px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
  }

  #view-positions .sl-action-group {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }

  #view-positions .sl-action-group .row-btn {
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 13.44px !important;
    font-weight: 750 !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
  }

  #view-positions .sl-action-group .add-qty-btn {
    flex: 1 !important;
  }

  #view-positions .sl-action-group .sl-btn {
    flex: 1 !important;
  }

  #view-positions .sl-action-group .exit-pos-btn {
    flex: 1.2 !important;
    background: #f23645 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(242, 54, 69, 0.25) !important;
  }

  /* ========================================================
     MOBILE PORTFOLIO VIEW: ZERO HORIZONTAL SCROLL
     ======================================================== */
  .portfolio-page {
    padding: 4px 0 24px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .portfolio-subnav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 4px 8px 4px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  .portfolio-subtabs {
    display: flex !important;
    gap: 16px !important;
  }

  .port-subtab {
    font-size: 14.56px !important;
    font-weight: 600 !important;
    padding: 4px 0 8px 0 !important;
  }

  .portfolio-subnav .btn-hide-watch {
    display: none !important;
    /* redundant on mobile with bottom nav */
  }

  .port-section {
    margin-bottom: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .port-section-title {
    font-size: 15.68px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    margin-bottom: 10px !important;
    padding: 0 2px !important;
  }

  .port-empty-banner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 12.88px !important;
    line-height: 1.4 !important;
    color: #1e40af !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  .port-empty-banner .port-info-dot {
    font-size: 18px !important;
    flex-shrink: 0 !important;
    color: #2563eb !important;
    margin-top: -1px !important;
  }

  /* Invest Now cards: vertical stack on mobile so buttons never cramp or overlap */
  .port-invest-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .port-invest-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .port-invest-label {
    font-size: 15.12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .btn-invest-now {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 12.88px !important;
    font-weight: 750 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Pledging & Pay Later (MTF): 1-column vertical card list on mobile (Zero horizontal overflow) */
  .port-mtf-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mtf-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .mtf-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #eff6ff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #2563eb !important;
  }

  .mtf-icon .material-symbols-outlined {
    font-size: 20px !important;
  }

  .mtf-content {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .mtf-content strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    margin-bottom: 2px !important;
  }

  .mtf-content p {
    font-size: 12.32px !important;
    color: #64748b !important;
    margin: 0 !important;
  }

  #view-history .table-scroller,
  #view-settings .table-scroller {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    border-radius: 8px !important;
  }

  #view-history .table-scroller table {
    min-width: 660px !important;
    font-size: 13.44px !important;
  }

  #view-history .table-scroller th,
  #view-history .table-scroller td {
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }
}

/* EXTRA SMALL PHONES (<= 480px) */
@media (max-width: 480px) {
  .aom-form-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .portfolio-kpi-grid,
  .open-pos-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ========================================================
   AUTH MODE TABS & REGISTRATION STYLES
   ======================================================== */
.auth-mode-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 20px;
}

.auth-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 14.56px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.auth-tab-btn.active {
  background: #ffffff;
  color: #0284c7;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.auth-tab-btn .material-symbols-outlined {
  font-size: 18px;
}

.login-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14.56px;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  cursor: pointer;
}

.login-select:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

/* ========================================================
   SUPER ADMIN BUTTON & MANAGEMENT CONSOLE
   ======================================================== */
.super-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13.44px !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3) !important;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.super-admin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.4) !important;
}

.admin-modal-card {
  background: #ffffff;
  border-radius: 16px;
  width: 96%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  overflow: hidden;
  animation: adminModalFadeIn 0.2s ease-out;
}

@keyframes adminModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

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

.admin-shield-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fef3c7;
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-shield-icon .material-symbols-outlined {
  font-size: 26px;
}

.admin-title-wrap h2 {
  font-size: 18px;
  font-weight: 750;
  color: #0f172a;
  margin: 0;
}

.admin-title-wrap p {
  font-size: 13.44px;
  color: #64748b;
  margin: 3px 0 0 0;
}

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

.admin-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 13.44px;
  font-weight: 600;
  border-radius: 6px;
}

.admin-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.admin-kpi-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-kpi-card .kpi-label {
  font-size: 11.2px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #64748b;
}

.admin-kpi-card .kpi-val {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.admin-kpi-card .kpi-val.positive {
  color: #10b981;
}

.admin-kpi-card .kpi-sub {
  font-size: 12.32px;
  color: #94a3b8;
}

.admin-search-row {
  position: relative;
  display: flex;
  align-items: center;
}

.admin-search-lens {
  position: absolute;
  left: 12px;
  font-size: 20px;
  color: #94a3b8;
  pointer-events: none;
}

.admin-search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14.56px;
  outline: none;
  background: #ffffff;
  color: #0f172a;
}

.admin-search-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.admin-table-scroller {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  max-height: 420px;
  overflow-y: auto;
}

.admin-users-table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14.56px;
}

.admin-users-table th:nth-child(1),
.admin-users-table td:nth-child(1) {
  width: 20%;
}

.admin-users-table th:nth-child(2),
.admin-users-table td:nth-child(2) {
  width: 9%;
}

.admin-users-table th:nth-child(3),
.admin-users-table td:nth-child(3) {
  width: 12%;
}

.admin-users-table th:nth-child(4),
.admin-users-table td:nth-child(4) {
  width: 13%;
}

.admin-users-table th:nth-child(5),
.admin-users-table td:nth-child(5) {
  width: 12%;
}

.admin-users-table th:nth-child(6),
.admin-users-table td:nth-child(6) {
  width: 11%;
}

.admin-users-table th:nth-child(7),
.admin-users-table td:nth-child(7) {
  width: 8%;
}

.admin-users-table th:nth-child(8),
.admin-users-table td:nth-child(8) {
  width: 15%;
}

.admin-users-table th {
  background: #f1f5f9;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 12.32px;
  color: #475569;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid #e2e8f0;
}

.admin-users-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.admin-position-list {
  min-width: 300px;
  max-width: 480px;
  max-height: 180px;
  overflow: auto;
  padding: 8px 0 2px;
  color: #475569;
  font-size: 12.32px;
  line-height: 1.6;
}

.admin-users-table details summary {
  cursor: pointer;
  color: #0369a1;
  font-weight: 700;
}

.admin-users-table .admin-action-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.admin-users-table td:last-child {
  white-space: normal;
}

.admin-users-table td:last-child .admin-action-btn {
  margin: 2px;
}

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #334155;
  font-size: 13.44px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-user-name {
  font-weight: 600;
  color: #0f172a;
}

.admin-user-email {
  font-size: 12.32px;
  color: #64748b;
}

.admin-role-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12.32px;
  font-weight: 700;
}

.admin-role-badge.superadmin {
  background: #fef3c7;
  color: #b45309;
}

.admin-role-badge.trader {
  background: #e0f2fe;
  color: #0369a1;
}

.admin-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12.32px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  margin-right: 6px;
}

.admin-action-btn.add-margin {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

.admin-action-btn.add-margin:hover {
  background: #d1fae5;
}

.admin-action-btn.reset-acc {
  background: #fff1f2;
  color: #e11d48;
  border-color: #fecdd3;
}

.admin-action-btn.reset-acc:hover {
  background: #ffe4e6;
}

/* Super Admin Add Margin Sub-Modal */
.admin-sub-modal-card {
  background: #ffffff;
  border-radius: 16px;
  width: 95%;
  max-width: 460px;
  padding: 0;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.08);
  animation: modalScaleUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
  z-index: 200001;
}

.admin-sub-modal-card .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

.admin-margin-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-target-user-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}

.admin-target-user-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.admin-target-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  font-size: 14.56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-target-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.admin-quick-margin-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.admin-chip-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12.32px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}

.admin-chip-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
}

.admin-chip-btn:active {
  background: #ecfdf5;
  color: #059669;
  border-color: #059669;
}

#adminMarginModalBackdrop {
  z-index: 200000 !important;
}

.admin-users-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 14.56px;
}

/* ========================================================
   ORDER BOOK: ENHANCED SIDE, STATUS BADGES & FILTER TABS
   ======================================================== */
.order-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  background: #f5f3ff;
  color: #6d28d9;
  font-size: 11.2px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

.order-ai-badge .material-symbols-outlined {
  font-size: 16.8px;
}

.order-side-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 9px;
  border-radius: 6px;
  font-size: 12.32px;
  font-weight: 750;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.order-side-chip .side-chip-icon {
  font-size: 15.68px;
  line-height: 1;
}

.order-side-chip.buy {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.order-side-chip.sell {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.order-side-chip.sell.exit {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.order-side-chip.sell.auto-exit {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  font-weight: 750;
}

.aom-product-hint {
  font-size: 12.32px;
  color: #64748b;
  margin-top: 5px;
  line-height: 1.35;
  padding: 4px 6px;
  background: #f8fafc;
  border-radius: 4px;
  border-left: 3px solid #f59e0b;
}

.order-side-chip.sell.target {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

.order-side-chip.sell.sl {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

/* Order Status Chips */
.order-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 10px;
  border-radius: 12px;
  font-size: 12.32px;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.order-status-dot {
  font-size: 10.08px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.order-status-chip.filled {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.order-status-chip.filled .order-status-dot {
  color: #10b981;
  text-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

.order-status-chip.pending {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  animation: pendingPulse 2s infinite ease-in-out;
}

.order-status-chip.pending .order-status-dot {
  color: #f59e0b;
}

.order-status-chip.cancelled {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.order-status-chip.rejected {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
}

@keyframes pendingPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.75;
  }
}

.trigger-market-tag {
  display: inline-block;
  padding: 2px 7px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 11.2px;
  font-weight: 750;
  color: #64748b;
  letter-spacing: 0.4px;
}

.text-success {
  color: #059669 !important;
}

.text-pending {
  color: #d97706 !important;
}

/* Order Book Filter Tabs */
.order-filter-tabs {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 8px;
  gap: 2px;
  flex-wrap: wrap;
}

.order-filter-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12.32px;
  font-weight: 750;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.order-filter-btn:hover {
  color: #0f172a;
}

.order-filter-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Keep terminal controls reachable on short screens and mobile keyboards. */
.main-content {
  height: calc(100dvh - var(--terminal-topbar-height, 54px));
}

.angel-terminal-layout {
  height: 100%;
}

.hero-workspace,
.aom-title-group,
.aom-field-group,
.aom-funds-item {
  min-width: 0;
}

.angel-order-modal,
.sl-modal-dialog,
.login-modal-card,
.admin-modal-card,
.admin-sub-modal-card {
  box-sizing: border-box;
  max-height: calc(100dvh - 24px) !important;
  max-width: min(100%, calc(100vw - 24px));
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.angel-order-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

.aom-product-type-row {
  flex-wrap: wrap;
}

.aom-product-hint {
  flex: 1 0 100%;
  box-sizing: border-box;
}

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

.aom-field-group input,
.aom-bracket-field input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.aom-stepper input {
  width: 0;
  min-width: 0;
}

.aom-funds-item strong {
  overflow-wrap: anywhere;
}

@media (min-width: 769px) and (max-width: 1100px) {
  .angel-terminal-layout .watchlist-pane {
    width: 280px !important;
    min-width: 240px !important;
    max-width: 280px !important;
    flex-basis: 280px;
  }

  .angel-topbar {
    flex-wrap: wrap;
    height: auto;
  }

  .angel-nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
  }

  .angel-top-actions {
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  main.main-content {
    height: calc(100dvh - var(--terminal-topbar-height, 74px) - 56px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - var(--terminal-topbar-height, 74px) - 56px - env(safe-area-inset-bottom, 0px)) !important;
  }

  .angel-order-modal,
  .sl-modal-dialog,
  .login-modal-card,
  .admin-modal-card,
  .admin-sub-modal-card {
    max-height: calc(100dvh - 12px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .aom-field-group input,
  .aom-bracket-field input,
  .login-modal-card input,
  .sl-modal-dialog input {
    font-size: 17.92px;
  }

  .aom-product-hint {
    width: 100%;
  }
}

@media (max-width: 380px) {

  .aom-form-grid,
  .aom-bracket-inputs {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-height: 500px) and (min-width: 769px) {

  .angel-order-backdrop,
  .sl-modal-backdrop,
  .modal-backdrop {
    padding: 8px;
  }
}

/* Responsive trading workspace: shared controls, readable values and touch navigation. */
:root {
  --ui-nav-height: 64px;
}

button,
a,
input,
select {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

.angel-watch-row:focus-within .watch-hover-pill {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.angel-watch-row:focus-visible {
  outline-offset: -3px;
}

.kpi-val,
.port-kpi-val,
.pos-col-pnl,
.watch-ltp {
  font-variant-numeric: tabular-nums;
}

#mobileChartActionBar {
  display: flex !important;
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
  width: 100%;
  min-height: 68px;
  padding: 10px 16px;
  gap: 16px;
  box-sizing: border-box;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  align-items: center;
  justify-content: space-between;
}

.mcab-info {
  min-width: 0;
  flex: 1;
}

.mcab-sym-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#mcabSymbol {
  font-size: 14.56px;
  overflow-wrap: anywhere;
}

.mcab-price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.mcab-ltp {
  font-size: 16.8px;
  font-weight: 750;
}

.mcab-chg {
  font-size: 12.32px;
}

.mcab-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.mcab-btn {
  min-height: 44px;
  min-width: 90px;
  padding: 8px 20px;
  border-radius: 7px;
  color: #fff;
  font-weight: 750;
  font-size: 14.56px;
}

.mcab-btn.buy {
  background: #059669;
}

.mcab-btn.sell {
  background: #ef4444;
}

.hero-tv-console {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

.hero-workspace>.chart-subnav {
  flex: 0 0 auto;
}

.tv-chart-body,
.tv-canvas-area {
  min-height: 0;
}

#tvChartContainer {
  min-height: 0 !important;
}

.angel-order-modal {
  display: flex;
  flex-direction: column;
}

.angel-order-header {
  flex: 0 0 auto;
}

.angel-order-modal .aom-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.angel-order-modal .aom-submit-btn {
  position: sticky;
  bottom: 0;
  z-index: 3;
  box-shadow: 0 -6px 12px #ffffff;
}

.mobile-more-dialog {
  width: min(440px, calc(100% - 24px));
  max-height: calc(var(--ui-viewport-height, 100dvh) - 24px);
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 16px 60px #0f172a33;
}

.mobile-more-dialog::backdrop {
  background: #0f172a80;
}

.mobile-more-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.mobile-more-heading h2 {
  font-size: 17px;
  margin: 0;
}

.mobile-more-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #f1f5f9;
}

.mobile-more-links {
  display: grid;
  gap: 4px;
  padding: 8px;
}

.mobile-more-links>button,
.mobile-more-links>a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: left;
  font: inherit;
  font-size: 15.68px;
  color: #334155;
  text-decoration: none;
}

.mobile-more-links> :hover {
  background: #eff6ff;
  color: #2563eb;
}

.mobile-more-links>[hidden] {
  display: none;
}

@media (min-width: 769px) {
  .mcab-sym-line {
    max-width: 580px;
  }

  #mobileChartActionBar .mcab-btn {
    min-width: 110px;
  }

  .table-scroller {
    overscroll-behavior-x: contain;
  }

  .table-scroller th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
  }

  .tv-btn {
    min-height: 32px;
    min-width: 32px;
  }
}

@media (max-width: 768px) {

  html,
  body {
    min-width: 0;
  }

  main.main-content {
    height: calc(100dvh - var(--terminal-topbar-height, 74px) - var(--ui-nav-height) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - var(--terminal-topbar-height, 74px) - var(--ui-nav-height) - env(safe-area-inset-bottom, 0px)) !important;
  }

  #mobileBottomNav {
    min-height: var(--ui-nav-height);
    height: calc(var(--ui-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    gap: 0;
  }

  #mobileBottomNav .mob-nav-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    padding: 5px 1px;
  }

  #mobileBottomNav .mob-nav-label {
    font-size: 11.2px !important;
  }

  #mobileBottomNav .mob-nav-icon {
    font-size: 22px !important;
  }

  #mobileBottomNav .mob-nav-item[aria-current] {
    background: #eff6ff;
    border-radius: 10px;
  }

  #angelTerminalLayout .hero-workspace {
    padding-bottom: 0 !important;
  }

  #mobileChartActionBar {
    min-height: 76px;
    padding: 8px 12px;
    gap: 8px;
  }

  #mobileChartActionBar .mcab-btn {
    min-width: 64px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
  }

  #mcabSymbol {
    font-size: 13.44px !important;
    white-space: normal !important;
    display: block;
    line-height: 1.4;
  }

  .mcab-chg {
    display: none;
  }

  .chart-subnav {
    min-height: 44px;
    gap: 4px !important;
    padding: 0 6px !important;
  }

  .chart-subnav-left {
    min-width: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chart-subtab {
    min-height: 44px;
    padding: 8px 10px !important;
    font-size: 13.44px !important;
    white-space: nowrap;
  }

  #btnMobileBackToWatchlist {
    min-height: 44px;
    min-width: 36px;
    padding: 0 4px;
  }

  #btnMobileBackToWatchlist>span:last-child {
    display: none;
  }

  .tv-top-toolbar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 40px;
    padding: 3px 6px !important;
    gap: 0 !important;
  }

  .tv-toolbar-left,
  .tv-toolbar-right {
    min-width: 0;
    gap: 2px !important;
  }

  .tv-btn {
    min-height: 36px !important;
    min-width: 32px !important;
    font-size: 13.44px !important;
    padding: 4px 6px !important;
  }

  .tv-tf-group {
    flex-wrap: nowrap !important;
  }

  .tv-inchart-header {
    pointer-events: none;
  }

  .tv-contract-title {
    font-size: 12.32px !important;
  }

  .tv-bottom-toolbar {
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 32px;
  }

  .tv-bottom-toolbar>* {
    flex-shrink: 0;
  }

  .angel-order-backdrop:not([hidden]),
  .sl-modal-backdrop:not([hidden]),
  .modal-backdrop:not([hidden]) {
    top: var(--ui-viewport-top, 0px) !important;
    height: var(--ui-viewport-height, 100dvh) !important;
    bottom: auto !important;
  }

  .angel-order-modal,
  .sl-modal-dialog,
  .login-modal-card,
  .admin-modal-card,
  .admin-sub-modal-card {
    max-height: calc(var(--ui-viewport-height, 100dvh) - 12px) !important;
  }

  input:not([type=checkbox]):not([type=hidden]),
  select,
  textarea {
    font-size: 17.92px !important;
  }

  .aom-seg-btn,
  .aom-chip,
  .preset-chip,
  .bracket-lot-chip,
  .modal-close-btn {
    min-height: 40px;
  }

  .aom-funds-row {
    gap: 12px;
  }

  .aom-funds-item strong {
    font-size: 15.68px;
  }

  .aom-label {
    font-size: 13.44px !important;
  }

  .aom-stepper,
  .aom-field-group>input {
    min-height: 44px;
  }

  .row-btn,
  .oh-btn,
  .settings-panel .btn {
    min-height: 44px;
    padding: 8px 10px;
  }

  .watch-search-wrap {
    padding: 4px 0 !important;
    margin-bottom: 6px;
  }

  .watch-search-wrap .angel-search-box-inner {
    height: 32px !important;
    padding: 0;
    box-sizing: border-box;
  }

  .watch-search-wrap .angel-search-box-inner input {
    min-width: 0;
    min-height: 0;
    height: 30px;
    padding: 0 30px 0 30px;
    box-sizing: border-box;
    font-size: 13.44px !important;
    line-height: normal;
  }

  .watch-search-wrap .search-lens {
    left: 9px;
    display: flex;
    align-items: center;
  }

  .watch-search-wrap .material-symbols-outlined {
    font-size: 17.92px;
  }

  .watch-search-wrap .clear-search-btn {
    right: 2px;
    width: 28px;
    height: 28px;
    padding: 4px;
  }

  .mw-tabs-nav-wrap .mw-tab {
    min-height: 28px;
    height: 28px;
    box-sizing: border-box;
    padding: 4px 8px !important;
    font-size: 11.2px !important;
    line-height: 1.2;
  }

  .search-dropdown {
    top: calc(var(--terminal-topbar-height, 74px) + 44px) !important;
    max-height: min(60dvh, calc(var(--ui-viewport-height, 100dvh) - 180px)) !important;
  }

  .diagnostics>div {
    align-items: flex-start;
    gap: 12px;
  }

  .diagnostics b {
    max-width: 65%;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .user-dropdown-menu {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - var(--terminal-topbar-height, 74px) - 16px);
    overflow-y: auto;
  }

  .user-header-name {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .open-pos-kpi-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 12px !important;
  }

  .open-pos-kpi-card .kpi-content {
    width: 100%;
    overflow: visible !important;
  }

  .kpi-val,
  .kpi-sub,
  .port-kpi-val {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  .open-pos-kpi-card .kpi-val {
    display: block !important;
    font-size: 15.68px !important;
  }

  .kpi-label,
  .kpi-sub {
    font-size: 12.32px !important;
  }

  .kpi-label {
    white-space: normal !important;
  }

  .kpi-pct-badge {
    display: block;
    margin-top: 2px;
  }

  #view-positions .table-scroller tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: 'name name' 'pnl pnl' 'qty avg' 'inv mark' 'bracket bracket' 'actions actions' !important;
    gap: 10px !important;
  }

  #view-positions .pos-col-pnl {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #view-positions .pos-col-pnl::before {
    content: 'Unrealized P&L';
    color: #64748b;
    font-size: 12.32px;
    font-weight: 500;
  }

  #view-positions .pos-col-qty,
  #view-positions .pos-col-avg,
  #view-positions .pos-col-inv,
  #view-positions .pos-col-mark {
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    font-size: 13.44px !important;
  }

  #view-positions .table-contract-title {
    overflow-wrap: anywhere;
  }

  #view-orders .order-filter-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
  }

  #view-orders .panel-heading>div:last-child {
    width: 100%;
  }

  #view-orders .order-filter-btn {
    min-height: 40px;
    text-align: center;
  }

  #view-orders .table-scroller tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: 'side status' 'sym sym' 'lots price' 'trigger trigger' 'time action' !important;
  }

  #view-orders .ord-col-trigger {
    display: block !important;
    grid-area: trigger;
    border: 0;
    padding: 4px 0 !important;
    font-size: 13.44px;
    background: #f8fafc;
    border-radius: 6px;
    white-space: normal;
  }

  #view-orders .ord-col-trigger::before {
    content: 'Order price / trigger: ';
    color: #64748b;
  }

  #view-orders .ord-col-sym,
  #view-orders .ord-col-price,
  #view-orders .ord-col-fill {
    min-width: 0 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  #view-history .table-scroller {
    overflow: visible !important;
  }

  #view-history .table-scroller table,
  #view-history tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  #view-history thead {
    display: none;
  }

  #historyBody>tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
  }

  #view-history #historyBody td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 13.44px;
  }

  #historyBody .hist-contract {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #historyBody .hist-contract .table-contract-row {
    flex-wrap: wrap;
  }

  #historyBody .hist-side {
    font-weight: 750;
    color: #334155;
  }

  #historyBody .hist-time {
    text-align: right;
    color: #64748b;
  }

  #historyBody .hist-price::before {
    content: 'Fill price';
  }

  #historyBody .hist-lots::before {
    content: 'Lots';
  }

  #historyBody .hist-gross::before {
    content: 'Trade value';
  }

  #historyBody .hist-fee::before {
    content: 'Fees';
  }

  #historyBody .hist-source::before {
    content: 'Market data';
  }

  #historyBody td::before {
    display: block;
    color: #64748b;
    font-size: 12.32px;
    font-weight: 500;
    margin-bottom: 3px;
  }

  #historyBody tr:has(.no-data) {
    display: block;
  }

  #historyBody .no-data {
    text-align: center;
    padding: 20px !important;
  }

  .mobile-more-dialog {
    margin: auto auto 10px;
    max-height: calc(var(--ui-viewport-height, 100dvh) - 20px);
  }
}

@media (max-width: 380px) {
  .open-pos-kpi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .open-pos-kpi-card {
    flex-direction: row !important;
    align-items: center !important;
  }

  .aom-header-actions {
    flex-shrink: 0;
  }

  #view-positions .panel-heading {
    flex-wrap: wrap !important;
  }

  .mcab-actions {
    gap: 6px;
  }

  #mobileChartActionBar .mcab-btn {
    min-width: 56px !important;
    padding: 8px !important;
  }
}

@media (max-height: 500px) and (max-width: 768px) {
  .angel-indices-ticker {
    display: none !important;
  }

  .angel-topbar {
    min-height: 44px !important;
  }

  #mobileChartActionBar {
    min-height: 56px;
    padding-block: 4px;
  }
}

@media (max-height: 500px) and (min-width: 769px) and (max-width: 1100px) {
  :root {
    --terminal-topbar-height: 42px;
  }

  .angel-topbar {
    height: 42px;
    min-height: 42px;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 8px;
  }

  .angel-topbar .angel-indices-ticker {
    display: none;
  }

  .angel-topbar .topbar-left {
    flex: 0 0 auto;
  }

  .angel-topbar .terminal-home-link,
  .angel-topbar .super-admin-btn {
    display: none !important;
  }

  .angel-topbar .angel-nav {
    order: initial;
    flex: 1 1 auto;
    width: auto;
    height: 42px;
    justify-content: center;
  }

  .angel-topbar .angel-nav .nav-link {
    padding-inline: 6px;
    font-size: 12.32px;
  }

  .angel-topbar .angel-top-actions {
    flex: 0 0 auto;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.quote-state {
  color: #64748b;
  font-size: 11.2px;
  white-space: nowrap;
}

.quote-state.live {
  color: #047857;
}

.quote-state::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 4px;
}

@media (max-width: 768px) {
  #superAdminBtn {
    display: none !important;
  }

  .angel-indices-ticker #tickerBankNifty {
    display: flex !important;
  }

  .angel-indices-ticker .angel-index-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .angel-indices-ticker .index-title {
    font-size: 11.2px !important;
  }

  .angel-indices-ticker .index-val {
    font-size: 13.44px !important;
  }

  .angel-indices-ticker .index-chg {
    font-size: 10.08px !important;
  }

  .mcab-sym-line strong {
    max-width: none !important;
  }

  #historyBody>tr {
    grid-template-areas: 'contract contract' 'side time' 'lots price' 'gross fee' 'source source';
  }

  #historyBody .hist-contract {
    grid-area: contract;
  }

  #historyBody .hist-side {
    grid-area: side;
  }

  #historyBody .hist-time {
    grid-area: time;
  }

  #historyBody .hist-lots {
    grid-area: lots;
  }

  #historyBody .hist-price {
    grid-area: price;
  }

  #historyBody .hist-gross {
    grid-area: gross;
  }

  #historyBody .hist-fee {
    grid-area: fee;
  }

  #historyBody .hist-source {
    grid-area: source;
  }
}

/* The chart gets the remaining viewport space rather than inheriting panel gaps. */
.hero-workspace {
  gap: 0;
}

@media (max-width: 768px) {
  #chartConsole {
    margin: 0 !important;
    border-radius: 0;
    border-inline: 0;
    box-shadow: none;
  }
}

@media (max-height: 500px) and (max-width: 768px) {
  :root {
    --ui-nav-height: 56px;
  }

  #mobileBottomNav .mob-nav-item {
    min-height: 48px;
  }
}

.chain-scroll-hint {
  display: none;
}

@media (max-width: 768px) {
  .chain-scroll-hint {
    display: block;
    flex-shrink: 0;
    margin: 0;
    padding: 6px 10px;
    color: #64748b;
    font-size: 12.32px;
    background: #f8fafc;
    border-block: 1px solid #e2e8f0;
  }

  .oc-act-btn {
    min-height: 40px;
    min-width: 40px;
    font-size: 14.56px;
  }

  .oc-index-btn,
  .oc-select,
  .oc-refresh-btn {
    min-height: 40px;
  }

  .oc-table .action-td {
    white-space: nowrap;
  }

  .admin-modal-header {
    padding: 12px;
    gap: 10px;
    align-items: flex-start;
  }

  .admin-modal-body {
    padding: 12px;
  }

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

  .admin-table-scroller {
    overflow: auto;
    max-height: min(420px, 55dvh);
  }

  .admin-users-table {
    min-width: 720px;
  }
}

@media (max-height: 500px) and (max-width: 768px) {
  .option-chain-console {
    overflow-y: auto;
  }

  .option-chain-console .oc-top-bar {
    flex-shrink: 0;
  }

  .option-chain-console .oc-table-wrap {
    min-height: 160px;
    flex-shrink: 0;
  }

  .oc-top-left {
    align-items: center;
  }
}

.chart-empty {
  z-index: 5;
  padding: 24px;
}

.chart-empty strong {
  font-size: 16.8px;
  color: #334155;
}

.chart-empty small {
  font-size: 13.44px;
  max-width: 320px;
  line-height: 1.6;
}

.history-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.history-heading-actions .btn {
  min-height: 40px;
}

@media (max-width: 768px) {
  .history-heading-actions {
    width: 100%;
    justify-content: space-between;
  }

  .history-heading-actions .btn {
    min-height: 44px;
  }
}

/* Compact mobile type: keep neighbouring quotes and monetary digits separate. */
@media (max-width: 768px) {
  .angel-topbar .angel-indices-ticker {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto !important;
    min-height: 56px;
    padding: 5px 4px !important;
    gap: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .angel-topbar .angel-indices-ticker .angel-index-pill {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    box-sizing: border-box;
    padding: 0 4px !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
  }

  .angel-topbar .angel-indices-ticker .angel-index-pill+.angel-index-pill {
    border-left: 1px solid #e2e8f0 !important;
  }

  .angel-topbar .angel-index-pill .index-data-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    width: 100%;
    min-width: 0;
    align-items: center !important;
  }

  .angel-topbar .angel-index-pill .index-title {
    font-size: 10.08px !important;
    line-height: 1.3;
    letter-spacing: .02em;
  }

  .angel-topbar .angel-index-pill .index-val {
    font-size: 12.32px !important;
    line-height: 1.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .angel-topbar .angel-index-pill .index-chg {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 3px;
    max-width: 100%;
    font-size: 8.96px !important;
    line-height: 1.4;
    white-space: normal !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .index-change-amount,
  .index-change-percent {
    white-space: nowrap;
  }

  .portfolio-kpi-grid {
    gap: 8px !important;
    margin-bottom: 18px;
  }

  .portfolio-kpi-grid .port-kpi-card {
    display: block !important;
    position: relative;
    padding: 10px !important;
    min-width: 0 !important;
  }

  .portfolio-kpi-grid .port-kpi-meta {
    min-width: 0;
    width: 100%;
  }

  .portfolio-kpi-grid .port-kpi-icon-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px !important;
    height: 20px !important;
    border-radius: 5px;
  }

  .portfolio-kpi-grid .port-kpi-icon-wrap .material-symbols-outlined {
    font-size: 14.56px !important;
  }

  .portfolio-kpi-grid .port-kpi-title {
    padding-right: 22px;
    min-height: 20px;
    font-size: 11.2px !important;
    line-height: 1.35;
  }

  .portfolio-kpi-grid .port-kpi-val {
    display: block;
    font-size: clamp(11.76px, 3.2vw, 14.56px) !important;
    line-height: 1.5;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .money-amount {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .port-kpi-val .money-amount {
    display: block;
  }

  .port-kpi-val .money-percent {
    display: block;
    font-size: 11.2px;
    line-height: 1.4;
  }

  .port-section-title,
  .panel-heading h2 {
    font-size: 16.8px !important;
  }

  .port-empty-banner,
  .port-invest-label,
  .mtf-content strong {
    font-size: 12.32px !important;
    line-height: 1.55;
  }

  #view-orders .panel-heading,
  #view-history .panel-heading {
    padding: 6px 2px 10px !important;
    margin-bottom: 8px;
    gap: 6px !important;
  }

  #view-orders .panel-heading .smallcap,
  #view-history .panel-heading .smallcap {
    font-size: 10.08px;
  }

  #view-orders .order-filter-tabs {
    padding: 3px;
    gap: 3px !important;
  }

  #view-orders .order-filter-btn {
    min-height: 36px;
    padding: 5px 4px !important;
    font-size: 10.64px !important;
  }

  #view-orders .table-scroller tr {
    padding: 10px !important;
    gap: 8px !important;
  }

  #view-orders .table-contract-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
  }

  #view-orders .table-contract-title {
    font-size: 12.32px !important;
    min-width: 0;
    line-height: 1.5;
  }

  #view-orders .ord-col-side,
  #view-orders .ord-col-status {
    min-width: 0;
  }

  #view-orders .order-side-chip,
  #view-orders .order-status-chip {
    font-size: 10.08px;
    padding: 4px 7px;
  }

  #view-orders .ord-col-trigger,
  #view-orders .ord-col-time,
  #view-orders .ord-col-fill,
  #view-orders .ord-col-lots {
    font-size: 11.76px !important;
  }

  .angel-watch-title {
    font-size: 16.8px !important;
  }

  .watch-sym-name,
  .watch-ltp {
    font-size: 13.44px !important;
  }

  .watch-chg-right,
  .watch-exp-strike {
    font-size: 11.2px !important;
  }

  #view-positions .table-contract-title {
    font-size: 12.32px !important;
  }

  #view-positions .pos-col-pnl {
    font-size: 14.56px !important;
  }

  #view-positions .pos-col-qty,
  #view-positions .pos-col-avg,
  #view-positions .pos-col-inv,
  #view-positions .pos-col-mark {
    font-size: 11.76px !important;
  }

  .open-pos-kpi-card .kpi-val {
    font-size: 13.44px !important;
  }

  .open-pos-kpi-card .kpi-label,
  .open-pos-kpi-card .kpi-sub {
    font-size: 11.2px !important;
  }
}

@media (max-height: 500px) and (max-width: 768px) {
  .angel-topbar .angel-indices-ticker {
    display: none !important;
  }
}

/* Mobile header and action groups have explicit sizes, rather than inherited pills. */
@media (max-width: 768px) {
  .angel-topbar {
    display: grid !important;
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-rows: 48px auto;
    gap: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible;
  }

  .angel-topbar .topbar-left {
    display: contents !important;
  }

  .angel-topbar .brand-link {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 84px;
    height: 48px !important;
    padding: 0 !important;
    margin-left: 12px;
  }

  .angel-topbar .brand-link img {
    display: block;
    width: 84px !important;
    height: auto !important;
    max-width: 84px !important;
    aspect-ratio: 186 / 69;
    object-fit: contain;
    flex-shrink: 0;
  }

  .angel-topbar .angel-top-actions {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 48px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 10px 0 8px !important;
    box-sizing: border-box;
    justify-content: flex-end;
    flex-shrink: 1 !important;
  }

  .angel-topbar .angel-indices-ticker {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .angel-top-actions .user-pill-wrap {
    min-width: 0;
    max-width: 100%;
  }

  #userMenuBtn {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 10px;
    gap: 7px !important;
    align-items: center !important;
    width: auto;
    max-width: 100%;
    min-height: 38px;
    height: auto !important;
    padding: 4px 8px 4px 5px !important;
    box-sizing: border-box;
    border-radius: 8px !important;
    background: #f8fafc !important;
    text-align: left;
  }

  #headerUserAvatar {
    display: grid;
    place-items: center;
    width: 28px !important;
    height: 28px !important;
    line-height: 1;
    font-size: 11.2px !important;
    margin: 0;
    flex-shrink: 0;
  }

  #userMenuBtn .user-header-details {
    min-width: 0;
    gap: 2px;
    line-height: 1.25;
  }

  #headerUserName {
    display: block;
    max-width: none;
    min-width: 0;
    margin: 0;
    font-size: 12.32px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #headerUserMargin {
    display: block;
    font-size: 10.64px;
    line-height: 1.25;
    white-space: nowrap;
  }

  #userMenuBtn .user-header-chevron {
    margin: 0;
    font-size: 14.56px;
    text-align: center;
    line-height: 1;
  }

  .user-dropdown-info {
    min-width: 0;
  }

  .user-dropdown-name,
  .user-dropdown-email {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #miniPositions .mini-pos-row-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  #miniPositions .mini-title-row {
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px;
  }

  #miniPositions .mini-pos-symbol {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    font-size: 11.76px;
    line-height: 1.4;
  }

  #miniPositions .mini-pnl {
    font-size: 12.32px;
    line-height: 1.4;
  }

  #miniPositions .mini-pos-row-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #miniPositions .mini-desc {
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 11.2px;
    line-height: 1.5;
  }

  #miniPositions .mini-act-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 0;
  }

  #miniPositions .mini-act-row .row-btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    height: 38px;
    margin: 0;
    padding: 6px !important;
    box-sizing: border-box;
    font-size: 11.76px !important;
    font-weight: 650;
    line-height: 1.2;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
  }

  #view-positions .sl-action-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px !important;
  }

  #view-positions .sl-action-group .row-btn {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    height: 40px !important;
    margin: 0;
    padding: 6px 4px !important;
    box-sizing: border-box;
    font-size: 11.76px !important;
    line-height: 1.25;
    border-radius: 6px !important;
    box-shadow: none !important;
    transform: none;
  }

  #mobileChartActionBar .mcab-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 46%;
    max-width: 180px;
    flex: 0 0 auto;
    gap: 8px;
  }

  #mobileChartActionBar .mcab-btn {
    width: 100%;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0;
    padding: 8px !important;
    box-sizing: border-box;
    font-size: 12.88px !important;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 6px;
    border: 1px solid transparent;
    box-shadow: none;
    transform: none;
  }

  #mobileChartActionBar .mcab-info {
    min-width: 0;
  }
}

/* Keep the expanded desktop navigation and account controls inside the header. */
@media (min-width: 1101px) and (max-width: 1700px) {
  .angel-topbar {
    gap: 8px;
    padding: 0 12px;
  }

  .angel-topbar .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  .angel-topbar .angel-indices-ticker {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    padding-left: 8px;
  }

  .angel-topbar .angel-index-pill {
    min-width: 0;
  }

  .angel-topbar .index-top-row {
    gap: 2px;
  }

  .angel-topbar .index-title {
    font-size: 10.08px;
  }

  .angel-topbar .index-val {
    font-size: 11.2px;
  }

  .angel-topbar .index-chg {
    font-size: 8.96px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
  }

  .angel-topbar .angel-nav {
    margin: 0;
  }

  .angel-topbar .angel-nav .nav-link {
    padding: 0 9px;
    font-size: 13.44px;
  }

  .angel-topbar .angel-top-actions .clock {
    display: none;
  }
}

.aom-margin-note {
  display: block;
  margin-top: 4px;
  max-width: 240px;
  color: #64748b;
  font-size: 11.2px;
  line-height: 1.4;
}

.chart-history-notice {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 44px;
  z-index: 4;
  padding: 8px 10px;
  border: 1px solid #fde68a;
  border-radius: 6px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12.32px;
  line-height: 1.45;
  pointer-events: none;
}

.registration-otp-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.registration-otp-row input {
  flex: 1;
  min-width: 0;
}

.registration-otp-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  font-size: 13.44px;
  font-weight: 700;
  cursor: pointer;
}

.registration-otp-btn:disabled {
  opacity: .55;
  cursor: default;
}

.login-field .registration-phone-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.32px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 10px;
}

.login-field .registration-phone-consent input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 2px 0 0;
  padding: 0;
}

.registration-phone-status {
  font-size: 13.44px;
  line-height: 1.5;
  color: #047857;
  margin: 8px 0 0;
}

.registration-phone-status.is-error {
  color: #b91c1c;
}

/* Shared product navigation. */
.terminal-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #dfe8e2;
  border-radius: 7px;
  background: #f5faf6;
  color: #397258;
  text-decoration: none;
  font-size: 12.32px;
  font-weight: 600;
  white-space: nowrap
}

.terminal-home-link .material-symbols-outlined {
  font-size: 17.92px
}

.terminal-home-link:hover {
  background: #eaf4ec
}

.terminal-mobile-home {
  text-decoration: none
}

@media(max-width:768px) {
  .terminal-home-link {
    display: none !important
  }

  #mobileBottomNav .mob-nav-item {
    flex: 1 1 0;
    min-width: 0
  }

  #mobileBottomNav .mob-nav-label {
    font-size: 8.96px
  }
}

/* Shared workspace identity without reducing the chart's available height. */
.terminal-home-link {
  border: 1.12px solid #d6e6dc;
  border-radius: 8px;
  padding: 7px 11px;
  background: #f2f8f4;
  color: #25614b;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.terminal-home-link:hover {
  background: #e6f2ea;
  border-color: #9bc3ab;
}

.terminal-education-notice {
  padding: 7px 16px;
  background: #f2f7ef;
  color: #56654b;
  font: 12.32px/1.5 'DM Sans', system-ui, sans-serif;
  text-align: center;
  border-bottom: 1px solid #e0e9dd;
}

.terminal-education-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media(max-width:680px) {
  .terminal-home-link {
    min-height: 36px;
    padding: 6px 9px;
  }
}

.angel-topbar .brand-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.terminal-product-label {
  font: 600 8.96px/1.3 'DM Sans', system-ui, sans-serif;
  letter-spacing: 1.2px;
  color: #587363;
  white-space: nowrap;
}

.convert-pos-btn[hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  #miniPositions .mini-act-row:has(.convert-pos-btn:not([hidden])) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #view-positions .sl-action-group:has(.convert-pos-btn:not([hidden])) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #view-positions .sl-action-group:has(.share-position-btn) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #view-positions .sl-action-group .share-position-btn {
    grid-column: 1 / -1;
    white-space: normal !important;
    line-height: 1.1;
  }
}

/* Super Admin console: compact account rows, clear P&L, and reliable actions. */
.admin-table-scroller {
  overflow: auto;
  overscroll-behavior: contain;
}

.admin-users-table {
  min-width: 1135px;
}

.admin-users-table th:nth-child(8),
.admin-users-table td:nth-child(8) {
  width: 230px;
}

.admin-users-table th:last-child,
.admin-users-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 3;
  background: #fff;
  box-shadow: -8px 0 12px -12px rgba(15, 23, 42, .55);
}

.admin-users-table th:last-child {
  background: #f1f5f9;
  z-index: 4;
}

.admin-actions-group {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.admin-actions-group .admin-action-btn {
  min-height: 34px;
  padding: 6px 9px;
}

/* Keep admin account data and actions inside their own columns. */
.admin-dashboard-card .admin-users-table {
  width: 100%;
  min-width: 1080px;
  table-layout: fixed;
}

.admin-dashboard-card .admin-users-table th:nth-child(1),
.admin-dashboard-card .admin-users-table td:nth-child(1) { width: 160px; }
.admin-dashboard-card .admin-users-table th:nth-child(2),
.admin-dashboard-card .admin-users-table td:nth-child(2) { width: 135px; }
.admin-dashboard-card .admin-users-table th:nth-child(3),
.admin-dashboard-card .admin-users-table td:nth-child(3) { width: 105px; }
.admin-dashboard-card .admin-users-table th:nth-child(4),
.admin-dashboard-card .admin-users-table td:nth-child(4) { width: 115px; }
.admin-dashboard-card .admin-users-table th:nth-child(5),
.admin-dashboard-card .admin-users-table td:nth-child(5) { width: 120px; }
.admin-dashboard-card .admin-users-table th:nth-child(6),
.admin-dashboard-card .admin-users-table td:nth-child(6) { width: 200px; }
.admin-dashboard-card .admin-users-table th:nth-child(7),
.admin-dashboard-card .admin-users-table td:nth-child(7) { width: 70px; }
.admin-dashboard-card .admin-users-table th:nth-child(8),
.admin-dashboard-card .admin-users-table td:nth-child(8) { width: 175px; }
.admin-dashboard-card .admin-users-table td { overflow: hidden; }
.admin-dashboard-card .admin-users-table .admin-role-badge { max-width: 100%; white-space: nowrap; }
.admin-dashboard-card .admin-users-table .admin-user-cell > div:last-child { min-width: 0; overflow: hidden; }
.admin-dashboard-card .admin-users-table .admin-pnl-stack,
.admin-dashboard-card .admin-users-table .admin-pnl-stack > div { min-width: 0; }
.admin-dashboard-card .admin-users-table .admin-pnl-stack strong { flex: 0 0 auto; }
.admin-dashboard-card .admin-users-table .admin-pnl-stack small { font-size: 9px; }
.admin-dashboard-card .admin-users-table .admin-pnl-stack strong { font-size: 10px; }
.admin-dashboard-card .admin-users-table td:nth-child(7) { text-align: center; }
.admin-dashboard-card .admin-users-table td:nth-child(7) .admin-action-btn { margin: 0; }
.admin-dashboard-card { grid-template-columns: 210px minmax(0, 1fr); }
.admin-dashboard-card .admin-users-table .admin-actions-group { gap: 4px; }
.admin-dashboard-card .admin-users-table .admin-actions-group .admin-action-btn { gap: 3px; padding: 4px 6px; font-size: 8px; }
.admin-dashboard-card .admin-users-table th:last-child,
.admin-dashboard-card .admin-users-table td:last-child {
  position: static;
  box-shadow: none;
}

.admin-update-notice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid #d4e8dc;
  border-radius: 11px;
  color: #335d47;
  background: #f0f8f2;
}
.admin-update-notice[hidden] { display: none; }
.admin-update-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #287652; background: #dff0e4; font-size: 18px; }
.admin-update-notice strong { color: #254c38; font-size: 11px; }
.admin-update-notice p { margin: 3px 0 0; color: #64806d; font-size: 10px; line-height: 1.45; }
.admin-update-notice button { padding: 6px 10px; border: 1px solid #c8dfd0; border-radius: 7px; color: #386b4d; background: #fff; font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; }
.admin-update-notice button:hover { background: #f7fcf8; }
@media(max-width:760px) {
  .admin-update-notice { grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; margin-bottom: 10px; padding: 9px; }
  .admin-update-notice p { font-size: 9px; }
  .admin-update-notice button { padding: 6px 7px; }
}

.admin-position-details {
  position: relative;
  display: inline-block;
}

.admin-position-details summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
  white-space: nowrap;
}

.admin-position-details summary::-webkit-details-marker {
  display: none;
}

.admin-position-details summary::after {
  content: '⌄';
  color: #64748b;
  font-size: 15.68px;
}

.admin-position-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #dbeafe;
}

.admin-position-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: min(520px, 70vw);
  max-height: 300px;
  overflow: auto;
  padding: 12px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
}

.admin-position-popover-title {
  margin-bottom: 8px;
  color: #64748b;
  font-size: 11.2px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-position-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  border-top: 1px solid #eef2f7;
}

.admin-position-item b {
  display: block;
  color: #0f172a;
  font-size: 13.44px;
}

.admin-position-item small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11.2px;
}

.admin-position-item strong {
  flex: 0 0 auto;
  font-size: 13.44px;
}

.admin-pnl-stack {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 7px;
  align-items: baseline;
  white-space: nowrap;
}

.admin-pnl-stack span {
  font-weight: 700;
}

.admin-pnl-stack small {
  color: #94a3b8;
  font-size: 10.08px;
  text-align: right;
}

.admin-no-position {
  color: #94a3b8;
  font-size: 12.32px;
}

.admin-live-indicator {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  color: #047857;
  font-size: 12.32px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-live-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px #d1fae5;
}

.admin-search-input {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-pnl-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  white-space: normal;
}

.admin-pnl-stack>div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.admin-pnl-stack small {
  color: #64748b;
  font-size: 11.2px;
  text-align: left;
  white-space: nowrap;
}

.admin-pnl-stack strong {
  font-size: 13.44px;
  text-align: right;
  white-space: nowrap;
}

.admin-position-item>strong {
  text-align: right;
}

.admin-position-item>strong small {
  color: #94a3b8;
  font-weight: 600;
  text-align: right;
}

.admin-position-details summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .25);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .admin-search-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .admin-live-indicator {
    width: 100%;
    justify-content: flex-end;
    padding: 2px 4px 0;
  }

  .admin-users-table {
    min-width: 1250px;
  }
}

.blocked-trading-screen[hidden] {
  display: none !important;
}

.blocked-trading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .76);
  backdrop-filter: blur(8px);
}

.blocked-trading-card {
  width: min(520px, 100%);
  padding: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28);
  text-align: center;
}

.blocked-trading-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: #fff1f2;
  color: #e11d48;
}

.blocked-trading-icon .material-symbols-outlined {
  font-size: 30px;
}

.blocked-trading-eyebrow {
  color: #64748b;
  font-size: 12.32px;
  font-weight: 800;
  letter-spacing: .14em;
}

.blocked-trading-card h1 {
  margin: 8px 0 10px;
  color: #0f172a;
  font-size: 25px;
  line-height: 1.2;
}

.blocked-trading-card p {
  margin: 0;
  color: #475569;
  font-size: 15.68px;
  line-height: 1.6;
}

.blocked-community-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 24px auto 20px;
  padding: 13px 18px;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 15.68px;
  font-weight: 700;
  text-decoration: none;
}

.blocked-community-link:hover {
  background: #1d4ed8;
}

.blocked-trading-card .blocked-help {
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  font-size: 13.44px;
}

.blocked-help a {
  color: #1d4ed8;
  font-weight: 700;
}

.share-position-control:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 7px;
}

@media (max-width: 768px) {
  #view-positions .share-position-control {
    grid-column: 1 / -1;
    width: 100%;
  }

  #view-positions .share-position-control .share-position-btn {
    width: 100%;
    white-space: normal !important;
    line-height: 1.15;
  }
}

@media (min-width: 769px) {
  #view-positions .table-scroller {
    overflow-x: hidden;
  }

  #view-positions .table-scroller table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  #view-positions .table-scroller th,
  #view-positions .table-scroller td {
    padding-right: 10px;
    padding-left: 10px;
  }

  #view-positions .table-scroller th:nth-child(1),
  #view-positions .table-scroller td:nth-child(1) {
    width: 25%;
  }

  #view-positions .table-scroller th:nth-child(2),
  #view-positions .table-scroller td:nth-child(2) {
    width: 9%;
  }

  #view-positions .table-scroller th:nth-child(3),
  #view-positions .table-scroller td:nth-child(3) {
    width: 8%;
  }

  #view-positions .table-scroller th:nth-child(4),
  #view-positions .table-scroller td:nth-child(4) {
    width: 7%;
  }

  #view-positions .table-scroller th:nth-child(5),
  #view-positions .table-scroller td:nth-child(5) {
    width: 11%;
  }

  #view-positions .table-scroller th:nth-child(6),
  #view-positions .table-scroller td:nth-child(6) {
    width: 10%;
  }

  #view-positions .table-scroller th:nth-child(7),
  #view-positions .table-scroller td:nth-child(7) {
    width: 10%;
  }

  #view-positions .table-scroller th:nth-child(8),
  #view-positions .table-scroller td:nth-child(8) {
    width: 20%;
  }

  #view-positions .sl-action-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 270px;
    gap: 5px;
    white-space: normal;
  }

  #view-positions .sl-action-group .row-btn {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 5px 4px;
    font-size: 11.2px;
    line-height: 1.15;
    white-space: normal;
  }

  #view-positions .share-position-control {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Super Admin dashboard and Premium request queue */
#superAdminModalBackdrop {
  z-index: 100000;
  padding: 24px;
  background: rgba(8, 22, 17, .62);
  backdrop-filter: blur(8px);
}

.admin-dashboard-card {
  width: min(1480px, calc(100vw - 48px));
  height: min(940px, calc(100dvh - 48px));
  max-width: none;
  max-height: none !important;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  border: 1px solid #dce7df;
  border-radius: 22px;
  overflow: hidden !important;
  background: #f5f8f6;
  box-shadow: 0 32px 90px rgba(8, 25, 17, .28);
}

.admin-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 15px 18px;
  color: #eaf2ec;
  background: linear-gradient(165deg, #183b2c, #102b21 72%);
}

.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 7px 37px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
}

.admin-sidebar-brand b { font-weight: 500; }
.admin-sidebar-brand small { display: block; margin-top: 3px; color: #a9c5b2; font-size: 9px; letter-spacing: .16em; }
.admin-brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #b4d1bd66; border-radius: 12px; color: #d7eedb; background: #ffffff10; font-size: 17px; }
.admin-side-label { margin: 0 10px 9px; color: #91ad99; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.admin-dashboard-nav { display: grid; gap: 6px; }
.admin-dashboard-nav button { display: flex; min-width: 0; min-height: 44px; align-items: center; gap: 11px; padding: 0 11px; border: 1px solid transparent; border-radius: 10px; color: #c8d8cd; background: transparent; text-align: left; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.admin-dashboard-nav button:hover { color: #fff; background: #ffffff0b; }
.admin-dashboard-nav button.active { border-color: #d7eddd24; color: #fff; background: #d8efde1a; box-shadow: inset 3px 0 #8cc9a0; }
.admin-dashboard-nav button .material-symbols-outlined { font-size: 19px; }
.admin-nav-count { display: grid; min-width: 21px; height: 21px; place-items: center; margin-left: auto; padding: 0 5px; border-radius: 20px; color: #f5fff7; background: #bf7738; font-size: 10px; font-variant-numeric: tabular-nums; }
.admin-nav-count[hidden] { display: none; }
.admin-sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 14px 9px 0; border-top: 1px solid #ffffff19; color: #dce9df; font-size: 11px; font-weight: 650; line-height: 1.5; }
.admin-sidebar-foot small { color: #9bb3a2; font-size: 10px; font-weight: 450; }
.admin-secure-dot { width: 8px; height: 8px; border-radius: 50%; background: #78ce97; box-shadow: 0 0 0 4px #78ce9722; }
.admin-dashboard-main { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
.admin-dashboard-card .admin-modal-header { min-height: 82px; padding: 15px 26px; border-bottom: 1px solid #e4ebe6; background: #fff; }
.admin-dashboard-card .admin-title-wrap { gap: 12px; }
.admin-dashboard-card .admin-shield-icon { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid #dcebe0; border-radius: 13px; color: #287454; background: #edf6ef; }
.admin-dashboard-card .admin-title-wrap h2 { color: #172d23; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.admin-dashboard-card .admin-title-wrap p:not(.admin-header-eyebrow) { margin-top: 3px; color: #77847c; font-size: 11px; }
.admin-header-eyebrow,.admin-dashboard-eyebrow { margin: 0 0 4px; color: #60836c; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.admin-dashboard-card .admin-header-actions { gap: 10px; }
.admin-dashboard-card .admin-refresh-btn { min-height: 36px; padding: 0 12px; border: 1px solid #dce7df; border-radius: 9px; color: #315a43; background: #fff; font-size: 11px; }
.admin-dashboard-card .admin-refresh-btn .material-symbols-outlined { font-size: 16px; }
.admin-dashboard-card .admin-live-indicator { position: static; display: inline-flex; align-items: center; gap: 6px; color: #6a7b70; font-size: 10px; white-space: nowrap; }
.admin-dashboard-card .admin-live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #32a36e; box-shadow: 0 0 0 3px #32a36e1c; }
.admin-dashboard-body { min-height: 0; gap: 18px; padding: 23px 26px 30px; overflow-y: auto; }
.admin-dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 1px 0 2px; }
.admin-dashboard-hero h3 { margin: 0; color: #1a3025; font-size: clamp(21px, 2.5vw, 27px); font-weight: 760; letter-spacing: -.04em; }
.admin-dashboard-hero p:not(.admin-dashboard-eyebrow) { margin: 6px 0 0; color: #728078; font-size: 12px; }
.admin-hero-date { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid #e1e9e3; border-radius: 11px; color: #52705d; background: #fff; font-size: 11px; font-weight: 650; white-space: nowrap; }
.admin-hero-date .material-symbols-outlined { font-size: 18px; }
.admin-hero-date small { display: block; margin-top: 2px; color: #8a968e; font-size: 9px; font-weight: 450; }
.admin-dashboard-card .admin-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.admin-dashboard-card .admin-kpi-card { position: relative; min-width: 0; min-height: 116px; gap: 5px; padding: 15px 14px 13px; border-color: #e0e8e2; border-radius: 13px; background: #fff; box-shadow: 0 2px 6px #142c1b06; }
.admin-dashboard-card .admin-kpi-card .kpi-label { color: #849087; font-size: 8px; letter-spacing: .09em; }
.admin-dashboard-card .admin-kpi-card .kpi-val { color: #193228; font-size: clamp(18px, 2vw, 24px); font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.admin-dashboard-card .admin-kpi-card .kpi-sub { color: #8a968e; font-size: 9px; }
.admin-dashboard-card .admin-kpi-card .kpi-val.positive { color: #258158; font-size: 13px; letter-spacing: 0; }
.admin-dashboard-card .admin-kpi-card .kpi-val.negative { color: #bd4d42; font-size: 13px; letter-spacing: 0; }
.kpi-icon { position: absolute; top: 12px; right: 12px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #3d8a65; background: #eef7f0; }
.kpi-icon.premium { color: #ad752f; background: #fbf3e7; }
.kpi-icon.database { color: #587b8d; background: #edf4f7; }
.kpi-icon .material-symbols-outlined { font-size: 16px; }
.admin-premium-panel,.admin-accounts-panel { min-width: 0; padding: 17px 18px; border: 1px solid #e0e8e2; border-radius: 15px; background: #fff; box-shadow: 0 2px 7px #142c1b05; }
.admin-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.admin-section-heading h3 { margin: 0; color: #1d3428; font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
.admin-section-heading p:not(.admin-dashboard-eyebrow) { margin: 4px 0 0; color: #7b8980; font-size: 10px; line-height: 1.5; }
.admin-pending-pill { padding: 5px 9px; border: 1px solid #eedfbe; border-radius: 30px; color: #93611e; background: #fbf5e9; font-size: 9px; font-weight: 750; white-space: nowrap; }
.admin-premium-list { display: grid; }
.admin-premium-request { display: grid; grid-template-columns: 38px minmax(130px, 1fr) minmax(130px, .7fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 11px 1px; border-top: 1px solid #edf1ee; }
.admin-premium-avatar { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #dce9df; border-radius: 50%; color: #35684c; background: #eef6ef; font-size: 11px; font-weight: 750; }
.admin-premium-person { display: grid; min-width: 0; gap: 3px; }
.admin-premium-person strong { overflow: hidden; color: #293b30; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-premium-person>span { overflow: hidden; color: #829087; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-premium-request-date { display: grid; gap: 3px; }
.admin-premium-request-date small { color: #98a199; font-size: 8px; font-weight: 750; letter-spacing: .08em; }
.admin-premium-request-date time { color: #59695f; font-size: 10px; }
.admin-review-link { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid #d9e8dc; border-radius: 8px; color: #2d7650; background: #f7fbf7; font-size: 9px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.admin-review-link:hover { border-color: #b8d8c2; background: #edf7ef; }
.admin-review-link .material-symbols-outlined { font-size: 15px; }
.admin-premium-state { display: flex; min-height: 72px; align-items: center; gap: 11px; padding: 14px 2px 3px; border-top: 1px solid #edf1ee; color: #6b7b71; }
.admin-premium-state>.material-symbols-outlined { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; color: #43805b; background: #eff7f0; font-size: 18px; }
.admin-premium-state strong { color: #3d5647; font-size: 11px; }
.admin-premium-state p { margin: 3px 0 0; color: #87948b; font-size: 10px; }
.admin-premium-state small { color: #9b6c3a; font-size: 10px; }
.admin-premium-state.error>.material-symbols-outlined { color: #ab554c; background: #fff0ee; }
.admin-accounts-heading { align-items: center; margin-bottom: 12px; }
.admin-accounts-heading .admin-search-row { width: min(310px, 42%); }
.admin-dashboard-card .admin-search-input { min-height: 36px; padding: 8px 11px 8px 34px; border-color: #e0e8e2; border-radius: 9px; background: #fafcfb; font-size: 10px; }
.admin-dashboard-card .admin-search-lens { left: 10px; font-size: 17px; }
.admin-dashboard-card .admin-table-scroller { max-height: 340px; border-color: #e9efea; border-radius: 10px; }
.admin-dashboard-card .admin-users-table { min-width: 1030px; font-size: 10px; }
.admin-dashboard-card .admin-users-table th { position: sticky; top: 0; z-index: 1; padding: 10px 8px; color: #77867d; background: #f8faf8; font-size: 8px; letter-spacing: .06em; }
.admin-dashboard-card .admin-users-table td { padding: 10px 8px; border-bottom-color: #edf1ee; }
.admin-table-message { padding: 24px !important; color: #7b8980; text-align: center; }
.admin-dashboard-card .admin-user-name { color: #25372d; font-size: 10px; }
.admin-dashboard-card .admin-user-email { color: #88948b; font-size: 9px; }
.admin-dashboard-card .admin-user-avatar { width: 30px; height: 30px; border-radius: 10px; color: #316747; background: #eef6ef; font-size: 10px; }
.admin-dashboard-card .admin-action-btn { min-height: 28px; border-radius: 7px; font-size: 9px; }
.admin-dashboard-body[data-admin-view="accounts"] .admin-dashboard-hero,
.admin-dashboard-body[data-admin-view="accounts"] .admin-kpi-grid,
.admin-dashboard-body[data-admin-view="accounts"] .admin-premium-panel,
.admin-dashboard-body[data-admin-view="premium"] .admin-dashboard-hero,
.admin-dashboard-body[data-admin-view="premium"] .admin-kpi-grid,
.admin-dashboard-body[data-admin-view="premium"] .admin-accounts-panel { display: none; }
.admin-dashboard-body[data-admin-view="premium"] .admin-premium-panel { min-height: 180px; }

@media (max-width: 1100px) {
  .admin-dashboard-card .admin-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  #superAdminModalBackdrop { padding: 0; }
  .admin-dashboard-card { width: 100%; height: 100dvh; border: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .admin-sidebar { display: block; padding: 10px 13px 9px; }
  .admin-sidebar-brand { margin: 0 0 10px 2px; font-size: 12px; }
  .admin-brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .admin-sidebar-brand small { font-size: 8px; }
  .admin-side-label,.admin-sidebar-foot { display: none; }
  .admin-dashboard-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .admin-dashboard-nav button { min-height: 38px; justify-content: center; gap: 5px; padding: 0 6px; font-size: 9px; }
  .admin-dashboard-nav button .material-symbols-outlined { font-size: 16px; }
  .admin-nav-count { min-width: 17px; height: 17px; font-size: 8px; }
  .admin-dashboard-main { min-height: 0; }
  .admin-dashboard-card .admin-modal-header { min-height: 68px; padding: 10px 13px; gap: 8px; }
  .admin-dashboard-card .admin-title-wrap { gap: 8px; }
  .admin-dashboard-card .admin-shield-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
  .admin-dashboard-card .admin-shield-icon .material-symbols-outlined { font-size: 19px; }
  .admin-dashboard-card .admin-title-wrap h2 { font-size: 13px; }
  .admin-dashboard-card .admin-title-wrap p:not(.admin-header-eyebrow) { max-width: 225px; font-size: 9px; }
  .admin-header-eyebrow { font-size: 7px; }
  .admin-dashboard-card .admin-header-actions { gap: 5px; }
  .admin-dashboard-card .admin-live-indicator { display: none; }
  .admin-dashboard-card .admin-refresh-btn { min-width: 32px; width: 32px; min-height: 32px; justify-content: center; padding: 0; }
  .admin-dashboard-card .admin-refresh-btn span:last-child { display: none; }
  .admin-dashboard-body { gap: 12px; padding: 15px 12px 24px; }
  .admin-dashboard-hero h3 { font-size: 21px; }
  .admin-dashboard-hero p:not(.admin-dashboard-eyebrow) { max-width: 250px; font-size: 10px; }
  .admin-hero-date { padding: 8px; font-size: 9px; }
  .admin-hero-date small { white-space: normal; }
  .admin-dashboard-card .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-dashboard-card .admin-kpi-card { min-height: 98px; padding: 12px 10px; }
  .admin-dashboard-card .admin-kpi-card .kpi-val { font-size: 19px; }
  .admin-kpi-card .kpi-icon { width: 24px; height: 24px; top: 9px; right: 9px; }
  .admin-kpi-card .kpi-icon .material-symbols-outlined { font-size: 14px; }
  .admin-premium-panel,.admin-accounts-panel { padding: 13px 12px; border-radius: 12px; }
  .admin-section-heading { gap: 8px; }
  .admin-section-heading h3 { font-size: 14px; }
  .admin-section-heading p:not(.admin-dashboard-eyebrow) { max-width: 265px; font-size: 9px; }
  .admin-premium-request { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 10px 0; }
  .admin-premium-avatar { width: 32px; height: 32px; font-size: 10px; }
  .admin-premium-person strong { font-size: 10px; }
  .admin-premium-request-date { grid-column: 2; }
  .admin-premium-request-date small { display: none; }
  .admin-premium-request-date time { font-size: 9px; }
  .admin-review-link { grid-column: 3; grid-row: 1 / span 2; min-height: 30px; padding: 0 7px; font-size: 8px; }
  .admin-accounts-heading { align-items: flex-start; flex-direction: column; }
  .admin-accounts-heading .admin-search-row { width: 100%; }
  .admin-dashboard-card .admin-table-scroller { max-height: 48dvh; }
}

@media (max-width: 768px) {

  html,
  body {
    min-width: 0;
  }

  main.main-content {
    height: calc(100dvh - var(--terminal-topbar-height, 74px) - var(--ui-nav-height) - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(100dvh - var(--terminal-topbar-height, 74px) - var(--ui-nav-height) - env(safe-area-inset-bottom, 0px)) !important;
  }

  #mobileBottomNav {
    min-height: var(--ui-nav-height);
    height: calc(var(--ui-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    gap: 0;
  }

  #mobileBottomNav .mob-nav-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    padding: 5px 1px;
  }

  #mobileBottomNav .mob-nav-label {
    font-size: 11.2px !important;
  }

  #mobileBottomNav .mob-nav-icon {
    font-size: 22px !important;
  }

  #mobileBottomNav .mob-nav-item[aria-current] {
    background: #eff6ff;
    border-radius: 10px;
  }

  #angelTerminalLayout .hero-workspace {
    padding-bottom: 0 !important;
  }

  #mobileChartActionBar {
    min-height: 76px;
    padding: 8px 12px;
    gap: 8px;
  }

  #mobileChartActionBar .mcab-btn {
    min-width: 64px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
  }

  #mcabSymbol {
    font-size: 13.44px !important;
    white-space: normal !important;
    display: block;
    line-height: 1.4;
  }

  .mcab-chg {
    display: none;
  }

  .chart-subnav {
    min-height: 44px;
    gap: 4px !important;
    padding: 0 6px !important;
  }

  .chart-subnav-left {
    min-width: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chart-subtab {
    min-height: 44px;
    padding: 8px 10px !important;
    font-size: 13.44px !important;
    white-space: nowrap;
  }

  #btnMobileBackToWatchlist {
    min-height: 44px;
    min-width: 36px;
    padding: 0 4px;
  }

  #btnMobileBackToWatchlist>span:last-child {
    display: none;
  }

  .tv-top-toolbar {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 40px;
    padding: 3px 6px !important;
    gap: 0 !important;
  }

  .tv-toolbar-left,
  .tv-toolbar-right {
    min-width: 0;
    gap: 2px !important;
  }

  .tv-btn {
    min-height: 36px !important;
    min-width: 32px !important;
    font-size: 13.44px !important;
    padding: 4px 6px !important;
  }

  .tv-tf-group {
    flex-wrap: nowrap !important;
  }

  .tv-inchart-header {
    pointer-events: none;
  }

  .tv-contract-title {
    font-size: 12.32px !important;
  }

  .tv-bottom-toolbar {
    overflow-x: auto;
    scrollbar-width: none;
    min-height: 32px;
  }

  .tv-bottom-toolbar>* {
    flex-shrink: 0;
  }

  .angel-order-backdrop:not([hidden]),
  .sl-modal-backdrop:not([hidden]),
  .modal-backdrop:not([hidden]) {
    top: var(--ui-viewport-top, 0px) !important;
    height: var(--ui-viewport-height, 100dvh) !important;
    bottom: auto !important;
  }

  .angel-order-modal,
  .sl-modal-dialog,
  .login-modal-card,
  .admin-modal-card,
  .admin-sub-modal-card {
    max-height: calc(var(--ui-viewport-height, 100dvh) - 12px) !important;
  }

  input:not([type=checkbox]):not([type=hidden]),
  select,
  textarea {
    font-size: 17.92px !important;
  }

  .aom-seg-btn,
  .aom-chip,
  .preset-chip,
  .bracket-lot-chip,
  .modal-close-btn {
    min-height: 40px;
  }

  .aom-funds-row {
    gap: 12px;
  }

  .aom-funds-item strong {
    font-size: 15.68px;
  }

  .aom-label {
    font-size: 13.44px !important;
  }

  .aom-stepper,
  .aom-field-group>input {
    min-height: 44px;
  }

  .row-btn,
  .oh-btn,
  .settings-panel .btn {
    min-height: 44px;
    padding: 8px 10px;
  }

  .watch-search-wrap {
    padding: 4px 0 !important;
    margin-bottom: 6px;
  }

  .watch-search-wrap .angel-search-box-inner {
    height: 32px !important;
    padding: 0;
    box-sizing: border-box;
  }

  .watch-search-wrap .angel-search-box-inner input {
    min-width: 0;
    min-height: 0;
    height: 30px;
    padding: 0 30px 0 30px;
    box-sizing: border-box;
    font-size: 13.44px !important;
    line-height: normal;
  }

  .watch-search-wrap .search-lens {
    left: 9px;
    display: flex;
    align-items: center;
  }

  .watch-search-wrap .material-symbols-outlined {
    font-size: 17.92px;
  }

  .watch-search-wrap .clear-search-btn {
    right: 2px;
    width: 28px;
    height: 28px;
    padding: 4px;
  }

  .mw-tabs-nav-wrap .mw-tab {
    min-height: 28px;
    height: 28px;
    box-sizing: border-box;
    padding: 4px 8px !important;
    font-size: 11.2px !important;
    line-height: 1.2;
  }

  .search-dropdown {
    top: calc(var(--terminal-topbar-height, 74px) + 44px) !important;
    max-height: min(60dvh, calc(var(--ui-viewport-height, 100dvh) - 180px)) !important;
  }

  .diagnostics>div {
    align-items: flex-start;
    gap: 12px;
  }

  .diagnostics b {
    max-width: 65%;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .user-dropdown-menu {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - var(--terminal-topbar-height, 74px) - 16px);
    overflow-y: auto;
  }

  .user-header-name {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .open-pos-kpi-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 12px !important;
  }

  .open-pos-kpi-card .kpi-content {
    width: 100%;
    overflow: visible !important;
  }

  .kpi-val,
  .kpi-sub,
  .port-kpi-val {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }

  .open-pos-kpi-card .kpi-val {
    display: block !important;
    font-size: 15.68px !important;
  }

  .kpi-label,
  .kpi-sub {
    font-size: 12.32px !important;
  }

  .kpi-label {
    white-space: normal !important;
  }

  .kpi-pct-badge {
    display: block;
    margin-top: 2px;
  }

  #view-positions .table-scroller tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: 'name name' 'pnl pnl' 'qty avg' 'inv mark' 'bracket bracket' 'actions actions' !important;
    gap: 10px !important;
  }

  #view-positions .pos-col-pnl {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #view-positions .pos-col-pnl::before {
    content: 'Unrealized P&L';
    color: #64748b;
    font-size: 12.32px;
    font-weight: 500;
  }

  #view-positions .pos-col-qty,
  #view-positions .pos-col-avg,
  #view-positions .pos-col-inv,
  #view-positions .pos-col-mark {
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    font-size: 13.44px !important;
  }

  #view-positions .table-contract-title {
    overflow-wrap: anywhere;
  }

  #view-orders .order-filter-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
  }

  #view-orders .panel-heading>div:last-child {
    width: 100%;
  }

  #view-orders .order-filter-btn {
    min-height: 40px;
    text-align: center;
  }

  #view-orders .table-scroller tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: 'side status' 'sym sym' 'lots price' 'trigger trigger' 'time action' !important;
  }

  #view-orders .ord-col-trigger {
    display: block !important;
    grid-area: trigger;
    border: 0;
    padding: 4px 0 !important;
    font-size: 13.44px;
    background: #f8fafc;
    border-radius: 6px;
    white-space: normal;
  }

  #view-orders .ord-col-trigger::before {
    content: 'Order price / trigger: ';
    color: #64748b;
  }

  #view-orders .ord-col-sym,
  #view-orders .ord-col-price,
  #view-orders .ord-col-fill {
    min-width: 0 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  #view-history .table-scroller {
    overflow: visible !important;
  }

  #view-history .table-scroller table,
  #view-history tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  #view-history thead {
    display: none;
  }

  #historyBody>tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
  }

  #view-history #historyBody td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 13.44px;
  }

  #historyBody .hist-contract {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #historyBody .hist-contract .table-contract-row {
    flex-wrap: wrap;
  }

  #historyBody .hist-side {
    font-weight: 750;
    color: #334155;
  }

  #historyBody .hist-time {
    text-align: right;
    color: #64748b;
  }

  #historyBody .hist-price::before {
    content: 'Fill price';
  }

  #historyBody .hist-lots::before {
    content: 'Lots';
  }

  #historyBody .hist-gross::before {
    content: 'Trade value';
  }

  #historyBody .hist-fee::before {
    content: 'Fees';
  }

  #historyBody .hist-source::before {
    content: 'Market data';
  }

  #historyBody td::before {
    display: block;
    color: #64748b;
    font-size: 12.32px;
    font-weight: 500;
    margin-bottom: 3px;
  }

  #historyBody tr:has(.no-data) {
    display: block;
  }

  #historyBody .no-data {
    text-align: center;
    padding: 20px !important;
  }

  .mobile-more-dialog {
    margin: auto auto 10px;
    max-height: calc(var(--ui-viewport-height, 100dvh) - 20px);
  }
}

@media (max-width: 380px) {
  .open-pos-kpi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .open-pos-kpi-card {
    flex-direction: row !important;
    align-items: center !important;
  }

  .aom-header-actions {
    flex-shrink: 0;
  }

  #view-positions .panel-heading {
    flex-wrap: wrap !important;
  }

  .mcab-actions {
    gap: 6px;
  }

  #mobileChartActionBar .mcab-btn {
    min-width: 56px !important;
    padding: 8px !important;
  }
}

@media (max-height: 500px) and (max-width: 768px) {
  .angel-indices-ticker {
    display: none !important;
  }

  .angel-topbar {
    min-height: 44px !important;
  }

  #mobileChartActionBar {
    min-height: 56px;
    padding-block: 4px;
  }
}

@media (max-height: 500px) and (min-width: 769px) and (max-width: 1100px) {
  :root {
    --terminal-topbar-height: 42px;
  }

  .angel-topbar {
    height: 42px;
    min-height: 42px;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 8px;
  }

  .angel-topbar .angel-indices-ticker {
    display: none;
  }

  .angel-topbar .topbar-left {
    flex: 0 0 auto;
  }

  .angel-topbar .terminal-home-link,
  .angel-topbar .super-admin-btn {
    display: none !important;
  }

  .angel-topbar .angel-nav {
    order: initial;
    flex: 1 1 auto;
    width: auto;
    height: 42px;
    justify-content: center;
  }

  .angel-topbar .angel-nav .nav-link {
    padding-inline: 6px;
    font-size: 12.32px;
  }

  .angel-topbar .angel-top-actions {
    flex: 0 0 auto;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.quote-state {
  color: #64748b;
  font-size: 11.2px;
  white-space: nowrap;
}

.quote-state.live {
  color: #047857;
}

.quote-state::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 4px;
}

@media (max-width: 768px) {
  #superAdminBtn {
    display: none !important;
  }

  .angel-indices-ticker #tickerBankNifty {
    display: flex !important;
  }

  .angel-indices-ticker .angel-index-pill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .angel-indices-ticker .index-title {
    font-size: 11.2px !important;
  }

  .angel-indices-ticker .index-val {
    font-size: 13.44px !important;
  }

  .angel-indices-ticker .index-chg {
    font-size: 10.08px !important;
  }

  .mcab-sym-line strong {
    max-width: none !important;
  }

  #historyBody>tr {
    grid-template-areas: 'contract contract' 'side time' 'lots price' 'gross fee' 'source source';
  }

  #historyBody .hist-contract {
    grid-area: contract;
  }

  #historyBody .hist-side {
    grid-area: side;
  }

  #historyBody .hist-time {
    grid-area: time;
  }

  #historyBody .hist-lots {
    grid-area: lots;
  }

  #historyBody .hist-price {
    grid-area: price;
  }

  #historyBody .hist-gross {
    grid-area: gross;
  }

  #historyBody .hist-fee {
    grid-area: fee;
  }

  #historyBody .hist-source {
    grid-area: source;
  }
}

/* The chart gets the remaining viewport space rather than inheriting panel gaps. */
.hero-workspace {
  gap: 0;
}

@media (max-width: 768px) {
  #chartConsole {
    margin: 0 !important;
    border-radius: 0;
    border-inline: 0;
    box-shadow: none;
  }
}

@media (max-height: 500px) and (max-width: 768px) {
  :root {
    --ui-nav-height: 56px;
  }

  #mobileBottomNav .mob-nav-item {
    min-height: 48px;
  }
}

.chain-scroll-hint {
  display: none;
}

@media (max-width: 768px) {
  .chain-scroll-hint {
    display: block;
    flex-shrink: 0;
    margin: 0;
    padding: 6px 10px;
    color: #64748b;
    font-size: 12.32px;
    background: #f8fafc;
    border-block: 1px solid #e2e8f0;
  }

  .oc-act-btn {
    min-height: 40px;
    min-width: 40px;
    font-size: 14.56px;
  }

  .oc-index-btn,
  .oc-select,
  .oc-refresh-btn {
    min-height: 40px;
  }

  .oc-table .action-td {
    white-space: nowrap;
  }

  .admin-modal-header {
    padding: 12px;
    gap: 10px;
    align-items: flex-start;
  }

  .admin-modal-body {
    padding: 12px;
  }

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

  .admin-table-scroller {
    overflow: auto;
    max-height: min(420px, 55dvh);
  }

  .admin-users-table {
    min-width: 720px;
  }
}

@media (max-height: 500px) and (max-width: 768px) {
  .option-chain-console {
    overflow-y: auto;
  }

  .option-chain-console .oc-top-bar {
    flex-shrink: 0;
  }

  .option-chain-console .oc-table-wrap {
    min-height: 160px;
    flex-shrink: 0;
  }

  .oc-top-left {
    align-items: center;
  }
}

.chart-empty {
  z-index: 5;
  padding: 24px;
}

.chart-empty strong {
  font-size: 16.8px;
  color: #334155;
}

.chart-empty small {
  font-size: 13.44px;
  max-width: 320px;
  line-height: 1.6;
}

.history-heading-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.history-heading-actions .btn {
  min-height: 40px;
}

@media (max-width: 768px) {
  .history-heading-actions {
    width: 100%;
    justify-content: space-between;
  }

  .history-heading-actions .btn {
    min-height: 44px;
  }
}

/* Compact mobile type: keep neighbouring quotes and monetary digits separate. */
@media (max-width: 768px) {
  .angel-topbar .angel-indices-ticker {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto !important;
    min-height: 56px;
    padding: 5px 4px !important;
    gap: 0 !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .angel-topbar .angel-indices-ticker .angel-index-pill {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    box-sizing: border-box;
    padding: 0 4px !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
  }

  .angel-topbar .angel-indices-ticker .angel-index-pill+.angel-index-pill {
    border-left: 1px solid #e2e8f0 !important;
  }

  .angel-topbar .angel-index-pill .index-data-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    width: 100%;
    min-width: 0;
    align-items: center !important;
  }

  .angel-topbar .angel-index-pill .index-title {
    font-size: 10.08px !important;
    line-height: 1.3;
    letter-spacing: .02em;
  }

  .angel-topbar .angel-index-pill .index-val {
    font-size: 12.32px !important;
    line-height: 1.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .angel-topbar .angel-index-pill .index-chg {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 3px;
    max-width: 100%;
    font-size: 8.96px !important;
    line-height: 1.4;
    white-space: normal !important;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .index-change-amount,
  .index-change-percent {
    white-space: nowrap;
  }

  .portfolio-kpi-grid {
    gap: 8px !important;
    margin-bottom: 18px;
  }

  .portfolio-kpi-grid .port-kpi-card {
    display: block !important;
    position: relative;
    padding: 10px !important;
    min-width: 0 !important;
  }

  .portfolio-kpi-grid .port-kpi-meta {
    min-width: 0;
    width: 100%;
  }

  .portfolio-kpi-grid .port-kpi-icon-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px !important;
    height: 20px !important;
    border-radius: 5px;
  }

  .portfolio-kpi-grid .port-kpi-icon-wrap .material-symbols-outlined {
    font-size: 14.56px !important;
  }

  .portfolio-kpi-grid .port-kpi-title {
    padding-right: 22px;
    min-height: 20px;
    font-size: 11.2px !important;
    line-height: 1.35;
  }

  .portfolio-kpi-grid .port-kpi-val {
    display: block;
    font-size: clamp(11.76px, 3.2vw, 14.56px) !important;
    line-height: 1.5;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .money-amount {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .port-kpi-val .money-amount {
    display: block;
  }

  .port-kpi-val .money-percent {
    display: block;
    font-size: 11.2px;
    line-height: 1.4;
  }

  .port-section-title,
  .panel-heading h2 {
    font-size: 16.8px !important;
  }

  .port-empty-banner,
  .port-invest-label,
  .mtf-content strong {
    font-size: 12.32px !important;
    line-height: 1.55;
  }

  #view-orders .panel-heading,
  #view-history .panel-heading {
    padding: 6px 2px 10px !important;
    margin-bottom: 8px;
    gap: 6px !important;
  }

  #view-orders .panel-heading .smallcap,
  #view-history .panel-heading .smallcap {
    font-size: 10.08px;
  }

  #view-orders .order-filter-tabs {
    padding: 3px;
    gap: 3px !important;
  }

  #view-orders .order-filter-btn {
    min-height: 36px;
    padding: 5px 4px !important;
    font-size: 10.64px !important;
  }

  #view-orders .table-scroller tr {
    padding: 10px !important;
    gap: 8px !important;
  }

  #view-orders .table-contract-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
  }

  #view-orders .table-contract-title {
    font-size: 12.32px !important;
    min-width: 0;
    line-height: 1.5;
  }

  #view-orders .ord-col-side,
  #view-orders .ord-col-status {
    min-width: 0;
  }

  #view-orders .order-side-chip,
  #view-orders .order-status-chip {
    font-size: 10.08px;
    padding: 4px 7px;
  }

  #view-orders .ord-col-trigger,
  #view-orders .ord-col-time,
  #view-orders .ord-col-fill,
  #view-orders .ord-col-lots {
    font-size: 11.76px !important;
  }

  .angel-watch-title {
    font-size: 16.8px !important;
  }

  .watch-sym-name,
  .watch-ltp {
    font-size: 13.44px !important;
  }

  .watch-chg-right,
  .watch-exp-strike {
    font-size: 11.2px !important;
  }

  #view-positions .table-contract-title {
    font-size: 12.32px !important;
  }

  #view-positions .pos-col-pnl {
    font-size: 14.56px !important;
  }

  #view-positions .pos-col-qty,
  #view-positions .pos-col-avg,
  #view-positions .pos-col-inv,
  #view-positions .pos-col-mark {
    font-size: 11.76px !important;
  }

  .open-pos-kpi-card .kpi-val {
    font-size: 13.44px !important;
  }

  .open-pos-kpi-card .kpi-label,
  .open-pos-kpi-card .kpi-sub {
    font-size: 11.2px !important;
  }
}

@media (max-height: 500px) and (max-width: 768px) {
  .angel-topbar .angel-indices-ticker {
    display: none !important;
  }
}

/* Mobile header and action groups have explicit sizes, rather than inherited pills. */
@media (max-width: 768px) {
  .angel-topbar {
    display: grid !important;
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-rows: 48px auto;
    gap: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible;
  }

  .angel-topbar .topbar-left {
    display: contents !important;
  }

  .angel-topbar .brand-link {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 84px;
    height: 48px !important;
    padding: 0 !important;
    margin-left: 12px;
  }

  .angel-topbar .brand-link img {
    display: block;
    width: 84px !important;
    height: auto !important;
    max-width: 84px !important;
    aspect-ratio: 186 / 69;
    object-fit: contain;
    flex-shrink: 0;
  }

  .angel-topbar .angel-top-actions {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 48px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 10px 0 8px !important;
    box-sizing: border-box;
    justify-content: flex-end;
    flex-shrink: 1 !important;
  }

  .angel-topbar .angel-indices-ticker {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .angel-top-actions .user-pill-wrap {
    min-width: 0;
    max-width: 100%;
  }

  #userMenuBtn {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 10px;
    gap: 7px !important;
    align-items: center !important;
    width: auto;
    max-width: 100%;
    min-height: 38px;
    height: auto !important;
    padding: 4px 8px 4px 5px !important;
    box-sizing: border-box;
    border-radius: 8px !important;
    background: #f8fafc !important;
    text-align: left;
  }

  #headerUserAvatar {
    display: grid;
    place-items: center;
    width: 28px !important;
    height: 28px !important;
    line-height: 1;
    font-size: 11.2px !important;
    margin: 0;
    flex-shrink: 0;
  }

  #userMenuBtn .user-header-details {
    min-width: 0;
    gap: 2px;
    line-height: 1.25;
  }

  #headerUserName {
    display: block;
    max-width: none;
    min-width: 0;
    margin: 0;
    font-size: 12.32px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #headerUserMargin {
    display: block;
    font-size: 10.64px;
    line-height: 1.25;
    white-space: nowrap;
  }

  #userMenuBtn .user-header-chevron {
    margin: 0;
    font-size: 14.56px;
    text-align: center;
    line-height: 1;
  }

  .user-dropdown-info {
    min-width: 0;
  }

  .user-dropdown-name,
  .user-dropdown-email {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #miniPositions .mini-pos-row-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  #miniPositions .mini-title-row {
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px;
  }

  #miniPositions .mini-pos-symbol {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    font-size: 11.76px;
    line-height: 1.4;
  }

  #miniPositions .mini-pnl {
    font-size: 12.32px;
    line-height: 1.4;
  }

  #miniPositions .mini-pos-row-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #miniPositions .mini-desc {
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 11.2px;
    line-height: 1.5;
  }

  #miniPositions .mini-act-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 0;
  }

  #miniPositions .mini-act-row .row-btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    height: 38px;
    margin: 0;
    padding: 6px !important;
    box-sizing: border-box;
    font-size: 11.76px !important;
    font-weight: 650;
    line-height: 1.2;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
  }

  #view-positions .sl-action-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px !important;
  }

  #view-positions .sl-action-group .row-btn {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    height: 40px !important;
    margin: 0;
    padding: 6px 4px !important;
    box-sizing: border-box;
    font-size: 11.76px !important;
    line-height: 1.25;
    border-radius: 6px !important;
    box-shadow: none !important;
    transform: none;
  }

  #mobileChartActionBar .mcab-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 46%;
    max-width: 180px;
    flex: 0 0 auto;
    gap: 8px;
  }

  #mobileChartActionBar .mcab-btn {
    width: 100%;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0;
    padding: 8px !important;
    box-sizing: border-box;
    font-size: 12.88px !important;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 6px;
    border: 1px solid transparent;
    box-shadow: none;
    transform: none;
  }

  #mobileChartActionBar .mcab-info {
    min-width: 0;
  }
}

/* Keep the expanded desktop navigation and account controls inside the header. */
@media (min-width: 1101px) and (max-width: 1700px) {
  .angel-topbar {
    gap: 8px;
    padding: 0 12px;
  }

  .angel-topbar .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  .angel-topbar .angel-indices-ticker {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    padding-left: 8px;
  }

  .angel-topbar .angel-index-pill {
    min-width: 0;
  }

  .angel-topbar .index-top-row {
    gap: 2px;
  }

  .angel-topbar .index-title {
    font-size: 10.08px;
  }

  .angel-topbar .index-val {
    font-size: 11.2px;
  }

  .angel-topbar .index-chg {
    font-size: 8.96px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
  }

  .angel-topbar .angel-nav {
    margin: 0;
  }

  .angel-topbar .angel-nav .nav-link {
    padding: 0 9px;
    font-size: 13.44px;
  }

  .angel-topbar .angel-top-actions .clock {
    display: none;
  }
}

.aom-margin-note {
  display: block;
  margin-top: 4px;
  max-width: 240px;
  color: #64748b;
  font-size: 11.2px;
  line-height: 1.4;
}

.chart-history-notice {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 44px;
  z-index: 4;
  padding: 8px 10px;
  border: 1px solid #fde68a;
  border-radius: 6px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12.32px;
  line-height: 1.45;
  pointer-events: none;
}

.registration-otp-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.registration-otp-row input {
  flex: 1;
  min-width: 0;
}

.registration-otp-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  font-size: 13.44px;
  font-weight: 700;
  cursor: pointer;
}

.registration-otp-btn:disabled {
  opacity: .55;
  cursor: default;
}

.login-field .registration-phone-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.32px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 10px;
}

.login-field .registration-phone-consent input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 2px 0 0;
  padding: 0;
}

.registration-phone-status {
  font-size: 13.44px;
  line-height: 1.5;
  color: #047857;
  margin: 8px 0 0;
}

.registration-phone-status.is-error {
  color: #b91c1c;
}

/* Shared product navigation. */
.terminal-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #dfe8e2;
  border-radius: 7px;
  background: #f5faf6;
  color: #397258;
  text-decoration: none;
  font-size: 12.32px;
  font-weight: 600;
  white-space: nowrap
}

.terminal-home-link .material-symbols-outlined {
  font-size: 17.92px
}

.terminal-home-link:hover {
  background: #eaf4ec
}

.terminal-mobile-home {
  text-decoration: none
}

@media(max-width:768px) {
  .terminal-home-link {
    display: none !important
  }

  #mobileBottomNav .mob-nav-item {
    flex: 1 1 0;
    min-width: 0
  }

  #mobileBottomNav .mob-nav-label {
    font-size: 8.96px
  }
}

/* Shared workspace identity without reducing the chart's available height. */
.terminal-home-link {
  border: 1.12px solid #d6e6dc;
  border-radius: 8px;
  padding: 7px 11px;
  background: #f2f8f4;
  color: #25614b;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.terminal-home-link:hover {
  background: #e6f2ea;
  border-color: #9bc3ab;
}

.terminal-education-notice {
  padding: 7px 16px;
  background: #f2f7ef;
  color: #56654b;
  font: 12.32px/1.5 'DM Sans', system-ui, sans-serif;
  text-align: center;
  border-bottom: 1px solid #e0e9dd;
}

.terminal-education-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media(max-width:680px) {
  .terminal-home-link {
    min-height: 36px;
    padding: 6px 9px;
  }
}

.angel-topbar .brand-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.terminal-product-label {
  font: 600 8.96px/1.3 'DM Sans', system-ui, sans-serif;
  letter-spacing: 1.2px;
  color: #587363;
  white-space: nowrap;
}

.convert-pos-btn[hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  #miniPositions .mini-act-row:has(.convert-pos-btn:not([hidden])) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #view-positions .sl-action-group:has(.convert-pos-btn:not([hidden])) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #view-positions .sl-action-group:has(.share-position-btn) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #view-positions .sl-action-group .share-position-btn {
    grid-column: 1 / -1;
    white-space: normal !important;
    line-height: 1.1;
  }
}

/* Super Admin console: compact account rows, clear P&L, and reliable actions. */
.admin-table-scroller {
  overflow: auto;
  overscroll-behavior: contain;
}

.admin-users-table {
  min-width: 1280px;
}

.admin-users-table th:nth-child(8),
.admin-users-table td:nth-child(8) {
  width: 230px;
}

.admin-users-table th:last-child,
.admin-users-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 3;
  background: #fff;
  box-shadow: -8px 0 12px -12px rgba(15, 23, 42, .55);
}

.admin-users-table th:last-child {
  background: #f1f5f9;
  z-index: 4;
}

.admin-actions-group {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.admin-actions-group .admin-action-btn {
  min-height: 34px;
  padding: 6px 9px;
}

.admin-position-details {
  position: relative;
  display: inline-block;
}

.admin-position-details summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
  white-space: nowrap;
}

.admin-position-details summary::-webkit-details-marker {
  display: none;
}

.admin-position-details summary::after {
  content: '⌄';
  color: #64748b;
  font-size: 15.68px;
}

.admin-position-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #dbeafe;
}

.admin-position-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: min(520px, 70vw);
  max-height: 300px;
  overflow: auto;
  padding: 12px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
}

.admin-position-popover-title {
  margin-bottom: 8px;
  color: #64748b;
  font-size: 11.2px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-position-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  border-top: 1px solid #eef2f7;
}

.admin-position-item b {
  display: block;
  color: #0f172a;
  font-size: 13.44px;
}

.admin-position-item small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11.2px;
}

.admin-position-item strong {
  flex: 0 0 auto;
  font-size: 13.44px;
}

.admin-pnl-stack {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 7px;
  align-items: baseline;
  white-space: nowrap;
}

.admin-pnl-stack span {
  font-weight: 700;
}

.admin-pnl-stack small {
  color: #94a3b8;
  font-size: 10.08px;
  text-align: right;
}

.admin-no-position {
  color: #94a3b8;
  font-size: 12.32px;
}

.admin-live-indicator {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  color: #047857;
  font-size: 12.32px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-live-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px #d1fae5;
}

.admin-search-input {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-pnl-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  white-space: normal;
}

.admin-pnl-stack>div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.admin-pnl-stack small {
  color: #64748b;
  font-size: 11.2px;
  text-align: left;
  white-space: nowrap;
}

.admin-pnl-stack strong {
  font-size: 13.44px;
  text-align: right;
  white-space: nowrap;
}

.admin-position-item>strong {
  text-align: right;
}

.admin-position-item>strong small {
  color: #94a3b8;
  font-weight: 600;
  text-align: right;
}

.admin-position-details summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .25);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .admin-search-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .admin-live-indicator {
    width: 100%;
    justify-content: flex-end;
    padding: 2px 4px 0;
  }

  .admin-users-table {
    min-width: 1250px;
  }
}

.blocked-trading-screen[hidden] {
  display: none !important;
}

.blocked-trading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .76);
  backdrop-filter: blur(8px);
}

.blocked-trading-card {
  width: min(520px, 100%);
  padding: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28);
  text-align: center;
}

.blocked-trading-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: #fff1f2;
  color: #e11d48;
}

.blocked-trading-icon .material-symbols-outlined {
  font-size: 30px;
}

.blocked-trading-eyebrow {
  color: #64748b;
  font-size: 12.32px;
  font-weight: 800;
  letter-spacing: .14em;
}

.blocked-trading-card h1 {
  margin: 8px 0 10px;
  color: #0f172a;
  font-size: 25px;
  line-height: 1.2;
}

.blocked-trading-card p {
  margin: 0;
  color: #475569;
  font-size: 15.68px;
  line-height: 1.6;
}

.blocked-community-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 24px auto 20px;
  padding: 13px 18px;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 15.68px;
  font-weight: 700;
  text-decoration: none;
}

.blocked-community-link:hover {
  background: #1d4ed8;
}

.blocked-trading-card .blocked-help {
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  font-size: 13.44px;
}

.blocked-help a {
  color: #1d4ed8;
  font-weight: 700;
}

.share-position-control:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 7px;
}

@media (max-width: 768px) {
  #view-positions .share-position-control {
    grid-column: 1 / -1;
    width: 100%;
  }

  #view-positions .share-position-control .share-position-btn {
    width: 100%;
    white-space: normal !important;
    line-height: 1.15;
  }
}

@media (min-width: 769px) {
  #view-positions .table-scroller {
    overflow-x: hidden;
  }

  #view-positions .table-scroller table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  #view-positions .table-scroller th,
  #view-positions .table-scroller td {
    padding-right: 10px;
    padding-left: 10px;
  }

  #view-positions .table-scroller th:nth-child(1),
  #view-positions .table-scroller td:nth-child(1) {
    width: 25%;
  }

  #view-positions .table-scroller th:nth-child(2),
  #view-positions .table-scroller td:nth-child(2) {
    width: 9%;
  }

  #view-positions .table-scroller th:nth-child(3),
  #view-positions .table-scroller td:nth-child(3) {
    width: 8%;
  }

  #view-positions .table-scroller th:nth-child(4),
  #view-positions .table-scroller td:nth-child(4) {
    width: 7%;
  }

  #view-positions .table-scroller th:nth-child(5),
  #view-positions .table-scroller td:nth-child(5) {
    width: 11%;
  }

  #view-positions .table-scroller th:nth-child(6),
  #view-positions .table-scroller td:nth-child(6) {
    width: 10%;
  }

  #view-positions .table-scroller th:nth-child(7),
  #view-positions .table-scroller td:nth-child(7) {
    width: 10%;
  }

  #view-positions .table-scroller th:nth-child(8),
  #view-positions .table-scroller td:nth-child(8) {
    width: 20%;
  }

  #view-positions .sl-action-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 270px;
    gap: 5px;
    white-space: normal;
  }

  #view-positions .sl-action-group .row-btn {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 5px 4px;
    font-size: 11.2px;
    line-height: 1.15;
    white-space: normal;
  }

  #view-positions .share-position-control {
    grid-column: 1 / -1;
    width: 100%;
  }
}