:root {
  font-family: Arial,Helvetica,sans-serif;
  color: #e8edf2;
  background: #12171d;
  font-size: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: linear-gradient(145deg,#202832,#12171d 70%);
}
header {
  min-height: 48px;
  padding: 7px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #252d36;
  border-bottom: 1px solid #394653;
}
.brand,.right {
  display: flex;
  align-items: center;
  gap: 9px;
}
.logo {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -2px;
}
.logo span,.brand i { color: #82d747; }
.brand i { font-style: normal; }
.brand strong {
  display: block;
  font-size: 12px;
  letter-spacing: .07em;
}
.brand small {
  display: block;
  margin-top: 3px;
  color: #aeb8c3;
  font-size: 9px;
}
.right { color: #aeb8c3; font-size: 10px; }
.status { color: #e8c35c; white-space: nowrap; }
.status.online { color: #83da4d; }
.status.offline { color: #ff626b; }
.ticker {
  display: flex;
  gap: 17px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 7px 11px;
  background: #202730;
  border-bottom: 1px solid #38434d;
  color: #a8b1bc;
  font-size: 10px;
}
.ticker b { color: #83da4d; margin-left: 4px; }
.ticker .yellow { color: #f1c650; }
main {
  max-width: 1500px;
  margin: auto;
  padding: 8px;
}
.summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 3px 9px;
  border-bottom: 1px solid #38434d;
}
.summary small {
  color: #e6bf52;
  font-size: 9px;
  letter-spacing: .04em;
}
.summary h1 {
  margin: 4px 0;
  color: #88da4e;
  font-size: 25px;
  line-height: 1;
}
.summary h1 em {
  color: #e6eaf0;
  font-size: 13px;
  font-style: normal;
}
.summary p {
  margin: 0;
  color: #a4afba;
  font-size: 9px;
}
.totals { display: flex; gap: 13px; }
.totals>div { min-width: 48px; }
.totals small {
  display: block;
  color: #aeb7c1;
  font-size: 9px;
}
.totals strong {
  color: #87da4c;
  font-size: 17px;
}
.totals strong.red { color: #ff626d; }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 7px 0;
}
.toolbar label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #e8c65e;
  font-size: 10px;
  font-weight: bold;
}
.toolbar input,.toolbar select {
  width: 170px;
  min-width: 0;
  padding: 6px;
  border: 1px solid #485461;
  border-radius: 3px;
  background: #343d47;
  color: #f0f3f7;
  font-size: 11px;
}
.toolbar select { width: 145px; }
#counter {
  margin-left: auto;
  color: #aab4be;
  font-size: 10px;
}
.workspace { display: block; }
.side {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
  margin-bottom: 7px;
  align-items: stretch;
}
.trade,.profit,.quote {
  min-width: 0;
  border: 1px solid #3d4b58;
  background: #1d252e;
}
.trade,.profit {
  min-height: 0;
  overflow: hidden;
}
.bar,.quoteshead {
  min-height: 29px;
  padding: 6px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
  background: #2d3742;
  color: #e8edf2;
  font-size: 11px;
  font-weight: bold;
}
.bar span,.quoteshead span {
  color: #b0bac5;
  font-size: 9px;
  font-weight: normal;
}
.tradebody {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px 8px;
  padding: 7px;
}
.toggle {
  grid-column: 1/-1;
  display: flex;
  gap: 12px;
  margin-bottom: 2px;
  font-size: 11px;
}
.buy { color: #86db50; }
.sell { color: #ff646d; }
.tradebody label {
  display: block;
  min-width: 0;
  color: #bbc5ce;
  font-size: 10px;
}
.tradebody input,.tradebody select {
  display: block;
  width: 100%;
  height: 29px;
  margin-top: 3px;
  padding: 4px 6px;
  border: 1px solid #515c66;
  border-radius: 3px;
  background: #dce1e5;
  color: #252b31;
  font-size: 11px;
}
.tradebody input:disabled,
.tradebody select:disabled { opacity: .65; }
.buttons {
  display: flex;
  justify-content: flex-start;
  align-items: end;
  gap: 5px;
}
.buttons button {
  padding: 6px 9px;
  border: 1px solid #596572;
  background: #3b4652;
  color: #d5dce3;
  font-size: 10px;
}
.tradebody p {
  grid-column: 1/-1;
  margin: 2px 0 0;
  color: #a4afb9;
  font-size: 9px;
  line-height: 1.35;
}

.placeholder {
  color: #9da9b5;
  font-size: 10px;
}
.selectedName {
  color: #eec85a;
  font-weight: bold;
  font-size: 13px;
}
.selectedPrice {
  margin: 4px 0;
  color: #85d94d;
  font-size: 19px;
  font-weight: bold;
}
.selectedMeta {
  color: #b5c0cb;
  font-size: 10px;
  line-height: 1.5;
}



.quotes { min-width: 0; }
.quoteshead { margin-bottom: 6px; }
.grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
}
.quote {
  min-height: 116px;
  padding: 7px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(140deg,#26313b,#1b232b);
}
.quote:hover,.quote.active {
  border-color: #d5bc65;
  background: #303a40;
}
.qtop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 5px;
}
.qname {
  max-width: 62%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #f0c75a;
  font-size: 12px;
  font-weight: bold;
}
.qprice {
  white-space: nowrap;
  color: #8bdf52;
  font-size: 15px;
  font-weight: bold;
}
.qsub {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin: 4px 0;
  color: #aebac5;
  font-size: 9px;
}
.red { color: #ff646d; }
.orderhead,.orderrow {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 3px;
  text-align: right;
}
.orderhead {
  padding: 4px 2px;
  background: #414c57;
  color: #e4e8ed;
  font-size: 9px;
}
.orderrow {
  padding: 3px 2px 0;
  color: #cbd3dc;
  font-size: 9px;
}
.orderrow span:nth-child(2) { color: #8bda51; }
.orderrow span:nth-child(3) { color: #f36b74; }
.orderrow span:nth-child(4) { color: #f1c65d; }
.note {
  margin-top: 5px;
  color: #9faab5;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0;
  color: #b5bfca;
}
.pager button {
  padding: 6px 9px;
  border: 1px solid #46535e;
  background: #2b3540;
  color: #e1e7ed;
}
.pager button:disabled { opacity: .4; }
.legend { display: flex; gap: 6px; margin: 9px 0; }
.legend span { height: 5px; flex: 1; background: #7dcd46; }
.legend span:nth-child(2) { background: #e8c25a; }
.legend span:nth-child(3) { background: #ec5966; }
footer {
  padding: 5px 0 12px;
  color: #98a4af;
  font-size: 9px;
  text-align: center;
  line-height: 1.4;
}
#v3-pulse {
  color: #8bdb55;
  font-weight: bold;
}
.v3-changed {
  border-color: #f2cb5d;
  background: #344032;
}
.v3-delta {
  color: #f2cf72;
  font-size: 9px;
  margin-top: 4px;
}
@media(max-width:900px) {
  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
  header { padding: 7px 8px; }
  .brand strong { font-size: 11px; }
  .logo { font-size: 21px; }
  #clock { display: none; }
  main { padding: 6px; }
  .summary { align-items: flex-start; }
  .summary h1 { font-size: 23px; }
  .summary h1 em { font-size: 12px; }
  .summary p { font-size: 8px; }
  .totals { gap: 7px; }
  .totals strong { font-size: 15px; }
  .totals small { font-size: 8px; }
  .toolbar input { width: 130px; }
  .toolbar select { width: 120px; }
  .side { gap: 5px; }
  .bar,.quoteshead { padding: 6px; font-size: 10px; }
  .tradebody { gap: 5px; padding: 5px; }
  .tradebody input,.tradebody select { height: 27px; font-size: 10px; }
  .buttons button { padding: 5px; }
  
  
  .grid { gap: 5px; }
  .quote { padding: 5px; min-height: 110px; }
  .qname { font-size: 11px; }
  .qprice { font-size: 13px; }
  .orderhead,.orderrow { font-size: 8px; }
  .quoteshead span { font-size: 8px; }
}
@media(max-width:370px) {
  .tradebody { grid-template-columns: 1fr; }
  .buttons { grid-column: 1; }
  .qprice { font-size: 11px; }
}

.profit {
  min-width:0;
  background:#1d252e;
  border:1px solid #3d4b58;
  overflow:hidden;
}
.profitbody {
  padding:8px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.profitbody>div {
  padding:6px;
  min-width:0;
  background:#26313b;
}
.profitbody small {
  display:block;
  font-size:9px;
  color:#aebbc7;
}
.profitbody strong {
  display:block;
  margin-top:5px;
  font-size:13px;
  color:#9add69;
}
.profitbody p {
  grid-column:1/-1;
  font-size:9px;
  line-height:1.4;
  color:#b5c1cb;
  margin:0;
}
.investor-quote {
  border-top:1px solid #425443;
  padding-top:5px;
  margin-top:5px;
  color:#9add69;
  font-size:9px;
  font-weight:bold;
}
.side>.trade,
.side>.profit {
  min-width:0;
}

/* MY247 V5 INVESTOR LIVE */
.investor-live {
  margin-top:6px;
  padding:6px 3px;
  border-top:1px solid #475461;
  color:#f2c65a;
  font-size:10px;
  font-weight:700;
  text-align:center;
}
.investor-live.up {color:#8fe65a}
.investor-live.down {color:#ff7474}


/* MY247 V6 INVESTOR PRICE DISPLAY */
.my247-investor-prices {
    margin-top:8px;
    border-top:1px solid #4a5966;
    padding-top:7px;
    color:#e7bd54;
    font-size:10px;
    font-weight:700;
}
.my247-investor-label {
    font-size:9px;
    letter-spacing:.3px;
    margin-bottom:6px;
}
.my247-investor-cells {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
}
.my247-investor-cells>div {
    min-width:0;
    padding:5px 2px;
    text-align:center;
    background:#303b46;
}
.my247-investor-cells small {
    display:block;
    color:#b5c2cb;
    font-size:8px;
}
.my247-investor-cells strong {
    display:block;
    font-size:10px;
    margin-top:4px;
    overflow-wrap:anywhere;
}
.my247-investor-prices.up strong {
    color:#88e45d;
}
.my247-investor-prices.down strong {
    color:#ff7474;
}