html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background: #f6f7f9;
  color: #1f2937;
}

.navbar {
  background: #ffffff !important;
}

.brand-mark {
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

.panel,
.metric,
.stock-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.panel {
  padding: 1.25rem;
}

main { display: flex; flex-direction: column; }
#portfolio-section { order: 1; }
#dashboard-metrics { order: 2; }
#portfolio-controls { order: 3; }
#tracked-instruments { order: 4; }
.panel { border: 0; border-radius: 0; box-shadow: none; }
#portfolio-section, #portfolio-controls, #tracked-instruments { scroll-margin-top: 1rem; }
.navbar .container-fluid { max-width: 1320px; padding: 0.5rem 1.25rem; }
.preferences .form-select { width: auto; }
.preferences .btn { white-space: nowrap; }
.text-bg-dark { color: #fff; background: #252b28; }
.text-bg-success { color: #fff; background: #18764f; }
.text-bg-warning { color: #30280b; background: #f3d681; }
.text-bg-danger { color: #fff; background: #a52b40; }
.text-bg-secondary { color: #fff; background: #606967; }
.text-bg-light { color: #34433c; background: #e8eeea; }
.holdings-toggle-row { justify-content: flex-end; margin-bottom: 1rem; }
.market-toolbar { display: grid; grid-template-columns: minmax(180px, 1fr) 230px 210px; gap: 0.75rem; }
.stock-card > .d-flex { flex-wrap: wrap; gap: 0.75rem; }
.live-quote { margin-left: auto; }
#tracked-instruments > .d-flex:first-child { flex-wrap: wrap; gap: 0.5rem; }
.instrument-picker[open] .instrument-grid { max-height: 400px; overflow-y: auto; padding: 2px; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] body { background: #141616; color: #edf1ee; }
[data-theme="dark"] .navbar,
[data-theme="dark"] .panel,
[data-theme="dark"] .metric,
[data-theme="dark"] .stock-card { background: #202423 !important; color: #edf1ee; }
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .metric span,
[data-theme="dark"] .submetric span,
[data-theme="dark"] .portfolio-total span,
[data-theme="dark"] small { color: #acb8b2 !important; }
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .nav-link { color: #edf1ee !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .instrument-option { background-color: #292e2c; color: #edf1ee; border-color: #526059; }
[data-theme="dark"] .form-control::placeholder { color: #a9b5af; }
[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-outline-secondary { color: #edf1ee; border-color: #82948a; }
[data-theme="dark"] .btn-dark { background: #d9eee1; border-color: #d9eee1; color: #17291e; }
[data-theme="dark"] .table { color: #edf1ee; --bs-table-color: #edf1ee; --bs-table-bg: transparent; border-color: #526059; }
[data-theme="dark"] .text-success { color: #65d5a4 !important; }
[data-theme="dark"] .text-danger { color: #ff9499 !important; }
[data-theme="dark"] .prediction-chip { background: #323936; color: #d0dcd5; }
[data-theme="dark"] .alert-danger { background: #402629; border-color: #713840; color: #ffb4ba; }
[data-theme="dark"] .alert-success { background: #203b2e; border-color: #35694f; color: #a5e5c4; }
[data-theme="dark"] .alert-warning { background: #3c3524; border-color: #74643c; color: #f0ddac; }
[data-theme="dark"] .instrument-option:has(input:checked) { border-color: #61c1a7; background: #243c34; }
[data-theme="dark"] .submetric,
[data-theme="dark"] .stock-card,
[data-theme="dark"] .metric,
[data-theme="dark"] .trade-row,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom { border-color: #414c46 !important; }
[data-theme="dark"] .navbar-toggler { background: #c7d4cc; }
@media (max-width: 767.98px) {
  .market-toolbar { grid-template-columns: 1fr 1fr; }
  .market-toolbar input { grid-column: 1 / -1; }
  .preferences { flex-wrap: wrap; padding-top: 0.5rem; }
  .navbar-brand { font-size: 1rem; }
}

.settings-row .btn {
  min-height: 42px;
}

.account-mode {
  max-width: 46rem;
}

.account-mode .btn {
  min-height: 42px;
}

.trading-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.trading-actions form,
.trading-actions .btn {
  width: 100%;
}

.holdings-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 40px;
}

.prediction-chip {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  font-weight: 700;
  white-space: nowrap;
  color: #4b5563;
  background: #f3f4f6;
}

.live-signal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.prediction-chip.up {
  color: #047857;
  background: #ecfdf5;
}

.prediction-chip.down {
  color: #b91c1c;
  background: #fef2f2;
}

.instrument-picker {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.instrument-picker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
}

.instrument-picker summary::-webkit-details-marker {
  display: none;
}

.instrument-picker summary small,
.instrument-option small,
.portfolio-table td small,
.trade-name small {
  display: block;
  color: #6b7280;
  font-weight: 400;
}

.summary-action {
  color: #0f766e;
  font-weight: 700;
}

.summary-tools,
.logo-stack {
  display: flex;
  align-items: center;
}

.summary-tools {
  gap: 0.75rem;
}

.logo-stack .brand-logo + .brand-logo {
  margin-left: -8px;
}

.logo-stack .brand-logo {
  box-shadow: 0 0 0 2px #fff;
}

.instrument-group {
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
}

.instrument-group legend {
  float: none;
  width: auto;
  margin-bottom: 0.6rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #4b5563;
}

.instrument-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}

.instrument-picker[open] .instrument-grid {
  max-height: 30rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.instrument-search {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.65rem 0;
  background: #fff;
}

.instrument-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.55rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.instrument-option:has(input:checked) {
  border-color: #0f766e;
  background: #f0fdfa;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.brand-logo {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.78rem;
  font-weight: 800;
}

.brand-logo.compact {
  flex-basis: 30px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.brand-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
  background: #fff;
}

.portfolio-table th {
  color: #4b5563;
  font-size: 0.8rem;
  white-space: nowrap;
}

.portfolio-table td {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.empty-state {
  padding: 1rem;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.empty-state strong,
.empty-state span {
  display: block;
}

.empty-state span {
  margin-top: 0.25rem;
  color: #64748b;
}

.trade-list {
  font-size: 0.875rem;
}

.trade-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.trade-action {
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.3rem 0.45rem;
  border-radius: 4px;
  text-align: center;
}

.trade-action.buy {
  color: #047857;
  background: #ecfdf5;
}

.trade-action.sell {
  color: #b91c1c;
  background: #fef2f2;
}

.trade-row:last-child { border-bottom: 0; }
.trade-name { min-width: 0; }
.trade-name strong { overflow-wrap: anywhere; }
.trade-row > strong { white-space: nowrap; }
.trade-row, .submetric, .portfolio-total, .live-quote {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .panel {
    padding: 1rem;
  }

  .settings-row .btn {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    font-size: 0.88rem;
  }

  .account-mode .btn {
    white-space: normal;
    line-height: 1.2;
  }

  .holdings-toggle-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .instrument-grid {
    grid-template-columns: 1fr;
  }

  .logo-stack .brand-logo:nth-child(n+4) {
    display: none;
  }

  .trade-row {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 0.55rem;
  }

  .trade-row .brand-logo { display: none; }
}

.metric {
  padding: 1rem;
}

.metric span,
.submetric span,
.portfolio-total span {
  display: block;
  color: #6b7280;
  font-size: 0.85rem;
}

.metric strong {
  display: block;
  font-size: 1.5rem;
}

.submetric {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.75rem;
}

.submetric strong,
.portfolio-total strong {
  display: block;
}

.portfolio-total strong {
  font-size: 2rem;
}

.portfolio-total em {
  display: block;
  font-style: normal;
  font-weight: 600;
}

.stock-card {
  padding: 1rem;
  height: 100%;
}

.stock-card hr {
  margin: 0.8rem 0;
}

.live-quote {
  min-width: 9rem;
  flex-shrink: 0;
}

.stock-change {
  min-height: 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.news-summary {
  display: -webkit-box;
  margin-top: 0.3rem;
  overflow: hidden;
  color: #6b7280;
  font-weight: 400;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-impact {
  flex: 0 0 auto;
  padding: 0.28rem 0.45rem;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 800;
}

.news-impact.positive {
  color: #047857;
  background: #ecfdf5;
}

.news-impact.negative {
  color: #b91c1c;
  background: #fef2f2;
}

.news-impact.neutral {
  color: #374151;
  background: #f3f4f6;
}

.reason-row td {
  border-top: 0;
  padding-top: 0;
  font-size: 0.9rem;
}

.login-page {
  min-height: 100vh;
  margin: 0;
  color: #f8fafc;
  background: #101114;
}

.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 1.5rem;
}

.login-panel {
  width: min(100%, 420px);
}

.login-logo {
  display: block;
  margin-bottom: 2rem;
  border-radius: 16px;
}

.login-brand {
  margin: 0 0 0.45rem;
  color: #3b82f6;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.login-panel h1 {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 750;
}

.login-intro {
  margin: 0.55rem 0 2rem;
  color: #9ca3af;
}

.login-form {
  display: grid;
  gap: 0.75rem;
}

.login-form > label:not(.login-remember) {
  margin-top: 0.45rem;
  color: #d1d5db;
  font-size: 0.88rem;
  font-weight: 650;
}

.login-form > input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid #3f4652;
  border-radius: 6px;
  color: #f8fafc;
  background: #1a1d22;
  outline: none;
}

.login-form > input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 20%);
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.5rem 0;
  color: #d1d5db;
}

.login-remember input {
  width: 18px;
  height: 18px;
  accent-color: #2563eb;
}

.login-form button {
  min-height: 48px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #2563eb;
  font-weight: 750;
}

.login-form button:hover {
  background: #1d4ed8;
}

.login-error {
  color: #fca5a5;
}

.login-error:empty {
  display: none;
}