:root {
  --bg: #0b1420;
  --app: #101d2b;
  --surface: #16283a;
  --surface-2: #1b3044;
  --surface-3: #23405a;
  --line: #35526d;
  --line-soft: rgba(115, 151, 184, .30);
  --text: #f6f9fc;
  --muted: #b0c1d1;
  --muted-2: #859db4;
  --green: #2bd6a3;
  --green-soft: rgba(43, 214, 163, .10);
  --red: #ff6679;
  --red-soft: rgba(255, 102, 121, .10);
  --amber: #f3b85a;
  --amber-soft: rgba(243, 184, 90, .10);
  --blue: #6aa7ff;
  --blue-soft: rgba(106, 167, 255, .10);
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 13px;
  --radius-sm: 10px;
  --shadow: 0 12px 30px rgba(0,0,0,.14);
  --max-app: 480px;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; min-width: 0; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -12%, rgba(43,214,163,.08), transparent 32%),
    var(--bg);
}
button, select, input { font: inherit; }
button, select, input, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid rgba(106,167,255,.7);
  outline-offset: 2px;
}

/* Mobile-only shell. The application never expands into a desktop dashboard. */
.app-shell {
  width: min(100%, var(--max-app));
  min-height: 100vh;
  margin: 0 auto;
  background: var(--app);
  box-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 0 80px rgba(0,0,0,.28);
}
.side-nav { display: none !important; }
.page-shell { width: 100%; min-height: 100vh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  border-bottom: 1px solid rgba(64,95,123,.28);
  background: rgba(16,29,43,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar-owner {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-owner span { display: none; }
.owner-photo-small {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(43,214,163,.52);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 3px rgba(43,214,163,.05);
}
.topbar-title { grid-column: 2; grid-row: 1; min-width: 0; }
.topbar-title .eyebrow {
  margin: 0 0 2px;
  overflow: hidden;
  color: var(--muted-2);
  font-size: .63rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar-title h1 {
  margin: 0;
  overflow: hidden;
  font-size: 1.02rem;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.live-button {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(27,48,68,.94);
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(43,214,163,.09); }
.status-dot.muted { background: var(--muted-2); box-shadow: none; }
.status-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(243,184,90,.08); }
.status-dot.bad { background: var(--red); box-shadow: 0 0 0 3px rgba(255,102,121,.08); }
.live-details {
  position: absolute;
  top: calc(100% + 6px);
  right: 10px;
  left: 10px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(22,40,58,.98);
  box-shadow: var(--shadow);
}
.live-detail-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .73rem;
}
.live-detail-line:last-child { border-bottom: 0; }
.live-detail-line span { color: var(--muted); text-align: left; }

.content {
  width: 100%;
  padding: 14px 11px calc(82px + env(safe-area-inset-bottom));
}
.app-view { display: none; }
.app-view.active { display: block; animation: viewIn .16s ease-out; }
@keyframes viewIn { from { opacity: .7; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 1px 12px;
}
.page-heading > div { min-width: 0; }
.page-heading .eyebrow { margin: 0 0 3px; color: var(--muted-2); font-size: .66rem; }
.page-heading h2 { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.page-heading time, time { color: var(--muted-2); font-size: .64rem; }
.section-block { margin-top: 18px; }
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 8px;
}
.section-title-row h3 { margin: 0; font-size: .88rem; }
.text-button {
  min-height: 34px;
  padding: 0 2px;
  border: 0;
  color: var(--blue);
  background: transparent;
  font-size: .69rem;
  font-weight: 700;
  cursor: pointer;
}

/* Cards */
.summary-card,
.engine-card,
.engine-panel,
.position-card,
.candidate-card,
.compact-row,
.alert-item,
.empty-state,
.risk-card,
.system-card,
.official-card,
.mobile-owner-card,
.more-menu button {
  border: 1px solid rgba(46,76,103,.72);
  background: linear-gradient(180deg, rgba(28,49,69,.99), rgba(20,37,53,.99));
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
.summary-card {
  position: relative;
  min-height: 92px;
  padding: 11px 11px 10px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.summary-card::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 0;
  left: 11px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(106,167,255,.20), transparent);
}
.summary-card small { display: block; color: var(--muted); font-size: .64rem; }
.summary-card strong {
  display: block;
  margin-top: 7px;
  font-size: 1.15rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.summary-card span { display: block; margin-top: 6px; color: var(--muted-2); font-size: .60rem; line-height: 1.35; }

.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.warning { color: var(--amber) !important; }
.neutral { color: var(--text) !important; }

.engine-summary-grid,
.engine-layout,
.home-columns,
.position-list,
.risk-grid,
.official-list,
.candidate-list,
.compact-list,
.alert-list,
.more-menu { display: grid; grid-template-columns: 1fr; gap: 8px; }

.engine-card,
.engine-panel { border-radius: var(--radius-lg); }
.engine-card { padding: 12px; }
.engine-card-head,
.engine-panel-head,
.position-head,
.candidate-head,
.market-head,
.official-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.engine-card small,
.engine-panel-head small { display: block; color: var(--muted-2); font-size: .61rem; }
.engine-card strong { display: block; margin-top: 3px; font-size: .88rem; }
.engine-line {
  display: flex;
  gap: 7px 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: .64rem;
  flex-wrap: wrap;
}
.engine-panel { padding: 12px; }
.engine-panel-head { padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.engine-panel h3 { margin: 2px 0 0; font-size: .90rem; }

.status-badge,
.count-badge,
.side-badge,
.state-badge,
.official-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(29,49,68,.58);
  font-size: .61rem;
  font-weight: 900;
  white-space: nowrap;
}
.status-badge.success, .state-badge.success, .side-badge.long { color: var(--green); border-color: rgba(43,214,163,.34); background: var(--green-soft); }
.status-badge.danger, .state-badge.danger, .side-badge.short { color: var(--red); border-color: rgba(255,102,121,.34); background: var(--red-soft); }
.status-badge.warn, .state-badge.warn { color: var(--amber); border-color: rgba(243,184,90,.34); background: var(--amber-soft); }
.status-badge.info, .state-badge.info, .official-grade { color: var(--blue); border-color: rgba(106,167,255,.32); background: var(--blue-soft); }

.engine-meta {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
  margin: 10px 0 12px;
}
.metric {
  min-height: 58px;
  padding: 8px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(48,76,102,.68);
}
.metric small { display: block; color: var(--muted-2); font-size: .58rem; }
.metric strong { display: block; margin-top: 4px; font-size: .76rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.table-title { margin: 3px 1px 7px; color: var(--muted); font-size: .65rem; font-weight: 700; }

.quote-list { display: grid; gap: 6px; }
.quote-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(86px,auto);
  grid-template-areas: "symbol bid" "symbol ask";
  gap: 2px 8px;
  align-items: center;
  min-height: 57px;
  padding: 8px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(6,17,29,.46);
}
.quote-row > div:first-child { grid-area: symbol; }
.quote-row .quote-price:nth-child(2) { grid-area: bid; }
.quote-row .quote-price:nth-child(3) { grid-area: ask; }
.quote-row small { display: block; margin-top: 3px; color: var(--muted-2); font-size: .56rem; }
.quote-price { direction: ltr; color: var(--muted); font-size: .64rem; font-weight: 700; text-align: left; font-variant-numeric: tabular-nums; }

.compact-row {
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 7px 10px;
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 13px;
}
.compact-identity, .candidate-identity { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.compact-side, .candidate-side { color: var(--muted); font-size: .65rem; font-weight: 800; }
.compact-sub { margin-top: 4px; color: var(--muted-2); font-size: .58rem; }
.compact-value { direction: ltr; text-align: left; font-size: .88rem; font-weight: 900; font-variant-numeric: tabular-nums; }

.status-strip {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  margin: 10px 0;
}
.status-cell {
  min-height: 55px;
  padding: 8px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: rgba(43,69,94,.58);
  text-align: center;
}
.status-cell span { display: block; color: var(--muted-2); font-size: .56rem; }
.status-cell strong { display: block; margin-top: 5px; font-size: .88rem; }

.candidate-card {
  padding: 10px;
  border-radius: 13px;
  background: rgba(20,38,56,.98);
}
.candidate-head strong { font-size: .80rem; }
.candidate-meta {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0;
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.candidate-meta > div { min-height: 48px; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); }
.candidate-meta > div:nth-child(odd) { border-left: 1px solid var(--line-soft); }
.candidate-meta > div:nth-last-child(-n+2) { border-bottom: 0; }
.candidate-meta small { display: block; color: var(--muted-2); font-size: .56rem; }
.candidate-meta strong { display: block; margin-top: 3px; font-size: .72rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.candidate-reason { margin: 8px 1px 0; color: var(--muted); font-size: .64rem; line-height: 1.55; }

/* Official trades */
.official-heading { align-items: center; }
.official-disclaimer {
  position: relative;
  margin: -1px 0 10px;
  padding: 10px 11px 10px 34px;
  border: 1px solid rgba(106,167,255,.20);
  border-radius: 13px;
  color: var(--muted);
  background: rgba(106,167,255,.05);
  font-size: .63rem;
  line-height: 1.55;
}
.official-disclaimer::before {
  content: "i";
  position: absolute;
  left: 11px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(106,167,255,.34);
  border-radius: 50%;
  color: var(--blue);
  font-size: .58rem;
  font-weight: 900;
}
.official-toolbar { margin-bottom: 10px; }
.official-card {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #1a3045, #13263a);
}
.official-long { box-shadow: inset -2px 0 0 rgba(43,214,163,.82); }
.official-short { box-shadow: inset -2px 0 0 rgba(255,102,121,.82); }
.official-card-head { padding: 10px 11px 8px; }
.official-identity { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.official-symbol { font-size: .94rem; direction: ltr; }
.official-setup-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(43,69,94,.48);
}
.official-setup-title strong { font-size: .75rem; }
.official-setup-title span { color: var(--muted); font-size: .58rem; text-align: left; }
.official-primary-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0;
  margin: 8px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
}
.official-primary-grid .metric { min-height: 56px; border: 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); background: rgba(29,49,68,.62); }
.official-primary-grid .metric:nth-child(odd) { border-left: 1px solid var(--line-soft); }
.official-primary-grid .metric:nth-last-child(-n+2) { border-bottom: 0; }
.official-checks { display: grid; gap: 5px; padding: 0 8px 8px; }
.official-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 43px;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(29,49,68,.62);
}
.official-check strong { display: block; font-size: .65rem; }
.official-check small { display: block; margin-top: 2px; color: var(--muted-2); font-size: .54rem; }
.official-check-mark { min-width: 54px; text-align: left; font-size: .57rem; font-weight: 900; }
.official-check.passed .official-check-mark { color: var(--green); }
.official-check.failed .official-check-mark { color: var(--muted-2); }
.official-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--line-soft);
}
.official-foot-meta { display: flex; gap: 5px 9px; flex-wrap: wrap; color: var(--muted-2); font-size: .55rem; }

/* Forms / filters */
.filter-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
  margin-bottom: 11px;
}
.filter-row label { display: grid; gap: 4px; }
.filter-row label > span { color: var(--muted-2); font-size: .57rem; }
.filter-row select {
  width: 100%;
  min-height: 41px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface);
  font-size: .68rem;
  font-weight: 700;
}

/* Position board */
.positions-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: start;
  gap: 9px;
}
.positions-heading .segmented { width: 100%; }
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(18,34,49,.84);
}
.segmented button {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: .70rem;
  font-weight: 800;
  cursor: pointer;
}
.segmented button.active { color: var(--text); background: var(--surface-3); box-shadow: inset 0 0 0 1px rgba(106,167,255,.10); }
.position-toolbar { margin-top: 0; }
.positions-view > .list-heading { display: none; }
.live-position-board { display: grid; gap: 8px; }
.desktop-position-lanes { display: none !important; }
.mobile-trade-overview {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}
.trade-overview-card {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 75px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(28,49,69,.99), rgba(20,37,53,.99));
  text-align: right;
  cursor: pointer;
}
.trade-overview-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 2px; }
.trade-overview-winner::before { background: var(--green); }
.trade-overview-loser::before { background: var(--red); }
.trade-overview-label { color: var(--muted); font-size: .60rem; font-weight: 800; }
.trade-overview-card strong { direction: ltr; justify-self: start; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.trade-overview-card small { color: var(--muted-2); font-size: .56rem; }
.mobile-position-feed { display: grid; gap: 8px; }

.position-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 17px;
  background: linear-gradient(180deg, #1a2f43 0%, #13263a 100%);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
.position-card.position-long { box-shadow: inset -2px 0 0 rgba(43,214,163,.90), 0 8px 22px rgba(0,0,0,.12); }
.position-card.position-short { box-shadow: inset -2px 0 0 rgba(255,102,121,.90), 0 8px 22px rgba(0,0,0,.12); }
.position-head { min-height: 48px; padding: 9px 10px 5px; }
.position-head .symbol-wrap { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.position-rank {
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(29,49,68,.72);
  font-size: .58rem;
  font-weight: 900;
}
.position-symbol { font-size: .96rem !important; line-height: 1; letter-spacing: .01em; }
.position-live-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.position-source { color: var(--muted-2); font-size: .56rem; white-space: nowrap; }
.position-velocity { color: var(--muted); font-size: .55rem; white-space: nowrap; }
.live-mini-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--green); }
.position-pnl-main {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(82px,.55fr);
  align-items: end;
  gap: 3px 9px;
  padding: 4px 10px 10px;
}
.position-pnl-main > small { grid-column: 1/-1; color: var(--muted-2); font-size: .56rem; }
.copy-value {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: copy;
  text-align: right;
}
.copy-value strong { font-size: .75rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.copy-value:active { opacity: .68; }
.copy-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 30px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid rgba(124,174,255,.32);
  border-radius: 7px;
  color: #b9d2ee;
  background: rgba(69,104,137,.38);
  font-size: .48rem;
  font-weight: 900;
}
.position-pnl-main .copy-value:first-of-type strong { font-size: 1.43rem; line-height: 1.05; }
.position-pnl-main .copy-value:last-of-type { justify-content: flex-end; }
.position-pnl-main .copy-value:last-of-type strong { padding: 4px 7px; border-radius: 8px; background: rgba(255,255,255,.035); font-size: .73rem; }
.position-primary-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin: 0 8px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(43,69,94,.42);
}
.position-metric {
  min-height: 55px;
  padding: 7px 7px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.position-primary-grid .position-metric:not(:nth-child(3n)) { border-left: 1px solid var(--line-soft); }
.position-primary-grid .position-metric:nth-last-child(-n+3) { border-bottom: 0; }
.position-metric small { display: block; margin-bottom: 2px; color: var(--muted-2); font-size: .53rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.position-metric .copy-value { min-height: 22px; }
.position-metric .copy-value strong { font-size: .67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.position-expanded {
  display: none;
  margin: 8px 8px 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(14,29,43,.58);
}
.position-card.expanded .position-expanded { display: block; }
.position-secondary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-bottom: 1px solid var(--line-soft); }
.position-secondary-grid .position-metric { min-height: 53px; }
.position-secondary-grid .position-metric:nth-child(odd) { border-left: 1px solid var(--line-soft); }
.position-intelligence { display: grid; }
.intelligence-cell { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
.intelligence-cell:last-child { border-bottom: 0; }
.intelligence-cell small { color: var(--muted-2); font-size: .55rem; }
.intelligence-cell strong { display: block; margin-top: 4px; font-size: .69rem; }
.intelligence-cell p { margin: 5px 0 0; color: var(--muted); font-size: .65rem; line-height: 1.55; }
.position-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
}
.secondary-button {
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: rgba(43,69,94,.58);
  font-size: .65rem;
  font-weight: 800;
  cursor: pointer;
}
.position-actions .secondary-button { width: 100%; min-height: 37px; }

/* Risk */
.risk-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.risk-card { min-height: 78px; padding: 10px; border-radius: 14px; }
.risk-card small { display: block; color: var(--muted-2); font-size: .58rem; }
.risk-card strong { display: block; margin-top: 7px; font-size: .93rem; }
.risk-engines { margin-top: 9px; }
.detail-list { display: grid; gap: 0; }
.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 39px;
  padding: 7px 1px;
  border-bottom: 1px solid var(--line-soft);
  font-size: .66rem;
}
.detail-row:last-child { border-bottom: 0; }
.detail-row span { color: var(--muted); }
.detail-row strong { max-width: 58%; text-align: left; font-size: .68rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Alerts */
.alert-list { list-style: none; padding: 0; margin: 0; }
.alert-item {
  grid-template-columns: minmax(0,1fr) auto;
  gap: 5px 8px;
  padding: 10px;
  border-radius: 13px;
}
.alert-item strong { font-size: .73rem; }
.alert-item p { margin: 4px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.5; }
.alert-item time { align-self: start; font-size: .55rem; }

/* More + owner */
.owner-panel { display: none !important; }
.mobile-owner-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 11px;
  border-radius: 14px;
}
.owner-photo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(43,214,163,.52);
  background: var(--surface-2);
}
.mobile-owner-card strong, .mobile-owner-card span { display: block; }
.mobile-owner-card strong { font-size: .82rem; }
.mobile-owner-card span { margin-top: 3px; color: var(--muted-2); font-size: .59rem; }
.more-menu button {
  position: relative;
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 64px;
  padding: 11px 13px 11px 38px;
  border-radius: 14px;
  color: var(--text);
  text-align: right;
  cursor: pointer;
}
.more-menu button::after {
  content: "‹";
  position: absolute;
  left: 14px;
  top: 50%;
  color: var(--muted-2);
  font-size: 1.2rem;
  transform: translateY(-50%);
}
.more-menu button strong { font-size: .75rem; }
.more-menu button span { color: var(--muted-2); font-size: .59rem; line-height: 1.4; }
.logout-button { border-color: rgba(255,102,121,.25) !important; }
.logout-button strong { color: var(--red); }

.system-details { margin-top: 9px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.empty-state { padding: 16px 11px; border-radius: 13px; color: var(--muted); text-align: center; font-size: .67rem; line-height: 1.5; }

/* Copyable market symbols */
.symbol-copy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 900;
  cursor: copy;
  text-align: inherit;
}
.symbol-copy strong { direction: ltr; font: inherit; font-weight: 900; }
.symbol-copy-mark {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(106,167,255,.22);
  border-radius: 6px;
  color: #7891aa;
  background: rgba(48,76,102,.68);
  font-size: .47rem;
  font-weight: 800;
}
.symbol-copy:active { opacity: .65; }
.quote-symbol-copy { font-size: .76rem; }

/* Bottom navigation: native mobile style */
.bottom-nav {
  position: fixed;
  z-index: 50;
  right: 50%;
  bottom: 0;
  width: min(100%, var(--max-app));
  transform: translateX(50%);
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 1px;
  min-height: 66px;
  padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(64,95,123,.32);
  background: rgba(13,27,41,.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 -10px 26px rgba(0,0,0,.18);
}
.bottom-nav button {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 3px 2px;
  border: 0;
  border-radius: 12px;
  color: #6e849a;
  background: transparent;
  font-size: .57rem;
  font-weight: 800;
  cursor: pointer;
}
.bottom-nav button.active { color: var(--text); background: rgba(43,214,163,.05); }
.bottom-nav button.active::before {
  content: "";
  position: absolute;
  top: 1px;
  width: 23px;
  height: 2px;
  border-radius: 999px;
  background: var(--green);
}
.nav-icon { display: grid; place-items: center; width: 20px; height: 20px; }
.nav-icon svg { width: 19px; height: 19px; stroke: currentColor; }

.toast-region {
  position: fixed;
  z-index: 70;
  right: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom));
  width: min(calc(100% - 22px), 458px);
  transform: translateX(50%);
  display: grid;
  gap: 6px;
  pointer-events: none;
}
.toast {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(13,29,45,.98);
  box-shadow: var(--shadow);
  font-size: .68rem;
}

/* Login: phone-first and consistent with the app */
.login-body { min-height: 100vh; background: var(--bg); }
.login-page {
  width: min(100%, var(--max-app));
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: calc(20px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 5%, rgba(43,214,163,.10), transparent 30%),
    var(--app);
}
.login-card {
  width: 100%;
  padding: 22px 15px 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(13,29,45,.98), rgba(8,21,34,.98));
  box-shadow: var(--shadow);
}
.login-owner-photo { display: block; width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(43,214,163,.52); background: var(--surface-2); }
.login-owner-name { text-align: center; font-size: 1.05rem; font-weight: 900; }
.login-owner-role { margin: 3px 0 12px; text-align: center; color: var(--muted); font-size: .68rem; }
.login-brand { text-align: center; font-size: 1.28rem; font-weight: 900; letter-spacing: .06em; }
.login-mode { margin: 4px 0 0; text-align: center; color: var(--muted); font-size: .66rem; }
.login-divider { height: 1px; margin: 17px 0; background: var(--line-soft); }
.login-card h1 { margin: 0; text-align: center; font-size: 1.05rem; }
.login-help { margin: 7px auto 15px; max-width: 320px; text-align: center; color: var(--muted); font-size: .63rem; line-height: 1.55; }
.login-form { display: grid; gap: 10px; }
.login-form label { display: grid; gap: 5px; color: var(--muted); font-size: .64rem; }
.login-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: rgba(18,34,49,.84);
  font-size: 16px;
}
.password-field { position: relative; }
.password-field input { padding-left: 68px; }
.password-toggle { position: absolute; left: 5px; top: 5px; bottom: 5px; min-width: 56px; border: 0; border-radius: 8px; color: var(--muted); background: var(--surface-3); font-size: .64rem; cursor: pointer; }
.login-submit { min-height: 49px; margin-top: 2px; border: 0; border-radius: 11px; color: #03120d; background: var(--green); font-weight: 900; cursor: pointer; }
.login-submit:disabled { opacity: .55; cursor: wait; }
.login-message { min-height: 18px; margin: 0; text-align: center; color: var(--muted); font-size: .64rem; }
.login-message.error { color: var(--red); }
.login-message.success { color: var(--green); }
.login-message.warning { color: var(--amber); }
.login-security { margin: 15px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); text-align: center; color: var(--muted-2); font-size: .55rem; line-height: 1.55; }

/* Small phones */
@media (max-width: 360px) {
  :root { font-size: 15px; }
  .content { padding-right: 8px; padding-left: 8px; }
  .topbar { padding-right: 9px; padding-left: 9px; }
  .summary-grid, .risk-grid { gap: 6px; }
  .summary-card { padding-right: 9px; padding-left: 9px; }
  .position-primary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .position-primary-grid .position-metric { border-left: 0 !important; border-bottom: 1px solid var(--line-soft) !important; }
  .position-primary-grid .position-metric:nth-child(odd) { border-left: 1px solid var(--line-soft) !important; }
  .position-primary-grid .position-metric:nth-last-child(-n+2) { border-bottom: 0 !important; }
}

/* Larger displays intentionally stay mobile-only. */
@media (min-width: 481px) {
  body { padding: 0 12px; }
  .app-shell, .login-page { border-right: 1px solid rgba(72,101,128,.18); border-left: 1px solid rgba(72,101,128,.18); }
}


/* Binance full futures universe — mobile first */
.binance-universe-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin:12px 0 8px;
}
.binance-universe-head strong { display:block; font-size:.76rem; }
.binance-universe-head small { display:block; margin-top:3px; color:var(--muted-2); font-size:.56rem; line-height:1.45; }
.binance-market-toolbar {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:7px;
  margin-bottom:8px;
}
.binance-market-toolbar label { display:grid; gap:4px; }
.binance-market-toolbar label > span { color:var(--muted-2); font-size:.55rem; }
.binance-market-toolbar input,
.binance-market-toolbar select {
  width:100%;
  min-width:0;
  height:38px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:11px;
  outline:none;
  color:var(--text);
  background:rgba(6,17,29,.72);
  font:inherit;
  font-size:.66rem;
}
.binance-market-toolbar input:focus,
.binance-market-toolbar select:focus { border-color:rgba(43,214,163,.55); box-shadow:0 0 0 2px rgba(43,214,163,.08); }
.binance-universe-list { gap:5px; }
.binance-market-row {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  grid-template-areas:"identity change" "prices prices";
  gap:7px 8px;
  padding:9px;
  min-height:78px;
  border:1px solid var(--line-soft);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(8,24,39,.96),rgba(6,18,30,.96));
}
.binance-market-identity { grid-area:identity; display:flex; align-items:center; min-width:0; gap:8px; }
.binance-coin-icon-wrap {
  position:relative;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.binance-coin-icon { width:100%; height:100%; object-fit:cover; display:block; }
.binance-coin-fallback {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--text);
  background:linear-gradient(145deg,rgba(43,214,163,.12),rgba(106,167,255,.10));
  font-size:.58rem;
  font-weight:950;
  letter-spacing:-.02em;
}
.binance-market-symbol { min-width:0; }
.binance-market-symbol .symbol-copy { justify-content:flex-start; max-width:100%; }
.binance-market-symbol .symbol-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.binance-market-symbol small { display:block; margin-top:2px; color:var(--muted-2); font-size:.53rem; direction:ltr; text-align:right; }
.binance-change { grid-area:change; align-self:center; justify-self:end; text-align:left; direction:ltr; }
.binance-change strong { display:block; font-size:.78rem; font-variant-numeric:tabular-nums; }
.binance-change small { display:block; margin-top:3px; color:var(--muted-2); font-size:.50rem; }
.binance-market-prices {
  grid-area:prices;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
  border:1px solid rgba(46,76,103,.45);
  border-radius:9px;
}
.binance-price-cell { min-width:0; padding:6px 7px; border-inline-start:1px solid rgba(46,76,103,.40); }
.binance-price-cell:first-child { border-inline-start:0; }
.binance-price-cell small { display:block; color:var(--muted-2); font-size:.48rem; }
.binance-price-cell strong { display:block; margin-top:2px; direction:ltr; text-align:right; font-size:.62rem; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; }
.binance-live-dot { display:inline-block; width:5px; height:5px; margin-inline-start:4px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(43,214,163,.08); vertical-align:middle; }
.binance-market-row.is-waiting .binance-live-dot { background:var(--amber); box-shadow:none; }
@media (max-width:380px) {
  .binance-market-toolbar { grid-template-columns:1fr; }
  .binance-market-prices { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .binance-price-cell.mark { display:none; }
}


/* R7.3 mobile visual polish */
.topbar {
  grid-template-columns: 42px minmax(0,1fr) auto 38px;
  border-bottom-color: rgba(119,153,184,.32);
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
}
.topbar-owner { grid-column: 1; }
.topbar-title { grid-column: 2; }
.live-button { grid-column: 3; }
.back-button {
  grid-column: 4;
  grid-row: 1;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: #eaf3fb;
  background: var(--surface-2);
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}
.back-button[hidden] { display: none !important; }
.back-button:active { transform: translateX(-1px); opacity: .76; }

.summary-card, .engine-panel, .official-card, .position-lane, .risk-card, .alert-item, .system-details, .more-menu button {
  box-shadow: 0 5px 18px rgba(0,0,0,.08);
}
.copy-value { gap: 7px; }
.position-metric .copy-value { min-height: 26px; }
.position-metric .copy-value strong { flex: 1 1 auto; }
.intelligence-copy-long .copy-value { align-items: flex-start; min-height: 34px; padding-top: 4px; }
.intelligence-copy-long .copy-value strong {
  flex: 1 1 auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.55;
  font-size: .64rem;
}
.intelligence-cell .copy-mark { margin-top: 1px; }
.binance-coin-fallback { color: #dce9f5; background: linear-gradient(145deg, rgba(43,214,163,.20), rgba(106,167,255,.20)); }
.binance-market-row { border-color: rgba(112,150,185,.34); }
.copy-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 6px;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  cursor: copy;
  font: inherit;
  font-size: .56rem;
  font-weight: 850;
}
.copy-chip-mark {
  opacity: .72;
  padding-inline-start: 4px;
  border-inline-start: 1px solid currentColor;
  font-size: .43rem;
  font-weight: 800;
}
.position-source.copy-chip {
  color: var(--muted);
  border-color: rgba(116,151,184,.25);
  background: rgba(57,84,108,.28);
}

/* ========================================================================== */
/* BOT QADI R8 — premium mobile visual identity (reference-driven)            */
/* ========================================================================== */
:root {
  --bg: #eef1ef;
  --app: #f8f9f7;
  --surface: #ffffff;
  --surface-2: #f3f5f4;
  --surface-3: #e9eeeb;
  --line: #d6ddd9;
  --line-soft: rgba(10, 35, 59, .10);
  --text: #092139;
  --muted: #667384;
  --muted-2: #8b96a2;
  --green: #08a979;
  --green-soft: rgba(8, 169, 121, .11);
  --red: #ef444d;
  --red-soft: rgba(239, 68, 77, .10);
  --amber: #d7a13a;
  --amber-soft: rgba(215, 161, 58, .12);
  --blue: #0c5e91;
  --blue-soft: rgba(12, 94, 145, .09);
  --navy: #08243a;
  --navy-2: #0b3856;
  --navy-3: #103f5f;
  --gold: #d8a33f;
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 15px;
  --radius-sm: 11px;
  --shadow: 0 12px 28px rgba(22, 42, 56, .08);
  --shadow-soft: 0 5px 16px rgba(22, 42, 56, .055);
  --max-app: 430px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #050f18;
  --app: #091724;
  --surface: #102333;
  --surface-2: #142a3c;
  --surface-3: #193247;
  --line: #294358;
  --line-soft: rgba(183, 204, 220, .13);
  --text: #f6f8fa;
  --muted: #b1bdc7;
  --muted-2: #8495a4;
  --green: #18c791;
  --green-soft: rgba(24, 199, 145, .11);
  --red: #ff5e67;
  --red-soft: rgba(255, 94, 103, .11);
  --amber: #e2ac45;
  --amber-soft: rgba(226, 172, 69, .11);
  --blue: #72b9ed;
  --blue-soft: rgba(114, 185, 237, .10);
  --navy: #061a2b;
  --navy-2: #0a304d;
  --navy-3: #11405f;
  --gold: #e0ad49;
  --shadow: 0 14px 32px rgba(0, 0, 0, .24);
  --shadow-soft: 0 5px 16px rgba(0, 0, 0, .18);
  color-scheme: dark;
}

html { background: var(--bg); }
body {
  color: var(--text);
  background: var(--bg);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
body::before { display: none !important; }

.app-shell {
  width: min(100%, var(--max-app));
  min-height: 100vh;
  margin: 0 auto;
  background: var(--app);
  box-shadow: 0 0 0 1px rgba(10,35,59,.04), 0 0 60px rgba(10,35,59,.06);
}

/* App header — same hierarchy as the supplied reference screens. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  direction: ltr;
  grid-template-columns: auto auto minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 88px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  border: 0;
  background: color-mix(in srgb, var(--app) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.topbar::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 0;
  height: 1px;
  background: var(--line-soft);
}
.topbar-owner {
  grid-column: 4;
  direction: rtl;
  display: flex;
  align-items: center;
  justify-content: center;
}
.owner-photo-small {
  width: 54px;
  height: 54px;
  border: 2px solid var(--gold);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--surface) 90%, transparent), 0 4px 13px rgba(0,0,0,.08);
}
.topbar-title {
  grid-column: 3;
  direction: rtl;
  align-self: center;
}
.topbar-title .eyebrow {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: .71rem;
  font-weight: 650;
}
.topbar-title h1 {
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.live-button {
  grid-column: 2;
  direction: rtl;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: .76rem;
  font-weight: 800;
}
.back-button {
  grid-column: 1;
  position: static;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: 1.45rem;
  font-weight: 500;
}
.back-button:hover { background: var(--surface-2); }
.live-details {
  top: calc(100% + 4px);
  right: 14px;
  left: 14px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.status-dot { width: 8px; height: 8px; box-shadow: none; }

.content {
  padding: 14px 15px calc(96px + env(safe-area-inset-bottom));
}
.app-view > .page-heading:not(.positions-heading) { display: none; }
.positions-heading {
  margin: 2px 0 14px;
}
.positions-heading > div:first-child { display: none; }
.positions-heading .segmented { width: 100%; }

/* Common section typography */
.section-block { margin-top: 24px; }
.section-title-row { margin: 0 1px 12px; }
.section-title-row h3,
.list-heading h3 {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 900;
}
.text-button {
  color: var(--green);
  font-size: .75rem;
  font-weight: 800;
}

/* Home hero */
.summary-grid {
  display: block;
}
.account-hero-card {
  position: relative;
  overflow: hidden;
  min-height: 248px;
  padding: 22px 20px 24px;
  border-radius: 31px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(36,127,176,.25), transparent 34%),
    radial-gradient(circle at 17% 92%, rgba(0,197,143,.08), transparent 36%),
    linear-gradient(135deg, #071d30 0%, #082b45 58%, #062137 100%);
  box-shadow: 0 18px 35px rgba(7, 31, 50, .16);
}
.account-hero-card::before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  inset: -120px -70px auto auto;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(255,255,255,.018), 0 0 0 78px rgba(255,255,255,.012);
}
.account-hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 19px;
}
.account-hero-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #e6b451;
  font-size: .86rem;
}
.account-hero-label strong { font-size: .86rem; }
.vip-crown { color: #e9b04a; font-size: 1.24rem; line-height: 1; }
.account-equity small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255,255,255,.68);
  font-size: .86rem;
}
.account-equity strong {
  display: block;
  direction: ltr;
  text-align: right;
  color: #fff;
  font-size: 2.45rem;
  line-height: 1.1;
  letter-spacing: .02em;
}
.account-hero-bottom {
  position: absolute;
  z-index: 1;
  inset: auto 20px 24px 20px;
  display: grid;
  grid-template-columns: 1fr .72fr 1.1fr;
  align-items: center;
  min-height: 77px;
}
.hero-metric {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: 62px;
  align-content: center;
  border-inline-end: 1px solid rgba(255,255,255,.20);
}
.hero-metric small { color: rgba(255,255,255,.68); font-size: .70rem; }
.hero-metric strong { font-size: 1.34rem; direction: ltr; }
.hero-open-count strong { color: #fff; font-size: 1.65rem; }
.hero-sparkline {
  height: 68px;
  padding-inline-start: 13px;
  color: #08d89d;
}
.hero-sparkline svg { width: 100%; height: 100%; overflow: visible; }
.hero-sparkline .spark-fill { fill: url(#qadiSparkFill); }
.hero-sparkline .spark-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.hero-sparkline circle { fill: currentColor; }

.account-stat-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin: -14px 13px 0;
  padding: 15px 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.account-stat-item {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 52px;
  align-content: center;
  border-inline-start: 1px solid var(--line-soft);
  text-align: center;
}
.account-stat-item:last-child { border-inline-start: 0; }
.account-stat-item small { color: var(--muted); font-size: .62rem; }
.account-stat-item strong { color: var(--text); font-size: .84rem; }
.account-stat-item::before {
  color: var(--gold);
  font-size: 1rem;
  line-height: 1;
}
.account-stat-item.shield::before { content: "◇"; }
.account-stat-item.target::before { content: "◎"; }
.account-stat-item.wallet::before { content: "▱"; }

/* White cards used throughout the app */
.summary-card,
.engine-card,
.engine-panel,
.position-card,
.candidate-card,
.compact-row,
.alert-item,
.empty-state,
.risk-card,
.system-card,
.official-card,
.mobile-owner-card,
.more-menu button,
.position-lane,
.system-details,
.settings-card,
.quote-row,
.binance-market-row {
  border: 1px solid var(--line);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

/* Engines on home */
.engine-summary-grid { gap: 9px; }
.engine-card {
  padding: 0;
  border-radius: 17px;
  overflow: hidden;
}
.engine-card-head {
  min-height: 64px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.engine-card-head small { color: var(--muted); }
.engine-card-head strong { color: var(--text); font-size: .87rem; }
.engine-line {
  padding: 9px 14px 11px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: .62rem;
}

/* Compact open positions on home */
.compact-list { gap: 8px; }
.compact-row {
  position: relative;
  min-height: 76px;
  padding: 12px 14px;
  border-radius: 17px;
  overflow: hidden;
}
.compact-row::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: var(--green);
}
.compact-identity { align-items: center; }
.compact-symbol-copy {
  color: var(--text) !important;
  font-size: .92rem !important;
  font-weight: 900 !important;
}
.compact-sub { color: var(--muted); }
.compact-value { direction: ltr; font-size: 1.16rem; font-weight: 900; }

/* Generic form controls */
select,
input[type="search"],
input[type="text"],
input[type="password"] {
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
select:focus,
input:focus { border-color: color-mix(in srgb, var(--green) 55%, var(--line)) !important; }
.filter-row,
.binance-market-toolbar { gap: 9px; }
.filter-row label,
.binance-market-toolbar label { color: var(--muted); }
.filter-row select,
.binance-market-toolbar select,
.binance-market-toolbar input {
  min-height: 48px;
  border-radius: 15px !important;
  font-weight: 750;
}

/* Segmented controls */
.segmented {
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}
.segmented button {
  min-height: 42px;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
}
.segmented button.active {
  color: #fff;
  background: var(--navy);
  box-shadow: 0 6px 15px rgba(7, 35, 56, .16);
}

/* Bot / candidates */
.engine-layout { gap: 14px; }
.engine-panel {
  overflow: hidden;
  border-radius: 21px;
}
.engine-panel-head {
  padding: 16px 15px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.engine-panel-head small { color: var(--muted); }
.engine-panel-head h3 { color: var(--text); font-size: 1rem; }
.engine-meta,
.status-strip { background: var(--surface-2); }
.status-cell { border-color: var(--line-soft); }
.status-cell span { color: var(--muted); }
.status-cell strong { color: var(--text); font-size: 1.05rem; }
.candidate-list { gap: 10px; padding: 10px; }
.candidate-card {
  padding: 13px;
  border-radius: 18px;
}
.candidate-head { margin-bottom: 13px; }
.candidate-symbol-copy { color: var(--text) !important; font-size: 1rem !important; font-weight: 900 !important; }
.candidate-side { color: var(--muted); }
.candidate-meta {
  gap: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
}
.candidate-meta > div {
  padding: 10px 6px;
  border-inline-start: 1px solid var(--line-soft);
  text-align: center;
}
.candidate-meta > div:last-child { border-inline-start: 0; }
.candidate-meta small { color: var(--muted); font-size: .57rem; }
.candidate-meta strong { color: var(--text); font-size: .73rem; }
.candidate-reason {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: .65rem;
}

/* Official trades */
.official-view .official-disclaimer {
  margin: 0 0 13px;
  padding: 18px 17px;
  border: 0;
  border-radius: 22px;
  color: rgba(255,255,255,.76);
  background: linear-gradient(135deg, #08233a, #0a3a5b);
  box-shadow: 0 13px 26px rgba(7, 35, 56, .13);
  font-size: .74rem;
  line-height: 1.65;
}
.official-view .official-disclaimer::before {
  content: "اعتماد صارم";
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 1.13rem;
  font-weight: 900;
}
.official-stats {
  margin-bottom: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.official-toolbar { margin-bottom: 17px; }
.official-list { gap: 12px; }
.official-card {
  overflow: hidden;
  border-radius: 21px;
}
.official-card-head { padding: 14px 15px 10px; }
.official-setup-title { padding: 0 15px 12px; }
.official-setup-title strong { color: var(--text); font-size: 1.08rem; }
.official-setup-title span { color: var(--muted); }
.official-primary-grid {
  margin: 0 12px 12px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(135deg, #08233a, #0c3f61);
  overflow: hidden;
}
.official-primary-grid .position-metric { border-color: rgba(255,255,255,.15); }
.official-primary-grid .position-metric small { color: rgba(255,255,255,.60); }
.official-primary-grid .copy-value-button { color: #fff; }
.official-checks {
  margin: 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background: var(--surface);
}
.official-check { border-color: var(--line-soft); }
.official-check strong { color: var(--text); }
.official-check small { color: var(--muted); }
.official-check-mark { color: var(--green); }
.official-card-footer { border-color: var(--line-soft); background: var(--surface-2); }

/* Positions — close to the reference trade cards */
.live-position-board { gap: 14px; }
.desktop-position-lanes { display: none !important; }
.mobile-position-feed { display: grid !important; gap: 12px; }
.mobile-trade-overview {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 0 0 12px;
}
.trade-overview-card {
  min-height: 77px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.trade-overview-card strong { direction: ltr; font-size: 1.12rem; }
.trade-overview-label { color: var(--muted); font-size: .66rem; }
.trade-overview-winner { border-top: 2px solid var(--green); }
.trade-overview-loser { border-top: 2px solid var(--red); }
.position-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 19px;
  box-shadow: var(--shadow-soft) !important;
}
.position-card.position-long { box-shadow: inset -4px 0 0 var(--green), var(--shadow-soft) !important; }
.position-card.position-short { box-shadow: inset -4px 0 0 var(--red), var(--shadow-soft) !important; }
.position-head { padding: 13px 14px 9px; }
.position-rank { color: var(--gold); background: transparent; font-weight: 900; }
.position-symbol { color: var(--text) !important; font-size: 1rem !important; font-weight: 900 !important; }
.side-badge,
.state-badge,
.status-badge {
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
}
.side-badge.long { color: var(--green); border-color: rgba(8,169,121,.20); background: var(--green-soft); }
.side-badge.short { color: var(--red); border-color: rgba(239,68,77,.20); background: var(--red-soft); }
.position-source { color: var(--muted) !important; }
.position-pnl-main {
  margin: 0 14px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--line-soft);
}
.position-pnl-main > .copy-value-button:first-of-type {
  font-size: 1.43rem;
  font-weight: 900;
}
.position-primary-grid,
.position-secondary-grid {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.position-primary-grid {
  grid-template-columns: repeat(3,1fr);
  padding: 3px 10px 10px;
}
.position-secondary-grid {
  grid-template-columns: repeat(2,1fr);
  margin: 0 10px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  overflow: hidden;
}
.position-metric {
  min-height: 60px;
  padding: 9px 5px;
  border-color: var(--line-soft);
}
.position-metric small { color: var(--muted); font-size: .56rem; }
.copy-value-button {
  color: var(--text);
  font-size: .69rem;
  font-weight: 850;
}
.copy-value-button::after,
.copy-symbol-button::after { opacity: .56; }
.position-intelligence {
  margin: 0 10px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: var(--surface-2);
  overflow: hidden;
}
.intelligence-cell { border-color: var(--line-soft); }
.intelligence-cell small { color: var(--muted); }
.position-actions {
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.secondary-button {
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface);
  font-weight: 850;
}
.position-actions .secondary-button:first-child {
  color: #fff;
  border-color: var(--navy);
  background: var(--navy);
}

/* Binance market universe */
.binance-universe-head,
.table-title { color: var(--text); }
.binance-universe-head small { color: var(--muted); }
.binance-universe-list { gap: 8px; }
.binance-market-row {
  min-height: 74px;
  padding: 10px 12px;
  border-radius: 17px;
}
.binance-coin-icon-wrap {
  width: 43px;
  height: 43px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: none;
}
.binance-coin-fallback { color: var(--text); }
.binance-market-symbol .copy-symbol-button { color: var(--text) !important; font-weight: 900; }
.binance-market-sub { color: var(--muted); }
.binance-market-price strong { color: var(--text); }
.quote-row { border-radius: 14px; }
.quote-price { color: var(--text); }

/* Risk / alerts / system */
.risk-grid { gap: 9px; }
.risk-card {
  border-radius: 18px;
}
.risk-card small,
.detail-row span,
.alert-item p,
.alert-item time { color: var(--muted); }
.risk-card strong,
.detail-row strong,
.alert-item strong { color: var(--text); }
.detail-list,
.system-details { border-color: var(--line); background: var(--surface); }
.detail-row { border-color: var(--line-soft); }
.alert-list { gap: 8px; }
.alert-item { border-radius: 17px; }

/* More page — account hero + grid of options */
.mobile-owner-card {
  position: relative;
  min-height: 168px;
  padding: 21px;
  border: 0;
  border-radius: 27px;
  color: #fff;
  background: linear-gradient(135deg, #071e31, #0a3b5b);
  box-shadow: 0 15px 28px rgba(7,35,56,.15);
}
.mobile-owner-card .owner-photo {
  width: 82px;
  height: 82px;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}
.mobile-owner-card strong { color: #fff; font-size: 1.1rem; }
.mobile-owner-card span { color: rgba(255,255,255,.62); }
.mobile-owner-card::after {
  content: "VIP  ♛";
  position: absolute;
  right: 124px;
  bottom: 28px;
  padding: 4px 10px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 900;
  direction: ltr;
}
.more-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.more-menu button {
  position: relative;
  min-height: 118px;
  padding: 16px 13px;
  align-content: center;
  border-radius: 19px;
  text-align: center;
}
.more-menu button::after { display: none; }
.more-menu button strong {
  display: block;
  color: var(--text);
  font-size: .91rem;
  font-weight: 900;
}
.more-menu button span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .64rem;
}
.more-menu button::before {
  content: "✦";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 11px;
  border-radius: 50%;
  color: var(--gold);
  background: var(--surface-2);
  font-size: 1.05rem;
}
.more-menu .logout-button {
  grid-column: 1 / -1;
  min-height: 62px;
  border-color: rgba(239,68,77,.55);
  color: var(--red);
  text-align: right;
}
.more-menu .logout-button::before { display: none; }
.more-menu .logout-button strong { color: var(--red); }

/* Settings page */
.settings-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px 17px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #071f33, #0a3b5b);
  box-shadow: 0 14px 28px rgba(7,35,56,.14);
}
.settings-hero-icon {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 16px;
  color: var(--gold);
  background: rgba(255,255,255,.06);
  font-size: 1.6rem;
}
.settings-hero small { color: rgba(255,255,255,.58); }
.settings-hero h3 { margin: 2px 0 3px; font-size: 1.08rem; }
.settings-hero p { margin: 0; color: rgba(255,255,255,.69); font-size: .68rem; }
.settings-card {
  margin-top: 13px;
  padding: 15px;
  border-radius: 20px;
}
.settings-card-head,
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.settings-card-head { margin-bottom: 13px; }
.settings-card-head small,
.settings-row small { display: block; color: var(--muted); font-size: .64rem; }
.settings-card-head h3 { margin: 2px 0 0; font-size: .92rem; }
.theme-current-label {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--green);
  background: var(--green-soft);
  font-size: .67rem;
  font-weight: 850;
}
.theme-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.theme-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 75px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: var(--surface-2);
  text-align: right;
}
.theme-option.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
  background: color-mix(in srgb, var(--amber-soft) 65%, var(--surface));
}
.theme-option > span:last-child { display: grid; gap: 2px; }
.theme-option strong { font-size: .78rem; }
.theme-option small { color: var(--muted); font-size: .58rem; }
.theme-swatch {
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 3px var(--surface);
}
.theme-swatch-light { background: #f8f9f7; border: 2px solid #d8a33f; }
.theme-swatch-dark { background: #08243a; border: 2px solid #173f5c; }
.settings-row {
  min-height: 66px;
  border-bottom: 1px solid var(--line-soft);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row strong { display: block; font-size: .78rem; }
.settings-live-dot { color: var(--green); font-size: .67rem; font-weight: 800; }
.settings-live-dot i { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--green); }

/* Bottom navigation */
.bottom-nav {
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--max-app));
  min-height: 76px;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 -8px 22px rgba(22,42,56,.05);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
}
.bottom-nav button {
  min-height: 61px;
  gap: 4px;
  border-radius: 16px;
  color: var(--muted);
  font-size: .60rem;
  font-weight: 750;
}
.bottom-nav .nav-icon { width: 24px; height: 24px; }
.bottom-nav button.active {
  color: #fff;
  background: var(--navy);
  box-shadow: 0 8px 16px rgba(7,35,56,.16);
}
.bottom-nav button.active::before {
  top: 4px;
  width: 27px;
  height: 3px;
  border-radius: 999px;
  background: var(--gold);
}
.bottom-nav button.active .nav-icon svg { stroke: #fff; }
.bottom-nav button:not(.active) .nav-icon svg { stroke: currentColor; }

/* Badges */
.status-badge.success,
.state-badge.success { color: var(--green); border-color: rgba(8,169,121,.20); background: var(--green-soft); }
.status-badge.danger,
.state-badge.danger { color: var(--red); border-color: rgba(239,68,77,.20); background: var(--red-soft); }
.status-badge.warn,
.state-badge.warn { color: var(--amber); border-color: rgba(215,161,58,.28); background: var(--amber-soft); }
.status-badge.info,
.state-badge.info { color: var(--blue); border-color: rgba(12,94,145,.20); background: var(--blue-soft); }
.count-badge { color: var(--text); border-color: var(--line); background: var(--surface-2); }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }

/* Toasts */
.toast {
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* Login follows the same identity. */
.login-body { background: var(--bg); }
.login-page {
  width: min(100%, 430px);
  padding: 26px 17px;
  background: var(--app);
}
.login-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.login-owner-photo {
  width: 88px;
  height: 88px;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px var(--surface-2);
}
.login-owner-name,
.login-brand,
.login-card h1 { color: var(--text); }
.login-owner-role,
.login-mode,
.login-help,
.login-security,
.login-form label { color: var(--muted); }
.login-brand { color: var(--navy-2); }
html[data-theme="dark"] .login-brand { color: var(--gold); }
.login-submit {
  color: #fff;
  background: var(--navy);
  box-shadow: 0 8px 17px rgba(7,35,56,.16);
}
.password-toggle { color: var(--blue); }

/* Dark theme polish */
html[data-theme="dark"] .account-stat-strip,
html[data-theme="dark"] .more-menu button,
html[data-theme="dark"] .trade-overview-card,
html[data-theme="dark"] .engine-card,
html[data-theme="dark"] .position-card,
html[data-theme="dark"] .candidate-card,
html[data-theme="dark"] .official-card {
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .bottom-nav { background: rgba(9,23,36,.94); }
html[data-theme="dark"] .account-hero-card,
html[data-theme="dark"] .mobile-owner-card,
html[data-theme="dark"] .settings-hero { border: 1px solid rgba(226,172,69,.10); }

/* Small phones */
@media (max-width: 380px) {
  .topbar { padding-inline: 11px; gap: 6px; }
  .owner-photo-small { width: 48px; height: 48px; }
  .topbar-title h1 { font-size: 1.16rem; }
  .live-button { padding-inline: 9px; font-size: .68rem; }
  .back-button { width: 40px; height: 40px; }
  .content { padding-inline: 10px; }
  .account-equity strong { font-size: 2.05rem; }
  .account-hero-card { min-height: 230px; }
  .account-hero-bottom { inset-inline: 14px; }
  .account-stat-strip { margin-inline: 8px; }
  .more-menu { grid-template-columns: 1fr; }
  .more-menu .logout-button { grid-column: auto; }
}

/* ========================================================================== */
/* BOT QADI R8.1 — reference match + mobile visual corrections                */
/* ========================================================================== */

/* Header: keep long page titles readable on 390–430px phones. */
.topbar {
  grid-template-columns: 44px minmax(76px, auto) minmax(0, 1fr) 52px;
  gap: 7px;
}
.topbar-title h1 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 1.28rem;
  line-height: 1.15;
}
.topbar-title .eyebrow {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}
.live-button {
  max-width: 116px;
  padding-inline: 11px;
  white-space: nowrap;
}

/* Official page: compact premium hero, no overflowing paragraph. */
.official-view .official-disclaimer {
  position: relative;
  min-height: 110px;
  margin: 0 0 14px;
  padding: 24px 72px 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 88% 12%, rgba(255,185,64,.11), transparent 28%),
    linear-gradient(135deg, #07223a 0%, #0a3858 100%);
  font-size: .78rem;
  line-height: 1.55;
}
.official-view .official-disclaimer::before {
  content: "✓";
  position: absolute;
  right: 20px;
  left: auto;
  top: 27px;
  width: 40px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 3px solid #e3aa43;
  border-radius: 14px 14px 18px 18px;
  color: #e3aa43;
  background: transparent;
  font-size: 1.55rem;
  font-weight: 900;
  transform: rotate(0deg);
}
.official-view .official-disclaimer::after {
  content: "اعتماد صارم";
  display: block;
  order: -1;
  margin-bottom: 6px;
  color: #fff;
  font-size: 1.28rem;
  font-weight: 900;
}
.official-stats,
.status-strip {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.status-cell {
  min-height: 64px;
  padding: 10px 5px;
  border: 0;
  border-inline-start: 1px solid var(--line-soft);
  border-radius: 0;
  color: var(--text);
  background: var(--surface);
}
.status-cell:last-child { border-inline-start: 0; }
.status-cell span { color: var(--muted); }
.status-cell strong { color: var(--text); font-size: 1.12rem; }

/* Bot: premium cards closer to the supplied identity. */
.bot-view .engine-panel:first-of-type .engine-panel-head {
  color: #fff;
  background:
    radial-gradient(circle at 12% 5%, rgba(224,173,73,.15), transparent 28%),
    linear-gradient(135deg, #071e32, #0a3a59);
}
.bot-view .engine-panel:first-of-type .engine-panel-head small { color: rgba(255,255,255,.58); }
.bot-view .engine-panel:first-of-type .engine-panel-head h3 { color: #fff; }
.bot-view .engine-panel:first-of-type > .status-strip {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
}
.candidate-card {
  padding: 14px 13px;
  border-radius: 20px;
  background: var(--surface) !important;
}
.candidate-head-premium {
  display: grid;
  grid-template-columns: minmax(0,1fr) 64px;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.candidate-identity-premium {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.candidate-logo,
.position-logo {
  width: 44px !important;
  height: 44px !important;
  flex-basis: 44px !important;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--surface-2);
}
.candidate-logo .binance-coin-fallback,
.position-logo .binance-coin-fallback { font-size: .52rem; }
.candidate-symbol-copy {
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.candidate-score-ring {
  --score: 0;
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--surface) 57%, transparent 59%),
    conic-gradient(var(--gold) calc(var(--score) * 1%), var(--surface-3) 0);
  box-shadow: inset 0 0 0 1px var(--line);
}
.candidate-score-ring strong {
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1;
}
.candidate-score-ring small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .52rem;
}
.candidate-meta-premium {
  grid-template-columns: repeat(2,minmax(0,1fr));
  border-color: var(--line);
  background: var(--surface-2);
}
.candidate-meta-premium > div {
  min-height: 58px;
  padding: 10px 8px;
  border-color: var(--line-soft);
}
.candidate-meta-premium strong { font-size: .77rem; }
.candidate-state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.candidate-detected-time { color: var(--muted); font-size: .58rem; }
.candidate-reason {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}

/* Positions summary: one premium block plus compact winner/loser selectors. */
.mobile-trade-overview-premium {
  grid-template-columns: 1fr;
  gap: 9px;
}
.trade-summary-hero {
  position: relative;
  min-height: 132px;
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 24px;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 8% 92%, rgba(8,201,149,.12), transparent 31%),
    linear-gradient(135deg, #071e32, #0a3958);
  box-shadow: 0 14px 28px rgba(7,35,56,.13);
}
.trade-summary-pnl small,
.trade-summary-counts small { display: block; color: rgba(255,255,255,.66); font-size: .72rem; }
.trade-summary-pnl strong { display: block; margin-top: 5px; font-size: 1.8rem; direction: ltr; text-align: right; }
.trade-summary-counts { text-align: center; border-inline-start: 1px solid rgba(255,255,255,.18); }
.trade-summary-counts strong { display: block; font-size: 1.55rem; color: #fff; direction: ltr; }
.trade-summary-bars {
  position: absolute;
  right: 18px;
  left: 18px;
  bottom: 14px;
  height: 5px;
  display: flex;
  gap: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}
.trade-summary-bars span { display: block; height: 100%; border-radius: 999px; }
.trade-summary-bars .win { background: #10cf99; }
.trade-summary-bars .loss { background: #ff5a63; }
.trade-summary-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.trade-summary-filter {
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-align: right;
}
.trade-summary-filter span { display: block; color: var(--muted); font-size: .65rem; }
.trade-summary-filter strong { display: block; margin-top: 3px; font-size: 1.08rem; direction: ltr; text-align: right; }
.trade-summary-filter small { display: block; margin-top: 2px; color: var(--muted-2); font-size: .55rem; }
.trade-summary-filter-winner { border-top: 2px solid var(--green); }
.trade-summary-filter-loser { border-top: 2px solid var(--red); }

/* Position cards: show logo and max-loss in the collapsed card; clean expanded state. */
.symbol-wrap { gap: 6px; }
.position-logo { width: 36px !important; height: 36px !important; flex-basis: 36px !important; box-shadow: none; }
.position-expanded {
  margin: 8px 10px 0;
  border: 1px solid var(--line) !important;
  border-radius: 15px;
  color: var(--text) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.position-secondary-grid {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--surface) !important;
}
.position-intelligence {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface) !important;
}
.intelligence-cell {
  color: var(--text) !important;
  background: var(--surface) !important;
}
.intelligence-cell:nth-child(even) { background: var(--surface-2) !important; }
.intelligence-cell strong,
.intelligence-cell p { color: var(--text) !important; }
.intelligence-cell small { color: var(--muted) !important; }
.position-card.expanded .position-actions { margin-top: 8px; }

/* Copy controls: still explicit, but visually lighter and less noisy. */
.copy-mark,
.copy-chip-mark {
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  color: var(--blue);
  background: var(--blue-soft);
  opacity: .86;
}
.copy-value-button:hover .copy-mark,
.copy-symbol-button:hover .copy-mark { opacity: 1; }

/* Better light-mode depth and contrast. */
html:not([data-theme="dark"]) .app-shell {
  background: #fbfcfa;
}
html:not([data-theme="dark"]) .topbar,
html:not([data-theme="dark"]) .bottom-nav {
  background: rgba(251,252,250,.95);
}
html:not([data-theme="dark"]) .engine-line,
html:not([data-theme="dark"]) .position-actions,
html:not([data-theme="dark"]) .candidate-meta-premium {
  background: #f7f9f7;
}

@media (max-width: 390px) {
  .topbar { grid-template-columns: 40px 92px minmax(0,1fr) 48px; }
  .topbar-title h1 { font-size: 1.16rem; }
  .topbar-title .eyebrow { font-size: .64rem; }
  .live-button { min-height: 39px; padding-inline: 9px; font-size: .67rem; }
  .owner-photo-small { width: 48px; height: 48px; }
  .official-view .official-disclaimer { padding-right: 64px; }
  .candidate-logo { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  .candidate-score-ring { width: 58px; height: 58px; }
  .candidate-symbol-copy { max-width: 116px; }
}

/* ========================================================================== */
/* BOT QADI R8.2 — visual cleanup from real mobile screenshots                */
/* ========================================================================== */
:root {
  --bg: #eef1ee;
  --app: #fcfdfb;
  --surface-2: #f6f8f6;
  --line: #dbe1dd;
  --muted: #647181;
  --muted-2: #8a949d;
  --shadow-soft: 0 6px 18px rgba(19, 42, 57, .055);
}

/* Make the app feel like one polished phone surface, not cards floating on grey. */
.app-shell {
  background: var(--app);
  box-shadow: 0 0 0 1px rgba(8,36,58,.045), 0 18px 60px rgba(8,36,58,.075);
}
.topbar {
  min-height: 82px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--app) 96%, transparent);
}
.content { padding-top: 12px; }

/* Connection pill: less visually dominant than the page title. */
.live-button {
  min-height: 38px;
  border-radius: 15px;
  box-shadow: none;
  font-size: .70rem;
}
.status-dot { width: 7px; height: 7px; }

/* Premium card rhythm. */
.engine-card,
.position-card,
.candidate-card,
.official-card,
.empty-state,
.more-menu button,
.settings-card,
.risk-card,
.alert-item,
.system-card {
  box-shadow: 0 5px 15px rgba(19,42,57,.045);
}
.empty-state {
  min-height: 72px;
  display: grid;
  place-items: center;
  padding: 16px 18px;
  border-style: dashed;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-2));
  text-align: center;
  line-height: 1.65;
}

/* Candidate cards: stronger hierarchy and Arabic-only presentation. */
.candidate-card { padding: 15px 14px; }
.candidate-head-premium { margin-bottom: 13px; }
.candidate-symbol-copy { max-width: 150px; }
.candidate-meta-premium {
  border-radius: 16px;
  background: #f8faf8;
}
.candidate-meta-premium > div { min-height: 61px; }
.candidate-meta-premium small { font-size: .60rem; }
.candidate-meta-premium strong { font-size: .77rem; line-height: 1.35; }
.candidate-state-row {
  min-height: 34px;
  padding-top: 1px;
}
.candidate-reason {
  padding: 9px 10px 0;
  border-top: 1px solid var(--line-soft);
  color: #74808b;
  font-size: .62rem;
  line-height: 1.6;
}
.candidate-score-ring { box-shadow: inset 0 0 0 1px #e0e5e1; }

/* Position cards: profit/loss defines the accent; direction remains a badge only. */
.position-card.position-long,
.position-card.position-short { box-shadow: var(--shadow-soft) !important; }
.position-card.position-profit {
  border-inline-end: 4px solid var(--green) !important;
}
.position-card.position-loss {
  border-inline-end: 4px solid var(--red) !important;
}
.position-card { overflow: hidden; }
.position-primary-grid,
.position-secondary-grid { background: #f8faf8 !important; }
.position-metric {
  min-height: 58px;
  padding: 9px 8px;
}
.position-metric small { font-size: .56rem; }
.position-metric strong { font-size: .73rem; }
.position-pnl strong { letter-spacing: .01em; }

/* Copy is still available for every value without filling the card with the word "نسخ". */
.copy-mark,
.copy-chip-mark,
.symbol-copy-mark {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 7px;
  color: var(--blue);
  background: var(--blue-soft);
  font-size: .68rem !important;
  line-height: 1;
  opacity: .90;
}
.symbol-copy-mark { margin-inline-start: 2px; }
.copy-value,
.copy-chip,
.symbol-copy { gap: 5px; }
.copy-value strong { min-width: 0; overflow-wrap: anywhere; }

/* More: each destination has its own icon instead of the repeated sparkle. */
.more-menu button::before {
  content: attr(data-icon);
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border: 1px solid #e6e9e6;
  color: var(--gold);
  background: #f7f8f6;
  font-size: 1.20rem;
  font-weight: 900;
}
.more-menu button[data-view-target="official"]::before { color: #c9952f; background: #fff8e8; }
.more-menu button[data-view-target="markets"]::before { color: #1677a6; background: #edf7fb; }
.more-menu button[data-view-target="risk"]::before { color: #d08f31; background: #fff6e8; }
.more-menu button[data-view-target="alerts"]::before { color: #e45b5f; background: #fff0f1; }
.more-menu button[data-view-target="settings"]::before { color: #6a6db0; background: #f2f1fb; }
.more-menu button[data-view-target="system"]::before { color: #0c9a70; background: #edf9f5; }
.more-menu button { min-height: 126px; }
.more-menu button strong { font-size: .94rem; }
.more-menu button span { line-height: 1.5; }

/* Official screen: tighter and closer to the supplied identity. */
.official-view .official-disclaimer {
  min-height: 106px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 10%, rgba(226,172,69,.12), transparent 28%),
    linear-gradient(135deg, #072239, #0a3d5d);
}
.official-view .official-disclaimer::after { letter-spacing: -.01em; }
.official-toolbar select,
.position-toolbar select { min-height: 44px; border-radius: 14px !important; }

/* Home cards and balance hero: slightly crisper, less washed out. */
.account-hero-card {
  background:
    radial-gradient(circle at 80% 14%, rgba(44,139,185,.20), transparent 32%),
    radial-gradient(circle at 12% 94%, rgba(8,201,149,.08), transparent 34%),
    linear-gradient(145deg, #071d30 0%, #082c45 58%, #062238 100%);
}
.account-stat-strip { box-shadow: 0 8px 22px rgba(19,42,57,.065); }
.compact-row { min-height: 80px; }

/* Bottom nav: reference-like clean white bar. */
.bottom-nav {
  min-height: 78px;
  background: color-mix(in srgb, #ffffff 96%, transparent);
  box-shadow: 0 -8px 22px rgba(19,42,57,.045);
}
.bottom-nav button { min-height: 62px; }
.bottom-nav button.active {
  border-radius: 18px;
  background: #062741;
}

html[data-theme="dark"] .candidate-meta-premium,
html[data-theme="dark"] .position-primary-grid,
html[data-theme="dark"] .position-secondary-grid { background: var(--surface-2) !important; }
html[data-theme="dark"] .more-menu button::before {
  border-color: var(--line);
  background: var(--surface-2);
}
html[data-theme="dark"] .bottom-nav { background: rgba(9,23,36,.96); }

@media (max-width: 390px) {
  .topbar { min-height: 78px; }
  .more-menu button { min-height: 118px; }
  .copy-mark, .copy-chip-mark, .symbol-copy-mark { width: 20px; min-width: 20px; height: 20px; }
}

/* Paper account controls */
.account-settings-card,
.danger-settings-card { overflow: hidden; }
.settings-note {
  margin: -2px 0 13px;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.7;
}
.settings-money-badge,
.danger-badge {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .61rem;
  font-weight: 850;
  white-space: nowrap;
}
.settings-money-badge {
  color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 26%, transparent);
  background: var(--blue-soft);
}
.danger-badge {
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 24%, transparent);
  background: var(--red-soft);
}
.paper-balance-grid { display: grid; gap: 10px; }
.paper-balance-field {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(145px, 46%);
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}
.paper-balance-field > span { display: grid; gap: 2px; }
.paper-balance-field strong { font-size: .75rem; }
.paper-balance-field small { color: var(--muted); font-size: .56rem; }
.money-input {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.money-input input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  direction: ltr;
  text-align: left;
  font-size: .82rem;
  font-weight: 850;
}
.money-input b { color: var(--muted); font-size: .54rem; }
.settings-primary-button,
.settings-danger-button {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border-radius: 15px;
  font-size: .75rem;
  font-weight: 900;
  cursor: pointer;
}
.settings-primary-button {
  border: 1px solid var(--navy);
  color: #fff;
  background: var(--navy);
}
.settings-danger-button {
  border: 1px solid color-mix(in srgb, var(--red) 55%, var(--line));
  color: var(--red);
  background: var(--red-soft);
}
.settings-primary-button:disabled,
.settings-danger-button:disabled { opacity: .55; cursor: wait; }
.settings-safe-note {
  display: block;
  margin-top: 9px;
  color: var(--muted-2);
  font-size: .58rem;
  line-height: 1.65;
}
.danger-settings-card {
  border-color: color-mix(in srgb, var(--red) 22%, var(--line));
}

.confirm-dialog {
  width: min(calc(100% - 28px), 420px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: var(--text);
  background: transparent;
}
.confirm-dialog::backdrop {
  background: rgba(3, 13, 22, .58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.confirm-dialog-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 28px 70px rgba(0,0,0,.24);
}
.confirm-dialog-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: var(--red);
  background: var(--red-soft);
  font-size: 1.4rem;
  font-weight: 950;
}
.confirm-dialog-card small { color: var(--red); font-size: .62rem; font-weight: 850; }
.confirm-dialog-card h3 { margin: 3px 0 5px; font-size: 1.02rem; }
.confirm-dialog-card p { margin: 0; color: var(--muted); font-size: .69rem; line-height: 1.75; }
.confirm-balance-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.confirm-balance-preview span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: .61rem;
}
.confirm-balance-preview b { color: var(--text); direction: ltr; font-size: .77rem; }
.confirm-dialog-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8px; }
.confirm-dialog-actions button {
  min-height: 46px;
  border-radius: 14px;
  font-size: .7rem;
  font-weight: 900;
}
.dialog-cancel { border: 1px solid var(--line); color: var(--text); background: var(--surface-2); }
.dialog-danger { border: 1px solid var(--red); color: #fff; background: var(--red); }

@media (max-width: 360px) {
  .paper-balance-field { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/* R8.5 — mobile trade-card collision fix                                      */
/* Keeps every copy control visible without allowing icons/text/logo overlap.  */
/* ========================================================================== */
.position-head-clean {
  display: block !important;
  min-height: 0 !important;
  padding: 12px 12px 9px !important;
}
.position-head-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.position-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1 1 auto;
}
.position-logo {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  position: static !important;
  z-index: auto !important;
}
.position-symbol-stack {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.position-symbol-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.position-symbol.symbol-copy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 5px !important;
  min-width: 0;
  max-width: 170px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.position-symbol.symbol-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: left;
}
.position-symbol .symbol-copy-mark {
  position: static !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
}
.position-strategy {
  display: block;
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: .56rem;
  font-weight: 750;
}
.position-rank {
  order: -1;
  flex: 0 0 auto;
  min-width: 25px;
  height: 22px;
  background: var(--surface-2) !important;
}
.position-live-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  flex: 0 0 auto;
  min-width: 0;
}
.position-live-label {
  color: var(--green);
  font-size: .58rem;
  font-weight: 900;
}
.position-velocity {
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .54rem !important;
}
.position-badges-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  min-width: 0;
}
.position-badges-row .copy-chip {
  display: grid !important;
  grid-template-columns: minmax(0, auto) 18px;
  align-items: center;
  gap: 4px !important;
  min-height: 26px;
  max-width: 145px;
  padding: 3px 7px !important;
  overflow: hidden;
}
.position-badges-row .copy-chip > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.position-badges-row .copy-chip-mark {
  position: static !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border-inline-start: 0 !important;
}

/* All value-copy buttons reserve an explicit column for the copy icon. */
.copy-value {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 6px !important;
  min-width: 0;
}
.copy-value > strong {
  min-width: 0 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy-value > .copy-mark {
  position: static !important;
  grid-column: 2;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}
.intelligence-copy-long .copy-value {
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: start;
}
.intelligence-copy-long .copy-value > strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.55;
}
.position-pnl-main {
  grid-template-columns: minmax(0, 1.35fr) minmax(100px, .65fr) !important;
}
.position-pnl-main .copy-value:first-of-type > strong {
  font-size: 1.35rem !important;
}
.position-primary-grid,
.position-secondary-grid {
  overflow: hidden;
}
.position-metric {
  min-width: 0;
}
.position-metric .copy-value > strong {
  direction: ltr;
  text-align: right;
}

@media (max-width: 390px) {
  .position-head-clean { padding-inline: 10px !important; }
  .position-logo { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
  .position-symbol.symbol-copy { max-width: 145px; }
  .position-strategy { max-width: 150px; }
  .position-badges-row { gap: 4px; }
  .position-badges-row .copy-chip { max-width: 125px; font-size: .54rem; }
  .position-pnl-main { grid-template-columns: minmax(0, 1.25fr) minmax(92px, .75fr) !important; }
}

/* ========================================================================== */
/* BOT QADI R8.7 — compact copy UI + persistent day/night switch              */
/* ========================================================================== */

/* Header: back + theme + LIVE + title + owner. */
.topbar {
  grid-template-columns: auto auto auto minmax(0,1fr) auto !important;
  gap: 7px !important;
}
.back-button { grid-column: 1 !important; }
.fixed-theme-toggle {
  grid-column: 2;
  direction: rtl;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 54px;
  height: 42px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: .62rem;
  font-weight: 850;
  cursor: pointer;
}
.fixed-theme-icon { font-size: .90rem; line-height: 1; }
.live-button { grid-column: 3 !important; min-width: 62px; justify-content: center; }
.topbar-title { grid-column: 4 !important; }
.topbar-owner { grid-column: 5 !important; }

/* Show only the copy icon — never the word "نسخ" inside metrics. */
.copy-mark,
.symbol-copy-mark,
.copy-chip-mark {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue-soft) 74%, var(--surface));
  font-size: .70rem !important;
  line-height: 1;
  text-indent: 0;
  overflow: hidden;
}
.copy-chip-mark { width: 20px; min-width: 20px; height: 20px; flex-basis: 20px; font-size: .60rem !important; }
.copy-value { gap: 6px; }
.copy-value strong { min-width: 0; }

/* Position identity: keep logo, symbol and metadata in separate non-overlapping zones. */
.position-head-main { align-items: center !important; }
.position-identity { min-width: 0; flex: 1 1 auto; }
.position-logo,
.trade-symbol-logo {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 50%;
}
.position-symbol-stack { min-width: 0; }
.position-symbol-row { min-width: 0; flex-wrap: nowrap !important; }
.position-symbol { min-width: 0; max-width: 132px; }
.position-symbol strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.position-badges-row { gap: 5px !important; flex-wrap: wrap !important; }
.position-badges-row .copy-chip { max-width: 100%; }

/* LIVE should look unmistakably active. */
.live-button .status-dot:not(.warn):not(.bad):not(.muted) {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 13%, transparent);
}
#liveText { direction: ltr; letter-spacing: .02em; }

@media (max-width: 390px) {
  .topbar {
    grid-template-columns: 40px 48px 60px minmax(0,1fr) 46px !important;
    gap: 5px !important;
    padding-inline: 9px !important;
  }
  .fixed-theme-toggle {
    min-width: 48px;
    width: 48px;
    height: 39px;
    padding: 0;
  }
  .fixed-theme-toggle #fixedThemeText { display: none; }
  .live-button { min-width: 60px; padding-inline: 6px !important; }
  .owner-photo-small { width: 46px !important; height: 46px !important; }
  .topbar-title h1 { font-size: 1.05rem !important; }
  .topbar-title .eyebrow { font-size: .58rem !important; }
  .position-symbol { max-width: 110px; }
}


.position-card.position-deep-link-target {
  outline: 3px solid #f5b942;
  outline-offset: 3px;
  animation: qadi-position-target 1s ease-in-out 3;
}

@keyframes qadi-position-target {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 185, 66, 0); }
  50% { box-shadow: 0 0 0 8px rgba(245, 185, 66, 0.25); }
}


.position-leverage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(14, 165, 164, .35);
  border-radius: 999px;
  color: #087f78;
  background: rgba(20, 184, 166, .12);
  font-size: .68rem;
  font-weight: 900;
  direction: ltr;
}


/* position-action-hit-fix */
.position-actions {
  position: relative;
  z-index: 30;
  pointer-events: auto !important;
}

.position-actions .secondary-button {
  position: relative;
  z-index: 31;
  pointer-events: auto !important;
  touch-action: manipulation;
}


/* position-amount-center */
.position-pnl-main {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: end;
  gap: 4px;
}

.position-pnl-main > small:first-child {
  grid-column: 1 / -1;
}

.position-trade-amount {
  min-width: 0;
  text-align: center;
  border-inline: 1px solid var(--line-soft);
}

.position-trade-amount small {
  display: block;
  color: var(--muted-2);
  font-size: .54rem;
  white-space: nowrap;
}

.position-trade-amount strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: .76rem;
  direction: ltr;
  white-space: nowrap;
}