/* Adapted from the user-specified officeinfo-19d market view. */
.stock-app{color:#fff;background:#18191b}.stock-app .market-card{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;overflow:hidden}
.market-card {
  padding: 0;
  perspective: 187.5cqw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 34%),
    radial-gradient(circle at 18% 12%, rgba(203, 255, 67, 0.16), transparent 32%),
    radial-gradient(circle at 88% 20%, rgba(25, 100, 255, 0.18), transparent 34%),
    #18191b;
}

.market-card.is-up {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    radial-gradient(circle at 76% 87%, rgba(17, 207, 132, 0.58), transparent 36%),
    radial-gradient(circle at 72% 70%, rgba(0, 123, 78, 0.36), transparent 42%),
    radial-gradient(circle at 18% 12%, rgba(203, 255, 67, 0.14), transparent 32%),
    #111715;
}

.market-card.is-down {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    radial-gradient(circle at 76% 87%, rgba(255, 72, 72, 0.54), transparent 36%),
    radial-gradient(circle at 72% 70%, rgba(135, 18, 38, 0.4), transparent 42%),
    radial-gradient(circle at 18% 12%, rgba(255, 103, 93, 0.18), transparent 32%),
    #191313;
}

.market-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.28)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 44%, rgba(255, 255, 255, 0.025));
  pointer-events: none;
}

.market-face {
  position: absolute;
  inset: 0;
  padding: 4.6875cqw 5.3125cqw 3.75cqw;
  backface-visibility: hidden;
  transition: transform 520ms cubic-bezier(0.2, 0.75, 0.2, 1);
  transform-style: preserve-3d;
}

.market-front {
  transform: rotateY(0deg);
}

.market-back {
  display: grid;
  align-content: start;
  transform: rotateY(180deg);
}

.market-card.is-flipped .market-front {
  transform: rotateY(-180deg);
}

.market-card.is-flipped .market-back {
  transform: rotateY(0deg);
}

.market-topline,
.market-metrics,
.market-chart,
.market-status,
.market-settings-form {
  position: relative;
  z-index: 1;
}

.market-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.8125cqw;
  color: rgba(255, 255, 255, 0.9);
  font-size: 2.6563cqw;
  font-weight: 760;
}

.market-action-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.market-more-button {
  width: 8.4375cqw;
  height: 5cqw;
  border: 0;
  border-radius: 156.0938cqw;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 3.125cqw;
  font-weight: 820;
  line-height: 1;
  cursor: pointer;
}

.market-more-button:focus-visible {
  outline: 0;
}

.market-close-button {
  font-size: 4.8438cqw;
  font-weight: 560;
}

.market-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5cqw 4.375cqw;
  margin-top: 3.75cqw;
}

.market-metric p {
  display: flex;
  align-items: center;
  gap: 1.25cqw;
  margin: 0 0 1.0938cqw;
  color: rgba(255, 255, 255, 0.72);
  font-size: 2.1875cqw;
  font-weight: 620;
}

.market-metric p span {
  width: 1.5625cqw;
  height: 1.5625cqw;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.market-metric strong {
  display: block;
  color: rgba(255, 255, 255, 0.96);
  font-size: 4.5313cqw;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1;
}

.market-metric em {
  display: block;
  margin-top: 0.9375cqw;
  font-size: 2.1875cqw;
  font-style: normal;
  font-weight: 720;
}

.market-tone-0 p,
.market-tone-0 em {
  color: #d4ff3f;
}

.market-tone-1 p,
.market-tone-1 em {
  color: #2470ff;
}

.market-tone-2 p,
.market-tone-2 em {
  color: #55e6b1;
}

.market-tone-3 p,
.market-tone-3 em {
  color: #ffb84a;
}

.market-metric.is-down em {
  color: #ff5b67;
}

.market-metric.is-hidden,
.market-line.is-hidden {
  display: none;
}

.market-chart {
  display: block;
  width: 100%;
  height: 22.1875cqw;
  margin-top: 3.125cqw;
  overflow: visible;
}

.market-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.market-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.market-line-0 {
  stroke: #d4ff3f;
  filter: drop-shadow(0 0 1.25cqw rgba(212, 255, 63, 0.28));
}

.market-line-1 {
  stroke: #2470ff;
  filter: drop-shadow(0 0 1.25cqw rgba(36, 112, 255, 0.32));
}

.market-line-2 {
  stroke: #55e6b1;
  filter: drop-shadow(0 0 1.25cqw rgba(85, 230, 177, 0.28));
}

.market-line-3 {
  stroke: #ffb84a;
  filter: drop-shadow(0 0 1.25cqw rgba(255, 184, 74, 0.3));
}

.market-status {
  margin: 1.25cqw 0 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 1.875cqw;
  font-weight: 620;
  text-align: center;
}

.market-settings-form,
.market-holdings-form {
  width: 78.125cqw;
  max-width: 100%;
}

.market-settings-form {
  display: grid;
  gap: 1.5625cqw;
  width: 56.25cqw;
  margin: 4.0625cqw auto 0;
}

.market-holdings-form {
  display: grid;
  gap: 1.5625cqw;
  margin: 4.0625cqw auto 0;
}

.market-back-panel {
  position: relative;
  z-index: 1;
  display: none;
}

.market-back-panel.is-active {
  display: block;
}

.market-settings-form p,
.market-holdings-form p {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 2.0313cqw;
  font-weight: 650;
  text-align: center;
}

.market-symbol-row {
  display: grid;
  grid-template-columns: 12.5cqw 1fr;
  align-items: center;
  gap: 1.875cqw;
  color: rgba(255, 255, 255, 0.82);
  font-size: 2.0313cqw;
  font-weight: 750;
}

.market-symbol-row > label {
  min-width: 0;
}

.market-symbol-field {
  position: relative;
  min-width: 0;
}

.market-symbol-field input[data-market-symbol-input] {
  width: 100%;
  height: 5.625cqw;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 156.0938cqw;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.94);
  padding: 0 8.4375cqw 0 2.5cqw;
  outline: none;
  font-size: 2.1875cqw;
  font-weight: 760;
  text-transform: uppercase;
}

.market-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.market-eye-toggle {
  position: absolute;
  top: 50%;
  right: 1.25cqw;
  display: grid;
  place-items: center;
  width: 4.6875cqw;
  height: 4.6875cqw;
  border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease;
}

.market-eye-toggle:hover,
.market-hidden-input:focus-visible + .market-eye-toggle {
  background: rgba(255, 255, 255, 0.12);
}

.market-eye-icon {
  position: relative;
  display: block;
  width: 3.2813cqw;
  height: 2.0313cqw;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 156.0938cqw / 112.5cqw;
}

.market-eye-icon::before,
.market-eye-icon::after {
  position: absolute;
  content: "";
}

.market-eye-icon::before {
  top: 50%;
  left: 50%;
  width: 1.0938cqw;
  height: 1.0938cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.76);
  transform: translate(-50%, -50%);
}

.market-eye-icon::after {
  top: 50%;
  left: 50%;
  width: 4.2188cqw;
  height: 3px;
  border-radius: 156.0938cqw;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 2px rgba(38, 45, 50, 0.44);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.market-hidden-input:checked + .market-eye-toggle .market-eye-icon {
  border-color: rgba(255, 255, 255, 0.48);
}

.market-hidden-input:checked + .market-eye-toggle .market-eye-icon::before {
  background: rgba(255, 255, 255, 0.5);
}

.market-hidden-input:checked + .market-eye-toggle .market-eye-icon::after {
  opacity: 1;
}

.market-settings-form button {
  justify-self: center;
  width: 22.1875cqw;
  height: 5.3125cqw;
  border: 0;
  border-radius: 156.0938cqw;
  background: rgba(236, 241, 248, 0.92);
  color: rgba(15, 17, 19, 0.95);
  font-size: 2.0313cqw;
  font-weight: 850;
  cursor: pointer;
}

.portfolio-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.8125cqw;
  width: 76.5625cqw;
  margin: 8.75cqw auto 0;
}

.portfolio-total-card {
  min-height: 20cqw;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2.1875cqw;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4.375cqw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.portfolio-total-card span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 2.3438cqw;
  font-weight: 760;
}

.portfolio-total-card strong {
  color: rgba(255, 255, 255, 0.96);
  font-size: 3.9063cqw;
  font-weight: 800;
  line-height: 1;
}

.portfolio-chart {
  position: relative;
  z-index: 1;
  display: block;
  width: 87.5cqw;
  height: 22.1875cqw;
  margin: 4.375cqw auto 0;
  overflow: visible;
}

.portfolio-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.portfolio-line-hk {
  stroke: #d4ff3f;
  filter: drop-shadow(0 0 1.25cqw rgba(212, 255, 63, 0.28));
}

.portfolio-line-us {
  stroke: #2470ff;
  filter: drop-shadow(0 0 1.25cqw rgba(36, 112, 255, 0.32));
}

.portfolio-chart-caption {
  position: relative;
  z-index: 1;
  margin: 1.4063cqw 0 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 1.875cqw;
  font-weight: 650;
  text-align: center;
}

.market-holding-rows {
  display: grid;
  gap: 1.25cqw;
  max-height: 38.4375cqw;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
}

.market-holding-row {
  display: grid;
  grid-template-columns: 9.0625cqw minmax(12.8125cqw, 0.9fr) minmax(17.5cqw, 1.15fr) 8.4375cqw 4.375cqw;
  align-items: center;
  gap: 0.9375cqw;
  color: rgba(255, 255, 255, 0.82);
  font-size: 2.0313cqw;
  font-weight: 760;
}

.market-holding-row select,
.market-holding-row input {
  min-width: 0;
  width: 100%;
  height: 5.3125cqw;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 156.0938cqw;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.94);
  padding: 0 1.5625cqw;
  outline: none;
  font-size: 2.1875cqw;
  font-weight: 760;
}

.market-holding-row select {
  padding: 0 0.9375cqw;
  font-size: 1.875cqw;
}

.market-holding-row select option {
  background: #ffffff;
  color: #111111;
}

.market-holding-row input {
  padding: 0 1.5625cqw;
  text-transform: uppercase;
}

.market-holding-row input[data-holding-lots] {
  appearance: textfield;
  text-align: right;
}

.market-holding-row input[data-holding-lots]::-webkit-outer-spin-button,
.market-holding-row input[data-holding-lots]::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.market-holding-row .holding-stock-name {
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.875cqw;
  font-weight: 720;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
}

.market-delete-holding {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 4.375cqw;
  height: 4.375cqw;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
  font-size: 2.6563cqw;
  line-height: 1;
  cursor: pointer;
}

.market-form-actions {
  display: flex;
  justify-content: center;
  gap: 1.875cqw;
  margin-top: 2px;
}

.market-holdings-form button {
  min-width: 17.5cqw;
  height: 5.3125cqw;
  border: 0;
  border-radius: 156.0938cqw;
  background: rgba(236, 241, 248, 0.92);
  color: rgba(15, 17, 19, 0.95);
  font-size: 2.0313cqw;
  font-weight: 850;
  cursor: pointer;
}

.market-holdings-form .market-delete-holding {
  min-width: 0;
  width: 4.375cqw;
  height: 4.375cqw;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

.market-holdings-form .market-secondary-button {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}


.stock-app .market-back{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.stock-app .market-face{padding-right:5.3cqw}.stock-app .market-settings-form>button{height:5.5cqw;background:#edf2f7;border:0;border-radius:4cqw;color:#161a20;font-size:2.1cqw;font-weight:650}.stock-app .market-more-button{min-height:6.875cqw;min-width:6.875cqw}.stock-app .market-more-button:focus-visible{outline:2px solid #d3e7ff;outline-offset:0}.stock-app .market-status{line-height:1.5}.stock-app .portfolio-chart{width:100%}.stock-app .market-holding-row input,.stock-app .market-holding-row select{min-height:5.4cqw;padding:.8cqw 1cqw}.stock-app .market-front[inert],.stock-app .market-back[inert]{pointer-events:none}.stock-app .stock-back{display:flex;align-items:center;gap:1cqw;background:none;border:0;padding:0;color:inherit;font-size:2.65cqw;font-weight:650}.stock-back svg{width:3.5cqw;height:3.5cqw}.dock-app-stocks{grid-area:4/4}.dock-icon.stocks{background:linear-gradient(#2b3139,#080c12)}.dock-icon.stocks svg{width:7.2cqw;height:7.2cqw;color:#fff}