.wallet-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(104, 155, 255, 0.28);
  border-radius: 999px;
  background: rgba(17, 34, 64, 0.76);
  color: var(--text, #e7eefc);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.wallet-button svg { width: 17px; height: 17px; }
.wallet-button[data-state="ready"] { border-color: rgba(66, 227, 163, 0.45); color: #8ff0c8; }
.wallet-button[data-state="authenticated"] { border-color: rgba(107, 174, 255, 0.45); }
.wallet-button[data-state="disabled"] { opacity: .62; cursor: not-allowed; }

.outcome-trade-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.outcome-trade-button {
  min-width: 54px;
  padding: 5px 9px;
  border: 1px solid rgba(111, 153, 226, .22);
  border-radius: 6px;
  background: rgba(27, 47, 78, .62);
  color: #dce9ff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.outcome-trade-buy:hover { border-color: rgba(66, 227, 163, .5); color: #8ff0c8; }
.outcome-trade-sell:hover { border-color: rgba(255, 99, 127, .5); color: #ff9baf; }

body.trade-open { overflow: hidden; }
.trade-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.trade-overlay[hidden] { display: none; }
.trade-overlay.is-visible { opacity: 1; }
.trade-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 18, .78);
  backdrop-filter: blur(9px);
}
.trade-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: min(88vh, 900px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(111, 153, 226, .28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(58, 135, 255, .14), transparent 36%),
    #0b1424;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .52);
  color: #e7eefc;
}
.trade-dialog.is-account { width: min(920px, 100%); }
.trade-dialog.is-trade { width: min(620px, 100%); }
.trade-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(120, 150, 200, .13);
}
.trade-dialog-head h2 { margin: 3px 0 0; font-size: 22px; }
.trade-kicker { margin: 0; color: #6da9ff; letter-spacing: .12em; font-size: 10px; font-weight: 800; }
.trade-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(128, 160, 210, .22);
  border-radius: 50%;
  background: rgba(17, 31, 54, .72);
  color: #dce8fb;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.trade-dialog-body { padding: 20px 24px 26px; overflow-y: auto; }
.trade-stack { display: grid; gap: 14px; }
.trade-card, .trade-context-card {
  padding: 16px;
  border: 1px solid rgba(116, 148, 199, .14);
  border-radius: 13px;
  background: rgba(13, 28, 49, .78);
}
.trade-card h3, .trade-card p { margin-top: 0; }
.trade-card h3 { margin-bottom: 8px; font-size: 15px; }
.trade-card p { color: #9cafca; font-size: 13px; line-height: 1.6; }
.trade-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.trade-context-card { display: grid; gap: 5px; border-color: rgba(96, 155, 255, .3); }
.trade-context-card span { color: #83b7ff; font-size: 12px; font-weight: 800; }
.trade-context-card strong { font-size: 17px; line-height: 1.4; }
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trade-risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trade-field { display: grid; gap: 7px; color: #a9bad2; font-size: 12px; }
.trade-field input, .trade-field select,
.rule-condition-row input, .rule-condition-row select {
  width: 100%;
  min-height: 39px;
  padding: 0 11px;
  border: 1px solid rgba(118, 149, 199, .2);
  border-radius: 8px;
  background: #07111f;
  color: #eef4ff;
  font: inherit;
}
.trade-field input:focus, .trade-field select:focus,
.rule-condition-row input:focus, .rule-condition-row select:focus {
  outline: none;
  border-color: rgba(105, 165, 255, .65);
}
.trade-primary, .trade-secondary, .trade-danger-outline {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 9px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.trade-primary {
  border: 1px solid rgba(108, 181, 255, .62);
  background: linear-gradient(135deg, #266cff, #489cff);
  color: white;
}
.trade-secondary {
  border: 1px solid rgba(118, 151, 205, .25);
  background: rgba(24, 43, 70, .82);
  color: #dce9ff;
}
.trade-danger-outline {
  border: 1px solid rgba(255, 99, 127, .34);
  background: rgba(79, 24, 37, .34);
  color: #ff9bb0;
}
.trade-primary:disabled, .trade-secondary:disabled, .trade-danger-outline:disabled { opacity: .42; cursor: not-allowed; }
.trade-full { width: 100%; }
.trade-button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.trade-action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.trade-bottom-actions { justify-content: space-between; }
.trade-muted { margin: 0; color: #8397b3 !important; font-size: 12px !important; line-height: 1.6; }
.trade-legal { margin: 0; color: #7689a5; font-size: 11px; line-height: 1.6; }
.trade-alert { padding: 11px 13px; border: 1px solid rgba(88, 162, 255, .3); border-radius: 9px; background: rgba(31, 82, 155, .2); color: #c8ddff; font-size: 13px; }
.trade-alert-warning { border-color: rgba(255, 198, 81, .34); background: rgba(118, 75, 12, .18); color: #ffdd91; }
.trade-segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border: 1px solid rgba(118, 151, 205, .16); border-radius: 10px; background: rgba(5, 13, 25, .7); }
.trade-segmented button { min-height: 37px; border: 0; border-radius: 7px; background: transparent; color: #94a8c3; font: inherit; font-weight: 750; cursor: pointer; }
.trade-segmented button.is-active { background: rgba(45, 103, 198, .38); color: #eaf3ff; box-shadow: inset 0 0 0 1px rgba(100, 161, 255, .34); }
.trade-check { display: flex; align-items: flex-start; gap: 9px; color: #a9bad2; font-size: 12px; line-height: 1.5; }
.trade-confirm-check { padding: 13px; border: 1px solid rgba(255, 198, 81, .2); border-radius: 9px; background: rgba(106, 72, 17, .1); }
.trade-account-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trade-session-bar { display: flex; align-items: stretch; gap: 10px; }
.trade-session-bar .trade-account-strip { flex: 1; }
.trade-switch-wallet { flex: 0 0 auto; align-self: center; white-space: nowrap; }
.trade-account-strip > div { display: grid; gap: 5px; padding: 12px; border: 1px solid rgba(118, 151, 205, .15); border-radius: 10px; background: rgba(11, 24, 43, .75); }
.trade-account-strip span { color: #8094b1; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.trade-account-strip strong { font-size: 12px; }
.trade-account-strip > div[data-state="ready"] { border-color: rgba(66, 227, 163, .28); }
.trade-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 99px; background: rgba(118, 151, 205, .14); color: #a8b9d0; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.trade-badge.is-good { background: rgba(31, 141, 97, .22); color: #83e7bc; }
.trade-positions-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(46, 129, 255, .13), transparent 42%),
    rgba(13, 28, 49, .9);
}
.trade-positions-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #5aa7ff, rgba(66, 227, 163, .72));
}
.trade-position-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}
.trade-position-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(118, 151, 205, .14);
  border-radius: 10px;
  background: rgba(6, 17, 32, .66);
}
.trade-position-summary > div > span {
  color: #8298b5;
  font-size: 12px;
}
.trade-position-summary > div > strong {
  overflow-wrap: anywhere;
  color: #eff6ff;
  font-size: 19px;
  line-height: 1.25;
}
.trade-position-summary > div > small {
  color: #7f94b0;
  font-size: 11px;
  line-height: 1.4;
}
.trade-position-summary > p { margin: 0; grid-column: 1 / -1; }
.trade-position-list { display: grid; gap: 9px; }
.trade-position-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(118, 151, 205, .15);
  border-radius: 11px;
  background: rgba(6, 16, 29, .7);
}
.trade-position-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.trade-position-title {
  min-width: 0;
  color: #edf5ff;
  font-size: 15px;
  font-weight: 780;
  line-height: 1.45;
}
.trade-position-title a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.trade-position-title a:hover { color: #8fc2ff; text-decoration: underline; }
.trade-position-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.trade-position-tags span {
  padding: 3px 7px;
  border: 1px solid rgba(109, 152, 215, .18);
  border-radius: 99px;
  background: rgba(32, 57, 91, .55);
  color: #a9bfdc;
  font-size: 11px;
  font-weight: 720;
}
.trade-position-tags .is-redeemable {
  border-color: rgba(255, 198, 81, .26);
  background: rgba(121, 81, 16, .18);
  color: #ffd675;
}
.trade-position-stats {
  display: grid;
  grid-template-columns: .9fr .8fr .8fr 1.15fr 1.35fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(118, 151, 205, .12);
  border-radius: 9px;
  background: rgba(118, 151, 205, .1);
}
.trade-position-stats > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: #091728;
}
.trade-position-stats span {
  color: #7f94b0;
  font-size: 11px;
}
.trade-position-stats strong {
  overflow-wrap: anywhere;
  color: #e9f2ff;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.trade-position-stats .is-positive { color: #78e7b6; }
.trade-position-stats .is-negative { color: #ff91a7; }
.trade-position-stats .is-flat { color: #dbe7f7; }
.trade-position-summary .is-positive { color: #78e7b6; }
.trade-position-summary .is-negative { color: #ff91a7; }
.trade-position-summary .is-flat { color: #dbe7f7; }
.trade-position-empty {
  display: grid;
  min-height: 76px;
  place-items: center;
  border: 1px dashed rgba(118, 151, 205, .2);
  border-radius: 10px;
  background: rgba(5, 14, 26, .48);
  color: #8298b5;
  font-size: 13px;
}
.trade-position-error {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column: 1 / -1;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 99, 127, .28);
  border-radius: 10px;
  background: rgba(76, 22, 35, .28);
}
.trade-position-error strong { color: #ffb1c1; font-size: 13px; }
.trade-position-error span { color: #d6a3ad; font-size: 12px; line-height: 1.5; }
.trade-position-error button { min-height: 34px; }
.trade-compact-button { min-height: 34px; padding: 0 11px; white-space: nowrap; }
.trade-data-panel { margin-top: 14px; }
.trade-table-head, .trade-list-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.trade-table-head { padding: 0 2px 9px; color: #aabdd6; font-size: 12px; }
.trade-table-head button, .trade-list-row button {
  padding: 5px 8px;
  border: 1px solid rgba(118, 151, 205, .2);
  border-radius: 6px;
  background: rgba(22, 39, 64, .7);
  color: #c9d9ee;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.trade-list { display: grid; gap: 7px; }
.trade-list-row { padding: 11px; border: 1px solid rgba(118, 151, 205, .12); border-radius: 9px; background: rgba(6, 16, 29, .6); }
.trade-list-row > div { display: grid; gap: 4px; min-width: 0; }
.trade-list-row > div:last-child { justify-items: end; }
.trade-list-row strong { font-size: 12px; }
.trade-list-row span, .trade-list-row small { color: #879bb7; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.trade-list-row.is-unread { border-color: rgba(90, 157, 255, .36); }
.trade-rule-row small { max-width: 440px; }
.trade-review { display: grid; gap: 1px; overflow: hidden; border: 1px solid rgba(118, 151, 205, .14); border-radius: 10px; background: rgba(118, 151, 205, .08); }
.trade-review > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 13px; background: #0b1729; }
.trade-review span { color: #8195b1; font-size: 12px; }
.trade-review strong { text-align: right; font-size: 12px; }
.rule-condition-row { display: grid; grid-template-columns: 1.4fr .55fr 1fr auto; gap: 6px; margin-bottom: 8px; }
.rule-condition-row button { width: 34px; border: 1px solid rgba(255, 99, 127, .2); border-radius: 7px; background: rgba(75, 20, 33, .4); color: #ff9bb0; font-size: 18px; cursor: pointer; }
.trading-toast { position: fixed; right: 22px; bottom: 24px; z-index: 1200; max-width: 390px; padding: 12px 15px; border: 1px solid rgba(98, 161, 255, .35); border-radius: 10px; background: #10223b; color: #e4efff; box-shadow: 0 16px 40px rgba(0, 0, 0, .36); font-size: 13px; }
.trading-toast[data-tone="error"] { border-color: rgba(255, 99, 127, .38); color: #ffc4cf; }
.walletconnect-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(2, 8, 18, .84);
  backdrop-filter: blur(10px);
}
.walletconnect-modal {
  position: relative;
  width: min(380px, 100%);
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 26px;
  border: 1px solid rgba(110, 160, 240, .28);
  border-radius: 18px;
  background: #0c1728;
  color: #e9f2ff;
  text-align: center;
  box-shadow: 0 28px 75px rgba(0, 0, 0, .55);
}
.walletconnect-modal h2, .walletconnect-modal p { margin: 0; }
.walletconnect-modal p { color: #9db0ca; font-size: 13px; line-height: 1.55; }
.walletconnect-modal canvas { width: 280px; max-width: 100%; height: auto; border-radius: 10px; background: white; padding: 8px; }
.walletconnect-kicker { color: #71a9ff !important; letter-spacing: .15em; font-size: 10px !important; font-weight: 850; }
.walletconnect-open {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 16px;
  border-radius: 9px;
  background: linear-gradient(135deg, #266cff, #489cff);
  color: white;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}
.walletconnect-modal small { color: #7f93af; font-size: 11px; }
.walletconnect-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(118, 151, 205, .2);
  border-radius: 50%;
  background: rgba(18, 34, 58, .8);
  color: #dce8fb;
  font-size: 22px;
  cursor: pointer;
}

@media (max-width: 720px) {
  .trade-overlay { padding: 0; align-items: end; }
  .trade-dialog { width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0; }
  .trade-dialog-head { padding: 18px 17px 14px; }
  .trade-dialog-body { padding: 16px 17px 24px; }
  .trade-grid, .trade-risk-grid, .trade-account-strip { grid-template-columns: 1fr; }
  .trade-session-bar { display: grid; }
  .trade-switch-wallet { width: 100%; }
  .trade-action-grid { grid-template-columns: 1fr 1fr; }
  .trade-list-row { align-items: flex-start; }
  .trade-position-summary { grid-template-columns: 1fr 1fr; }
  .trade-position-main { display: grid; }
  .trade-position-tags { justify-content: flex-start; }
  .trade-position-stats { grid-template-columns: 1fr 1fr; }
  .trade-position-stats > div:last-child { grid-column: 1 / -1; }
  .trade-position-error { grid-template-columns: 1fr; }
  .rule-condition-row { grid-template-columns: 1.3fr .45fr .9fr auto; }
  .wallet-button { padding: 0 10px; }
}