/* v133 release overrides load after the legacy polish bundle. */
#topbar {
  --topbar-side: 20px;
  display: block !important;
  overflow: visible !important;
  border-bottom: 0 !important;
  background: #f7f9fc !important;
}

.topbar-row1 {
  min-height: 64px !important;
  padding: max(10px, env(safe-area-inset-top)) var(--topbar-side) 8px !important;
  border: 0 !important;
  background: #f7f9fc !important;
}

.topbar-row1 #asset-title {
  width: auto !important;
  max-width: min(68vw, 300px) !important;
  min-height: 44px !important;
  padding: 0 !important;
  gap: 10px !important;
  border: 0 !important;
  background: transparent !important;
}

.topbar-row1 #asset-title::after {
  display: none !important;
}

.topbar-row2 {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 12px var(--topbar-side) 14px !important;
  background: #fff !important;
}

#panel-stocks #action-buttons {
  display: grid !important;
  width: auto !important;
  margin: 0 0 10px !important;
  padding: 6px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f2f4f6 !important;
}

#panel-stocks #action-buttons button,
#panel-stocks #action-buttons button.action-primary {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 5px 2px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #4e5968 !important;
}

#panel-stocks #action-buttons button.is-ready:not(:disabled),
#panel-stocks #work-btn:not(:disabled) {
  background: #fff !important;
  color: #1b64da !important;
}

#panel-stocks #action-buttons button.quest-focus {
  background: #fff8e7 !important;
  box-shadow: inset 0 0 0 2px #f5b544 !important;
}

#stock-list .stock-card .stock-logo {
  width: 48px !important;
  height: 48px !important;
  align-self: start !important;
  padding: 4px 1px !important;
  border-radius: 8px !important;
  transform: none !important;
}

#stock-list .stock-card.is-expanded .stock-logo {
  transform: none !important;
}

#stock-list .stock-card .stock-logo span {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 7.4px !important;
  letter-spacing: 0 !important;
  transform: translateY(-1px) !important;
}

#stock-list .stock-card[data-logo="LGENSOLU"] .stock-logo span,
#stock-list .stock-card[data-logo="CELTRIGON"] .stock-logo span {
  font-size: 6.5px !important;
}

#stock-list .stock-card-head {
  min-height: 72px !important;
  grid-template-columns: 48px minmax(0, 1fr) minmax(86px, 94px) 14px !important;
  align-items: start !important;
  gap: 8px !important;
}

#stock-list .stock-card .stock-name-block,
#stock-list .stock-card .stock-price-block {
  min-height: 48px !important;
  align-self: start !important;
}

#stock-list .stock-card .stock-price-block {
  align-content: start !important;
}

#stock-list .stock-expand-indicator {
  align-self: start !important;
  margin-top: 13px !important;
}

#first-buy-modal .modal-content {
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top))) !important;
  padding: 28px 20px calc(20px + env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.first-buy-visual {
  width: min(100%, 278px);
  aspect-ratio: 16 / 9;
  margin: 0 auto 10px;
  overflow: hidden;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #eff6ff;
}

.first-buy-visual .reward-card-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

#first-buy-text {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
}

#first-buy-text span {
  display: block;
  word-break: keep-all;
  text-wrap: balance;
}

.first-buy-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.first-buy-flow > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 9px 8px;
  border: 1px solid #e2edf8;
  border-radius: 9px;
  background: #f8fbff;
}

.first-buy-flow small {
  color: #6b7684;
  font-size: 12px;
  font-weight: 650;
}

.first-buy-flow strong {
  min-width: 0;
  overflow: visible;
  color: #1769e5;
  font-size: 16px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-overflow: clip;
  white-space: nowrap;
}

.first-buy-flow i {
  color: #8b95a1;
  font-style: normal;
  font-weight: 800;
}

.first-buy-total-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eef5ff;
  color: #4e5968;
  font-size: 11px;
  line-height: 1.35;
}

.first-buy-total-note strong {
  flex: 0 0 auto;
  color: #1769e5;
}

.first-buy-next {
  margin: 0 0 10px;
}

body[data-starter-phase="work"] #panel-stocks #action-buttons {
  max-width: 420px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (max-width: 520px) {
  #panel-stocks #action-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #panel-stocks #action-buttons button,
  #panel-stocks #action-buttons button.action-primary {
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: 6px 10px !important;
    text-align: left !important;
  }

  #panel-stocks #action-buttons .action-label,
  #panel-stocks #action-buttons .action-status {
    text-align: left !important;
  }
}

@media (max-width: 380px) {
  #topbar {
    --topbar-side: 16px;
  }

  .topbar-row1 #asset-title {
    max-width: calc(100vw - 116px) !important;
  }
}

@media (min-width: 900px) {
  .topbar-row1,
.topbar-row2,
#panel-stocks #action-buttons,
#stock-list,
#panel-stocks #market-news-feed {
    width: min(100%, 1080px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #stock-list {
    align-items: start !important;
  }

  #stock-list .stock-card {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }
}
