/* Bold white SaaS direction for the isolated dashboard mockup.
   This file intentionally changes only visual presentation in the mockup. */

:root {
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ios-mono: "SF Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
  --premium-primary: #272A2F;
  --premium-primary-hover: #333740;
  --premium-primary-pressed: #1F2228;
  --premium-primary-border: rgba(39, 42, 47, 0.18);
  --premium-primary-shadow: rgba(39, 42, 47, 0.16);
  --bold-canvas: #EEF2F7;
  --bold-shell: rgba(255, 255, 255, 0.76);
  --bold-panel: #FFFFFF;
  --bold-panel-soft: #F8FAFC;
  --bold-panel-muted: #F1F5F9;
  --bold-line: rgba(15, 23, 42, 0.08);
  --bold-line-strong: rgba(15, 23, 42, 0.14);
  --bold-text: #0F172A;
  --bold-muted: #64748B;
  --bold-faint: #94A3B8;
  --bold-blue: #2563EB;
  --bold-blue-dark: #1D4ED8;
  --bold-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 48px rgba(15, 23, 42, 0.10);
  --bold-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.07);
}

html {
  background: var(--bold-canvas) !important;
}

body {
  font-family: var(--ios-font) !important;
  min-height: 100vh !important;
  padding: 18px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.12), transparent 30%),
    radial-gradient(circle at 92% 4%, rgba(15, 23, 42, 0.07), transparent 26%),
    linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 52%, #E8EDF5 100%) !important;
  color: var(--bold-text) !important;
}

button,
input,
select,
textarea {
  font-family: var(--ios-font) !important;
}

.account-value,
tbody td.text-right,
.log-body,
.log-line {
  font-family: var(--ios-mono) !important;
}

#app {
  max-width: 1540px !important;
  margin: 0 auto !important;
  min-height: calc(100vh - 36px) !important;
  background: rgba(249, 250, 251, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 34px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 28px 90px rgba(15, 23, 42, 0.15) !important;
  overflow: hidden !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

.header {
  min-height: 78px !important;
  padding: 16px 22px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  box-shadow: none !important;
}

.header > div:first-child {
  gap: 14px !important;
}

.ws-indicator {
  width: 13px !important;
  height: 13px !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.10) !important;
}

.header-title {
  font-size: 1.22rem !important;
  font-weight: 760 !important;
  color: #111827 !important;
}

.header-title span {
  color: #111827 !important;
}

.header > div:first-child > div:last-child {
  gap: 3px !important;
  margin-left: 18px !important;
  padding: 5px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 18px !important;
  background: #E9EEF6 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

#tab-ibb,
#tab-mm,
#tab-st {
  min-width: 128px !important;
  min-height: 36px !important;
  justify-content: center !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: #64748B !important;
  border-color: transparent !important;
  font-weight: 650 !important;
}

#tab-ibb[style*="--accent-blue"],
#tab-mm[style*="--accent-blue"],
#tab-st[style*="--accent-blue"] {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 10px 24px rgba(15, 23, 42, 0.10) !important;
}

.header-actions {
  gap: 10px !important;
}

.status-badge {
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #F8FAFC !important;
  color: #475569 !important;
  border-color: rgba(15, 23, 42, 0.09) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.main-grid {
  grid-template-columns: minmax(0, 1.28fr) minmax(380px, 0.72fr) !important;
  gap: 18px !important;
  padding: 20px !important;
  align-items: start !important;
}

.card {
  border-radius: 26px !important;
  background: var(--bold-panel) !important;
  border: 1px solid rgba(15, 23, 42, 0.075) !important;
  box-shadow: var(--bold-shadow-soft) !important;
  overflow: hidden !important;
}

.card:hover {
  border-color: rgba(15, 23, 42, 0.13) !important;
  box-shadow: var(--bold-shadow) !important;
  transform: translateY(-1px) !important;
}

.card-header {
  min-height: 58px !important;
  padding: 16px 20px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.065) !important;
  color: var(--bold-text) !important;
}

.card-header > span:first-child {
  font-size: 1.02rem !important;
  font-weight: 720 !important;
}

.card-header > span:first-child > span {
  margin-left: 8px !important;
  color: #64748B !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
}

.account-card {
  grid-column: 1 / -1 !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%) !important;
  border-color: rgba(37, 99, 235, 0.16) !important;
  box-shadow:
    0 1px 2px rgba(37, 99, 235, 0.05),
    0 24px 68px rgba(37, 99, 235, 0.13) !important;
}

.account-card .card-header {
  min-height: 70px !important;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.10), rgba(255, 255, 255, 0.0) 52%),
    #FFFFFF !important;
}

.account-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 18px !important;
}

.account-divider {
  display: none !important;
}

.account-col {
  min-height: 166px !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.075) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 30px rgba(15, 23, 42, 0.07) !important;
}

.account-item {
  margin-bottom: 10px !important;
}

.account-item + .account-item {
  padding-top: 9px !important;
}

.account-label {
  color: #64748B !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
}

.account-value {
  color: #0F172A !important;
  font-size: 0.98rem !important;
  font-weight: 680 !important;
}

.account-value.big {
  font-size: 1.42rem !important;
  font-weight: 760 !important;
}

.ticker-panel {
  grid-column: 1 / -1 !important;
  border-radius: 30px !important;
}

.ticker-add-row {
  margin: 16px 18px 0 !important;
  padding: 16px !important;
  gap: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 22px !important;
  background: #F8FAFC !important;
}

.ticker-action-row {
  margin: 12px 18px 0 !important;
  padding: 12px !important;
  gap: 8px !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
}

.ticker-add-row label {
  color: #475569 !important;
  font-size: 0.74rem !important;
  font-weight: 650 !important;
}

.ticker-add-row input,
.ticker-add-row select,
.form-input,
#lock-password {
  min-height: 36px !important;
  border-radius: 13px !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  background: #FFFFFF !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important;
}

.btn {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.045) !important;
  justify-content: center !important;
  text-align: center !important;
}

.btn-sm {
  min-height: 32px !important;
  padding: 0 11px !important;
}

.btn:hover {
  background: #F8FAFC !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

#btn-toggle-bot,
#btn-add-ticker,
#btn-clear-log,
#btn-settings-save,
#btn-unlock {
  background: var(--premium-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--premium-primary-border) !important;
  box-shadow: 0 10px 22px var(--premium-primary-shadow) !important;
}

#btn-toggle-bot:hover,
#btn-add-ticker:hover,
#btn-clear-log:hover,
#btn-settings-save:hover,
#btn-unlock:hover {
  background: var(--premium-primary-hover) !important;
}

#btn-reset-ticker,
#btn-delete-ticker {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #DC2626 !important;
  border-color: rgba(220, 38, 38, 0.16) !important;
}

.ticker-panel .table-wrap {
  margin: 14px 18px 18px !important;
  max-height: 330px !important;
}

.table-wrap {
  border: 1px solid rgba(15, 23, 42, 0.075) !important;
  border-radius: 22px !important;
  background: #FFFFFF !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.025) !important;
}

table {
  color: #111827 !important;
}

thead th {
  height: 40px !important;
  background: #F8FAFC !important;
  color: #64748B !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
}

tbody td {
  height: 42px !important;
  color: #334155 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.055) !important;
}

tbody td strong {
  color: #0F172A !important;
}

tbody tr.selected td {
  background: rgba(37, 99, 235, 0.075) !important;
}

tbody tr.selected td:first-child {
  box-shadow: inset 4px 0 0 var(--bold-blue) !important;
}

tbody tr:hover td {
  background: #F8FAFC !important;
}

.badge {
  padding: 3px 9px !important;
  min-width: 42px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.badge-green,
.badge-orange,
.badge-cyan,
.badge-blue,
.badge-purple {
  color: #334155 !important;
  background: #F1F5F9 !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

.badge-red {
  color: #DC2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
}

.holdings-card {
  grid-column: 1 / 2 !important;
  border-radius: 28px !important;
}

.trades-card {
  grid-column: 1 / 2 !important;
  border-radius: 28px !important;
}

.log-card {
  grid-column: 2 / 3 !important;
  grid-row: 3 / 5 !important;
  min-height: 520px !important;
  border-radius: 28px !important;
}

.log-body {
  margin: 0 !important;
  padding: 16px 18px !important;
  background:
    linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
  color: #334155 !important;
}

.log-line {
  padding: 8px 10px !important;
  margin-bottom: 6px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035) !important;
}

.modal {
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 26px 86px rgba(15, 23, 42, 0.20) !important;
}

#toast-container .toast,
.toast {
  border-radius: 16px !important;
  background: rgba(17, 24, 39, 0.94) !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.20) !important;
}

@media (max-width: 980px) {
  body {
    padding: 0 !important;
  }

  #app {
    min-height: 100vh !important;
    border-radius: 0 !important;
  }

  .main-grid {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
  }

  .account-grid {
    grid-template-columns: 1fr !important;
  }

  .holdings-card,
  .trades-card,
  .log-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .header > div:first-child > div:last-child {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Radical layout treatment for the mockup: app-shell sidebar + command surface. */
@media (min-width: 1100px) {
  body {
    padding: 20px !important;
    background:
      radial-gradient(circle at 4% 12%, rgba(37, 99, 235, 0.16), transparent 28%),
      radial-gradient(circle at 95% 0%, rgba(14, 165, 233, 0.11), transparent 30%),
      linear-gradient(135deg, #EEF4FF 0%, #F8FAFC 42%, #EEF2F7 100%) !important;
  }

  #app {
    display: grid !important;
    grid-template-columns: 270px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    max-width: 1620px !important;
    min-height: calc(100vh - 40px) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    border-radius: 36px !important;
  }

  .header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 20px !important;
    height: calc(100vh - 40px) !important;
    min-height: 720px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    padding: 24px 18px !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-bottom: 0 !important;
    border-radius: 36px 0 0 36px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.82)) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.7) !important;
  }

  .header > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .header > div:first-child::after {
    content: "Live trading dashboard";
    display: block;
    color: #94A3B8;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0 4px 4px;
  }

  .ws-indicator {
    position: absolute !important;
    top: 28px !important;
    right: 22px !important;
  }

  .header-title {
    max-width: 170px !important;
    padding: 4px !important;
    font-size: 1.42rem !important;
    line-height: 1.05 !important;
  }

  .header-title span {
    display: block !important;
    font-size: 1.74rem !important;
  }

  .header > div:first-child > div:last-child {
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    border-radius: 24px !important;
    background: #F1F5F9 !important;
  }

  #tab-ibb,
  #tab-mm,
  #tab-st {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    border-radius: 17px !important;
  }

  #tab-ibb::before,
  #tab-mm::before,
  #tab-st::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 999px;
    background: #CBD5E1;
  }

  #tab-ibb[style*="--accent-blue"]::before,
  #tab-mm[style*="--accent-blue"]::before,
  #tab-st[style*="--accent-blue"]::before {
    background: #2563EB;
  }

  .header-actions {
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
  }

  .header-actions .btn,
  .header-actions .status-badge {
    width: 100% !important;
    justify-content: center !important;
  }

  .header-actions .status-badge {
    order: -1 !important;
  }

  #ibb-container,
  #mm-container,
  #st-container {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: auto !important;
  }

  .main-grid {
    grid-template-columns: minmax(0, 1fr) 430px !important;
    padding: 24px !important;
    gap: 20px !important;
  }

  .account-card {
    grid-column: 1 / -1 !important;
    position: relative !important;
  }

  .account-card::after {
    content: "Portfolio overview";
    position: absolute;
    right: 26px;
    top: 22px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.09);
    color: #2563EB;
    border: 1px solid rgba(37, 99, 235, 0.13);
    font-size: 0.74rem;
    font-weight: 700;
  }

  .account-card .card-header {
    min-height: 84px !important;
    padding: 22px 26px !important;
  }

  .account-card .card-header > span:first-child {
    font-size: 1.18rem !important;
  }

  .account-grid {
    padding: 0 22px 22px !important;
    gap: 18px !important;
  }

  .ticker-panel {
    grid-column: 1 / -1 !important;
  }

  .ticker-panel .card-header {
    min-height: 70px !important;
  }

  .ticker-add-row {
    display: grid !important;
    grid-template-columns: 110px 170px repeat(6, minmax(92px, auto)) auto !important;
    align-items: end !important;
  }

  .ticker-action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .ticker-action-row #btn-reset-ticker {
    margin-left: 0 !important;
  }

  .ticker-action-row #btn-reset-ticker {
    margin-left: auto !important;
  }

  .holdings-card {
    grid-column: 1 / 2 !important;
    min-height: 300px !important;
  }

  .log-card {
    grid-column: 2 / 3 !important;
    grid-row: 3 / 5 !important;
    min-height: 650px !important;
  }

  .trades-card {
    grid-column: 1 / 2 !important;
    min-height: 310px !important;
  }

  .log-body {
    min-height: 584px !important;
  }
}

/* Mobile account summary: keep the three account groups visible in one row. */
@media (max-width: 980px) {
  .account-card {
    border-radius: 22px !important;
  }

  .account-card .card-header {
    min-height: 52px !important;
    padding: 12px 14px !important;
  }

  .account-card .card-header > span:first-child {
    font-size: 0.92rem !important;
  }

  .account-card .card-header > span:first-child > span {
    display: block !important;
    margin: 2px 0 0 !important;
    font-size: 0.62rem !important;
    line-height: 1.25 !important;
  }

  .account-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .account-divider {
    display: none !important;
  }

  .account-col {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 9px 6px !important;
    border-radius: 16px !important;
  }

  .account-item {
    margin-bottom: 5px !important;
  }

  .account-item + .account-item {
    padding-top: 5px !important;
  }

  .account-label {
    font-size: clamp(0.55rem, 1.95vw, 0.68rem) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
  }

  .account-value {
    max-width: 100% !important;
    font-size: clamp(0.62rem, 2.35vw, 0.82rem) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .account-value.big {
    font-size: clamp(0.76rem, 3vw, 1rem) !important;
  }

  .account-col hr {
    margin: 4px 0 !important;
  }
}

@media (max-width: 430px) {
  .account-grid {
    gap: 5px !important;
    padding: 6px !important;
  }

  .account-col {
    padding: 8px 5px !important;
    border-radius: 14px !important;
  }

  .account-label {
    font-size: 0.54rem !important;
  }

  .account-value {
    font-size: 0.61rem !important;
  }

  .account-value.big {
    font-size: 0.75rem !important;
  }
}

/* Premium quiet pass: less color noise, cleaner hierarchy, softer depth. */
body {
  background:
    linear-gradient(180deg, #F7F8FB 0%, #F2F5F9 48%, #EEF2F7 100%) !important;
}

#app {
  background: rgba(255, 255, 255, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 22px 70px rgba(15, 23, 42, 0.11) !important;
}

.header {
  background: rgba(255, 255, 255, 0.90) !important;
}

.header-title {
  color: #0F172A !important;
  font-weight: 760 !important;
}

.header > div:first-child > div:last-child {
  background: #F3F5F8 !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.035) !important;
}

#tab-ibb,
#tab-mm,
#tab-st {
  color: #667085 !important;
}

#tab-ibb[style*="--accent-blue"],
#tab-mm[style*="--accent-blue"],
#tab-st[style*="--accent-blue"] {
  background: #FFFFFF !important;
  color: #101828 !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 18px rgba(15, 23, 42, 0.075) !important;
}

.status-badge {
  background: #F8FAFC !important;
  color: #667085 !important;
  border-color: rgba(15, 23, 42, 0.07) !important;
  box-shadow: none !important;
}

.card {
  border-radius: 24px !important;
  border-color: rgba(15, 23, 42, 0.065) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.035),
    0 10px 26px rgba(15, 23, 42, 0.055) !important;
}

.card:hover {
  transform: none !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 34px rgba(15, 23, 42, 0.07) !important;
}

.card-header {
  min-height: 56px !important;
  background: #FFFFFF !important;
  border-bottom-color: rgba(15, 23, 42, 0.055) !important;
}

.card-header > span:first-child {
  color: #101828 !important;
  font-weight: 700 !important;
}

.card-header > span:first-child > span {
  color: #667085 !important;
}

.account-card {
  background: #FFFFFF !important;
  border-color: rgba(15, 23, 42, 0.065) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.035),
    0 14px 38px rgba(15, 23, 42, 0.06) !important;
}

.account-card::after {
  content: "요약";
  background: #F8FAFC !important;
  color: #475467 !important;
  border-color: rgba(15, 23, 42, 0.07) !important;
  box-shadow: none !important;
}

.account-card .card-header {
  background: #FFFFFF !important;
}

.account-col {
  background: #FAFBFC !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.account-col:hover {
  background: #FFFFFF !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}

.account-label {
  color: #667085 !important;
  font-weight: 560 !important;
}

.account-value,
.account-value.big,
.account-card .text-green,
.account-card .text-orange,
.account-card .text-blue,
.account-card .text-purple,
.account-card .text-yellow,
#hybrid-total,
#this-year-profit,
#cum-profit,
#after-tax,
#unsettled {
  color: #101828 !important;
}

.account-card .text-red,
#tax-est {
  color: #D92D20 !important;
}

.account-value.big {
  letter-spacing: -0.01em !important;
}

.ticker-add-row,
.ticker-action-row {
  background: #FAFBFC !important;
  border-color: rgba(15, 23, 42, 0.055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.ticker-add-row input,
.ticker-add-row select,
.form-input,
#lock-password {
  background: #FFFFFF !important;
  border-color: rgba(15, 23, 42, 0.085) !important;
  box-shadow: none !important;
}

.ticker-add-row input:focus,
.ticker-add-row select:focus,
.form-input:focus,
#lock-password:focus {
  border-color: rgba(37, 99, 235, 0.44) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10) !important;
}

.btn,
.ticker-action-row .btn,
#btn-buy-n-days,
#btn-market-buy-n-days,
#btn-reset-detection,
#btn-reset-date,
#btn-update-options,
#btn-toggle-trailing,
#btn-ticker-start,
#btn-ticker-stop,
#btn-force-sell {
  background: #FFFFFF !important;
  color: #344054 !important;
  border-color: rgba(15, 23, 42, 0.085) !important;
  box-shadow: none !important;
  justify-content: center !important;
  text-align: center !important;
}

.ticker-action-row .btn,
#btn-buy-n-days,
#btn-market-buy-n-days,
#btn-reset-detection,
#btn-reset-date,
#btn-update-options,
#btn-toggle-trailing,
#btn-ticker-start,
#btn-ticker-stop,
#btn-force-buy,
#btn-force-sell,
#btn-daily-order,
#btn-reset-ticker,
#btn-delete-ticker {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: fit-content !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.btn:hover,
.ticker-action-row .btn:hover {
  background: #F8FAFC !important;
  color: #101828 !important;
  border-color: rgba(15, 23, 42, 0.13) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.045) !important;
  transform: none !important;
}

#btn-toggle-bot,
#btn-add-ticker,
#btn-clear-log,
#btn-settings-save,
#btn-unlock {
  background: var(--premium-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--premium-primary-border) !important;
  box-shadow: 0 8px 18px var(--premium-primary-shadow) !important;
}

#btn-toggle-bot:hover,
#btn-add-ticker:hover,
#btn-clear-log:hover,
#btn-settings-save:hover,
#btn-unlock:hover {
  background: var(--premium-primary-hover) !important;
  box-shadow: 0 10px 22px var(--premium-primary-shadow) !important;
}

#btn-reset-ticker,
#btn-delete-ticker {
  background: #FFFFFF !important;
  color: #B42318 !important;
  border-color: rgba(180, 35, 24, 0.16) !important;
}

#btn-reset-ticker:hover,
#btn-delete-ticker:hover {
  background: #FEF3F2 !important;
  color: #B42318 !important;
}

#btn-refresh,
#btn-force-buy,
#btn-daily-order,
#btn-refresh-trades {
  background: #FFFFFF !important;
  color: #344054 !important;
  border-color: rgba(15, 23, 42, 0.085) !important;
  box-shadow: none !important;
}

#btn-refresh:hover,
#btn-force-buy:hover,
#btn-daily-order:hover,
#btn-refresh-trades:hover {
  background: #F8FAFC !important;
  color: #101828 !important;
  border-color: rgba(15, 23, 42, 0.13) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.045) !important;
}

/* Final action color rules: only trade history lookup is primary here. */
#btn-force-buy,
#btn-daily-order {
  background: #FFFFFF !important;
  color: #344054 !important;
  border-color: rgba(15, 23, 42, 0.085) !important;
  box-shadow: none !important;
}

#btn-force-buy:hover,
#btn-daily-order:hover {
  background: #F8FAFC !important;
  color: #101828 !important;
  border-color: rgba(15, 23, 42, 0.13) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.045) !important;
}

#btn-refresh-trades {
  background: var(--premium-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--premium-primary-border) !important;
  box-shadow: 0 8px 18px var(--premium-primary-shadow) !important;
}

#btn-refresh-trades:hover {
  background: var(--premium-primary-hover) !important;
  color: #FFFFFF !important;
  border-color: rgba(17, 24, 39, 0.24) !important;
  box-shadow: 0 10px 22px var(--premium-primary-shadow) !important;
}

.table-wrap {
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: none !important;
}

thead th {
  background: #FAFBFC !important;
  color: #667085 !important;
  border-bottom-color: rgba(15, 23, 42, 0.055) !important;
  font-weight: 650 !important;
}

tbody td {
  color: #475467 !important;
  border-bottom-color: rgba(15, 23, 42, 0.045) !important;
}

tbody tr:nth-child(even) td {
  background: #FCFCFD !important;
}

tbody tr:hover td {
  background: #F8FAFC !important;
}

tbody tr.selected td {
  background: #F5F8FF !important;
}

tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #2563EB !important;
}

.badge,
.badge-green,
.badge-orange,
.badge-cyan,
.badge-blue,
.badge-purple,
.badge-gray {
  background: #F2F4F7 !important;
  color: #475467 !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

.badge-red {
  background: #FEF3F2 !important;
  color: #B42318 !important;
  border-color: rgba(180, 35, 24, 0.12) !important;
}

.log-body {
  background: #FAFBFC !important;
}

.log-line {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.045) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #475467 !important;
}

.log-line.info,
.log-line.success,
.log-line.warn {
  color: #475467 !important;
}

.log-line.error {
  color: #B42318 !important;
}

@media (max-width: 980px) {
  .account-card::after {
    display: none !important;
  }

  .account-col {
    background: #FAFBFC !important;
    box-shadow: none !important;
  }
}

/* Keep navigation as a top bar at every viewport width. */
@media (min-width: 1100px) {
  #app {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  .header {
    grid-column: auto !important;
    grid-row: auto !important;
    position: sticky !important;
    top: 0 !important;
    height: auto !important;
    min-height: 74px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px 22px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .header > div:first-child {
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    gap: 14px !important;
  }

  .header > div:first-child::after {
    display: none !important;
  }

  .ws-indicator {
    position: static !important;
  }

  .header-title {
    max-width: none !important;
    padding: 0 !important;
    font-size: 1.22rem !important;
    line-height: 1.15 !important;
  }

  .header-title span {
    display: inline !important;
    font-size: inherit !important;
  }

  .header > div:first-child > div:last-child {
    width: auto !important;
    margin: 0 0 0 18px !important;
    padding: 5px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 3px !important;
    border-radius: 18px !important;
  }

  #tab-ibb,
  #tab-mm,
  #tab-st {
    width: auto !important;
    min-width: 54px !important;
    min-height: 36px !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
  }

  #tab-ibb::before,
  #tab-mm::before,
  #tab-st::before {
    display: none !important;
  }

  .header-actions {
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    gap: 10px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .header-actions .btn,
  .header-actions .status-badge {
    width: auto !important;
  }

  .header-actions .status-badge {
    order: 0 !important;
  }

  #ibb-container,
  #mm-container,
  #st-container {
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* Compact top tabs after labels were shortened to IBB / MM / ST. */
.header > div:first-child > div:last-child {
  max-width: 100% !important;
}

#tab-ibb,
#tab-mm,
#tab-st {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 54px !important;
  max-width: 92px !important;
  padding-inline: clamp(10px, 1.8vw, 16px) !important;
  justify-content: center !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  .header > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(118px, auto) minmax(168px, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .ws-indicator {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }

  .header-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding-left: 22px !important;
    font-size: clamp(0.9rem, 3.2vw, 1rem) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  .header > div:first-child > div:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  #tab-ibb,
  #tab-mm,
  #tab-st {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: 8px !important;
  }

  .header-actions {
    display: grid !important;
    grid-template-columns: minmax(86px, 0.9fr) repeat(3, minmax(76px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .header-actions .btn,
  .header-actions .status-badge {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 8px !important;
    justify-content: center !important;
  }
}

@media (max-width: 430px) {
  .header > div:first-child {
    grid-template-columns: 1fr !important;
  }

  .header-title {
    padding-left: 22px !important;
  }

  .header > div:first-child > div:last-child {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .status-badge {
    grid-column: 1 / -1 !important;
  }

  #tab-ibb,
  #tab-mm,
  #tab-st {
    min-height: 32px !important;
    font-size: 0.72rem !important;
    padding-inline: 6px !important;
  }
}

/* Absolute final neutralization for the two ticker action buttons. */
body #app .ticker-action-row #btn-force-buy,
body #app .ticker-action-row #btn-daily-order {
  background: #FFFFFF !important;
  color: #344054 !important;
  border-color: rgba(15, 23, 42, 0.085) !important;
  box-shadow: none !important;
}

body #app .ticker-action-row #btn-force-buy:hover,
body #app .ticker-action-row #btn-daily-order:hover {
  background: #F8FAFC !important;
  color: #101828 !important;
  border-color: rgba(15, 23, 42, 0.13) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.045) !important;
}

/* Match selected table row indicator to the graphite primary color. */
body #app tbody tr.selected td {
  background: rgba(39, 42, 47, 0.045) !important;
}

body #app tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--premium-primary) !important;
}

/* Premium information hierarchy pass. */
.account-grid {
  align-items: stretch !important;
}

.account-col {
  display: flex !important;
  flex-direction: column !important;
}

.account-col .account-item {
  margin-bottom: 0 !important;
}

.account-label {
  color: #7A8594 !important;
}

.account-value {
  color: #475467 !important;
  font-weight: 600 !important;
}

#hybrid-total,
#api-total,
#this-year-profit {
  color: #111827 !important;
  font-size: clamp(1.24rem, 2.2vw, 1.58rem) !important;
  font-weight: 760 !important;
  letter-spacing: -0.02em !important;
}

#hybrid-cash,
#hybrid-holdings,
#api-cash,
#api-holdings,
#last-year-profit,
#cum-profit,
#available-buy,
#after-tax,
#change-val,
#slots-info {
  color: #344054 !important;
  font-size: clamp(0.82rem, 1.2vw, 0.98rem) !important;
  font-weight: 620 !important;
}

#tax-est,
#unsettled {
  font-size: clamp(0.82rem, 1.2vw, 0.98rem) !important;
  font-weight: 650 !important;
}

.ticker-action-row {
  column-gap: 8px !important;
  row-gap: 10px !important;
}

body #app .ticker-action-row #btn-force-buy,
body #app .ticker-action-row #btn-toggle-trailing {
  margin-left: 12px !important;
}

body #app .ticker-action-row #btn-reset-date {
  margin-left: 12px !important;
}

body #app .ticker-action-row #btn-reset-ticker {
  margin-left: auto !important;
}

@media (max-width: 980px) {
  body #app .ticker-action-row #btn-force-buy,
  body #app .ticker-action-row #btn-toggle-trailing,
  body #app .ticker-action-row #btn-reset-date,
  body #app .ticker-action-row #btn-reset-ticker {
    margin-left: 0 !important;
  }
}

.ticker-panel thead th,
.ticker-panel tbody td {
  font-size: 0.76rem !important;
}

.ticker-panel tbody td {
  color: #667085 !important;
}

.ticker-panel tbody td:nth-child(4),
.ticker-panel tbody td:nth-child(9),
.ticker-panel tbody td:nth-child(10),
.ticker-panel tbody td:nth-child(16) {
  color: #101828 !important;
  font-weight: 650 !important;
}

.ticker-panel tbody td:nth-child(6),
.ticker-panel tbody td:nth-child(7),
.ticker-panel tbody td:nth-child(8),
.ticker-panel tbody td:nth-child(11),
.ticker-panel tbody td:nth-child(12),
.ticker-panel tbody td:nth-child(13),
.ticker-panel tbody td:nth-child(14),
.ticker-panel tbody td:nth-child(15) {
  color: #7A8594 !important;
}

.holdings-card tbody td:nth-child(1),
.holdings-card tbody td:nth-child(2),
.holdings-card tbody td:nth-child(3),
.trades-card tbody td:nth-child(3),
.trades-card tbody td:nth-child(4),
.trades-card tbody td:nth-child(10) {
  color: #101828 !important;
  font-weight: 650 !important;
}

.badge {
  min-width: 0 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
  background: #F6F7F9 !important;
  color: #5F6B7A !important;
  border-color: rgba(15, 23, 42, 0.055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.badge-green,
.badge-orange,
.badge-cyan,
.badge-blue,
.badge-purple,
.badge-gray {
  background: #F6F7F9 !important;
  color: #5F6B7A !important;
}

.badge-red {
  background: #FFF4F2 !important;
  color: #B42318 !important;
}

.log-body {
  position: relative !important;
  padding-left: 24px !important;
}

.log-body::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(15, 23, 42, 0.08);
}

.log-line {
  position: relative !important;
  padding: 8px 10px 8px 18px !important;
  border-bottom: 0 !important;
}

.log-line::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #D0D5DD;
  border: 2px solid #FAFBFC;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.log-line.success::before {
  background: #12B76A;
}

.log-line.warn::before {
  background: #F79009;
}

.log-line.error::before {
  background: #D92D20;
}

.log-line.info::before {
  background: var(--premium-primary);
}

/* Compact vertical rhythm for all dashboard cards. */
.main-grid {
  gap: 14px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

.card-header {
  min-height: 44px !important;
  padding: 10px 16px !important;
}

.card-header > span:first-child {
  font-size: 0.92rem !important;
}

.account-card .card-header {
  min-height: 54px !important;
  padding: 14px 18px !important;
}

.account-card::after {
  top: 14px !important;
  right: 18px !important;
  padding: 5px 10px !important;
}

.account-grid {
  padding: 0 14px 14px !important;
  gap: 10px !important;
}

.account-col {
  min-height: 126px !important;
  padding: 12px !important;
  border-radius: 18px !important;
}

.account-item {
  margin-bottom: 6px !important;
}

.account-item + .account-item {
  padding-top: 6px !important;
}

.account-label {
  margin-bottom: 1px !important;
  line-height: 1.18 !important;
}

.account-value {
  line-height: 1.2 !important;
}

.ticker-panel .card-header {
  min-height: 48px !important;
}

.ticker-add-row {
  margin: 10px 14px 0 !important;
  padding: 10px 12px !important;
  gap: 8px !important;
  border-radius: 18px !important;
}

.ticker-action-row {
  margin: 8px 14px 0 !important;
  padding: 9px 12px !important;
  row-gap: 7px !important;
  border-radius: 18px !important;
}

.ticker-panel .table-wrap {
  margin: 10px 14px 14px !important;
  max-height: 250px !important;
}

.table-wrap {
  border-radius: 18px !important;
}

thead th {
  height: 34px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

tbody td {
  height: 34px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.holdings-card {
  min-height: 0 !important;
}

.trades-card {
  min-height: 0 !important;
}

.log-card {
  min-height: 360px !important;
}

.log-body {
  min-height: 300px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.log-body::before {
  top: 12px !important;
  bottom: 12px !important;
}

.log-line {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin-bottom: 2px !important;
}

.log-line::before {
  top: 12px !important;
}

@media (min-width: 1100px) {
  .main-grid {
    gap: 14px !important;
    padding: 16px !important;
  }

  .account-card .card-header {
    min-height: 56px !important;
    padding: 14px 18px !important;
  }

  .account-grid {
    padding: 0 14px 14px !important;
    gap: 12px !important;
  }

  .log-card {
    min-height: 460px !important;
  }

  .log-body {
    min-height: 390px !important;
  }
}

@media (max-width: 980px) {
  .main-grid {
    gap: 10px !important;
    padding: 10px !important;
  }

  .account-card .card-header {
    min-height: 46px !important;
    padding: 10px 12px !important;
  }

  .account-grid {
    padding: 6px !important;
    gap: 5px !important;
  }

  .account-col {
    padding: 7px 5px !important;
  }

  .card-header {
    min-height: 40px !important;
    padding: 9px 12px !important;
  }
}

/* Keep add button in the input toolbar but align it as the primary action. */
.ticker-add-row {
  align-items: end !important;
}

.ticker-add-row #btn-add-ticker {
  margin-left: auto !important;
  min-width: 76px !important;
  min-height: 36px !important;
  align-self: end !important;
}

@media (min-width: 1100px) {
  .ticker-add-row {
    grid-template-columns:
      92px
      minmax(150px, 1.1fr)
      repeat(5, minmax(76px, auto))
      minmax(72px, auto)
      auto !important;
  }

  .ticker-add-row #btn-add-ticker {
    justify-self: end !important;
  }
}

@media (max-width: 760px) {
  .ticker-add-row #btn-add-ticker {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Responsive full-width alignment for ticker action buttons. */
.ticker-action-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
}

.ticker-action-row .btn,
body #app .ticker-action-row .btn,
body #app .ticker-action-row #btn-force-buy,
body #app .ticker-action-row #btn-daily-order,
body #app .ticker-action-row #btn-buy-n-days,
body #app .ticker-action-row #btn-market-buy-n-days,
body #app .ticker-action-row #btn-toggle-trailing,
body #app .ticker-action-row #btn-reset-detection,
body #app .ticker-action-row #btn-reset-date,
body #app .ticker-action-row #btn-update-options,
body #app .ticker-action-row #btn-reset-ticker,
body #app .ticker-action-row #btn-delete-ticker {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  justify-self: stretch !important;
  justify-content: center !important;
  text-align: center !important;
}

@media (min-width: 1200px) {
  .ticker-action-row {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .ticker-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Ticker action buttons: keep at least four per row, allow more when space permits. */
.ticker-action-row {
  grid-template-columns: repeat(auto-fit, minmax(min(112px, calc((100% - 24px) / 4)), 1fr)) !important;
}

@media (min-width: 1200px) {
  .ticker-action-row {
    grid-template-columns: repeat(auto-fit, minmax(min(118px, calc((100% - 24px) / 4)), 1fr)) !important;
  }
}

@media (max-width: 1199px) {
  .ticker-action-row {
    grid-template-columns: repeat(auto-fit, minmax(min(104px, calc((100% - 24px) / 4)), 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .ticker-action-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding-inline: 6px !important;
  }

  .ticker-action-row .btn,
  body #app .ticker-action-row .btn {
    min-height: 30px !important;
    padding-inline: 3px !important;
    font-size: clamp(0.56rem, 2.5vw, 0.68rem) !important;
    letter-spacing: 0 !important;
  }
}

/* Ticker input toolbar: keep one line on most tablet and desktop widths. */
.ticker-add-row {
  column-gap: clamp(6px, 0.7vw, 10px) !important;
  row-gap: 8px !important;
}

@media (min-width: 760px) {
  .ticker-add-row {
    display: grid !important;
    flex-wrap: nowrap !important;
    grid-template-columns:
      minmax(64px, max-content)
      minmax(112px, max-content)
      minmax(0, 1fr)
      minmax(54px, max-content)
      minmax(54px, max-content)
      minmax(68px, max-content)
      minmax(58px, max-content)
      max-content !important;
    align-items: end !important;
  }

  .ticker-add-row > label:nth-of-type(1) {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .ticker-add-row > label:nth-of-type(2) {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .ticker-add-row > label:nth-of-type(3) {
    grid-column: 4 !important;
    justify-self: end !important;
  }

  .ticker-add-row > label:nth-of-type(4) {
    grid-column: 5 !important;
    justify-self: end !important;
  }

  .ticker-add-row > label:nth-of-type(5) {
    grid-column: 6 !important;
    justify-self: end !important;
  }

  .ticker-add-row > label:nth-of-type(6) {
    grid-column: 7 !important;
    justify-self: end !important;
  }

  .ticker-add-row #btn-add-ticker {
    grid-column: 8 !important;
    justify-self: end !important;
    width: clamp(66px, 5.8vw, 76px) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .ticker-add-row label {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .ticker-add-row input,
  .ticker-add-row select {
    min-width: 0 !important;
  }

  .ticker-add-row #inp-ticker {
    width: clamp(58px, 5.2vw, 70px) !important;
  }

  .ticker-add-row #inp-strategy {
    width: clamp(108px, 10vw, 132px) !important;
  }

  .ticker-add-row #inp-param-a,
  .ticker-add-row #inp-buffer,
  .ticker-add-row #inp-alloc {
    width: clamp(48px, 4.5vw, 60px) !important;
    text-align: left !important;
  }

  .ticker-add-row #inp-custom-avg {
    width: clamp(56px, 5.2vw, 70px) !important;
    text-align: left !important;
  }
}

@media (min-width: 1100px) {
  .ticker-add-row {
    grid-template-columns:
      minmax(88px, max-content)
      minmax(138px, max-content)
      minmax(0, 1fr)
      minmax(72px, max-content)
      minmax(72px, max-content)
      minmax(90px, max-content)
      minmax(78px, max-content)
      max-content !important;
  }

  .ticker-add-row label {
    display: grid !important;
    grid-template-columns: auto minmax(0, max-content) !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .ticker-add-row label input,
  .ticker-add-row label select {
    justify-self: end !important;
  }
}

@media (min-width: 760px) and (max-width: 1099px) {
  .ticker-add-row {
    column-gap: clamp(5px, 0.65vw, 8px) !important;
  }

  .ticker-add-row label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: end !important;
    justify-items: stretch !important;
    gap: 4px !important;
    font-size: clamp(0.6rem, 0.9vw, 0.7rem) !important;
    line-height: 1.12 !important;
  }

  .ticker-add-row label input,
  .ticker-add-row label select {
    justify-self: stretch !important;
  }
}

@media (max-width: 759px) {
  .ticker-add-row {
    display: flex !important;
    flex-wrap: wrap !important;
  }
}

/* MM/ST iframes: override older layout rules that forced auto height. */
#mm-container,
#st-container {
  min-width: 0 !important;
  overflow: hidden !important;
}

#mm-container[style*="display: block"],
#st-container[style*="display: block"] {
  height: calc(100vh - 128px) !important;
  min-height: 520px !important;
}

#mm-iframe,
#st-iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
}

@media (max-width: 760px) {
  #mm-container[style*="display: block"],
  #st-container[style*="display: block"] {
    height: calc(100vh - 174px) !important;
    min-height: 520px !important;
  }
}

/* Apple Store tile depth pass: light gray canvas, white tiles, soft gray inset surfaces. */
:root {
  --apple-canvas: #F5F5F7;
  --apple-canvas-deep: #EDEEF2;
  --apple-tile: #FFFFFF;
  --apple-tile-soft: #F8F8FA;
  --apple-tile-muted: #F1F2F4;
  --apple-line: rgba(0, 0, 0, 0.055);
  --apple-line-strong: rgba(0, 0, 0, 0.10);
  --apple-shadow: 0 1px 2px rgba(0, 0, 0, 0.035), 0 18px 46px rgba(0, 0, 0, 0.075);
  --apple-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 22px rgba(0, 0, 0, 0.045);
  --bold-canvas: var(--apple-canvas);
  --bold-panel: var(--apple-tile);
  --bold-panel-soft: var(--apple-tile-soft);
  --bold-panel-muted: var(--apple-tile-muted);
  --bold-line: var(--apple-line);
  --bold-line-strong: var(--apple-line-strong);
  --bold-shadow: var(--apple-shadow);
  --bold-shadow-soft: var(--apple-shadow-soft);
}

html,
body {
  background: var(--apple-canvas) !important;
}

body {
  background:
    linear-gradient(180deg, #FBFBFD 0%, var(--apple-canvas) 34%, var(--apple-canvas-deep) 100%) !important;
}

#app {
  background: var(--apple-canvas) !important;
  border-color: rgba(255, 255, 255, 0.88) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.035),
    0 34px 90px rgba(0, 0, 0, 0.11) !important;
}

.header {
  background: rgba(251, 251, 253, 0.88) !important;
  border-bottom-color: var(--apple-line) !important;
}

.main-grid {
  background: transparent !important;
}

.card,
.modal-content {
  background: var(--apple-tile) !important;
  border-color: var(--apple-line) !important;
  box-shadow: var(--apple-shadow-soft) !important;
}

.card:hover {
  border-color: var(--apple-line-strong) !important;
  box-shadow: var(--apple-shadow) !important;
}

.card-header,
.account-card .card-header,
.ticker-panel .card-header {
  background: var(--apple-tile) !important;
  border-bottom-color: var(--apple-line) !important;
}

.account-card,
.holdings-card,
.trades-card,
.log-card {
  background: var(--apple-tile) !important;
}

.account-grid,
.ticker-add-row,
.table-wrap,
.log-body {
  background: var(--apple-tile-muted) !important;
}

.account-col:nth-child(odd),
.ticker-add-row label,
.log-line:nth-child(odd) {
  background: var(--apple-tile) !important;
}

.account-col:nth-child(even),
.log-line:nth-child(even) {
  background: var(--apple-tile-soft) !important;
}

.ticker-actions,
.ticker-action-grid,
.ticker-action-row,
.modal-form,
.form-grid {
  background: var(--apple-tile-soft) !important;
  border-color: var(--apple-line) !important;
}

table {
  background: var(--apple-tile) !important;
}

thead th {
  background: var(--apple-tile-soft) !important;
}

tbody tr:nth-child(even) td {
  background: #FBFBFC !important;
}

tbody tr:hover td {
  background: #F0F1F3 !important;
}

tbody tr.selected td,
.ticker-table tbody tr.selected td {
  background: rgba(39, 42, 47, 0.045) !important;
  box-shadow: inset 3px 0 0 var(--premium-primary) !important;
}

input,
select,
textarea {
  background: var(--apple-tile) !important;
  border-color: var(--apple-line-strong) !important;
}

/* Unify the Apple tile pass: remove patchy alternation and repeated cell borders. */
:root {
  --apple-canvas: #F5F5F7;
  --apple-tile: #FFFFFF;
  --apple-group: #F6F7F9;
  --apple-line: rgba(0, 0, 0, 0.055);
  --apple-line-strong: rgba(0, 0, 0, 0.095);
  --apple-shadow: 0 1px 2px rgba(0, 0, 0, 0.035), 0 14px 38px rgba(0, 0, 0, 0.065);
  --apple-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.025), 0 8px 20px rgba(0, 0, 0, 0.04);
}

html,
body,
#app {
  background: var(--apple-canvas) !important;
}

body {
  background-image: none !important;
}

#app {
  border-color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.09) !important;
}

.header,
.card,
.card-header,
.account-card,
.holdings-card,
.trades-card,
.log-card,
.modal-content {
  background: var(--apple-tile) !important;
  border-color: var(--apple-line) !important;
}

.card,
.account-card,
.holdings-card,
.trades-card,
.log-card {
  box-shadow: var(--apple-shadow-soft) !important;
}

.card:hover {
  box-shadow: var(--apple-shadow) !important;
}

.account-grid,
.ticker-add-row,
.ticker-actions,
.ticker-action-grid,
.ticker-action-row,
.table-wrap,
.log-body,
.modal-form,
.form-grid {
  background: var(--apple-group) !important;
  border-color: var(--apple-line) !important;
}

.account-col,
.account-col:nth-child(odd),
.account-col:nth-child(even),
.ticker-add-row label,
.log-line,
.log-line:nth-child(odd),
.log-line:nth-child(even) {
  background: var(--apple-tile) !important;
  border-color: var(--apple-line) !important;
  box-shadow: none !important;
}

.ticker-add-row label {
  background: transparent !important;
}

table,
tbody td,
tbody tr:nth-child(even) td {
  background: var(--apple-tile) !important;
}

thead th {
  background: #F8F8FA !important;
}

tbody tr:hover td {
  background: #F6F7F9 !important;
}

tbody tr.selected td,
.ticker-table tbody tr.selected td {
  background: #E9EDF3 !important;
  box-shadow: none !important;
}

tbody tr.selected td:first-child,
.ticker-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--premium-primary) !important;
}

body #app tbody tr.selected td,
body #app .ticker-table tbody tr.selected td {
  box-shadow: none !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

body #app tbody tr.selected td:first-child,
body #app .ticker-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--premium-primary) !important;
}

input,
select,
textarea,
.status-badge,
button:not(.danger):not(#btn-start-all):not(#btn-clear-log):not(.primary) {
  background: var(--apple-tile) !important;
}

/* Keep primary action buttons graphite after the global white button reset. */
#btn-toggle-bot,
#btn-add-ticker,
#btn-clear-log,
#btn-refresh-trades,
#btn-settings-save,
#btn-unlock {
  background: var(--premium-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--premium-primary-border) !important;
  box-shadow: 0 8px 18px var(--premium-primary-shadow) !important;
}

#btn-toggle-bot:hover,
#btn-add-ticker:hover,
#btn-clear-log:hover,
#btn-refresh-trades:hover,
#btn-settings-save:hover,
#btn-unlock:hover {
  background: var(--premium-primary-hover) !important;
  color: #FFFFFF !important;
  border-color: rgba(17, 24, 39, 0.24) !important;
  box-shadow: 0 10px 22px var(--premium-primary-shadow) !important;
}

/* Final hard lock for the visible primary actions the user called out. */
body #app #btn-toggle-bot,
body #app #btn-add-ticker,
body #app #btn-refresh-trades,
body #app #btn-clear-log {
  background: var(--premium-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--premium-primary-border) !important;
  box-shadow: 0 8px 18px var(--premium-primary-shadow) !important;
}

body #app #btn-toggle-bot:hover,
body #app #btn-add-ticker:hover,
body #app #btn-refresh-trades:hover,
body #app #btn-clear-log:hover {
  background: var(--premium-primary-hover) !important;
  color: #FFFFFF !important;
  border-color: rgba(17, 24, 39, 0.24) !important;
  box-shadow: 0 10px 22px var(--premium-primary-shadow) !important;
}

body #app .btn-primary-graphite {
  background: #272A2F !important;
  color: #FFFFFF !important;
  border-color: rgba(39, 42, 47, 0.18) !important;
  box-shadow: 0 8px 18px rgba(39, 42, 47, 0.16) !important;
}

body #app .btn-primary-graphite:hover {
  background: #333740 !important;
  color: #FFFFFF !important;
  border-color: rgba(17, 24, 39, 0.24) !important;
  box-shadow: 0 10px 22px rgba(39, 42, 47, 0.16) !important;
}

/* Clean palette pass: Apple-like neutral grays with one graphite action color. */
:root {
  --clean-canvas: #F5F5F7;
  --clean-surface: #FFFFFF;
  --clean-surface-soft: #F7F7F9;
  --clean-surface-muted: #EFEFF2;
  --clean-border: rgba(29, 29, 31, 0.08);
  --clean-border-strong: rgba(29, 29, 31, 0.14);
  --clean-text: #1D1D1F;
  --clean-secondary: #6E6E73;
  --clean-graphite: #272A2F;
  --clean-graphite-hover: #333740;
  --premium-primary: var(--clean-graphite);
  --premium-primary-hover: var(--clean-graphite-hover);
  --premium-primary-border: rgba(39, 42, 47, 0.20);
  --premium-primary-shadow: rgba(39, 42, 47, 0.15);
}

html,
body,
#app {
  background: var(--clean-canvas) !important;
  color: var(--clean-text) !important;
}

#app {
  border-color: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 0 20px 62px rgba(0, 0, 0, 0.08) !important;
}

.header,
.card,
.card-header,
.account-card,
.holdings-card,
.trades-card,
.log-card,
.modal-content {
  background: var(--clean-surface) !important;
  color: var(--clean-text) !important;
  border-color: var(--clean-border) !important;
}

.account-grid,
.ticker-add-row,
.ticker-action-row,
.table-wrap,
.log-body,
.modal-form,
.form-grid {
  background: var(--clean-surface-soft) !important;
  border-color: var(--clean-border) !important;
}

.account-col,
.log-line,
tbody td,
tbody tr:nth-child(even) td,
.ticker-add-row label {
  background: var(--clean-surface) !important;
}

thead th {
  background: var(--clean-surface-soft) !important;
  color: var(--clean-secondary) !important;
}

tbody tr:hover td {
  background: var(--clean-surface-soft) !important;
}

tbody tr.selected td,
.ticker-table tbody tr.selected td {
  background: #ECEEF2 !important;
  color: var(--clean-text) !important;
}

input,
select,
textarea {
  background: var(--clean-surface) !important;
  color: var(--clean-text) !important;
  border-color: var(--clean-border-strong) !important;
}

.btn,
button,
.status-badge {
  border-color: var(--clean-border-strong) !important;
}

button:not(.btn-primary-graphite):not(#btn-toggle-bot):not(#btn-add-ticker):not(#btn-refresh-trades):not(#btn-clear-log):not(#btn-settings-save):not(#btn-unlock),
.btn:not(.btn-primary-graphite):not(#btn-toggle-bot):not(#btn-add-ticker):not(#btn-refresh-trades):not(#btn-clear-log):not(#btn-settings-save):not(#btn-unlock) {
  background: var(--clean-surface) !important;
  color: var(--clean-text) !important;
  box-shadow: none !important;
}

body #app .btn-primary-graphite,
body #app #btn-toggle-bot,
body #app #btn-add-ticker,
body #app #btn-refresh-trades,
body #app #btn-clear-log,
body #app #btn-settings-save,
body #app #btn-unlock {
  background: var(--clean-graphite) !important;
  color: #FFFFFF !important;
  border-color: rgba(39, 42, 47, 0.20) !important;
  box-shadow: 0 8px 18px rgba(39, 42, 47, 0.15) !important;
}

body #app .btn-primary-graphite:hover,
body #app #btn-toggle-bot:hover,
body #app #btn-add-ticker:hover,
body #app #btn-refresh-trades:hover,
body #app #btn-clear-log:hover,
body #app #btn-settings-save:hover,
body #app #btn-unlock:hover {
  background: var(--clean-graphite-hover) !important;
  color: #FFFFFF !important;
}

.btn-red,
#btn-reset-ticker,
#btn-delete-ticker {
  background: rgba(215, 64, 56, 0.08) !important;
  color: #C7352D !important;
  border-color: rgba(215, 64, 56, 0.22) !important;
}

.text-blue,
.text-purple,
.text-yellow,
.text-orange {
  color: var(--clean-text) !important;
}

.text-gray,
.account-label,
.status-badge,
tbody td {
  color: var(--clean-secondary) !important;
}

tbody td strong,
.account-value,
.account-value.big {
  color: var(--clean-text) !important;
}

/* Ticker form labels should blend into the input-row surface, not appear as white blocks. */
body #app .ticker-add-row > label,
body #app .ticker-add-row > label:nth-of-type(1),
body #app .ticker-add-row > label:nth-of-type(2),
body #app .ticker-add-row > label:nth-of-type(3),
body #app .ticker-add-row > label:nth-of-type(4),
body #app .ticker-add-row > label:nth-of-type(5),
body #app .ticker-add-row > label:nth-of-type(6) {
  background: var(--clean-surface-soft) !important;
  box-shadow: none !important;
}

/* Keep ticker inputs left-aligned while the add button stays pinned right. */
@media (min-width: 760px) {
  body #app .ticker-add-row {
    grid-template-columns:
      max-content
      max-content
      max-content
      max-content
      max-content
      max-content
      minmax(0, 1fr)
      max-content !important;
    justify-content: stretch !important;
  }

  body #app .ticker-add-row > label:nth-of-type(1),
  body #app .ticker-add-row > label:nth-of-type(2),
  body #app .ticker-add-row > label:nth-of-type(3),
  body #app .ticker-add-row > label:nth-of-type(4),
  body #app .ticker-add-row > label:nth-of-type(5),
  body #app .ticker-add-row > label:nth-of-type(6) {
    justify-self: start !important;
  }

  body #app .ticker-add-row > label:nth-of-type(1) { grid-column: 1 !important; }
  body #app .ticker-add-row > label:nth-of-type(2) { grid-column: 2 !important; }
  body #app .ticker-add-row > label:nth-of-type(3) { grid-column: 3 !important; }
  body #app .ticker-add-row > label:nth-of-type(4) { grid-column: 4 !important; }
  body #app .ticker-add-row > label:nth-of-type(5) { grid-column: 5 !important; }
  body #app .ticker-add-row > label:nth-of-type(6) { grid-column: 6 !important; }

  body #app .ticker-add-row #btn-add-ticker {
    grid-column: 8 !important;
    justify-self: end !important;
  }
}

/* Black theme: invert the clean palette while preserving the same layout. */
html[data-theme="dark"] {
  --clean-canvas: #0B0B0F;
  --clean-surface: #15151A;
  --clean-surface-soft: #1C1C22;
  --clean-surface-muted: #24242B;
  --clean-border: rgba(255, 255, 255, 0.08);
  --clean-border-strong: rgba(255, 255, 255, 0.14);
  --clean-text: rgba(245, 245, 247, 0.96);
  --clean-secondary: rgba(235, 235, 245, 0.62);
  --clean-graphite: #F5F5F7;
  --clean-graphite-hover: #FFFFFF;
  --theme-active-bg: #323A46;
  --theme-active-text: #DFE6EF;
  --theme-control-bg: #15151A;
  --bg-primary: #0B0B0F;
  --bg-card: #15151A;
  --fg-primary: rgba(245, 245, 247, 0.96);
  --fg-secondary: rgba(235, 235, 245, 0.62);
  --border: rgba(255, 255, 255, 0.08);
  --accent-blue: #F5F5F7;
}

html[data-theme="light"] {
  --theme-active-bg: #272A2F;
  --theme-active-text: #FFFFFF;
  --theme-control-bg: #FFFFFF;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #app {
  background: var(--clean-canvas) !important;
  color: var(--clean-text) !important;
}

html[data-theme="dark"] #app {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 22px 72px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] .header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .holdings-card,
html[data-theme="dark"] .trades-card,
html[data-theme="dark"] .log-card,
html[data-theme="dark"] .modal-content {
  background: var(--clean-surface) !important;
  color: var(--clean-text) !important;
  border-color: var(--clean-border) !important;
}

html[data-theme="dark"] .account-grid,
html[data-theme="dark"] .ticker-add-row,
html[data-theme="dark"] .ticker-action-row,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .log-body,
html[data-theme="dark"] .modal-form,
html[data-theme="dark"] .form-grid,
html[data-theme="dark"] body #app .ticker-add-row > label {
  background: var(--clean-surface-soft) !important;
  border-color: var(--clean-border) !important;
}

html[data-theme="dark"] .account-col,
html[data-theme="dark"] .log-line,
html[data-theme="dark"] tbody td,
html[data-theme="dark"] tbody tr:nth-child(even) td {
  background: var(--clean-surface) !important;
  color: var(--clean-secondary) !important;
}

html[data-theme="dark"] thead th {
  background: var(--clean-surface-soft) !important;
  color: var(--clean-secondary) !important;
}

html[data-theme="dark"] tbody tr:hover td,
html[data-theme="dark"] tbody tr.selected td {
  background: #22242B !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .status-badge,
html[data-theme="dark"] button:not(.btn-primary-graphite):not(#btn-toggle-bot):not(#btn-add-ticker):not(#btn-refresh-trades):not(#btn-clear-log):not(#btn-settings-save):not(#btn-unlock),
html[data-theme="dark"] .btn:not(.btn-primary-graphite):not(#btn-toggle-bot):not(#btn-add-ticker):not(#btn-refresh-trades):not(#btn-clear-log):not(#btn-settings-save):not(#btn-unlock) {
  background: var(--clean-surface) !important;
  color: var(--clean-text) !important;
  border-color: var(--clean-border-strong) !important;
}

html[data-theme="dark"] body #app .btn-primary-graphite,
html[data-theme="dark"] body #app #btn-toggle-bot,
html[data-theme="dark"] body #app #btn-add-ticker,
html[data-theme="dark"] body #app #btn-refresh-trades,
html[data-theme="dark"] body #app #btn-clear-log,
html[data-theme="dark"] body #app #btn-settings-save,
html[data-theme="dark"] body #app #btn-unlock {
  background: #F5F5F7 !important;
  color: #0B0B0F !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .btn-red,
html[data-theme="dark"] #btn-reset-ticker,
html[data-theme="dark"] #btn-delete-ticker {
  background: rgba(255, 69, 58, 0.14) !important;
  color: #FF6961 !important;
  border-color: rgba(255, 69, 58, 0.28) !important;
}

html[data-theme="dark"] .account-value,
html[data-theme="dark"] .account-value.big,
html[data-theme="dark"] tbody td strong {
  color: var(--clean-text) !important;
}

/* Final palette lock: use the supplied graphite/blue-gray black theme and keep key light-theme actions filled. */
html[data-theme="light"] body #app .btn-primary-graphite,
html[data-theme="light"] body #app #btn-toggle-bot,
html[data-theme="light"] body #app #btn-add-ticker,
html[data-theme="light"] body #app #btn-refresh-trades,
html[data-theme="light"] body #app #btn-clear-log,
html[data-theme="light"] body #app #btn-settings-save,
html[data-theme="light"] body #app #btn-unlock {
  background: #272A2F !important;
  color: #FFFFFF !important;
  border-color: rgba(39, 42, 47, 0.22) !important;
  box-shadow: 0 8px 18px rgba(39, 42, 47, 0.15) !important;
}

html[data-theme="light"] body #app .btn-primary-graphite:hover,
html[data-theme="light"] body #app #btn-toggle-bot:hover,
html[data-theme="light"] body #app #btn-add-ticker:hover,
html[data-theme="light"] body #app #btn-refresh-trades:hover,
html[data-theme="light"] body #app #btn-clear-log:hover,
html[data-theme="light"] body #app #btn-settings-save:hover,
html[data-theme="light"] body #app #btn-unlock:hover {
  background: #333740 !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] {
  --clean-canvas: #0B0C0F;
  --clean-surface: #1B2028;
  --clean-surface-soft: #1B2028;
  --clean-surface-muted: #323A46;
  --clean-border: rgba(223, 230, 239, 0.08);
  --clean-border-strong: rgba(223, 230, 239, 0.16);
  --clean-text: #DFE6EF;
  --clean-secondary: #7E8A99;
  --clean-graphite: #323A46;
  --clean-graphite-hover: #3B4452;
  --theme-active-bg: #323A46;
  --theme-active-text: #DFE6EF;
  --theme-control-bg: #1B2028;
  --bg-primary: #0B0C0F;
  --bg-card: #1B2028;
  --fg-primary: #DFE6EF;
  --fg-secondary: #7E8A99;
  --border: rgba(223, 230, 239, 0.08);
  --accent-blue: #DFE6EF;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #app {
  background: #0B0C0F !important;
  color: #DFE6EF !important;
}

html[data-theme="dark"] #app {
  border-color: rgba(223, 230, 239, 0.08) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.50) !important;
}

html[data-theme="dark"] .header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .account-card,
html[data-theme="dark"] .holdings-card,
html[data-theme="dark"] .trades-card,
html[data-theme="dark"] .log-card,
html[data-theme="dark"] .modal-content {
  background: #1B2028 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.08) !important;
}

html[data-theme="dark"] .account-grid,
html[data-theme="dark"] .ticker-add-row,
html[data-theme="dark"] .ticker-action-row,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .log-body,
html[data-theme="dark"] .modal-form,
html[data-theme="dark"] .form-grid,
html[data-theme="dark"] body #app .ticker-add-row > label {
  background: #1B2028 !important;
  border-color: rgba(223, 230, 239, 0.08) !important;
}

html[data-theme="dark"] .account-col,
html[data-theme="dark"] .log-line,
html[data-theme="dark"] tbody td,
html[data-theme="dark"] tbody tr:nth-child(even) td {
  background: #1B2028 !important;
  color: #7E8A99 !important;
}

html[data-theme="dark"] thead th {
  background: #323A46 !important;
  color: #DFE6EF !important;
}

html[data-theme="dark"] tbody tr:hover td,
html[data-theme="dark"] tbody tr.selected td,
html[data-theme="dark"] .ticker-table tbody tr.selected td {
  background: #323A46 !important;
  color: #DFE6EF !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .status-badge,
html[data-theme="dark"] button:not(.btn-primary-graphite):not(#btn-toggle-bot):not(#btn-add-ticker):not(#btn-refresh-trades):not(#btn-clear-log):not(#btn-settings-save):not(#btn-unlock),
html[data-theme="dark"] .btn:not(.btn-primary-graphite):not(#btn-toggle-bot):not(#btn-add-ticker):not(#btn-refresh-trades):not(#btn-clear-log):not(#btn-settings-save):not(#btn-unlock) {
  background: #1B2028 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.16) !important;
}

html[data-theme="dark"] body #app .btn-primary-graphite,
html[data-theme="dark"] body #app #btn-toggle-bot,
html[data-theme="dark"] body #app #btn-add-ticker,
html[data-theme="dark"] body #app #btn-refresh-trades,
html[data-theme="dark"] body #app #btn-clear-log,
html[data-theme="dark"] body #app #btn-settings-save,
html[data-theme="dark"] body #app #btn-unlock {
  background: #323A46 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.18) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30) !important;
}

html[data-theme="dark"] body #app .btn-primary-graphite:hover,
html[data-theme="dark"] body #app #btn-toggle-bot:hover,
html[data-theme="dark"] body #app #btn-add-ticker:hover,
html[data-theme="dark"] body #app #btn-refresh-trades:hover,
html[data-theme="dark"] body #app #btn-clear-log:hover,
html[data-theme="dark"] body #app #btn-settings-save:hover,
html[data-theme="dark"] body #app #btn-unlock:hover {
  background: #3B4452 !important;
  color: #DFE6EF !important;
}

html[data-theme="dark"] .account-value,
html[data-theme="dark"] .account-value.big,
html[data-theme="dark"] tbody td strong,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .card-title {
  color: #DFE6EF !important;
}

/* 2026-05-19 contrast pass: keep the graphite actions and make the dark theme readable. */
body #app #btn-toggle-bot,
body #app #btn-add-ticker,
body #app #btn-refresh-trades,
html[data-theme="light"] body #app #btn-toggle-bot,
html[data-theme="light"] body #app #btn-add-ticker,
html[data-theme="light"] body #app #btn-refresh-trades {
  background: #272A2F !important;
  color: #FFFFFF !important;
  border-color: rgba(39, 42, 47, 0.22) !important;
  box-shadow: 0 8px 18px rgba(39, 42, 47, 0.15) !important;
  opacity: 1 !important;
}

body #app #btn-toggle-bot:hover,
body #app #btn-add-ticker:hover,
body #app #btn-refresh-trades:hover,
html[data-theme="light"] body #app #btn-toggle-bot:hover,
html[data-theme="light"] body #app #btn-add-ticker:hover,
html[data-theme="light"] body #app #btn-refresh-trades:hover {
  background: #333740 !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] {
  --clean-canvas: #0B0C0F;
  --clean-surface: #1B2028;
  --clean-surface-soft: #202733;
  --clean-surface-muted: #323A46;
  --clean-border: rgba(223, 230, 239, 0.11);
  --clean-border-strong: rgba(223, 230, 239, 0.18);
  --clean-text: #DFE6EF;
  --clean-secondary: #A9B4C1;
  --theme-active-bg: #323A46;
  --theme-active-text: #DFE6EF;
  --theme-control-bg: #1B2028;
  --bg-primary: #0B0C0F;
  --bg-card: #1B2028;
  --fg-primary: #DFE6EF;
  --fg-secondary: #A9B4C1;
  --border: rgba(223, 230, 239, 0.11);
}

html[data-theme="dark"] body,
html[data-theme="dark"] body #app {
  background: #0B0C0F !important;
  color: #DFE6EF !important;
}

html[data-theme="dark"] body #app .header,
html[data-theme="dark"] body #app .card,
html[data-theme="dark"] body #app .card-header,
html[data-theme="dark"] body #app .account-card,
html[data-theme="dark"] body #app .ticker-panel,
html[data-theme="dark"] body #app .holdings-card,
html[data-theme="dark"] body #app .trades-card,
html[data-theme="dark"] body #app .log-card,
html[data-theme="dark"] body #app .modal-content {
  background: #1B2028 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.11) !important;
}

html[data-theme="dark"] body #app .account-grid,
html[data-theme="dark"] body #app .ticker-add-row,
html[data-theme="dark"] body #app .ticker-action-row,
html[data-theme="dark"] body #app .table-wrap,
html[data-theme="dark"] body #app .log-body,
html[data-theme="dark"] body #app .modal-form,
html[data-theme="dark"] body #app .form-grid {
  background: #202733 !important;
  border-color: rgba(223, 230, 239, 0.11) !important;
}

html[data-theme="dark"] body #app .account-col,
html[data-theme="dark"] body #app .log-line,
html[data-theme="dark"] body #app tbody td,
html[data-theme="dark"] body #app tbody tr:nth-child(even) td,
html[data-theme="dark"] body #app .ticker-add-row > label {
  background: #1B2028 !important;
  color: #A9B4C1 !important;
}

html[data-theme="dark"] body #app .header-title,
html[data-theme="dark"] body #app .header-title span,
html[data-theme="dark"] body #app .card-header,
html[data-theme="dark"] body #app .card-header span,
html[data-theme="dark"] body #app .account-value,
html[data-theme="dark"] body #app .account-value.big,
html[data-theme="dark"] body #app tbody td strong,
html[data-theme="dark"] body #app .text-blue,
html[data-theme="dark"] body #app .text-green,
html[data-theme="dark"] body #app .text-orange,
html[data-theme="dark"] body #app .text-purple,
html[data-theme="dark"] body #app .text-yellow {
  color: #DFE6EF !important;
}

html[data-theme="dark"] body #app .account-label,
html[data-theme="dark"] body #app .text-gray,
html[data-theme="dark"] body #app tbody td,
html[data-theme="dark"] body #app .status-badge {
  color: #A9B4C1 !important;
}

html[data-theme="dark"] body #app thead th,
html[data-theme="dark"] body #app .ticker-table thead th {
  background: #323A46 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.13) !important;
}

html[data-theme="dark"] body #app tbody tr:hover td,
html[data-theme="dark"] body #app tbody tr.selected td,
html[data-theme="dark"] body #app .ticker-table tbody tr.selected td {
  background: #323A46 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.13) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body #app tbody tr.selected td:first-child,
html[data-theme="dark"] body #app .ticker-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #DFE6EF !important;
}

html[data-theme="dark"] body #app input,
html[data-theme="dark"] body #app select,
html[data-theme="dark"] body #app textarea,
html[data-theme="dark"] body #app button:not(#btn-toggle-bot):not(#btn-add-ticker):not(#btn-refresh-trades):not(#btn-clear-log):not(#btn-settings-save):not(#btn-unlock),
html[data-theme="dark"] body #app .btn:not(#btn-toggle-bot):not(#btn-add-ticker):not(#btn-refresh-trades):not(#btn-clear-log):not(#btn-settings-save):not(#btn-unlock) {
  background: #1B2028 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.18) !important;
}

html[data-theme="dark"] body #app #btn-toggle-bot,
html[data-theme="dark"] body #app #btn-add-ticker,
html[data-theme="dark"] body #app #btn-refresh-trades,
html[data-theme="dark"] body #app #btn-clear-log,
html[data-theme="dark"] body #app #btn-settings-save,
html[data-theme="dark"] body #app #btn-unlock {
  background: #323A46 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.20) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body #app #btn-toggle-bot:disabled,
html[data-theme="dark"] body #app #btn-add-ticker:disabled,
html[data-theme="dark"] body #app #btn-refresh-trades:disabled {
  background: #323A46 !important;
  color: #A9B4C1 !important;
  border-color: rgba(223, 230, 239, 0.14) !important;
  opacity: 0.76 !important;
}

/* Stable action-button class: one source of truth for start/add/query/clear. */
body #app button.btn-graphite-action,
body #app .btn.btn-graphite-action,
html[data-theme="light"] body #app button.btn-graphite-action,
html[data-theme="light"] body #app .btn.btn-graphite-action {
  background: #272A2F !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(39, 42, 47, 0.22) !important;
  box-shadow: 0 8px 18px rgba(39, 42, 47, 0.15) !important;
  opacity: 1 !important;
}

body #app button.btn-graphite-action:hover,
body #app .btn.btn-graphite-action:hover,
html[data-theme="light"] body #app button.btn-graphite-action:hover,
html[data-theme="light"] body #app .btn.btn-graphite-action:hover {
  background: #333740 !important;
  color: #FFFFFF !important;
  border-color: rgba(39, 42, 47, 0.26) !important;
}

body #app button.btn-graphite-action:disabled,
body #app .btn.btn-graphite-action:disabled,
html[data-theme="light"] body #app button.btn-graphite-action:disabled,
html[data-theme="light"] body #app .btn.btn-graphite-action:disabled {
  background: #272A2F !important;
  color: #FFFFFF !important;
  border-color: rgba(39, 42, 47, 0.22) !important;
  box-shadow: 0 8px 18px rgba(39, 42, 47, 0.10) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body #app button.btn-graphite-action,
html[data-theme="dark"] body #app .btn.btn-graphite-action,
html[data-theme="dark"] body #app button.btn-graphite-action:disabled,
html[data-theme="dark"] body #app .btn.btn-graphite-action:disabled {
  background: #323A46 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.20) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body #app button.btn-graphite-action:hover,
html[data-theme="dark"] body #app .btn.btn-graphite-action:hover {
  background: #3B4452 !important;
  color: #DFE6EF !important;
}

/* Stable top mode switch container. */
body #app .top-tab-group {
  gap: 3px !important;
  margin-left: 18px !important;
  padding: 5px !important;
  border-left: 0 !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 18px !important;
  background: #E9EEF6 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="dark"] body #app .top-tab-group {
  background: #202733 !important;
  border-color: rgba(223, 230, 239, 0.18) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.36) !important;
}

html[data-theme="dark"] body #app .top-tab-group #tab-ibb,
html[data-theme="dark"] body #app .top-tab-group #tab-mm,
html[data-theme="dark"] body #app .top-tab-group #tab-st {
  background: #1B2028 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.12) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body #app .top-tab-group #tab-ibb[style*="--theme-active-bg"],
html[data-theme="dark"] body #app .top-tab-group #tab-mm[style*="--theme-active-bg"],
html[data-theme="dark"] body #app .top-tab-group #tab-st[style*="--theme-active-bg"] {
  background: #323A46 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.20) !important;
}

/* Dark ticker row states: idle is clean, selected is a straight marker, hover is rounded. */
html[data-theme="dark"] body #app #ticker-table,
html[data-theme="dark"] body #app #ticker-table tbody,
html[data-theme="dark"] body #app #ticker-table tbody tr,
html[data-theme="dark"] body #app .ticker-table,
html[data-theme="dark"] body #app .ticker-table tbody,
html[data-theme="dark"] body #app .ticker-table tbody tr {
  background: #1B2028 !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr.selected td,
html[data-theme="dark"] body #app .ticker-table tbody tr.selected td {
  background: #1B2028 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.10) !important;
  border-radius: 0 !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr:hover td,
html[data-theme="dark"] body #app .ticker-table tbody tr:hover td,
html[data-theme="dark"] body #app #ticker-table tbody tr.selected:hover td,
html[data-theme="dark"] body #app .ticker-table tbody tr.selected:hover td {
  background: #323A46 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.10) !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr.selected td:first-child,
html[data-theme="dark"] body #app .ticker-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #7E8A99 !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr:hover td:first-child,
html[data-theme="dark"] body #app .ticker-table tbody tr:hover td:first-child {
  border-radius: 12px 0 0 12px !important;
  background-clip: border-box !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr:hover td:last-child,
html[data-theme="dark"] body #app .ticker-table tbody tr:hover td:last-child {
  border-radius: 0 12px 12px 0 !important;
  background-clip: border-box !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr.selected td:first-child .badge,
html[data-theme="dark"] body #app .ticker-table tbody tr.selected td:first-child .badge {
  background: #202733 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.18) !important;
  box-shadow: none !important;
}

/* Dark ticker table pills: remove the leftover light pill surface in ON/OFF/status cells. */
html[data-theme="dark"] body #app #ticker-table tbody td .badge,
html[data-theme="dark"] body #app .ticker-table tbody td .badge,
html[data-theme="dark"] body #app #ticker-table tbody td .badge-green,
html[data-theme="dark"] body #app #ticker-table tbody td .badge-orange,
html[data-theme="dark"] body #app #ticker-table tbody td .badge-cyan,
html[data-theme="dark"] body #app #ticker-table tbody td .badge-blue,
html[data-theme="dark"] body #app #ticker-table tbody td .badge-purple,
html[data-theme="dark"] body #app #ticker-table tbody td .badge-gray {
  background: #202733 !important;
  color: #DFE6EF !important;
  border-color: rgba(223, 230, 239, 0.16) !important;
  box-shadow: none !important;
}

/* Unified IBB table row states: idle is clean, selected is a straight marker, hover is rounded. */
body #app #ticker-table tbody tr,
body #app #holdings-table tbody tr,
body #app #trades-table tbody tr {
  cursor: pointer !important;
}

html[data-theme="light"] body #app #ticker-table tbody tr.selected td,
html[data-theme="light"] body #app #holdings-table tbody tr.selected td,
html[data-theme="light"] body #app #trades-table tbody tr.selected td {
  background: #FFFFFF !important;
  border-radius: 0 !important;
}

html[data-theme="light"] body #app #ticker-table tbody tr.selected td:first-child,
html[data-theme="light"] body #app #holdings-table tbody tr.selected td:first-child,
html[data-theme="light"] body #app #trades-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #272A2F !important;
}

html[data-theme="light"] body #app #ticker-table tbody tr:hover td,
html[data-theme="light"] body #app #holdings-table tbody tr:hover td,
html[data-theme="light"] body #app #trades-table tbody tr:hover td,
html[data-theme="light"] body #app #ticker-table tbody tr.selected:hover td,
html[data-theme="light"] body #app #holdings-table tbody tr.selected:hover td,
html[data-theme="light"] body #app #trades-table tbody tr.selected:hover td {
  background: #F1F4F8 !important;
}

html[data-theme="light"] body #app #ticker-table tbody tr:hover td:first-child,
html[data-theme="light"] body #app #holdings-table tbody tr:hover td:first-child,
html[data-theme="light"] body #app #trades-table tbody tr:hover td:first-child {
  border-radius: 12px 0 0 12px !important;
}

html[data-theme="light"] body #app #ticker-table tbody tr:hover td:last-child,
html[data-theme="light"] body #app #holdings-table tbody tr:hover td:last-child,
html[data-theme="light"] body #app #trades-table tbody tr:hover td:last-child {
  border-radius: 0 12px 12px 0 !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr,
html[data-theme="dark"] body #app #holdings-table tbody tr,
html[data-theme="dark"] body #app #trades-table tbody tr {
  background: #1B2028 !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr.selected td,
html[data-theme="dark"] body #app #holdings-table tbody tr.selected td,
html[data-theme="dark"] body #app #trades-table tbody tr.selected td {
  background: #1B2028 !important;
  color: #DFE6EF !important;
  border-radius: 0 !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr.selected td:first-child,
html[data-theme="dark"] body #app #holdings-table tbody tr.selected td:first-child,
html[data-theme="dark"] body #app #trades-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #7E8A99 !important;
}

/* EOF final narrow ticker form layout: 3 inputs per row, add button full width. */
@media (max-width: 760px) {
  body #app .ticker-panel .ticker-add-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) {
    display: contents !important;
  }

  body #app .ticker-panel .ticker-add-row > label,
  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #app .ticker-panel .ticker-add-row > label input,
  body #app .ticker-panel .ticker-add-row > label select,
  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label input,
  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body #app .ticker-panel .ticker-add-row #btn-add-ticker {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

/* Absolute final ticker input layout: keep dynamic strategy fields in predictable rows. */
body #app .ticker-panel .ticker-add-row {
  display: grid !important;
  grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
  align-items: center !important;
  column-gap: clamp(8px, 0.8vw, 12px) !important;
  row-gap: 10px !important;
}

body #app .ticker-panel .ticker-add-row #ver5-fields[style*="flex"],
body #app .ticker-panel .ticker-add-row #ver9-fields[style*="flex"] {
  display: contents !important;
}

body #app .ticker-panel .ticker-add-row > label,
body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  grid-column: span 2 !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body #app .ticker-panel .ticker-add-row > label input,
body #app .ticker-panel .ticker-add-row > label select,
body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label input,
body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
}

body #app .ticker-panel .ticker-add-row > label:has(#inp-ticker) {
  grid-column: span 2 !important;
}

body #app .ticker-panel .ticker-add-row > label:has(#inp-strategy) {
  grid-column: span 3 !important;
}

body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label:has(#inp-vr-g) {
  grid-column: span 1 !important;
}

body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label:has(#inp-vr-contrib),
body #app .ticker-panel .ticker-add-row > label:has(#inp-custom-avg),
body #app .ticker-panel .ticker-add-row > label:has(#inp-alloc) {
  grid-row: 2 !important;
}

body #app .ticker-panel .ticker-add-row #btn-add-ticker {
  grid-column: 15 / 17 !important;
  grid-row: 2 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  body #app .ticker-panel .ticker-add-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  body #app .ticker-panel .ticker-add-row > label,
  body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label,
  body #app .ticker-panel .ticker-add-row > label:has(#inp-ticker),
  body #app .ticker-panel .ticker-add-row > label:has(#inp-strategy),
  body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label:has(#inp-vr-g),
  body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label:has(#inp-vr-contrib),
  body #app .ticker-panel .ticker-add-row > label:has(#inp-custom-avg),
  body #app .ticker-panel .ticker-add-row > label:has(#inp-alloc) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body #app .ticker-panel .ticker-add-row #btn-add-ticker {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* Final dark segmented-tab lock: prevent the light theme capsule from leaking into black mode. */
html[data-theme="dark"] body #app .header > div:first-child > div:last-child {
  background: #1B2028 !important;
  border-color: rgba(223, 230, 239, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(223, 230, 239, 0.08) !important;
}

html[data-theme="dark"] body #app #tab-ibb,
html[data-theme="dark"] body #app #tab-mm,
html[data-theme="dark"] body #app #tab-st {
  border-color: rgba(223, 230, 239, 0.16) !important;
}

/* Final ticker action layout: one row when space allows, natural wrapping when narrow. */
body #app .ticker-panel .ticker-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(5px, 0.45vw, 8px) !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-gutter: stable !important;
}

body #app .ticker-panel .ticker-action-row .btn {
  flex: 1 1 clamp(92px, 7vw, 118px) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding-inline: clamp(6px, 0.65vw, 12px) !important;
  font-size: clamp(0.66rem, 0.64vw, 0.75rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  justify-content: center !important;
}

@media (min-width: 1440px) {
  body #app .ticker-panel .ticker-action-row .btn {
    flex-basis: 0 !important;
  }
}

@media (max-width: 760px) {
  body #app .ticker-panel .ticker-action-row .btn {
    flex-basis: calc((100% - 16px) / 3) !important;
  }
}

@media (max-width: 520px) {
  body #app .ticker-panel .ticker-action-row .btn {
    flex-basis: calc((100% - 15px) / 4) !important;
    padding-inline: 3px !important;
    font-size: clamp(0.54rem, 2.45vw, 0.64rem) !important;
  }
}

/* Strategy-specific input labels: keep dynamic option labels on the toolbar surface. */
body #app .ticker-panel .ticker-add-row > label,
body #app .ticker-panel .ticker-add-row > span,
body #app .ticker-panel .ticker-add-row > span > label,
body #app .ticker-panel .ticker-add-row #ver5-fields,
body #app .ticker-panel .ticker-add-row #ver9-fields,
body #app .ticker-panel .ticker-add-row .ver9-options {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body #app .ticker-panel .ticker-add-row > label,
html[data-theme="dark"] body #app .ticker-panel .ticker-add-row > span,
html[data-theme="dark"] body #app .ticker-panel .ticker-add-row > span > label,
html[data-theme="dark"] body #app .ticker-panel .ticker-add-row #ver5-fields,
html[data-theme="dark"] body #app .ticker-panel .ticker-add-row #ver9-fields,
html[data-theme="dark"] body #app .ticker-panel .ticker-add-row .ver9-options {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Final ticker input layout: stable rows for base fields and strategy-specific options. */
body #app .ticker-panel .ticker-add-row {
  display: grid !important;
  grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
  align-items: center !important;
  column-gap: clamp(8px, 0.8vw, 12px) !important;
  row-gap: 10px !important;
}

body #app .ticker-panel .ticker-add-row #ver5-fields[style*="flex"],
body #app .ticker-panel .ticker-add-row #ver9-fields[style*="flex"] {
  display: contents !important;
}

body #app .ticker-panel .ticker-add-row > label,
body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  grid-column: span 2 !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

body #app .ticker-panel .ticker-add-row > label input,
body #app .ticker-panel .ticker-add-row > label select,
body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label input,
body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
}

body #app .ticker-panel .ticker-add-row > label:has(#inp-ticker) {
  grid-column: span 2 !important;
}

body #app .ticker-panel .ticker-add-row > label:has(#inp-strategy) {
  grid-column: span 3 !important;
}

body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label:has(#inp-vr-g) {
  grid-column: span 1 !important;
}

body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label:has(#inp-vr-contrib),
body #app .ticker-panel .ticker-add-row > label:has(#inp-custom-avg),
body #app .ticker-panel .ticker-add-row > label:has(#inp-alloc) {
  grid-row: 2 !important;
}

body #app .ticker-panel .ticker-add-row #btn-add-ticker {
  grid-column: 15 / 17 !important;
  grid-row: 2 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  body #app .ticker-panel .ticker-add-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  body #app .ticker-panel .ticker-add-row > label,
  body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label,
  body #app .ticker-panel .ticker-add-row > label:has(#inp-ticker),
  body #app .ticker-panel .ticker-add-row > label:has(#inp-strategy),
  body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label:has(#inp-vr-g),
  body #app .ticker-panel .ticker-add-row > span[style*="flex"] > label:has(#inp-vr-contrib),
  body #app .ticker-panel .ticker-add-row > label:has(#inp-custom-avg),
  body #app .ticker-panel .ticker-add-row > label:has(#inp-alloc) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body #app .ticker-panel .ticker-add-row #btn-add-ticker {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

body #app .ticker-panel .ticker-action-row #btn-reset-ticker,
body #app .ticker-panel .ticker-action-row #btn-delete-ticker {
  margin-left: 0 !important;
}

/* Last rule: compact header actions stay on one row on narrow topbar layouts. */
@media (max-width: 760px) {
  body #app .header-actions {
    display: grid !important;
    grid-template-columns:
      minmax(0, 0.92fr)
      minmax(0, 0.72fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 0.72fr) !important;
    align-items: center !important;
    gap: clamp(4px, 1.2vw, 7px) !important;
    width: 100% !important;
  }

  body #app .header-actions .btn,
  body #app .header-actions .status-badge {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding-inline: clamp(4px, 1.6vw, 8px) !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: clamp(0.66rem, 2.35vw, 0.76rem) !important;
    letter-spacing: 0 !important;
  }

  body #app .header-actions .status-badge {
    grid-column: auto !important;
    order: 0 !important;
  }
}

@media (max-width: 430px) {
  body #app .header-actions {
    grid-template-columns:
      minmax(0, 0.92fr)
      minmax(0, 0.72fr)
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 0.72fr) !important;
    gap: 4px !important;
  }

  body #app .header-actions .btn,
  body #app .header-actions .status-badge {
    min-height: 32px !important;
    padding-inline: 3px !important;
    font-size: clamp(0.58rem, 2.25vw, 0.68rem) !important;
  }
}

/* Absolute final narrow ticker form layout: 3 inputs per row, add button full width. */
@media (max-width: 760px) {
  body #app .ticker-panel .ticker-add-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  body #app .ticker-panel .ticker-add-row > label,
  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #app .ticker-panel .ticker-add-row > label input,
  body #app .ticker-panel .ticker-add-row > label select,
  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label input,
  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body #app .ticker-panel .ticker-add-row #btn-add-ticker {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

/* Responsive ticker form lock: narrow widths use three input columns and a full-width add button. */
body #app .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) {
  display: contents !important;
}

body #app .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
}

body #app .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label input,
body #app .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

@media (max-width: 760px) {
  body #app .ticker-add-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  body #app .ticker-add-row > label,
  body #app .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  body #app .ticker-add-row #btn-add-ticker {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

/* Absolute final holdings/trades hover lock for dark theme. */
html[data-theme="dark"] body #app .holdings-card,
html[data-theme="dark"] body #app .trades-card,
html[data-theme="dark"] body #app .holdings-card .table-wrap,
html[data-theme="dark"] body #app .trades-card .table-wrap,
html[data-theme="dark"] body #app #holdings-table,
html[data-theme="dark"] body #app #trades-table,
html[data-theme="dark"] body #app #holdings-table tbody,
html[data-theme="dark"] body #app #trades-table tbody,
html[data-theme="dark"] body #app #holdings-table tbody tr,
html[data-theme="dark"] body #app #trades-table tbody tr {
  background: #1B2028 !important;
  background-color: #1B2028 !important;
  background-image: none !important;
}

html[data-theme="dark"] body #app #holdings-table,
html[data-theme="dark"] body #app #trades-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html[data-theme="dark"] body #app #holdings-table tbody td,
html[data-theme="dark"] body #app #trades-table tbody td {
  background: #1B2028 !important;
  background-color: #1B2028 !important;
  background-image: none !important;
  background-clip: border-box !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr:hover td,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td {
  background: #323A46 !important;
  background-color: #323A46 !important;
  background-image: none !important;
  background-clip: border-box !important;
  color: #DFE6EF !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr:not(.selected):hover td:first-child,
html[data-theme="dark"] body #app #trades-table tbody tr:not(.selected):hover td:first-child {
  box-shadow: none !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr:hover td:first-child,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td:first-child {
  border-radius: 12px 0 0 12px !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr:hover td:last-child,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td:last-child {
  border-radius: 0 12px 12px 0 !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr.selected td:first-child,
html[data-theme="dark"] body #app #trades-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #7E8A99 !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr:hover td,
html[data-theme="dark"] body #app #holdings-table tbody tr:hover td,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td,
html[data-theme="dark"] body #app #ticker-table tbody tr.selected:hover td,
html[data-theme="dark"] body #app #holdings-table tbody tr.selected:hover td,
html[data-theme="dark"] body #app #trades-table tbody tr.selected:hover td {
  background: #323A46 !important;
  color: #DFE6EF !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr:hover td:first-child,
html[data-theme="dark"] body #app #holdings-table tbody tr:hover td:first-child,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td:first-child {
  border-radius: 12px 0 0 12px !important;
  background-clip: border-box !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr:hover td:last-child,
html[data-theme="dark"] body #app #holdings-table tbody tr:hover td:last-child,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td:last-child {
  border-radius: 0 12px 12px 0 !important;
  background-clip: border-box !important;
}

/* Ticker form: fill the available row width instead of leaving ragged right space. */
body #app .ticker-add-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) minmax(72px, 86px) !important;
  align-items: end !important;
  column-gap: clamp(8px, 1vw, 14px) !important;
  row-gap: 10px !important;
}

body #app .ticker-add-row > label {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
}

body #app .ticker-add-row > label input,
body #app .ticker-add-row > label select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-self: stretch !important;
}

body #app .ticker-add-row #btn-add-ticker {
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
}

body #app .ticker-add-row .ver9-options {
  display: contents !important;
}

@media (min-width: 1180px) {
  body #app .ticker-add-row {
    grid-template-columns:
      minmax(94px, 0.8fr)
      minmax(154px, 1.25fr)
      repeat(4, minmax(96px, 1fr))
      minmax(76px, 0.65fr) !important;
  }
}

@media (max-width: 700px) {
  body #app .ticker-add-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body #app .ticker-add-row #btn-add-ticker {
    grid-column: 1 / -1 !important;
  }
}

/* Medium-width header: make the IBB/MM/ST switch hug its contents instead of filling the grid column. */
@media (min-width: 521px) and (max-width: 860px) {
  body #app .header > div:first-child {
    grid-template-columns: max-content max-content !important;
    justify-content: start !important;
  }

  body #app .top-tab-group {
    width: max-content !important;
    min-width: 0 !important;
    max-width: max-content !important;
    justify-self: start !important;
    flex: 0 0 auto !important;
    gap: 3px !important;
    padding: 4px !important;
  }

  body #app .top-tab-group #tab-ibb,
  body #app .top-tab-group #tab-mm,
  body #app .top-tab-group #tab-st {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    min-height: 34px !important;
    padding-inline: 0 !important;
  }
}

/* Dark activity log: align row surfaces and status dots with the graphite palette. */
html[data-theme="dark"] body #app .log-card .log-body {
  background: #202733 !important;
  border-color: rgba(223, 230, 239, 0.11) !important;
  color: #A9B4C1 !important;
}

html[data-theme="dark"] body #app .log-card .log-line,
html[data-theme="dark"] body #app .log-card .log-line:nth-child(odd),
html[data-theme="dark"] body #app .log-card .log-line:nth-child(even) {
  position: relative !important;
  display: block !important;
  background: #1B2028 !important;
  color: #A9B4C1 !important;
  border-bottom: 1px solid rgba(223, 230, 239, 0.07) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body #app .log-card .log-line::before {
  background: #7E8A99 !important;
  border-color: #DFE6EF !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body #app .log-card .log-line.success::before {
  background: #6FAF9A !important;
  border-color: #DFE6EF !important;
}

html[data-theme="dark"] body #app .log-card .log-line.warn::before {
  background: #C89B5B !important;
  border-color: #DFE6EF !important;
}

html[data-theme="dark"] body #app .log-card .log-line.info::before {
  background: #7E8A99 !important;
  border-color: #DFE6EF !important;
}

html[data-theme="dark"] body #app .log-card .log-line.error::before {
  background: #C46B67 !important;
  border-color: #DFE6EF !important;
}

html[data-theme="dark"] body #app .log-card .log-line.success,
html[data-theme="dark"] body #app .log-card .log-line.warn,
html[data-theme="dark"] body #app .log-card .log-line.info {
  color: #A9B4C1 !important;
}

html[data-theme="dark"] body #app .log-card .log-line.error {
  color: #DFE6EF !important;
}

/* Dark activity log refinement: remove inner rectangular blocks behind text. */
html[data-theme="dark"] body #app .log-card .log-line,
html[data-theme="dark"] body #app .log-card .log-line:nth-child(odd),
html[data-theme="dark"] body #app .log-card .log-line:nth-child(even) {
  background: #202733 !important;
  border-bottom: 1px solid rgba(223, 230, 239, 0.06) !important;
  border-radius: 0 !important;
}

html[data-theme="dark"] body #app .log-card .log-line:hover {
  background: #202733 !important;
}

/* Light activity log refinement: keep rows on the same surface and rely on subtle separators. */
html[data-theme="light"] body #app .log-card .log-body,
body #app .log-card .log-body {
  background: #F7F7F9 !important;
  border-color: rgba(29, 29, 31, 0.08) !important;
  color: #6E6E73 !important;
}

html[data-theme="light"] body #app .log-card .log-line,
html[data-theme="light"] body #app .log-card .log-line:nth-child(odd),
html[data-theme="light"] body #app .log-card .log-line:nth-child(even),
body #app .log-card .log-line,
body #app .log-card .log-line:nth-child(odd),
body #app .log-card .log-line:nth-child(even) {
  background: #F7F7F9 !important;
  color: #6E6E73 !important;
  border-bottom: 1px solid rgba(29, 29, 31, 0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] body #app .log-card .log-line:hover,
body #app .log-card .log-line:hover {
  background: #F7F7F9 !important;
}

html[data-theme="light"] body #app .log-card .log-line::before,
body #app .log-card .log-line::before {
  background: #8A8F98 !important;
  border-color: #FFFFFF !important;
  box-shadow: none !important;
}

html[data-theme="light"] body #app .log-card .log-line.success::before,
body #app .log-card .log-line.success::before {
  background: #5E9D86 !important;
}

html[data-theme="light"] body #app .log-card .log-line.warn::before,
body #app .log-card .log-line.warn::before {
  background: #B9823F !important;
}

html[data-theme="light"] body #app .log-card .log-line.error::before,
body #app .log-card .log-line.error::before {
  background: #B85D59 !important;
}

/* IBB section top-line pass: mirror the MM analysis card line across primary IBB tiles. */
body #app .account-card::after {
  content: none !important;
  display: none !important;
}

body #app .account-card,
body #app .ticker-panel,
body #app .holdings-card,
body #app .trades-card,
body #app .log-card {
  position: relative !important;
  border-top: 3px solid #272A2F !important;
}

body #app .account-card::before,
body #app .ticker-panel::before,
body #app .holdings-card::before,
body #app .trades-card::before,
body #app .log-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 8px !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0,
      rgba(255, 255, 255, 0.78) 1px,
      rgba(39, 42, 47, 0.12) 2px,
      rgba(39, 42, 47, 0.035) 4px,
      rgba(255, 255, 255, 0) 8px
    ) !important;
  z-index: 1 !important;
}

body #app .account-card > *,
body #app .ticker-panel > *,
body #app .holdings-card > *,
body #app .trades-card > *,
body #app .log-card > * {
  position: relative !important;
  z-index: 2 !important;
}

html[data-theme="dark"] body #app .account-card,
html[data-theme="dark"] body #app .ticker-panel,
html[data-theme="dark"] body #app .holdings-card,
html[data-theme="dark"] body #app .trades-card,
html[data-theme="dark"] body #app .log-card {
  border-top: 3px solid rgba(223, 230, 239, 0.28) !important;
}

html[data-theme="dark"] body #app .account-card::before,
html[data-theme="dark"] body #app .ticker-panel::before,
html[data-theme="dark"] body #app .holdings-card::before,
html[data-theme="dark"] body #app .trades-card::before,
html[data-theme="dark"] body #app .log-card::before {
  background:
    linear-gradient(
      180deg,
      rgba(223, 230, 239, 0.30) 0,
      rgba(223, 230, 239, 0.13) 1px,
      rgba(11, 12, 15, 0.16) 3px,
      rgba(11, 12, 15, 0) 8px
    ) !important;
}

/* Ticker panel inner groups: remove the unneeded top strokes marked in the mockup. */
body #app .ticker-panel .ticker-add-row,
body #app .ticker-panel .ticker-action-row {
  border-top-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body #app .ticker-panel .ticker-add-row,
html[data-theme="dark"] body #app .ticker-panel .ticker-action-row {
  border-top-color: transparent !important;
  box-shadow: none !important;
}

/* Final responsive scrollbar pass: subtle by default, clearer on hover/drag. */
:root {
  --ui-scrollbar-size: 8px;
  --ui-scrollbar-thumb: rgba(100, 116, 139, 0.20);
  --ui-scrollbar-thumb-hover: rgba(39, 42, 47, 0.44);
  --ui-scrollbar-thumb-active: rgba(39, 42, 47, 0.66);
  --ui-scrollbar-track: transparent;
}

html[data-theme="dark"] {
  --ui-scrollbar-thumb: rgba(126, 138, 153, 0.24);
  --ui-scrollbar-thumb-hover: rgba(223, 230, 239, 0.44);
  --ui-scrollbar-thumb-active: rgba(223, 230, 239, 0.62);
  --ui-scrollbar-track: transparent;
}

html,
body,
body #app,
body #app * {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
}

html:hover,
body:hover,
body #app:hover,
body #app *:hover {
  scrollbar-color: var(--ui-scrollbar-thumb-hover) var(--ui-scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body #app::-webkit-scrollbar,
body #app *::-webkit-scrollbar {
  width: var(--ui-scrollbar-size) !important;
  height: var(--ui-scrollbar-size) !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
body #app::-webkit-scrollbar-track,
body #app *::-webkit-scrollbar-track {
  background: var(--ui-scrollbar-track) !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body #app::-webkit-scrollbar-thumb,
body #app *::-webkit-scrollbar-thumb {
  min-height: 36px !important;
  min-width: 36px !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background-color: var(--ui-scrollbar-thumb) !important;
  background-clip: content-box !important;
}

html:hover::-webkit-scrollbar-thumb,
body:hover::-webkit-scrollbar-thumb,
body #app:hover::-webkit-scrollbar-thumb,
body #app *:hover::-webkit-scrollbar-thumb {
  border-width: 1px !important;
  background-color: var(--ui-scrollbar-thumb-hover) !important;
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
body #app::-webkit-scrollbar-thumb:active,
body #app *::-webkit-scrollbar-thumb:active {
  border-width: 1px !important;
  background-color: var(--ui-scrollbar-thumb-active) !important;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
body #app::-webkit-scrollbar-corner,
body #app *::-webkit-scrollbar-corner {
  background: transparent !important;
}

@media (pointer: coarse) {
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  body #app::-webkit-scrollbar,
  body #app *::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }
}

/* Wide IBB balance: make holdings/trades stack and activity log split the row 50/50. */
@media (min-width: 1100px) {
  body #app .main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body #app .holdings-card,
  body #app .trades-card {
    grid-column: 1 / 2 !important;
  }

  body #app .log-card {
    grid-column: 2 / 3 !important;
    grid-row: 3 / 5 !important;
    min-width: 0 !important;
  }
}

/* Wide IBB bottom density: remove the hollow-looking lower space in bottom cards. */
@media (min-width: 1100px) {
  body #app .main-grid {
    row-gap: 12px !important;
    padding-bottom: 12px !important;
    align-items: start !important;
  }

  body #app .holdings-card,
  body #app .trades-card {
    min-height: 0 !important;
    align-self: start !important;
  }

  body #app .holdings-card .table-wrap,
  body #app .trades-card .table-wrap {
    max-height: none !important;
    padding-bottom: 0 !important;
  }

  body #app .log-card {
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
  }

  body #app .log-card .log-body {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    max-height: 320px !important;
    padding-bottom: 10px !important;
  }

  body #app .log-card .log-line:last-child {
    margin-bottom: 0 !important;
  }
}

/* Final dark table hover surface lock: prevent light backfill around rounded hover rows. */
html[data-theme="dark"] body #app .ticker-panel .table-wrap,
html[data-theme="dark"] body #app .holdings-card .table-wrap,
html[data-theme="dark"] body #app .trades-card .table-wrap,
html[data-theme="dark"] body #app #ticker-table,
html[data-theme="dark"] body #app #holdings-table,
html[data-theme="dark"] body #app #trades-table,
html[data-theme="dark"] body #app #ticker-table tbody,
html[data-theme="dark"] body #app #holdings-table tbody,
html[data-theme="dark"] body #app #trades-table tbody {
  background: #1B2028 !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr,
html[data-theme="dark"] body #app #holdings-table tbody tr,
html[data-theme="dark"] body #app #trades-table tbody tr {
  background: #1B2028 !important;
}

html[data-theme="dark"] body #app #ticker-table tbody td,
html[data-theme="dark"] body #app #holdings-table tbody td,
html[data-theme="dark"] body #app #trades-table tbody td,
html[data-theme="dark"] body #app #ticker-table tbody tr:nth-child(even) td,
html[data-theme="dark"] body #app #holdings-table tbody tr:nth-child(even) td,
html[data-theme="dark"] body #app #trades-table tbody tr:nth-child(even) td {
  background: #1B2028 !important;
  background-clip: padding-box !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr:hover,
html[data-theme="dark"] body #app #holdings-table tbody tr:hover,
html[data-theme="dark"] body #app #trades-table tbody tr:hover {
  background: #1B2028 !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr:hover td,
html[data-theme="dark"] body #app #holdings-table tbody tr:hover td,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td,
html[data-theme="dark"] body #app #ticker-table tbody tr.selected:hover td,
html[data-theme="dark"] body #app #holdings-table tbody tr.selected:hover td,
html[data-theme="dark"] body #app #trades-table tbody tr.selected:hover td {
  background: #323A46 !important;
  color: #DFE6EF !important;
  background-clip: padding-box !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr:hover td:first-child,
html[data-theme="dark"] body #app #holdings-table tbody tr:hover td:first-child,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td:first-child {
  border-radius: 12px 0 0 12px !important;
}

html[data-theme="dark"] body #app #ticker-table tbody tr:hover td:last-child,
html[data-theme="dark"] body #app #holdings-table tbody tr:hover td:last-child,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td:last-child {
  border-radius: 0 12px 12px 0 !important;
}

/* Dark table hover lock: prevent light row surfaces from leaking behind rounded hover cells. */
html[data-theme="dark"] body #app #holdings-table tbody tr,
html[data-theme="dark"] body #app #trades-table tbody tr,
html[data-theme="dark"] body #app #holdings-table tbody tr td,
html[data-theme="dark"] body #app #trades-table tbody tr td {
  background-color: #1B2028 !important;
  color: #A9B4C1 !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr.selected td,
html[data-theme="dark"] body #app #trades-table tbody tr.selected td {
  background-color: #1B2028 !important;
  color: #DFE6EF !important;
  border-radius: 0 !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr:hover,
html[data-theme="dark"] body #app #trades-table tbody tr:hover,
html[data-theme="dark"] body #app #holdings-table tbody tr.selected:hover,
html[data-theme="dark"] body #app #trades-table tbody tr.selected:hover {
  background-color: #1B2028 !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr:hover td,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td,
html[data-theme="dark"] body #app #holdings-table tbody tr.selected:hover td,
html[data-theme="dark"] body #app #trades-table tbody tr.selected:hover td {
  background-color: #323A46 !important;
  color: #DFE6EF !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr:hover td:first-child,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td:first-child {
  border-radius: 12px 0 0 12px !important;
  background-clip: border-box !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr:hover td:last-child,
html[data-theme="dark"] body #app #trades-table tbody tr:hover td:last-child {
  border-radius: 0 12px 12px 0 !important;
  background-clip: border-box !important;
}

html[data-theme="dark"] body #app #holdings-table tbody tr.selected td:first-child,
html[data-theme="dark"] body #app #trades-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 #7E8A99 !important;
}

/* Last rule: narrow ticker form uses 3 input columns and a full-width add button. */
@media (max-width: 760px) {
  body #app .ticker-panel .ticker-add-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) {
    display: contents !important;
  }

  body #app .ticker-panel .ticker-add-row > label,
  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body #app .ticker-panel .ticker-add-row > label input,
  body #app .ticker-panel .ticker-add-row > label select,
  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label input,
  body #app .ticker-panel .ticker-add-row > span:not([style*="display:none"]):not([style*="display: none"]) > label select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body #app .ticker-panel .ticker-add-row #btn-add-ticker {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

/* Final viewport-width override: support 21:9 and wider monitors without capping the dashboard. */
@media (min-width: 1100px) {
  html,
  body {
    width: 100% !important;
    max-width: none !important;
  }

  body {
    box-sizing: border-box !important;
    padding-inline: clamp(8px, 0.8vw, 20px) !important;
  }

  body #app {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  body #app #ibb-container,
  body #app #mm-container,
  body #app #st-container,
  body #app .main-grid,
  body #app .account-section,
  body #app .ticker-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body #app .main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

@media (min-width: 1800px) {
  body #app .ticker-panel .ticker-add-row {
    column-gap: clamp(10px, 0.75vw, 18px) !important;
  }
}