:root {
  --bg-0: #070b16;
  --text: #dbe4ff;
  --muted: #8f9abd;
  --ticker-sticky-height: 48px;
  --ticker-nav-gap: 16px;
  --mega-nav-height: 64px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   MEGA-NAV — Fixed top navigation bar
   ═══════════════════════════════════════════════════════════════ */
.mega-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mega-nav-height);
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #d8e2ef;
  box-shadow: 0 2px 12px rgba(18, 41, 70, 0.06);
  overflow: visible;
}

.mega-nav-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 24px;
}

.mega-nav-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.mega-nav-left .brand-logo {
  width: 120px;
  height: 42px;
  object-fit: contain;
  border-radius: 8px;
  padding: 3px 8px;
  background: #ffffff;
  box-shadow: none;
}

.mega-nav-tabs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
}

.mega-nav-tab {
  position: relative;
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #4a5568;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}

.mega-nav-tab:hover {
  color: #1a202c;
  background: #f0f4f8;
}

/* "New content" indicator on the Thematic Research tab (new topics added) */
.mega-nav-new-dot {
  display: none;
  position: absolute;
  top: 5px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F43F5E;
  pointer-events: none;
}
body.thematic-has-new .mega-nav-new-dot {
  display: block;
  animation: navNewPulse 1.8s ease-out infinite;
}
@keyframes navNewPulse {
  0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(244, 63, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

.mega-nav-tab.is-active {
  color: #1a73e8;
  background: #e8f0fe;
}

.mega-nav-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 16px;
  right: 16px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #1a73e8;
}

.mega-nav-inner > .mega-nav-right {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.mega-nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.mega-nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #4a5568;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* Thematic Research dropdown */
.mega-nav-dropdown {
  position: relative;
}
.mega-nav-dropdown > .mega-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mega-nav-caret {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.18s;
}
.mega-nav-dropdown.is-open .mega-nav-caret {
  transform: rotate(180deg);
}
.mega-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(18, 41, 70, 0.14);
  padding: 6px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-nav-dropdown-menu[hidden] {
  display: none;
}
.mega-nav-dropdown-item {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #1a202c;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mega-nav-dropdown-item:hover,
.mega-nav-dropdown-item:focus-visible {
  background: #f0f4f8;
  color: #1a73e8;
  outline: none;
}
.mega-nav-dropdown-item.is-active {
  background: #e8f0fe;
  color: #1a73e8;
}
[data-theme="night"] .mega-nav-dropdown-menu {
  background: #111827;
  border-color: #1f2937;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
[data-theme="night"] .mega-nav-dropdown-item {
  color: #e5e7eb;
}
[data-theme="night"] .mega-nav-dropdown-item:hover,
[data-theme="night"] .mega-nav-dropdown-item:focus-visible {
  background: #1f2937;
  color: #60a5fa;
}
[data-theme="night"] .mega-nav-dropdown-item.is-active {
  background: #1e3a8a;
  color: #93c5fd;
}

/* Thematic iframe wrap */
.thematic-iframe-wrap {
  width: 100%;
  height: calc(100vh - var(--mega-nav-height) - 32px);
  min-height: 720px;
  background: #04080F;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(18, 41, 70, 0.12);
}
.thematic-iframe-wrap[hidden] {
  display: none;
}
.thematic-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Thematic fullscreen mode — applied to <body> while a thematic iframe
   dashboard is active. Strips the hero + card chrome so the iframe can
   take the entire viewport below the top nav. */
body.thematic-dashboard-full .hero,
body.thematic-dashboard-full #panel-market-cycle .card-head,
body.thematic-dashboard-full #market-cycle-sentiment-section,
body.thematic-dashboard-full #market-cycle-watchlist-section,
body.thematic-dashboard-full #market-cycle-notices-section,
body.thematic-dashboard-full .thematic-research-placeholder {
  display: none !important;
}
body.thematic-dashboard-full .page {
  width: 100% !important;
  max-width: none !important;
  margin: calc(var(--mega-nav-height) + var(--ticker-nav-gap)) 0 0 !important;
  padding: 0 !important;
}
body.thematic-dashboard-full .dashboard-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 0 !important;
  gap: 0 !important;
}
body.thematic-dashboard-full .dashboard-side-nav {
  display: none !important;
}
body.thematic-dashboard-full #panel-market-cycle,
body.thematic-dashboard-full #panel-market-cycle .calc-panel {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.thematic-dashboard-full #market-cycle-thematic-section,
body.thematic-dashboard-full .thematic-iframe-wrap {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: calc(100vh - var(--mega-nav-height) - var(--ticker-sticky-height, 0px)) !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* Hide sidebar when thematic is active */
.dashboard-shell.thematic-active .dashboard-side-nav {
  display: none;
}

.dashboard-shell.thematic-active {
  grid-template-columns: minmax(0, 1fr);
}

/* Mobile mega-nav overlay menu — hidden on desktop */
.mega-nav-mobile-menu {
  display: none !important;
  position: absolute;
  top: var(--mega-nav-height);
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid #d8e2ef;
  box-shadow: 0 8px 24px rgba(18, 41, 70, 0.12);
  padding: 16px;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}

.mega-nav-mobile-menu .mega-nav-tab {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  font-size: 15px;
}

.mega-nav-mobile-menu .mega-nav-right {
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.mega-nav-mobile-auth {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.mega-nav-mobile-auth .logout-btn {
  flex: 1 1 auto;
  text-align: center;
}


html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  color: var(--text);
  background: var(--bg-0);
}

.app-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% -10%, #183b74 0%, transparent 42%),
    radial-gradient(circle at 90% 10%, #1c3f4a 0%, transparent 40%),
    linear-gradient(180deg, #09101f 0%, #070b16 100%);
  z-index: -2;
}

.app-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 43, 92, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 43, 92, 0.28) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.35;
}

.ticker-wrap {
  position: sticky;
  top: var(--mega-nav-height);
  z-index: 20;
  overflow: hidden;
  border-bottom: 1px solid rgba(63, 91, 144, 0.38);
  background:
    linear-gradient(180deg, rgba(9, 16, 31, 0.98), rgba(7, 12, 24, 0.96));
  box-shadow: 0 8px 20px rgba(2, 7, 18, 0.48);
}

.ticker-wrap.is-hidden {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  border-bottom: 0;
  box-shadow: none;
  overflow: hidden;
  pointer-events: none;
}

/* Collapse button — floats at the right edge of the ticker */
.ticker-collapse-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 26px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 180, 230, 0.25);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 21;
}
.ticker-collapse-btn:hover,
.ticker-collapse-btn:focus-visible {
  background: rgba(37, 99, 235, 0.25);
  color: #f1f5f9;
  border-color: rgba(148, 180, 230, 0.5);
  outline: none;
}
.ticker-collapse-caret {
  font-size: 10px;
  line-height: 1;
}

/* Re-show button — pinned just under the mega-nav when ticker is hidden */
.ticker-expand-btn {
  position: fixed;
  top: calc(var(--mega-nav-height) + 6px);
  right: 16px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #d8e2ef;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #1a202c;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(18, 41, 70, 0.14);
  transition: background 0.15s, color 0.15s;
}
.ticker-expand-btn[hidden] { display: none; }
.ticker-expand-btn:hover,
.ticker-expand-btn:focus-visible {
  background: #e8f0fe;
  color: #1a73e8;
  outline: none;
}
[data-theme="night"] .ticker-expand-btn {
  background: rgba(15, 23, 42, 0.92);
  border-color: #1f2937;
  color: #e5e7eb;
}
[data-theme="night"] .ticker-expand-btn:hover {
  background: #1e3a8a;
  color: #93c5fd;
}

/* When the ticker is hidden, tighten the top padding for .page and the
   thematic fullscreen height so the iframe grows to reclaim the space. */
body.ticker-collapsed .page {
  margin-top: calc(var(--mega-nav-height) + 8px) !important;
}
body.ticker-collapsed.thematic-dashboard-full
  #market-cycle-thematic-section,
body.ticker-collapsed.thematic-dashboard-full .thematic-iframe-wrap {
  height: calc(100vh - var(--mega-nav-height)) !important;
}

/* Immersive thematic view: keep the ticker hidden even if data-refresh
   paths call classList.remove('is-hidden') on it. */
body.thematic-dashboard-full .ticker-wrap,
body.ticker-collapsed .ticker-wrap {
  display: none !important;
}
body.thematic-dashboard-full .ticker-expand-btn {
  display: none !important;
}

.ticker-track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  white-space: nowrap;
  padding: 8px 16px;
  animation: scroll 40s linear infinite;
  will-change: transform;
}

.ticker-track.is-loading-static {
  width: 100%;
  animation: none;
  transform: none;
}

.ticker-wrap:hover .ticker-track {
  animation-play-state: paused;
}

.ticker-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(64, 90, 142, 0.45);
  background: linear-gradient(180deg, rgba(18, 29, 53, 0.74), rgba(13, 22, 42, 0.76));
  box-shadow: inset 0 1px 0 rgba(137, 168, 230, 0.08);
  font-size: 12px;
  color: #c4d2f4;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.ticker-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.ticker-symbol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f3f8ff;
}

.ticker-symbol::before {
  content: none;
}

.ticker-logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8d7eb;
  background: linear-gradient(135deg, #eaf2ff, #dce9fb);
  flex: 0 0 auto;
}

.ticker-logo.type-crypto {
  background: linear-gradient(135deg, #dff7f0, #cdebe2);
}

.ticker-logo.type-stock {
  background: linear-gradient(135deg, #edf1f8, #dce4f2);
}

.ticker-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  padding: 1px;
  display: block;
}

.ticker-logo-fallback {
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  color: #1c3655;
  text-transform: uppercase;
}

.ticker-logo.has-image .ticker-logo-fallback {
  display: none;
}

.ticker-price {
  color: #d7e4ff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ticker-change {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.ticker-change.up {
  color: #3ff1b0;
  border-color: rgba(58, 222, 160, 0.45);
  background: rgba(20, 106, 76, 0.2);
}

.ticker-change.down {
  color: #ff90a8;
  border-color: rgba(207, 86, 116, 0.45);
  background: rgba(109, 21, 42, 0.24);
}

.ticker-change.na {
  color: #b3c2df;
  border-color: rgba(151, 171, 210, 0.4);
  background: rgba(95, 113, 148, 0.18);
}

.ticker-item-status {
  color: #9db0da;
  font-weight: 600;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.page {
  width: min(1440px, calc(100% - 24px));
  margin: calc(var(--mega-nav-height) + var(--ticker-nav-gap)) auto 40px;
}

.top-nav {
  position: sticky;
  top: calc(var(--ticker-sticky-height) + var(--ticker-nav-gap));
  z-index: 24;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  padding: 14px 18px;
  border: 1px solid #d8e3f1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(18, 31, 54, 0.1);
  backdrop-filter: blur(10px);
}

.dashboard-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.dashboard-side-nav {
  position: sticky;
  top: 150px;
  align-self: start;
  justify-self: start;
  width: 240px;
  max-width: 240px;
}

.dashboard-main {
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-dot {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #08111f;
  background: linear-gradient(135deg, #43ffcc, #4aa5ff);
}

.brand-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
}

.brand-sub {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.brand-logo {
  width: 116px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  flex: 0 0 auto;
  background: #ffffff;
  padding: 3px 8px;
  box-shadow: 0 4px 10px rgba(17, 38, 66, 0.12);
}

.right-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.locale-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #294067;
  font-size: 12px;
  border: 1px solid #9db4d5;
  border-radius: 999px;
  background: #f5f9ff;
  padding: 6px 10px;
  font-weight: 700;
}

.locale-select {
  border: 1px solid #7fa1d0;
  background: #ffffff;
  color: #1f3357;
  border-radius: 999px;
  font-size: 12px;
  padding: 5px 12px;
  min-width: 110px;
  font-weight: 600;
  cursor: pointer;
}

.meta-pill {
  font-size: 12px;
  color: #a7b4da;
  background: rgba(26, 34, 56, 0.95);
  border: 1px solid #2a3a68;
  border-radius: 999px;
  padding: 8px 14px;
}

.logout-btn {
  border: 1px solid #5a2c3b;
  background: #251321;
  color: #ff9ab2;
  border-radius: 999px;
  font-size: 12px;
  padding: 8px 14px;
}

.hero {
  text-align: center;
  margin-bottom: 26px;
}

.landing-intro {
  position: relative;
  border-radius: 18px;
  margin-bottom: 24px;
  background: #000;
  overflow: hidden;
  min-height: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 20px 40px rgba(3, 10, 22, 0.35);
}

.landing-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.landing-hero-mobile {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
}

@media (max-width: 768px) {
  .landing-hero-mobile {
    display: block;
    background-image: url("/Login-background/earth4mobile.png");
    background-size: cover;
    background-position: center;
  }
  .landing-hero-video { display: none; }
}

.landing-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.72) 60%, rgba(0,0,0,0.38) 100%);
  pointer-events: none;
  z-index: 0;
}

.landing-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 52px 32px;
  max-width: 700px;
}

.landing-head h1 {
  margin: 0 0 28px;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.02em;
  color: #f7fbff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
  line-height: 1.2;
}

.landing-kicker {
  margin: 0 0 10px;
  color: #89ffd9;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.trial-emphasis {
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(112, 230, 190, 0.48);
  background: rgba(10, 34, 49, 0.72);
  color: #b9ffe9 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.38);
}

.landing-trial-text {
  margin: 10px 0 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: none;
}

.landing-cta-btn {
  min-width: 200px;
  padding-left: 36px !important;
  padding-right: 36px !important;
}

.landing-cta-btn::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  font-weight: 700;
  animation: landing-cta-arrow-nudge 1.4s ease-in-out infinite;
}

.landing-cta-btn:hover::after {
  animation-duration: 0.9s;
}

@keyframes landing-cta-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-cta-btn::after { animation: none; }
}

.landing-sub {
  margin: 0 0 18px;
  color: #e8f1ff;
  max-width: 880px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.landing-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.landing-gallery {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.landing-legal-links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 0;
  padding: 14px 24px 20px;
  border-top: 1px solid rgba(161, 188, 230, 0.2);
}

.landing-legal-links a {
  color: #d9ebff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(217, 235, 255, 0.35);
  text-underline-offset: 3px;
}

.landing-legal-links a:hover,
.landing-legal-links a:focus-visible {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.8);
}

.pricing-section {
  max-width: 960px;
  margin: 0 auto 32px;
  text-align: center;
  padding: 48px 24px;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.pricing-section h2 {
  font-size: clamp(20px, 2.8vw, 28px);
  color: #0a1628;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.pricing-section > p {
  color: #5a7091;
  font-size: 15px;
  margin: 0 0 32px;
}
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
  align-items: stretch;
}
.pricing-card {
  background: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 24px;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.pricing-card-featured {
  border: 2px solid #c8933a;
  box-shadow: 0 0 0 1px rgba(200, 147, 58, 0.18);
}

/* Desktop: promo card last (rightmost); mobile: HTML order (promo first) */
.pricing-card-promo {
  order: 3;
}
.price-placeholder {
  visibility: hidden;
}
.pricing-card-badge-placeholder {
  height: 24px;
  margin-bottom: 10px;
}
.pricing-card-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.pricing-card-badge-popular {
  background: #34c99a;
  color: #ffffff;
}
.pricing-card-badge-promo {
  background: #f2cf9f;
  color: #0c447c;
}
.pricing-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #0a1628;
  margin: 0 0 4px;
}
.pricing-card-desc {
  font-size: 13px;
  color: #5a7091;
  margin: 0 0 20px;
  line-height: 1.5;
}
.price-block {
  margin-bottom: 20px;
}
.price-original {
  font-size: 14px;
  color: #9aabb8;
  text-decoration: line-through;
  margin-bottom: 2px;
}
.price-main {
  font-size: 40px;
  font-weight: 800;
  color: #0a1628;
  letter-spacing: -0.03em;
  line-height: 1;
  display: flex;
  align-items: flex-start;
}
.price-main sup {
  font-size: 20px;
  font-weight: 700;
  margin-top: 6px;
  margin-right: 1px;
}
.price-main-free {
  color: #0f6e56;
}
.price-save {
  font-size: 13px;
  font-weight: 600;
  color: #0f6e56;
  margin-top: 4px;
}
.price-note {
  font-size: 12px;
  color: #7a8fa6;
  margin-top: 4px;
}
.pricing-card .onboarding-btn {
  width: 100%;
}
.pricing-btn {
  width: 100%;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #3e89ff, #4fe9c7);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.2s;
}
.pricing-btn:hover {
  filter: brightness(1.15);
}
.pricing-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 20px 0 16px;
}
.features-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a8fa6;
  margin-bottom: 10px;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feature-list li {
  font-size: 13px;
  color: #3d5575;
  padding: 5px 0 5px 22px;
  position: relative;
  line-height: 1.4;
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='7' fill='%230F6E56'/%3E%3Cpath d='M4 7l2 2 4-4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.social-proof {
  text-align: center;
  padding: 10px 0 0;
  color: #5a7091;
  font-size: 13px;
}
/* Hide billing/account panel for logged-in users without a subscription (plan selection page only) */
body.app-locked.user-logged-in #panel-billing {
  display: none !important;
}

@media (max-width: 900px) {
  .pricing-cards {
    grid-template-columns: 1fr;
  }
  .pricing-card-promo {
    order: 0;
  }
}

.app-legal-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 18px 0 12px;
  border-top: 1px solid rgba(80, 110, 160, 0.2);
  opacity: 0.9;
}
.app-legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
}
.app-legal-footer a {
  color: #5f7695;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.app-legal-footer a:hover {
  color: #17324f;
  text-decoration: underline;
}
.app-legal-footer-disclaimer {
  font-size: 11px;
  color: #7a8ca8;
  text-align: center;
  max-width: 560px;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.app-legal-footer-tagline {
  font-size: 11px;
  color: #5a6d8a;
  text-align: center;
  max-width: 480px;
}

.landing-gallery img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(103, 136, 190, 0.55);
  box-shadow: 0 14px 30px rgba(6, 14, 30, 0.35);
}

.hero h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.02em;
}

.hero h1 span {
  background: linear-gradient(90deg, #2dffc6, #56d4ff, #ee68ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  margin: 10px auto 22px;
  max-width: 760px;
  color: #95a4ca;
}

.onboarding-hero {
  margin: 0 auto 18px;
  width: min(980px, 100%);
  border: 1px solid rgba(96, 143, 219, 0.45);
  border-radius: 18px;
  padding: 22px 20px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(8, 15, 30, 0.75), rgba(8, 15, 30, 0.82)),
    url("Login-background/Screenshot 2026-02-27 at 6.16.46 PM.png") center/cover no-repeat;
  box-shadow: 0 20px 40px rgba(5, 14, 31, 0.35), inset 0 1px 0 rgba(197, 220, 255, 0.2);
}

.onboarding-copy h3 {
  margin: 0;
  color: #f0f6ff;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.onboarding-copy p {
  margin-top: 10px;
  max-width: 860px;
  color: #bfd0f4;
}

.onboarding-copy .trial-emphasis {
  margin-top: 0;
  margin-bottom: 10px;
}

.onboarding-eyebrow {
  margin: 0 0 8px;
  color: #85ffd8;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.onboarding-ctas {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.trial-emphasis.trial-inline {
  margin: 0;
}

.onboarding-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 11px;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(13, 33, 66, 0.88);
  background-clip: padding-box;
  color: #eaf2ff;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  letter-spacing: 0.01em;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 12, 36, 0.32);
}

.onboarding-btn.primary {
  background: linear-gradient(135deg, #3e89ff, #4fe9c7);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(35, 126, 220, 0.28);
}

.landing-cta-btn.primary {
  background: linear-gradient(135deg, #3e89ff, #4fe9c7) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 28px rgba(35, 126, 220, 0.38) !important;
}

.onboarding-btn:hover {
  filter: brightness(1.08);
}

.onboarding-btn:focus-visible {
  outline: 2px solid rgba(86, 201, 255, 0.75);
  outline-offset: 2px;
}

.onboarding-status {
  margin-top: 10px;
  font-size: 13px;
  color: #dce9ff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.onboarding-plan-info {
  margin: 10px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #f7fbff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 188, 255, 0.35);
  background: rgba(10, 24, 50, 0.58);
}

.onboarding-plan-info .plan-old-price {
  text-decoration-line: line-through;
  text-decoration-style: solid;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  margin-right: 6px;
  padding: 0;
  border-radius: 999px;
  color: #f7fbff !important;
  background: transparent;
  border: none;
  font-size: 14px;
  line-height: 1.1;
  text-decoration-thickness: 2.5px;
  text-decoration-color: #ff4d4f !important;
  font-weight: 800;
  text-shadow: none;
}

.onboarding-plan-info .plan-discount {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #0b2a1f;
  font-weight: 700;
  background: #6cf7c9;
  border: 1px solid rgba(255, 255, 255, 0.85);
  text-shadow: none;
}

.app-locked .hero,
.app-locked .dashboard-side-nav,
.app-locked #panel-market-cycle,
.app-locked #panel-portfolio,
.app-locked #panel-ai-analysis {
  display: none !important;
}

.app-locked .mega-nav-tabs {
  display: none !important;
}

.app-locked .dashboard-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}

.auth-resolving #landing-intro,
.auth-resolving #pricing-section,
.auth-resolving .onboarding-hero {
  display: none !important;
}

html.route-billing-preinit #landing-intro,
html.route-billing-preinit .hero,
html.route-billing-preinit .dashboard-side-nav,
html.route-billing-preinit #panel-market-cycle,
html.route-billing-preinit #panel-portfolio,
html.route-billing-preinit #panel-ai-analysis {
  display: none !important;
}

html.route-billing-preinit .dashboard-shell,
.auth-resolving .dashboard-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}

.auth-resolving .dashboard-side-nav {
  display: none !important;
}

html.route-billing-preinit #panel-billing {
  display: block !important;
}

.app-unlocked #landing-intro,
.app-unlocked #pricing-section {
  display: none !important;
}

.app-unlocked .onboarding-hero {
  display: none !important;
}

/* Keep intro hidden for any logged-in user. */
.user-logged-in #landing-intro,
.user-logged-in .onboarding-hero {
  display: none !important;
}
/* Premium (app-unlocked) users never see pricing — they land on the dashboard. */
/* Non-premium logged-in users DO see pricing for plan selection. */

/* Hide pricing section on the landing page (unauthenticated users see only the CTA). */
body.app-locked:not(.user-logged-in) #pricing-section {
  display: none !important;
}

.hero-sub {
  margin: 0 auto 8px;
  color: #8ca0cc;
  font-size: 13px;
}

.hero-sub.label {
  margin-top: 14px;
  color: #6f84b2;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.arena {
  color: #b7c3e9;
  border: 1px solid #324573;
  background: #1a2542;
  border-radius: 10px;
  padding: 10px 14px 9px;
  font-weight: 600;
  min-width: 240px;
  text-align: left;
}

.arena strong {
  display: block;
  font-size: 13px;
}

.arena small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: #7f92bf;
}

.arena.active {
  color: #ffd18c;
  border-color: #865c23;
  background: linear-gradient(135deg, #4d3215, #2d2420);
  box-shadow: 0 0 0 1px rgba(255, 188, 103, 0.2), 0 8px 20px rgba(255, 166, 61, 0.16);
}

.dashboard {
  display: none;
  background: linear-gradient(180deg, rgba(30, 40, 68, 0.9), rgba(21, 29, 52, 0.98));
  border: 1px solid #273861;
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.dashboard.is-selected {
  display: block;
  border-color: #3e5f95;
  box-shadow: 0 0 0 1px rgba(84, 136, 214, 0.2), 0 16px 42px rgba(13, 33, 69, 0.5);
}

.dashboard + .dashboard {
  margin-top: 26px;
}

.dashboard-secondary .card-head h2 {
  font-size: 18px;
}

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid #24355f;
}

.market-cycle-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.market-cycle-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid #bfd0e6;
  border-radius: 16px;
  background: #f6faff;
  color: #35567b;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.market-cycle-tab:hover,
.market-cycle-tab:focus-visible {
  border-color: #89aeda;
  background: #edf5ff;
  box-shadow: 0 0 0 3px rgba(129, 167, 218, 0.12);
  outline: none;
}

.market-cycle-tab-number {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(42, 76, 121, 0.12);
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.market-cycle-tab.is-active {
  border-color: #7aabe0;
  background: #e0edfb;
  color: #1a3d6e;
  box-shadow: 0 1px 4px rgba(58, 123, 213, 0.12);
}

.market-cycle-tab.is-active .market-cycle-tab-number {
  background: #3a7bd5;
  color: #ffffff;
}

.market-cycle-tab.has-alert {
  border-color: #dc6a83;
  background: #fff1f5;
  color: #a53152;
}

.market-cycle-notices-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc3e5f;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}

.mct-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 140ms ease;
}

.market-cycle-tab.is-active .mct-icon,
.market-cycle-tab:hover .mct-icon,
.market-cycle-tab:focus-visible .mct-icon {
  opacity: 1;
}

#market-cycle-sentiment-section,
#market-cycle-watchlist-section,
#market-cycle-notices-section {
  scroll-margin-top: 96px;
}

.info-trigger {
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #24355f;
  background: linear-gradient(90deg, #16233f, #15203a);
  color: #9eb3e2;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
}

.info-trigger:hover {
  color: #c9dbff;
  background: linear-gradient(90deg, #1b2d52, #182846);
}

.card-head h2 {
  margin: 0;
  font-size: 20px;
}

.guide-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #2f7f79;
  color: #6af4dd;
  font-size: 10px;
  vertical-align: middle;
  background: rgba(18, 43, 57, 0.8);
}

.guide-open-btn {
  cursor: pointer;
  transition: box-shadow 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.guide-open-btn:hover,
.guide-open-btn:focus-visible {
  background: rgba(24, 63, 80, 0.95);
  box-shadow: 0 0 0 1px rgba(77, 218, 204, 0.36), 0 0 14px rgba(42, 222, 196, 0.2);
  outline: none;
  transform: translateY(-1px);
}

.card-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #8f9cc2;
}

.signal-box {
  display: flex;
  gap: 10px;
}

.signal {
  min-width: 70px;
  border-radius: 10px;
  border: 1px solid #335285;
  text-align: center;
  padding: 6px 8px;
}

.signal strong {
  display: block;
  font-size: 20px;
}

.signal span {
  font-size: 11px;
  letter-spacing: 0.08em;
}

.stat-buy strong,
.stat-buy span {
  color: #24e694;
}

.stat-sell strong,
.stat-sell span {
  color: #ff5478;
}

.stat-watch strong,
.stat-watch span {
  color: #3f7bff;
}

.calc-panel {
  padding: 16px 20px;
  border-bottom: 1px solid #24355f;
}

.calc-panel h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #b8c5e8;
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}

.calc-grid,
.result-pill {
  display: none;
}

label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #99a8cd;
}

input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #2d3f6d;
  background: #111a32;
  color: #e4e9ff;
  padding: 8px 9px;
}

select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #2d3f6d;
  background: #111a32;
  color: #e4e9ff;
  padding: 8px 9px;
}

input:disabled {
  color: #aebee5;
  background: #16213d;
  border-color: #334875;
  cursor: not-allowed;
}

.watchlist-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.watchlist-selector-label {
  font-size: 14px;
  font-weight: 600;
  color: #17345a;
  white-space: nowrap;
}

.watchlist-selector-sentiment {
  margin-bottom: 16px;
}

.watchlist-selector-sentiment select {
  max-width: 260px;
}

.watchlist-selector select {
  flex: 1;
  min-height: 44px;
  border: 1px solid #bfd0e6;
  border-radius: 12px;
  background: #ffffff;
  color: #17345a;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  appearance: auto;
  max-width: 320px;
}

.watchlist-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #bfd0e6;
  background: #ffffff;
  color: #4a6a8a;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.watchlist-action-btn:hover {
  background: #f0f5fc;
  color: #17345a;
  border-color: #8aa4c8;
}

.watchlist-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.watchlist-action-btn:disabled:hover {
  background: #ffffff;
  color: #4a6a8a;
  border-color: #bfd0e6;
}

.watchlist-add-btn:hover {
  border-color: #2d9d6f;
  color: #1e795d;
}

.watchlist-delete-btn:hover:not(:disabled) {
  border-color: #d04040;
  color: #c03030;
}

/* ── Shared watchlist controls (tabs + symbol input, shown above all sections) ── */
.watchlist-shared-controls {
  margin-bottom: 4px;
}

.signal-counts-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* ── Watchlist Section Head ── */
.watchlist-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.watchlist-section-head h3 {
  margin: 0;
}

/* ── Watchlist Tab Bar ── */
.watchlist-bar-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 2px solid #e3ecf7;
}

.watchlist-tabs-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  padding-bottom: 2px;
  /* border is on .watchlist-bar-row */
}
.watchlist-tabs-bar::-webkit-scrollbar { display: none; }

.watchlist-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #5a7a99;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 6px 6px 0 0;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  margin-bottom: -2px;
  user-select: none;
}
.watchlist-tab:hover {
  background: #f0f5fc;
  color: #17345a;
}
.watchlist-tab.is-active {
  background: linear-gradient(135deg, #3e89ff, #4fe9c7);
  color: #ffffff !important;
  border-bottom-color: transparent;
  font-weight: 700;
}
.watchlist-tab.is-active .watchlist-tab-name,
.watchlist-tab.is-active .watchlist-tab-count {
  color: #ffffff !important;
}
.watchlist-tab.is-editing {
  background: #fff;
  border: 1px solid #1a6fd4;
  border-radius: 4px;
  margin-bottom: -2px;
}
.watchlist-tab-name {
  outline: none;
  min-width: 20px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watchlist-tab.is-active .watchlist-tab-name {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}
.watchlist-tab-name[contenteditable="true"] {
  border-bottom: 1px dashed #1a6fd4;
  padding-bottom: 1px;
}
.watchlist-tab-count {
  font-size: 11px;
  opacity: 0.65;
}

.watchlist-tab-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #4a6a8a;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  margin-left: 4px;
}
.watchlist-tab-add-btn:hover { background: #e8f0fb; color: #1a6fd4; }
.watchlist-tab-add-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.watchlist-more-wrap {
  position: relative;
  flex-shrink: 0;
  padding-bottom: 2px;
}

.watchlist-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #4a6a8a;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: background 0.15s, color 0.15s;
}
.watchlist-more-btn:hover { background: #f0f5fc; color: #17345a; }

.watchlist-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #ffffff;
  border: 1px solid #d0dff0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(26, 75, 140, 0.14);
  z-index: 200;
  padding: 4px 0;
}

.watchlist-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: transparent;
  color: #17345a;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.watchlist-more-item:hover { background: #f0f5fc; }
.watchlist-more-item--danger { color: #c03030; }
.watchlist-more-item--danger:hover { background: #fff0f0; }
.watchlist-more-item:disabled { opacity: 0.4; cursor: not-allowed; }
.watchlist-more-divider { height: 1px; background: #e3ecf7; margin: 4px 0; }
[data-theme="night"] .watchlist-more-divider { background: #30363d; }

/* Dark mode for watchlist tabs */
[data-theme="night"] .watchlist-bar-row { border-bottom-color: #30363d; }
[data-theme="night"] .watchlist-tabs-bar { border-bottom: none; }
[data-theme="night"] .watchlist-tab { color: #8b949e; }
[data-theme="night"] .watchlist-tab:hover { background: #21262d; color: #c9d1d9; }
[data-theme="night"] .watchlist-tab.is-active { background: linear-gradient(135deg, #3e89ff, #4fe9c7); color: #ffffff; border-bottom-color: transparent; }
[data-theme="night"] .watchlist-tab.is-editing { background: #161b22; border-color: #58a6ff; }
[data-theme="night"] .watchlist-tab-name[contenteditable="true"] { border-bottom-color: #58a6ff; }
[data-theme="night"] .watchlist-tab-add-btn { color: #8b949e; }
[data-theme="night"] .watchlist-tab-add-btn:hover { background: #21262d; color: #58a6ff; }
[data-theme="night"] .watchlist-more-btn { color: #8b949e; }
[data-theme="night"] .watchlist-more-btn:hover { background: #21262d; color: #e6edf3; }
[data-theme="night"] .watchlist-more-menu { background: #161b22; border-color: #30363d; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
[data-theme="night"] .watchlist-more-item { color: #c9d1d9; }
[data-theme="night"] .watchlist-more-item:hover { background: #21262d; }
[data-theme="night"] .watchlist-more-item--danger { color: #f85149; }
[data-theme="night"] .watchlist-more-item--danger:hover { background: #2d1b1b; }

.asset-controls {
  display: block;
  margin-bottom: 10px;
}

.symbol-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.symbol-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #3a516d;
}

.symbol-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.symbol-search-icon {
  position: absolute;
  left: 18px;
  color: #8aa6c8;
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
}

.symbol-field #asset-symbol {
  width: 100%;
  height: 64px;
  font-size: 15px;
  padding: 0 18px 0 48px;
  border-radius: 10px;
  border: 1.5px solid #d0dced;
  background: #ffffff;
  color: #1a2f4a;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.symbol-field #asset-symbol::placeholder {
  color: #8aa6c8;
  font-size: 14px;
}

.symbol-field #asset-symbol:focus {
  border-color: #3e89ff;
  box-shadow: 0 0 0 3px rgba(62, 137, 255, 0.15);
  outline: none;
}

.symbol-field #asset-symbol:focus ~ .symbol-search-icon,
.symbol-input-wrap:focus-within .symbol-search-icon {
  color: #3e89ff;
}

.risk-pref-field {
  display: grid;
  gap: 6px;
}

.risk-pref-field select {
  min-height: 44px;
  border: 1px solid #bfd0e6;
  border-radius: 12px;
  background: #ffffff;
  color: #17345a;
  padding: 0 12px;
  font: inherit;
  appearance: auto;
}

.asset-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  border: 1px solid #314a7e;
  border-radius: 10px;
  background: #121d36;
  max-height: 200px;
  overflow-y: auto;
}

.suggestion-item {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-top: 1px solid #223864;
  color: #bdd0f5;
  font-size: 12px;
  cursor: pointer;
}

.suggestion-symbol {
  font-size: 12px;
  color: #d8e6ff;
  letter-spacing: 0.01em;
}

.suggestion-name {
  font-size: 11px;
  color: #9bb2dc;
  font-weight: 500;
}

.suggestion-item:first-child {
  border-top: 0;
}

.suggestion-item:hover {
  background: #1a2b4b;
}

.add-asset-btn {
  border-radius: 10px;
  border: 1px solid #31795f;
  background: linear-gradient(135deg, #1e795d, #26567a);
  color: #e6fff8;
  font-weight: 700;
  height: 38px;
}

.reset-assets-btn {
  border-radius: 10px;
  border: 1px solid #365688;
  background: linear-gradient(135deg, #1f2f4e, #1d2740);
  color: #c5d7ff;
  font-weight: 700;
  height: 38px;
}

.selected-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid #395584;
  background: #13203a;
  color: #b7c7ed;
  font-size: 12px;
  padding: 5px 10px 5px 7px;
}

.asset-chip button {
  border: 0;
  border-radius: 999px;
  width: 20px;
  height: 20px;
  background: #4b2034;
  color: #ffd3e3;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.asset-sentiment-list {
  margin-top: 10px;
  border: 1px solid #2a3f6f;
  border-radius: 10px;
  overflow: clip;
}

.asset-table-expand-btn {
  margin-top: 8px;
  border: 1px solid #355689;
  border-radius: 8px;
  background: #162645;
  color: #b7c9ec;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 10px;
  cursor: pointer;
}

.execution-notices {
  margin-top: 10px;
  border: 1px solid #2f456f;
  border-radius: 10px;
  background: #14223d;
  overflow: hidden;
}

.execution-notices-head {
  padding: 8px 10px;
  border-bottom: 1px solid #27406a;
  color: #a7bce6;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Popup alert toggle */
.popup-alert-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 11px;
  color: #7a95c2;
  user-select: none;
}
.popup-alert-checkbox {
  display: none;
}
.popup-alert-toggle-track {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: #2a3d65;
  transition: background 160ms ease;
  flex-shrink: 0;
}
.popup-alert-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5a7aa8;
  transition: transform 160ms ease, background 160ms ease;
}
.popup-alert-checkbox:checked ~ .popup-alert-toggle-track {
  background: #1a6fd4;
}
.popup-alert-checkbox:checked ~ .popup-alert-toggle-track .popup-alert-toggle-thumb {
  transform: translateX(12px);
  background: #ffffff;
}
.popup-alert-toggle-text {
  letter-spacing: 0.01em;
}

/* Quick system bar — simple grey centered top bar */
.quick-toast-bar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(210, 220, 240, 0.96);
  color: #1a2a42;
  padding: 9px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 2px 14px rgba(0,0,0,0.35);
  opacity: 1;
  transition: opacity 0.28s ease;
  max-width: calc(100vw - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-toast-bar.is-hiding {
  opacity: 0;
}

.execution-notices-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #27406a;
  background: #13213a;
}

.execution-notices-tab {
  border: 1px solid #2f456f;
  border-radius: 999px;
  background: #172848;
  color: #93a9d3;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  cursor: pointer;
}

.execution-notices-tab:hover,
.execution-notices-tab:focus-visible {
  outline: none;
  border-color: #4d6ea8;
  color: #d8e8ff;
}

.execution-notices-tab.is-active {
  background: linear-gradient(135deg, #1b9f85, #25508f);
  border-color: #57d9c0;
  color: #e7fbff;
}

.execution-notices-list {
  display: block;
}

.execution-notices-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #223a63;
  background: #e3ebf9;
}

.execution-notices-note {
  padding: 10px 14px;
  border-bottom: 1px solid #d4def0;
  background: #f5f8fe;
  color: #526b8e;
  font-size: 11px;
  font-weight: 700;
}

.execution-notices-toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.execution-notices-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #38527b;
  font-size: 11px;
  font-weight: 700;
}

.execution-notices-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #38527b;
  font-size: 11px;
  font-weight: 700;
}

.execution-notices-control select {
  border: 1px solid #b7c9e4;
  border-radius: 999px;
  background: #f8fbff;
  color: #234266;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
}

.execution-notices-select-all input,
.execution-notice-select input {
  width: 14px;
  height: 14px;
  accent-color: #57d9c0;
}

.execution-notice-bulk-action {
  border: 1px solid #8f5472;
  border-radius: 999px;
  background: #3c1730;
  color: #ffc9df;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  cursor: pointer;
}

.execution-notice-bulk-action:disabled {
  border-color: #4d618d;
  background: #243351;
  color: #9eb4dd;
  cursor: default;
}

.execution-notice-bulk-action.restore-mode {
  border-color: #9fd7c8;
  background: #eefaf6;
  color: #1f7a63;
}

.execution-notice-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid #223a63;
}

.execution-notice-item:first-of-type {
  border-top: 0;
}

.execution-notice-item strong {
  color: #d4e6ff;
  font-size: 12px;
}

/* Title line: only ticker + sentiment stage are bold (see decorateNoticeTitle).
   The surrounding text keeps normal weight but inherits the title's sizing. */
.execution-notice-title {
  display: inline;
  font-size: 12px;
  color: inherit;
}

.execution-notice-item .execution-notice-zone {
  /* Zone color comes from an inline style set by decorateNoticeTitle; keep
     weight bold but let the inline color beat the generic strong color rule. */
  font-weight: 700;
}

.execution-notice-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.execution-notice-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 1px;
}

.execution-notice-item small {
  display: block;
  color: #91a7d2;
  font-size: 11px;
  margin-top: 2px;
}

.execution-notice-action {
  border: 1px solid #2c8e65;
  border-radius: 999px;
  background: #113a34;
  color: #57f2b6;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  cursor: pointer;
}

.execution-notice-action:disabled {
  border-color: #4d618d;
  background: #243351;
  color: #9eb4dd;
  cursor: default;
}

.execution-notice-example {
  opacity: 0.82;
}

.execution-notice-example .execution-notice-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.asset-row {
  display: grid;
  grid-template-columns: minmax(160px, 280px) 110px 130px minmax(160px, 200px) minmax(220px, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid #24375f;
  font-size: 12px;
  align-items: center;
}

/* Price column: center */
.asset-row > span:nth-child(2) { text-align: center; }
/* AI 摘要 column: left */
.asset-row > span:nth-child(3) { text-align: left; justify-self: start; }
/* Actions column: right */
.asset-action-cell { text-align: left; }

/* ── Sticky column header row ───────────────────────────────────── */
.asset-row-header {
  position: sticky;
  top: calc(var(--mega-nav-height, 64px) + var(--ticker-sticky-height, 48px) + var(--ticker-nav-gap, 16px));
  z-index: 10;
  border-top: none;
  border-radius: 10px 10px 0 0;
}

/* ── 執行計劃 button ─────────────────────────────────────────────── */
.row-exec-plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(99, 160, 255, 0.45);
  background: rgba(99, 160, 255, 0.10);
  color: #7ab8ff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.row-exec-plan-btn:hover {
  background: rgba(99, 160, 255, 0.20);
  border-color: rgba(99, 160, 255, 0.70);
}

/* ── Row highlight: BUY=淺綠 / SELL=淺紅 ────────────────────────── */
.asset-row-data.asset-row-buy  { background: rgba(45, 158, 95, 0.10); }
.asset-row-data.asset-row-sell { background: rgba(224, 82, 82, 0.10); }
.asset-row-data.asset-row-buy:hover  { background: linear-gradient(90deg, rgba(45,158,95,0.18), rgba(34,67,102,0.25)); }
.asset-row-data.asset-row-sell:hover { background: linear-gradient(90deg, rgba(224,82,82,0.18), rgba(34,67,102,0.25)); }

/* ── AI 摘要 header expand button ───────────────────────────────── */
.ai-summary-header-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ai-summary-expand-btn {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: #6f8fbe;
  cursor: pointer;
  transition: color 120ms ease;
  flex-shrink: 0;
}
.ai-summary-expand-btn:hover { color: #9fc3f8; }

/* ── AI Summary info "i" button (inline, table header) ──────────── */
.ai-summary-info-btn {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid #44618f;
  background: transparent;
  color: #9fb8e3;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: "Georgia", "Times New Roman", serif;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 120ms ease, color 120ms ease;
}
.ai-summary-info-btn:hover {
  border-color: #6f8ec2;
  color: #d2e4ff;
}

/* ── AI Modal — ul list (used in ai-summary-info-modal) ─────────── */
/* Text color is driven by theme-scoped rules further down the file so
 * both day and night modes have proper contrast. */
.ai-modal-list {
  margin: 6px 0 0 0;
  padding-left: 20px;
  list-style: disc;
  font-size: 13px;
  line-height: 1.55;
}
.ai-modal-list li { margin-bottom: 4px; }
.ai-modal-list li b { font-weight: 600; }

/* ── 情緒・技術訊號 column collapsed ─────────────────────────────── */
.asset-sentiment-list.sentiment-tech-collapsed .asset-row {
  grid-template-columns: minmax(160px, 280px) 110px 130px minmax(220px, 1fr);
}
.asset-sentiment-list.sentiment-tech-collapsed .asset-row > span:nth-child(4) {
  display: none;
}

/* ── AI 摘要 cell ───────────────────────────────────────────────── */
.ai-summary-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-summary-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ai-dot-buy   { background: #3dbf72; }
.ai-dot-sell  { background: #e85555; }
.ai-dot-watch { background: #5a9de8; }
.ai-dot-wait  { background: #8099bf; }
.ai-summary-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ai-summary-cell.ai-tone-buy  .ai-summary-text { color: #5de09a; }
.ai-summary-cell.ai-tone-sell .ai-summary-text { color: #f07070; }
.ai-summary-cell.ai-tone-watch .ai-summary-text { color: #7ab8f5; }
.ai-summary-cell.ai-tone-wait  .ai-summary-text { color: #9ab0cc; }

/* ── 情緒·技術訊號 cell ─────────────────────────────────────────── */
.sentiment-tech-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sentiment-tech-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sentiment-tech-label {
  font-size: 10px;
  font-weight: 600;
  color: #6f8fbe;
  width: 24px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ── Tech signal pill (高點 / 中性 / 低點) ─────────────────────── */
.tech-signal-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 5px;
}
.tech-signal-low     { background: rgba(45,158,95,0.18); color: #2d9e5f; }
.tech-signal-high    { background: rgba(224,82,82,0.16); color: #e05252; }
.tech-signal-neutral { background: rgba(122,143,173,0.18); color: #9ab2d8; }

.asset-row:first-child {
  border-top: 0;
  background: #172541;
  color: #95a6ce;
  font-weight: 700;
  font-size: 14px;
}

.asset-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
}

/* ── Watchlist: Save/Cancel group shown only in Manage mode ── */
.watchlist-manage-actions {
  display: inline-flex;
  gap: 6px;
  margin-right: 4px;
}

.watchlist-manage-save-btn,
.watchlist-manage-cancel-btn {
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.watchlist-manage-save-btn {
  border-color: #2d8c63;
  background: #133b34;
  color: #58f4b7;
}

.watchlist-manage-save-btn:hover {
  background: #184a42;
  color: #7bf7c8;
}

.watchlist-manage-cancel-btn {
  border-color: #526a99;
  background: #243251;
  color: #c5d9ff;
}

.watchlist-manage-cancel-btn:hover {
  background: #2c3d64;
  color: #e0eaff;
}

/* ── Watchlist: Settings gear + dropdown ── */
.watchlist-settings-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.watchlist-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #2f456b;
  background: #182440;
  color: #b2c2e0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.watchlist-settings-btn:hover,
.watchlist-settings-btn[aria-expanded="true"] {
  background: #1f3058;
  color: #e8f0ff;
  border-color: #486fa6;
}

.watchlist-settings-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #182440;
  border: 1px solid #2f456b;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  padding: 6px;
  z-index: 20;
}

.watchlist-settings-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: #d6e2f5;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
}

.watchlist-settings-dropdown-item:hover {
  background: #223557;
  color: #ffffff;
}

/* ── Watchlist: Manage mode — leading remove column ── */
.asset-sentiment-list.is-manage-mode .asset-row {
  grid-template-columns: 44px minmax(140px, 240px) 110px 130px minmax(160px, 200px) minmax(220px, 1fr);
}
.asset-sentiment-list.is-manage-mode.sentiment-tech-collapsed .asset-row {
  grid-template-columns: 44px minmax(140px, 240px) 110px 130px minmax(220px, 1fr);
}

.asset-manage-remove-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.asset-manage-remove-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid #954665;
  border-radius: 999px;
  background: #3d2030;
  color: #ff8daf;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.asset-manage-remove-btn:hover {
  background: #5b2945;
  color: #ffb3c9;
}

.asset-manage-remove-btn.is-pending {
  background: #3d2030;
  color: #ffb3c9;
  border-color: #c76382;
  box-shadow: 0 0 0 2px rgba(199, 99, 130, 0.3);
}

.asset-row-data.is-pending-removal {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 141, 175, 0.55);
}

.asset-row-data.is-pending-removal .asset-manage-remove-btn {
  text-decoration: none;
}

/* Hide the right-side remove column while in manage mode (left-side takes over) */
.asset-sentiment-list.is-manage-mode .asset-remove-cell {
  visibility: hidden;
}

.asset-advanced-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: #35567b;
  padding: 0;
  cursor: pointer;
}

.asset-advanced-toggle-label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  border: 0;
  font-size: 14px;
  font-weight: 800;
  color: #35567b;
}

.asset-advanced-toggle-switch {
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b6becd, #8e98a9);
  border: 1px solid rgba(120, 138, 169, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.asset-advanced-toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(36, 55, 95, 0.2), 0 2px 5px rgba(17, 24, 39, 0.16);
  transition: transform 160ms ease;
}

.asset-advanced-toggle-btn:hover .asset-advanced-toggle-switch,
.asset-advanced-toggle-btn:focus-visible .asset-advanced-toggle-switch {
  box-shadow: inset 0 0 0 1px rgba(36, 55, 95, 0.18), 0 0 0 4px rgba(129, 167, 218, 0.14);
}

.asset-advanced-toggle-btn:focus-visible {
  outline: none;
}

.asset-advanced-toggle-btn.is-active {
  color: #173d69;
}

.asset-advanced-toggle-btn.is-active .asset-advanced-toggle-switch {
  background: linear-gradient(135deg, #6be7b4, #5e8dff);
}

.asset-advanced-toggle-btn.is-active .asset-advanced-toggle-switch::after {
  transform: translateX(28px);
}

/* advanced-hidden removed (toggle button deleted) */

.asset-row-data {
  cursor: default;
  transition: background-color 140ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.asset-row-data button { cursor: pointer; }

.asset-row-data:hover,
.asset-row-data:focus-visible {
  background: linear-gradient(90deg, rgba(34, 67, 102, 0.35), rgba(30, 50, 84, 0.22));
  box-shadow: inset 0 0 0 1px rgba(90, 139, 211, 0.36), inset 0 0 18px rgba(62, 131, 221, 0.14);
  outline: none;
}

.asset-group-row {
  padding: 7px 10px;
  border-top: 1px solid #2a3f6f;
  background: linear-gradient(90deg, #182848, #16233f);
  color: #9fc3f8;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.asset-zone {
  font-weight: 800;
  display: flex;
  justify-content: center;
}

.zone-pill,
.signal-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.zone-pill {
  min-width: 132px;
  max-width: 100%;
  padding: 7px 14px;
  border-radius: 12px;
  color: var(--zone-pill-text, #243f63) !important;
  background: var(--zone-pill-bg, #d9e6f5) !important;
  border-color: #b7c9df !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.signal-pill-neutral {
  background: #e7edf6 !important;
  border-color: #c6d4e8 !important;
  color: #3c5476 !important;
}

.signal-pill-buy {
  background: #dbf4e8 !important;
  border-color: #98d0b4 !important;
  color: #176649 !important;
}

.signal-pill-sell {
  background: #f9e3e8 !important;
  border-color: #dfa6b3 !important;
  color: #963d52 !important;
}

.asset-name-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.asset-symbol {
  color: #e3edff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
}

.asset-display-name {
  color: #8ea6d2;
  font-size: 10px;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

.asset-display-name.is-expanded {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

.asset-name-toggle {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 8px;
  border: 1px solid #9fb7da;
  border-radius: 999px;
  background: #edf4ff;
  color: #27486f;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.asset-name-toggle:hover {
  background: #dfeeff;
}

.suggestion-action {
  cursor: pointer;
  user-select: none;
}

.suggestion-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  max-width: 100%;
  padding: 7px 14px;
  border-radius: 12px;
  border: 1px solid #4f6289;
  background: #273754;
  color: #c8d7f4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
}

.asset-row-data > span:nth-child(3),
.asset-row-data > span:nth-child(6) {
  display: flex;
  justify-content: center;
}

.suggestion-pill-buy {
  border-color: #2a8b63;
  background: linear-gradient(180deg, #17453c, #123a33);
  color: #56f2b6;
}

.suggestion-pill-sell {
  border-color: #8f3d5c;
  background: linear-gradient(180deg, #4a2333, #3a1b28);
  color: #ff8ea9;
}

.suggestion-pill-wait {
  border-color: #566886;
  background: linear-gradient(180deg, #2b3851, #233147);
  color: #9eb0cf;
}

.suggestion-pill-watch-buy {
  border-color: #2d6f9b;
  background:
    linear-gradient(180deg, #1b334c, #162b41);
  color: #8fd9ff;
  box-shadow: inset 0 0 0 1px rgba(120, 199, 255, 0.18);
}

.suggestion-pill-watch-sell {
  border-color: #9a7331;
  background:
    linear-gradient(180deg, #49351c, #3d2b17);
  color: #ffd28c;
  box-shadow: inset 0 0 0 1px rgba(255, 197, 102, 0.2);
}

.suggestion-action-buy {
  font-weight: 800;
}

.suggestion-action-buy:hover,
.suggestion-action-buy:focus-visible {
  filter: drop-shadow(0 0 8px rgba(90, 245, 187, 0.35));
  outline: none;
}

.suggestion-action-sell {
  font-weight: 800;
}

.suggestion-action-sell:hover,
.suggestion-action-sell:focus-visible {
  filter: drop-shadow(0 0 8px rgba(255, 140, 166, 0.35));
  outline: none;
}

.asset-action-cell {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.asset-remove-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.row-hold-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.row-quick-buy,
.row-quick-sell {
  border-radius: 999px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.row-quick-buy {
  border-color: #2d8c63;
  background: #133b34;
  color: #58f4b7;
}

.row-quick-sell {
  border-color: #954665;
  background: #3d2030;
  color: #ff8daf;
}

.row-quick-close {
  border-radius: 999px;
  border: 1px solid #526a99;
  background: #243251;
  color: #c5d9ff;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 14px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.dashboard-trade-limit-note {
  display: block;
  margin-top: 6px;
  color: #8fa5cc;
  font-size: 11px;
}

.asset-link {
  color: #93c8ff;
  text-decoration: underline;
  text-decoration-color: rgba(123, 194, 255, 0.45);
  text-underline-offset: 2px;
  cursor: pointer;
}

.asset-link:hover {
  color: #c8ebff;
  text-decoration-color: rgba(161, 227, 255, 0.85);
}

.row-remove-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  padding: 0;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid #5f3250;
  border-radius: 999px;
  background: #3f1d33;
  color: #ffc6dc;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.row-remove-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-style: dashed;
  border-color: #94a8c8;
  color: #94a8c8;
}
.row-remove-btn:disabled:hover {
  opacity: 0.5;
}

.result-pill {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid #2b3d6a;
  background: #131d35;
  padding: 9px 12px;
}

.result-pill strong {
  font-size: 15px;
}

.result-pill small {
  color: #8da0cd;
}

.legend {
  padding: 0;
}

.legend-asset-head {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #2a3d65;
  background: #14223d;
  color: #9ab2dd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.legend-asset-head > span:first-child,
.legend-asset-head > span:last-child {
  padding: 0 2px;
}

.legend-zone-head-label {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.legend-zone-info-btn {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(154, 178, 221, 0.45);
  background: rgba(20, 34, 61, 0.7);
  color: #9ab2dd;
  font-size: 10px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.legend-zone-info-btn:hover {
  border-color: #6aa3e0;
  background: rgba(40, 70, 120, 0.8);
  color: #c9dbff;
}

.legend-zone-info-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: 220px;
  padding: 8px 12px;
  background: #1a2d50;
  border: 1px solid rgba(90, 139, 211, 0.4);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.55;
  text-transform: none;
}

.legend-asset-head-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.legend-asset-head-cols span {
  text-align: left;
}

.secondary-body {
  padding: 14px 18px;
  border-top: 1px solid #24355f;
}

.muted-grid {
  background:
    linear-gradient(rgba(27, 43, 76, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 43, 76, 0.22) 1px, transparent 1px);
  background-size: 28px 28px;
}

.placeholder-row {
  padding: 14px;
  border: 1px dashed #334b7d;
  border-radius: 8px;
  color: #8fa4d1;
  font-size: 12px;
}

.panel-accordion {
  border-top: 1px solid #24355f;
  background: #17233f;
}

.panel-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 14px;
  color: #a8bae4;
  font-size: 12px;
  font-weight: 700;
}

.panel-accordion summary::-webkit-details-marker {
  display: none;
}

.panel-accordion > div {
  border-top: 1px solid #24355f;
  padding: 10px 14px 12px;
  color: #8fa4d1;
  font-size: 12px;
}

.panel-accent {
  background: linear-gradient(90deg, rgba(28, 95, 73, 0.35), #17233f 60%);
}

.analysis-bar {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #304776;
  border-radius: 10px;
  background: #172441;
  overflow: visible;
}

.analysis-bar.two-scales {
  grid-template-columns: 170px 1fr auto;
  margin-bottom: 10px;
}

.bar-track {
  position: relative;
  height: 10px;
  margin: 6px 0;
  border-radius: 999px;
  overflow: visible;
  background: linear-gradient(90deg, #2adf98, #f2d62c, #ff5c61);
}

.bar-fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: rgba(13, 22, 42, 0.65);
}

.bar-dial {
  position: absolute;
  top: 50%;
  left: calc(0% - 8px);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #d8e7ff;
  background:
    radial-gradient(circle at 32% 28%, #f6fbff 0 20%, #c7dcff 21% 42%, #375582 43% 100%);
  box-shadow:
    0 0 0 2px rgba(10, 19, 36, 0.7),
    0 0 0 4px rgba(112, 168, 255, 0.2),
    0 0 14px rgba(112, 168, 255, 0.42);
  pointer-events: none;
  transform: translateY(-50%);
  transition: left 260ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

.bar-dial::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(194, 223, 255, 0.28);
  background: radial-gradient(circle, rgba(133, 180, 255, 0.14) 0%, rgba(133, 180, 255, 0) 72%);
}

.bar-dial::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: rgba(11, 20, 36, 0.55);
}

.bar-dial-zone-buy {
  border-color: #6cffc3;
  background:
    radial-gradient(circle at 32% 28%, #f6fff9 0 20%, #9ff2ca 21% 42%, #22624e 43% 100%);
  box-shadow:
    0 0 0 2px rgba(8, 23, 20, 0.72),
    0 0 0 4px rgba(92, 247, 178, 0.22),
    0 0 16px rgba(92, 247, 178, 0.48);
}

.bar-dial-zone-neutral {
  border-color: #ffe47d;
  background:
    radial-gradient(circle at 32% 28%, #fffdf5 0 20%, #ffe180 21% 42%, #685323 43% 100%);
  box-shadow:
    0 0 0 2px rgba(25, 20, 8, 0.72),
    0 0 0 4px rgba(255, 213, 102, 0.2),
    0 0 16px rgba(255, 213, 102, 0.42);
}

.bar-dial-zone-caution {
  border-color: #ff9a8c;
  background:
    radial-gradient(circle at 32% 28%, #fff8f6 0 20%, #ffb4a9 21% 42%, #6f2f2a 43% 100%);
  box-shadow:
    0 0 0 2px rgba(28, 12, 10, 0.72),
    0 0 0 4px rgba(255, 143, 122, 0.22),
    0 0 16px rgba(255, 143, 122, 0.46);
}

.info-btn {
  background: #18263f;
  border-color: #2b4a7a;
  color: #a8bee9;
}

.ai-info-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #44618f;
  background: #1a2740;
  color: #9fb8e3;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.ai-info-icon-btn:hover {
  border-color: #6f8ec2;
  color: #d2e4ff;
}

.analysis-grid {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analysis-grid article {
  border: 1px solid #2f456f;
  border-radius: 10px;
  padding: 10px;
  background: #192642;
}

.analysis-grid h4 {
  margin: 0 0 5px;
  font-size: 12px;
  color: #d7e4ff;
}

.analysis-grid p {
  margin: 0;
  font-size: 12px;
  color: #94a7d2;
}

.legend-row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  min-height: 56px;
  border-top: 1px solid #22325a;
}

.legend-row:first-child {
  border-top: 0;
}

.zone-label {
  padding: 8px 12px;
  display: grid;
  align-content: center;
  color: #071119;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.12;
}

.zone-label small {
  display: block;
  color: rgba(7, 17, 25, 0.78);
  font-size: 11px;
  font-weight: 600;
}

.zone-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.zone-info-btn {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(28, 45, 70, 0.55);
  background: rgba(15, 26, 44, 0.5);
  color: rgba(232, 246, 255, 0.9);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.legend-row:hover .zone-info-btn,
.zone-label:hover .zone-info-btn {
  opacity: 1;
  pointer-events: auto;
}

.zone-info-btn:hover {
  border-color: rgba(102, 163, 230, 0.95);
  box-shadow: 0 0 0 1px rgba(102, 163, 230, 0.28);
}

.coin-cell {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: rgba(14, 21, 40, 0.38);
}

.coin-type-col {
  min-height: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-right: 6px;
  border-right: 1px solid rgba(47, 67, 104, 0.55);
  position: relative;
  z-index: 1;
}

.coin-type-col:last-child {
  border-right: 0;
}

.coin-col-empty {
  color: #6f82b1;
  font-size: 12px;
}

/* Legend edit toolbar */
.legend-edit-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 6px 12px 4px;
}
.legend-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #6f8fbe;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms ease;
}
.legend-edit-btn:not(.is-active) {
  padding: 0;
  width: 30px;
}
.legend-edit-btn:hover {
  color: #9de8ff;
}
.legend-edit-btn.is-active {
  background: transparent;
  color: #5aabff;
  font-size: 12px;
  font-weight: 600;
}

/* Jiggle animation — macOS-style */
@keyframes jiggle {
  0%   { transform: rotate(-2.5deg) scale(1.01); }
  25%  { transform: rotate(2.5deg)  scale(1.01); }
  50%  { transform: rotate(-2deg)   scale(1.00); }
  75%  { transform: rotate(2deg)    scale(1.00); }
  100% { transform: rotate(-2.5deg) scale(1.01); }
}

/* Chip wrap for jiggle edit mode */
.coin-wrap {
  position: relative;
  display: inline-flex;
}
.coin-wrap.is-jiggling {
  animation: jiggle 0.28s ease-in-out infinite;
  transform-origin: center center;
}
/* Stagger animation so chips don't all move in sync */
.coin-wrap.is-jiggling:nth-child(2n)   { animation-delay: -0.07s; }
.coin-wrap.is-jiggling:nth-child(3n)   { animation-delay: -0.14s; }
.coin-wrap.is-jiggling:nth-child(4n)   { animation-delay: -0.05s; }
.coin-wrap.is-jiggling:nth-child(5n)   { animation-delay: -0.11s; }

.coin-remove-btn {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: #3a3a3c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.coin-remove-btn:hover {
  background: #555;
}

.coin.is-editing {
  cursor: default;
  pointer-events: none;
}

/* ── Watchlist edit toolbar (鉛筆 / 儲存) ─────────────────────────── */
.watchlist-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #6f8fbe;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms ease;
}
.watchlist-edit-btn:not(.is-active) { padding: 0; width: 30px; }
.watchlist-edit-btn:hover { color: #9de8ff; }
.watchlist-edit-btn.is-active {
  background: transparent;
  color: #5aabff;
  font-size: 12px;
  font-weight: 600;
}

/* ── Asset row edit mode ─────────────────────────────────────────── */
.asset-name-cell {
  position: relative;
}
/* In edit mode every row reserves 26px on the left (18px button + 8px gap)
   so symbols line up consistently whether or not the minus button is
   present (portfolio-held assets don't get a delete button, but their
   symbols still need to align with siblings that do). The minus button
   itself is absolutely positioned in that reserved gutter — keeping the
   default column layout so symbol stays stacked above the display name. */
.asset-name-cell.is-jiggling {
  padding-left: 26px;
}

.watchlist-row-remove-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: #3a3a3c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.watchlist-row-remove-btn:hover { background: #555; }


.coin {
  border-radius: 8px;
  border: 1px solid #263b63;
  background: #0f1830;
  color: #6f8fbe;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.coin:hover {
  border-color: #3cb2dc;
  background: #112340;
  color: #9de8ff;
  box-shadow: 0 0 0 1px rgba(79, 212, 255, 0.25);
}

.coin.trade-on {
  border-color: #2ef5a2;
  background: #102c2c;
  color: #6dffd0;
  box-shadow: 0 0 0 1px rgba(39, 245, 162, 0.35), 0 0 14px rgba(39, 245, 162, 0.25);
}

.signal-cell {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.signal-cell.buy {
  color: #22dd8f;
}

.signal-cell.sell {
  color: #ff4b70;
}

.legend-row:hover {
  box-shadow: inset 0 0 0 1px rgba(58, 255, 198, 0.6);
  background: linear-gradient(90deg, rgba(36, 255, 187, 0.12), rgba(13, 18, 34, 0));
}

.legend.locked .coin,
.legend.locked .signal-cell {
  filter: blur(4px);
  opacity: 0.35;
  pointer-events: none;
}

.info-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(4, 9, 19, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.info-modal.hidden {
  display: none;
}

.info-card {
  width: min(920px, calc(100% - 20px));
  border: 1px solid #2f456f;
  border-radius: 12px;
  background: linear-gradient(180deg, #1a233d, #161e33);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  flex-shrink: 0;
}

.info-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #2a3f68;
}

.info-head h3 {
  margin: 0;
  font-size: 21px;
}

.trading-guide-card {
  width: min(760px, calc(100% - 24px));
  border-color: #375079;
  background: linear-gradient(180deg, #18253f, #131d31);
}

.trading-guide-head {
  align-items: flex-start;
}

.trading-guide-head p {
  margin: 6px 0 0;
  color: #90a8d3;
  font-size: 13px;
}

.trading-guide-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.trading-guide-panel {
  border: 1px solid #2b436d;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(180deg, #1b2a48, #17253f);
}

.trading-guide-panel h4 {
  margin: 0 0 6px;
  color: #d8e7ff;
  font-size: 14px;
}

.trading-guide-panel p {
  margin: 0;
  color: #9fb3da;
  font-size: 12px;
  line-height: 1.55;
}

.trading-guide-panel-accent {
  border-color: #2f6a64;
  background: linear-gradient(180deg, #17373b, #152e33);
}

.trading-guide-panel-accent ul {
  margin: 0;
  padding-left: 16px;
  color: #1f3f61;
  font-size: 12px;
  line-height: 1.6;
}

.trading-guide-panel-accent ul li {
  color: #1f3f61 !important;
}

.trading-guide-panel-accent ul li b,
.trading-guide-panel-accent ul li strong {
  color: #173654 !important;
}

.start-guide-page {
  padding: 16px 0;
}
.start-guide-header {
  margin-bottom: 16px;
}
.start-guide-header h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.start-guide-header p {
  font-size: 13px;
  opacity: 0.7;
}

.close-info-btn {
  border: 1px solid #396193;
  background: #14213d;
  color: #9dc6ff;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 12px;
  font-weight: 700;
}

.btc-chart-box {
  margin: 14px;
  border: 1px solid #2a3f68;
  border-radius: 10px;
  background: #161f35;
  padding: 10px;
}

.btc-chart-title {
  color: #9db0da;
  font-size: 12px;
  margin-bottom: 8px;
}

.btc-chart {
  width: 100%;
  height: 220px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(38, 63, 111, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 63, 111, 0.25) 1px, transparent 1px),
    #121a2e;
  background-size: 26px 26px;
}

.btc-chart text {
  fill: #c6d6fa;
  font-size: 10px;
  font-family: "Manrope", sans-serif;
}

.info-block {
  margin: 10px 14px;
  border-radius: 10px;
  padding: 11px 12px;
  border: 1px solid transparent;
}

.info-block strong {
  display: block;
  font-size: 13px;
}

.info-block p {
  margin: 6px 0 0;
  font-size: 12px;
  color: #bdd0f3;
}

.block-green {
  border-color: #2e7f66;
  background: linear-gradient(180deg, #193c37, #18322f);
}

.block-red {
  border-color: #7f3a64;
  background: linear-gradient(180deg, #3f1f38, #33192f);
}

.block-dark {
  border-color: #354b74;
  background: #1a243d;
  margin-bottom: 14px;
}

.block-dark ul {
  margin: 8px 0 0;
  padding-left: 16px;
  color: #bdd0f3;
  font-size: 12px;
}

.ai-modal-card {
  width: min(760px, calc(100% - 24px));
  border-color: #3b4d73;
  background: linear-gradient(180deg, #181f2f, #141b2a);
}

.ai-modal-head {
  border-bottom: 0;
  padding: 12px 14px;
}

.ai-modal-head h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
}

.ai-close-btn {
  width: 36px;
  height: 36px;
  border: 2px solid #34d2ca;
  background: #1a2438;
  color: #56ece3;
  font-size: 16px;
  line-height: 1;
}

.ai-modal-intro {
  margin: 6px 14px 10px;
  color: #97a8ca;
  font-size: 13px;
  line-height: 1.5;
}

.ai-modal-panel {
  margin: 0 14px 10px;
  border: 1px solid #33435f;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(180deg, #202938, #1c2534);
}

.ai-modal-panel strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  color: #e6edf9;
}

.ai-weights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 26px;
  row-gap: 4px;
}

.ai-weights-grid p,
.ai-modal-panel p {
  margin: 0;
  color: #98abcf;
  font-size: 12px;
  line-height: 1.55;
}

.w-maxfear { color: #4ef4a0; }
.w-fear { color: #3edfe0; }
.w-concern { color: #28c8d9; }
.w-caution { color: #2ea0ff; }
.w-mildcaution { color: #688bff; }
.w-neutral { color: #ffe450; }
.w-mildgreed { color: #ffcc46; }
.w-greed { color: #ffa337; }
.w-highgreed { color: #ff6f3d; }
.w-extremegreed { color: #ff4e6a; }
.w-maxeuphoria { color: #ff63a2; }

.ai-modal-footnote {
  margin: 6px 14px 14px;
  color: #7f92b8;
  font-size: 12px;
  line-height: 1.45;
  font-style: italic;
}

.risk-card {
  width: min(680px, calc(100% - 24px));
  max-height: calc(100vh - 56px);
  border-color: #334a72;
  background: linear-gradient(180deg, #1b2335, #182133);
  overflow-y: auto;
}

.risk-head h3 {
  font-size: 26px;
}

.risk-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 16px 12px;
}

.risk-tab {
  border-radius: 10px;
  border: 1px solid #2d456e;
  background: #202a40;
  color: #8fa8d7;
  padding: 8px;
  font-weight: 700;
  font-size: 12px;
}

.risk-tab.active {
  border-color: #2ce293;
  color: #0c2a1f;
  background: linear-gradient(135deg, #30f0a0, #25d6ff);
}

.risk-asset-line {
  margin: 0 16px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.risk-asset-line strong {
  font-size: 34px;
}

.risk-zone-badge {
  border: 1px solid #2f4f84;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  color: #9cc1ff;
}

.risk-price-line {
  margin: 0 16px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.risk-price-line strong {
  font-size: 30px;
}

.risk-price-line small {
  margin-left: auto;
  color: #8ba1c7;
  font-size: 11px;
}

.risk-chart-box {
  margin: 0 16px 12px;
  border: 1px solid #2f456d;
  border-radius: 12px;
  background: #1b263d;
  padding: 10px;
}

.risk-chart-head {
  display: flex;
  justify-content: space-between;
  color: #8ea4ca;
  font-size: 11px;
  margin-bottom: 6px;
}

.risk-chart {
  width: 100%;
  height: 112px;
}

.risk-chart-axis {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  color: #7f97bc;
  font-size: 11px;
  font-weight: 700;
}

.risk-chart-axis span:nth-child(2) {
  text-align: center;
}

.risk-chart-axis span:last-child {
  text-align: right;
}

.risk-chart-scale-toggle {
  display: inline-flex;
  border: 1px solid #d7e3f1;
  border-radius: 6px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1;
}

.risk-chart-scale-toggle button {
  background: none;
  border: none;
  padding: 3px 8px;
  color: #5f7591;
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
}

.risk-chart-scale-toggle button.is-active {
  background: #eaf4ff;
  color: #1f3355;
}

.risk-chart-subtitle {
  display: block;
  color: #8ea4ca;
  font-size: 11px;
  margin: -2px 0 6px;
}

[data-theme="night"] .risk-chart-scale-toggle {
  border-color: #30363d;
}

[data-theme="night"] .risk-chart-scale-toggle button {
  color: #8b949e;
}

[data-theme="night"] .risk-chart-scale-toggle button.is-active {
  background: #21262d;
  color: #e6edf3;
}

[data-theme="night"] .risk-chart-subtitle {
  color: #8b949e;
}

.risk-backtest-row-meta {
  display: block;
  color: #8ea4ca;
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 2px;
  line-height: 1.3;
}

.risk-backtest-box {
  margin: 0 16px 12px;
  border: 1px solid #d6e3f1;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff, #f5f9ff);
  padding: 10px;
}

.risk-backtest-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.risk-backtest-head strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #254264;
}

.risk-backtest-head small {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  color: #6480a4;
  text-align: right;
}

.risk-backtest-grid {
  display: grid;
  gap: 10px;
}

.risk-backtest-row {
  display: grid;
  grid-template-columns: minmax(88px, 118px) repeat(5, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.risk-backtest-row-label {
  border: 1px solid #d7e3f1;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}

.risk-backtest-row-label.is-current {
  border-color: #72c8ac;
  background: linear-gradient(180deg, #f1fff8, #e7fbf0);
  box-shadow: inset 0 0 0 1px rgba(114, 200, 172, 0.18);
}

.risk-backtest-row-label strong {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #244162;
}

.risk-backtest-row-label small {
  font-size: 10px;
  line-height: 1.25;
  color: #6d84a0;
}

.risk-backtest-row-label.is-current strong {
  color: #17684b;
}

.risk-backtest-row-label.is-current small {
  color: #4f806c;
}

.risk-backtest-card {
  border: 1px solid #d7e3f1;
  border-radius: 12px;
  background: #ffffff;
  min-width: 0;
  padding: 9px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 3px;
}

.risk-backtest-card span {
  font-size: 10px;
  font-weight: 700;
  color: #6a819f;
  letter-spacing: 0.03em;
}

.risk-backtest-card strong {
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #1f3b5b;
  white-space: nowrap;
}

.risk-backtest-card small {
  font-size: 10px;
  color: #7890ad;
}

.risk-backtest-card.is-positive {
  background: linear-gradient(180deg, #f3fff8, #e8fbf1);
  border-color: #9fdcbc;
}

.risk-backtest-card.is-positive strong {
  color: #18724d;
}

.risk-backtest-card.is-negative {
  background: linear-gradient(180deg, #fff6fa, #fdebef);
  border-color: #e2a6b8;
}

.risk-backtest-card.is-negative strong {
  color: #9d3657;
}

.risk-backtest-card.is-na {
  background: #f8fbff;
}

.risk-backtest-card.is-na strong {
  color: #617997;
}

.risk-backtest-card.is-positive span,
.risk-backtest-card.is-positive small {
  color: #4d7866;
}

.risk-backtest-card.is-negative span,
.risk-backtest-card.is-negative small {
  color: #8a6672;
}

@media (max-width: 760px) {
  .risk-backtest-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .risk-backtest-row-label {
    grid-column: 1 / -1;
  }
}

.risk-neutral-panel {
  margin: 0 16px 12px;
  border: 1px solid #34476e;
  border-radius: 10px;
  background: #202a3f;
  padding: 10px 11px;
}

.risk-neutral-panel strong {
  display: block;
  color: #d8e7ff;
  font-size: 13px;
}

.risk-neutral-panel p {
  margin: 6px 0 0;
  color: #90a4cb;
  font-size: 11px;
  line-height: 1.35;
}

.risk-input-wrap {
  margin: 0 16px 10px;
}

.risk-input-wrap label {
  font-size: 12px;
  color: #a6b8df;
  margin-bottom: 4px;
}

.risk-input-wrap input {
  background: #101a2f;
}

.risk-breakdown-title {
  margin: 12px 16px 8px;
  color: #1e3a5f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  border-left: 3px solid #4a7fc1;
  padding-left: 10px;
}

.risk-caption {
  margin: 4px 16px 10px;
  color: #5f7594;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.risk-breakdown {
  margin: 0 16px 12px;
  display: grid;
  gap: 8px;
}

.risk-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #365380;
  background: #213151;
  padding: 10px;
  color: #a4b9df;
  font-size: 12px;
}

.risk-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--risk-step-fill, 0%);
  background: var(--risk-step-fill-bg, rgba(141, 174, 214, 0.35));
}

.risk-step > * {
  position: relative;
  z-index: 1;
}

.risk-step strong {
  color: #2bf2a2;
  font-size: 24px;
}

.risk-step-current {
  border-color: #43d39a;
  box-shadow: 0 0 0 1px rgba(67, 211, 154, 0.35), 0 0 16px rgba(67, 211, 154, 0.2);
}

.step-caution { background: #27376a; }
.step-concern { background: #23425f; }
.step-fear { background: #214a54; }
.step-maxfear { background: #1f4f42; }
.step-reserve { background: #1f3249; }

.risk-submit-btn {
  margin: 0 16px 18px;
  width: calc(100% - 32px);
  border-radius: 10px;
  border: 1px solid #2e966c;
  background: linear-gradient(135deg, #1f8e68, #215e73);
  color: #e0fff4;
  font-weight: 800;
  padding: 10px;
}

.risk-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.6);
}

.risk-profit-note {
  margin: 8px 16px;
  color: #8ea5ce;
  font-size: 11px;
}

.risk-targets-note {
  margin: 8px 16px;
  border: 1px solid #345686;
  border-radius: 9px;
  background: #1c2a43;
  color: #8ca2cc;
  font-size: 11px;
  padding: 9px 10px;
}

.risk-targets-note b {
  color: #44f0a2;
}

.profit-alert-config {
  display: grid;
  gap: 10px;
}

.profit-alert-config-head {
  display: grid;
  gap: 4px;
}

.profit-alert-config-title {
  color: #d7e7ff;
  font-size: 12px;
  font-weight: 800;
}

.profit-alert-config-summary {
  color: #8ca2cc;
  font-size: 11px;
  line-height: 1.5;
}

.profit-alert-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profit-alert-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #b9cae3;
  border-radius: 999px;
  background: #ffffff;
  color: #264467;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.profit-alert-option input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #44f0a2;
}

.profit-alert-custom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.profit-alert-custom-input {
  width: 100%;
  border-radius: 9px;
  border: 1px solid #d1deee;
  background: #ffffff;
  color: #1b2a41;
  padding: 8px 10px;
  font-size: 12px;
}

.profit-alert-custom-add {
  border: 1px solid #d1deee;
  border-radius: 9px;
  background: #ffffff !important;
  color: #111111 !important;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
}

.profit-alert-custom-add:hover,
.profit-alert-custom-add:focus-visible,
.profit-alert-custom-add:active {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #c5d5e7 !important;
  box-shadow: none !important;
}

.profit-alert-custom-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profit-alert-custom-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #9ed8c0;
  border-radius: 999px;
  background: #ffffff;
  color: #17724f;
  font-size: 11px;
  font-weight: 700;
}

.profit-alert-custom-remove {
  border: 0;
  background: transparent;
  color: #17724f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.risk-warning-note {
  margin: 4px 0 0;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: #f4c768;
  font-size: 10px;
  font-weight: 700;
  padding: 0 !important;
  text-align: center;
}

.trade-record-note {
  margin: 8px 0 0;
  border: 1px solid #3b4e72;
  border-radius: 9px;
  background: #1b2740;
  color: #f4c768;
  font-size: 10px;
  font-weight: 700;
  padding: 8px 10px;
}

.active-trades-card {
  width: min(620px, calc(100% - 24px));
  border-color: #34496f;
  background: linear-gradient(180deg, #1b2335, #182133);
}

.active-trades-helper {
  margin: 10px 14px 12px;
  color: #8ca3ce;
  font-size: 12px;
}

.active-trades-list {
  display: grid;
  gap: 10px;
  margin: 0 14px 14px;
}

.active-trade-row {
  border: 1px solid #2f426a;
  border-radius: 12px;
  background: linear-gradient(180deg, #222c44, #1b253d);
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.active-trade-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.active-trade-symbol {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

.active-trade-side {
  border: 1px solid #2d976e;
  background: #1f3f3a;
  color: #54ffbd;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}

.active-trade-row-meta {
  color: #8da4cf;
  font-size: 12px;
}

.active-profit-up {
  margin-left: 10px;
  color: #32e6a1;
  font-weight: 700;
}

.active-profit-down {
  margin-left: 10px;
  color: #ff698b;
  font-weight: 700;
}

.active-close-btn {
  border: 1px solid #8f3248;
  background: linear-gradient(135deg, #d24755, #a8354b);
  color: #ffe6ee;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.close-trade-card {
  width: min(430px, calc(100% - 24px));
  border-color: #35507c;
  background: linear-gradient(180deg, #1b2335, #182133);
}

.close-trade-card .info-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
}

.close-trade-long-badge {
  border: 1px solid #2d976e;
  background: #1d3d36;
  color: #3ff0a8;
  border-radius: 999px;
  font-size: 10px;
  padding: 2px 7px;
}

.close-trade-sub {
  margin: 8px 14px 12px;
  color: #8ea4ce;
  font-size: 12px;
}

.close-trade-metrics {
  margin: 0 14px 12px;
  border: 1px solid #2d426b;
  border-radius: 10px;
  background: #17233d;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.close-trade-metrics div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #8ba1ca;
}

.close-trade-metrics strong {
  color: #e6efff;
}

.close-trade-input-row {
  margin: 0 14px 12px;
}

.close-trade-input-row label {
  display: block;
  margin-bottom: 6px;
  color: #9db2da;
  font-size: 12px;
}

.close-trade-input-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.close-trade-input-wrap.edit-input-wrap {
  grid-template-columns: 1fr;
}

.close-trade-input-wrap button {
  border: 1px solid #2f5e84;
  border-radius: 8px;
  background: #213b59;
  color: #bedfff;
  font-weight: 700;
  font-size: 12px;
  padding: 9px 10px;
  cursor: pointer;
}

.close-trade-actions {
  margin: 0 14px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.close-trade-actions > button {
  width: 100% !important;
  margin: 0 !important;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.close-trade-actions.is-sell-mode {
  grid-template-columns: 1fr 1fr 1fr;
}

.add-coin-card,
.add-metals-card,
.start-tracking-card {
  width: min(560px, calc(100% - 24px));
  border-color: #35507c;
  background: linear-gradient(180deg, #1b2335, #182133);
}

#mobile-notice-modal {
  align-items: center;
}

.mobile-notice-card {
  width: min(400px, calc(100% - 32px));
  border-color: #35507c;
  background: linear-gradient(180deg, #1b2335, #182133);
  text-align: center;
  padding: 28px 24px 24px;
}

.mobile-notice-icon {
  font-size: 48px;
  margin: 12px 0 16px;
  line-height: 1;
}

.mobile-notice-card .info-head {
  border-bottom: none;
  justify-content: center;
  padding-bottom: 0;
}

.mobile-notice-card .info-head h3 {
  font-size: 18px;
  text-align: center;
}

#mobile-notice-desc {
  color: #8ea4ce;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
}

.mobile-notice-btn {
  width: 100%;
  padding: 12px 20px !important;
  font-size: 14px;
}

/* Dark mode */
[data-theme="night"] .mobile-notice-card {
  background: #161b22;
  border-color: #30363d;
}

[data-theme="night"] #mobile-notice-desc { color: #8b949e; }

.start-tracking-head-copy {
  min-width: 0;
  flex: 1;
}

.start-tracking-head-copy h3 {
  margin: 0;
}

.start-tracking-subtitle {
  margin: 6px 0 0;
  color: #8ea4ce;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.add-coin-subtitle {
  margin: 8px 14px 10px;
  color: #8ea4ce;
  font-size: 12px;
}

.asset-type-filters {
  display: flex;
  gap: 6px;
  margin: 0 14px 10px;
  flex-wrap: wrap;
}

.asset-filter-btn {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid #2f4a75;
  background: transparent;
  color: #7a9cc6;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.asset-filter-btn:hover {
  border-color: #4fe9c7;
  color: #4fe9c7;
}

.asset-filter-btn.is-active {
  background: linear-gradient(135deg, #3e89ff, #4fe9c7);
  border-color: transparent;
  color: #ffffff;
}

.watchlist-type-filters {
  display: flex;
  gap: 6px;
  margin: 0;
  flex-wrap: wrap;
}

.watchlist-filter-btn {
  padding: 5px 16px;
  border-radius: 999px;
  border: 1px solid #c5d5eb;
  background: transparent;
  color: #8aa6c8;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.watchlist-filter-btn:hover {
  border-color: #3e89ff;
  color: #3e89ff;
  background: rgba(62, 137, 255, 0.06);
}

.watchlist-filter-btn.is-active {
  background: #1a6fd4;
  border-color: #1a6fd4;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(26, 111, 212, 0.35);
}

.add-coin-search-wrap {
  margin: 0 14px 10px;
}

.add-coin-search-wrap input,
.start-field input {
  width: 100%;
  border: 1px solid #2f4a75;
  border-radius: 9px;
  background: #0f1a30;
  color: #d7e8ff;
  font-size: 13px;
  padding: 9px 10px;
}

.add-coin-results {
  margin: 0 14px 10px;
  max-height: 240px;
  overflow: auto;
  display: grid;
  gap: 8px;
}

.add-coin-result-btn {
  width: 100%;
  display: grid;
  gap: 2px;
  border: 1px solid #2b426d;
  border-radius: 10px;
  background: #1a263f;
  color: #c8dbff;
  font-size: 13px;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}

.add-coin-result-btn strong {
  font-size: 13px;
  color: #dce8ff;
  line-height: 1.2;
}

.add-coin-result-btn small {
  font-size: 11px;
  color: #9cb3dd;
  font-weight: 500;
}

.add-coin-result-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Type pill in the asset-search results so users can tell apart symbol
   collisions like META (stock = Meta Platforms, crypto = MetaDAO). */
.add-coin-result-type {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: #a8c0ea;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.add-coin-result-type[data-type="stock"] {
  background: rgba(63, 123, 255, 0.18);
  color: #b8d0ff;
  border-color: rgba(63, 123, 255, 0.35);
}
.add-coin-result-type[data-type="crypto"] {
  background: rgba(66, 219, 201, 0.16);
  color: #aef1e6;
  border-color: rgba(66, 219, 201, 0.35);
}
.add-coin-result-type[data-type="metal"] {
  background: rgba(243, 180, 91, 0.16);
  color: #ffd9a3;
  border-color: rgba(243, 180, 91, 0.35);
}

.add-coin-shortcuts {
  margin: 0 14px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.add-coin-shortcuts button {
  border: 1px solid #2f4a75;
  border-radius: 10px;
  background: #1c2942;
  color: #b7ccf0;
  font-weight: 700;
  font-size: 12px;
  padding: 10px;
  cursor: pointer;
}

.add-metals-list {
  margin: 0 14px 14px;
  display: grid;
  gap: 8px;
}

.add-metal-btn {
  width: 100%;
  border: 1px solid #2b426d;
  border-radius: 10px;
  background: linear-gradient(180deg, #202d46, #1b273f);
  color: #d3e5ff;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  display: grid;
  gap: 2px;
}

.add-metal-btn strong {
  font-size: 14px;
}

.add-metal-btn small {
  font-size: 12px;
  color: #90a8d2;
}

.start-tracking-type {
  margin: 0 14px 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.start-tracking-type.is-cash-mode {
  grid-template-columns: 1fr 1fr;
}

.start-type-btn {
  width: 100%;
  border: 1px solid #d1deee;
  border-radius: 10px;
  background: #f8fbff;
  color: #3f5779;
  font-weight: 800;
  font-size: 12px;
  padding: 9px 12px;
}

.start-tracking-note {
  margin: 0 14px 10px;
  color: #8ca4cd;
  font-size: 11px;
}

.start-field {
  margin: 0 14px 10px;
  display: block;
  color: #9fb5dc;
  font-size: 12px;
}

.start-field input {
  margin-top: 6px;
}

.start-units-box {
  margin: 0 14px 12px;
  border: 1px solid #2d426b;
  border-radius: 10px;
  background: #17233d;
  color: #9fb5dd;
  font-size: 12px;
  padding: 10px 11px;
}

.start-units-box strong {
  color: #34e9a4;
}

.ghost-btn {
  border: 1px solid #3a4d74;
  border-radius: 8px;
  background: #1a243d;
  color: #b8cbef;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
}

.danger-btn {
  border: 1px solid #8f3248;
  border-radius: 8px;
  background: linear-gradient(135deg, #d24755, #a8354b);
  color: #ffe6ee;
  font-weight: 700;
  padding: 10px;
  cursor: pointer;
}

.portfolio-list {
  display: grid;
  gap: 8px;
}

.portfolio-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #24355f;
}

.portfolio-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portfolio-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 800;
  color: #34f2b0;
  background: linear-gradient(135deg, #1b5c48, #13423e);
  border: 1px solid #2f8b71;
}

.portfolio-head h2 {
  margin: 0;
  font-size: 42px;
  letter-spacing: -0.02em;
}

.portfolio-head p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #90a3cf;
}

.portfolio-add-btn {
  border-radius: 14px;
  border: 1px solid #34bda2;
  background: linear-gradient(135deg, #30f0d2, #2ad9bf);
  color: #0a2728;
  font-size: 30px;
  font-weight: 800;
  padding: 15px 24px;
  line-height: 1;
  white-space: nowrap;
}

.portfolio-tabs {
  padding: 12px 18px 14px;
  border-bottom: 1px solid #24355f;
  display: flex;
  gap: 10px;
}

.portfolio-tab {
  border: 1px solid #38507e;
  border-radius: 10px;
  background: #141f36;
  color: #d4e3ff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
}

.portfolio-tab.active {
  border-color: #25ad74;
  background: linear-gradient(135deg, #2bc776, #21965e);
  color: #e8fff6;
}

.portfolio-tab span {
  margin-left: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  padding: 1px 6px;
  font-size: 11px;
}

.portfolio-performance-banner {
  margin: 14px 14px 10px;
  border: 1px solid #2a8a63;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(28, 140, 96, 0.34), rgba(20, 34, 58, 0.88));
  padding: 12px 14px;
}

.portfolio-performance-banner strong {
  display: block;
  font-size: 20px;
}

.portfolio-performance-banner small {
  color: #8eb3ce;
  font-size: 13px;
}

.portfolio-active-header {
  margin: 2px 14px 8px;
  font-size: 13px;
  color: #d0ddff;
  font-weight: 700;
}

.portfolio-howto {
  margin: 0 14px 12px;
  border: 1px solid #2b7f8e;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(30, 73, 95, 0.52), rgba(26, 35, 56, 0.84));
  color: #90a9d3;
  font-size: 12px;
  line-height: 1.45;
  padding: 11px 12px;
}

.portfolio-howto b {
  color: #43f4db;
}

.portfolio-howto span {
  color: #2ff69b;
  font-weight: 700;
}

.portfolio-analytics-shell {
  margin: 0 14px 12px;
  border: 1px solid #2a406c;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(31, 41, 66, 0.86), rgba(24, 33, 54, 0.94));
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.portfolio-donut-card,
.portfolio-line-card {
  border: 1px solid #d6e4f3;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px;
}

.portfolio-line-card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.portfolio-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.portfolio-summary-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef4fb;
  color: #5c769c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portfolio-summary-head h3 {
  margin: 6px 0 0;
  color: #142d4d;
  font-size: 17px;
}

.portfolio-summary-head p {
  margin: 4px 0 0;
  color: #6881a2;
  font-size: 12px;
  line-height: 1.4;
}

.portfolio-summary-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.portfolio-summary-panel {
  border: 1px solid #d8e0ee;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(23, 46, 84, 0.04);
}

.portfolio-stat-card {
  min-height: 136px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.portfolio-stat-card small {
  color: #6f7e95;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portfolio-stat-card strong {
  color: #111111;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
}

.portfolio-stat-card-cash strong {
  color: #4f85ff;
}

.portfolio-stat-card-pnl {
  grid-column: 1 / span 2;
}

.portfolio-stat-card-pnl.positive {
  border-color: #c7ead7;
  background: linear-gradient(180deg, #ffffff 0%, #f3fcf6 100%);
}

.portfolio-stat-card-pnl.negative {
  border-color: #f0cbd2;
  background: linear-gradient(180deg, #ffffff 0%, #fff5f7 100%);
}

.portfolio-stat-card-pnl-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.portfolio-stat-card-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #edf4ff;
  color: #365379;
  font-size: 15px;
  font-weight: 800;
}

.portfolio-stat-card-pnl.positive .portfolio-stat-card-pill {
  background: #e8f8ee;
  color: #157f4a;
}

.portfolio-stat-card-pnl.negative .portfolio-stat-card-pill {
  background: #fff0f3;
  color: #c93c4f;
}

.portfolio-mix-panel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.portfolio-mix-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portfolio-mix-panel-title {
  color: #6f7e95;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portfolio-mix-panel-body {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.portfolio-privacy-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer;
}

.portfolio-privacy-on {
  border: 1px solid #2a9f6f;
  border-radius: 999px;
  background: #1f4a3e;
  color: #4ef7bb;
}

.portfolio-privacy-off {
  border: 1px solid #4f78b1;
  background: #1a2740;
  color: #b9d2f8;
}

.portfolio-donut {
  width: 156px;
  height: 156px;
  margin: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #1f2d4b 48%, transparent 49%),
    conic-gradient(#42dbc9 0 92%, #1f2d4b 92% 100%);
  display: grid;
  place-items: center;
}

.portfolio-donut.is-large {
  width: 208px;
  height: 208px;
}

.portfolio-donut.is-xlarge {
  width: 228px;
  height: 228px;
}

.portfolio-donut-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid #d4e2f2;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -10px 18px rgba(91, 124, 171, 0.08);
  display: grid;
  place-items: center;
  text-align: center;
  align-content: center;
  gap: 3px;
  padding: 8px 6px;
}

.portfolio-donut.is-large .portfolio-donut-inner {
  width: 122px;
  height: 122px;
  padding: 12px 10px;
}

.portfolio-donut.is-xlarge .portfolio-donut-inner {
  width: 136px;
  height: 136px;
  padding: 14px 12px;
}

.portfolio-donut-label {
  color: #111111;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.portfolio-donut-center-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5f789d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}

.portfolio-donut.is-large .portfolio-donut-label,
.portfolio-donut.is-xlarge .portfolio-donut-label {
  font-size: 10px;
}

#portfolio-donut-change {
  font-size: 16px;
  font-weight: 800;
  color: #111111;
  line-height: 1;
}

#portfolio-donut-change.is-positive {
  color: #157f4a;
}

#portfolio-donut-change.is-negative {
  color: #c93c4f;
}

.portfolio-donut-breakdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  align-content: center;
}

.portfolio-donut-break-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid #e7edf7;
  border-radius: 0;
  background: transparent;
}

.portfolio-donut-break-item:last-child {
  border-bottom: 0;
}

.portfolio-donut-break-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.portfolio-donut-break-label {
  color: #334f73;
  font-size: 11px;
  font-weight: 700;
}

.portfolio-donut-break-pct {
  color: #203a5a;
  font-size: 11px;
  font-weight: 800;
}


.portfolio-line-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #8ea2cb;
  font-size: 11px;
  gap: 12px;
  margin-bottom: 10px;
}

.portfolio-line-title-group {
  display: grid;
  gap: 6px;
}

.portfolio-compare-legend {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.portfolio-compare-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5f789d;
  font-size: 12px;
  font-weight: 700;
}

.portfolio-compare-item::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.portfolio-compare-item-portfolio::before {
  background: #1ee48d;
}

.portfolio-compare-item-benchmark::before {
  background: #4f85ff;
}

.portfolio-compare-item strong {
  font-size: 12px;
}

.portfolio-line-card-full {
  min-height: 360px;
}

.portfolio-chart-mode-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
}

.portfolio-chart-mode-btn {
  border: 1px solid #d1deee;
  background: #f8fbff;
  color: #4b6283;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  line-height: 1;
  cursor: pointer;
}

.portfolio-chart-mode-btn.is-active {
  border-color: #9edbc9;
  background: #e9f9f3;
  color: #0f7c5a;
}

.portfolio-line-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portfolio-range-controls {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.portfolio-range-btn {
  border: 1px solid #d1deee;
  background: #f8fbff;
  color: #4b6283;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  line-height: 1;
  cursor: pointer;
}

.portfolio-range-btn.is-active {
  border-color: #9edbc9;
  background: #e9f9f3;
  color: #0f7c5a;
}

.portfolio-line-chart {
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  min-height: 300px;
  border-radius: 10px;
  background: #ffffff;
}

.portfolio-history-area {
  fill: url(#portfolio-history-fill);
  opacity: 0;
}

.portfolio-history-line {
  fill: none;
  stroke: #14c97a;
  stroke-width: 1.1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.portfolio-history-point {
  fill: #ffffff;
  stroke: #14c97a;
  stroke-width: 0.9;
  opacity: 0.96;
  cursor: pointer;
}

.portfolio-benchmark-line {
  fill: none;
  stroke: #7b93c8;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 1 4.5;
  opacity: 0.9;
}

.portfolio-history-dot {
  fill: #14c97a;
  stroke: #ffffff;
  stroke-width: 1.25;
}

.portfolio-benchmark-dot {
  fill: #7b93c8;
  stroke: #ffffff;
  stroke-width: 1.1;
}

@media (max-width: 980px) {
  .portfolio-summary-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-stat-card-pnl,
  .portfolio-mix-panel {
    grid-column: 1 / -1;
  }

  .portfolio-mix-panel-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .portfolio-line-head {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .portfolio-summary-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-stat-card-pnl,
  .portfolio-mix-panel {
    grid-column: auto;
  }
}

.portfolio-line-axis {
  stroke: rgba(201, 211, 227, 0.35);
  stroke-width: 0.45;
}

.portfolio-grid-line {
  stroke: rgba(188, 200, 220, 0.6);
  stroke-width: 0.75;
  stroke-dasharray: 1 4;
}

.portfolio-grid-line-vert {
  stroke: rgba(188, 200, 220, 0.45);
  stroke-dasharray: 1 5;
}

.portfolio-line-label {
  fill: #7b8ba7;
  font-family: "IBM Plex Sans", "Manrope", sans-serif;
  font-variant-numeric: tabular-nums;
}

.portfolio-line-label-y {
  font-size: 7.25px;
  font-weight: 400;
  letter-spacing: 0;
}

.portfolio-line-label-x {
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0;
}

.portfolio-history-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 112px;
  max-width: 180px;
  padding: 8px 10px;
  border: 1px solid rgba(187, 204, 227, 0.95);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 28px rgba(27, 43, 69, 0.14);
  color: #18314f;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  backdrop-filter: blur(6px);
}

.portfolio-history-tooltip strong,
.portfolio-history-tooltip span {
  display: block;
}

.portfolio-history-tooltip strong {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.portfolio-history-tooltip span {
  margin-top: 2px;
  color: #6d81a1;
  font-size: 11px;
  line-height: 1.25;
}

.portfolio-list-rich {
  padding-top: 8px;
}

.portfolio-trade {
  border: 1px solid #324d7d;
  border-radius: 12px;
  background: linear-gradient(180deg, #1b2a48, #19253f);
  padding: 12px 12px;
}

.portfolio-trade-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 27px;
  font-weight: 700;
  color: #d9e8ff;
}

.portfolio-trade-zone {
  border: 1px solid #375b93;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  color: #8ec8ff;
  background: #1b3154;
}

.portfolio-trade-meta {
  margin-top: 5px;
  font-size: 13px;
  color: #9ab1dd;
}

/* Portfolio tracker refinements to match TradeConfident layout */
.portfolio-head {
  padding: 18px 18px 14px;
}

.portfolio-icon {
  width: 56px;
  height: 56px;
  font-size: 33px;
  border-radius: 14px;
}

.portfolio-head h2 {
  font-size: 18px;
  line-height: 1.02;
}

.portfolio-head p {
  margin-top: 6px;
  font-size: 11px;
  color: #889cc7;
}

.portfolio-add-btn {
  font-size: 11px;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 8px;
  color: #082f32;
}

.portfolio-tabs {
  padding: 10px 16px 14px;
}

.portfolio-single-pill {
  display: none;
}

.portfolio-selector {
  margin: 10px 16px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.portfolio-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #bfd0e6;
  border-radius: 10px;
  background: #ffffff;
  color: #4a6a8a;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.portfolio-tab:hover {
  border-color: #8aa4c8;
  color: #17345a;
  background: #f0f5fc;
}

.portfolio-tab.is-active {
  border-color: #25ad74;
  background: linear-gradient(135deg, #2bc776, #21965e);
  color: #e8fff6;
}

.portfolio-tab-count {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 7px;
  font-size: 11px;
}

.portfolio-tab.is-active .portfolio-tab-count {
  background: rgba(255, 255, 255, 0.2);
}

/* Summary tab: read-only aggregate across all portfolios. Visually
   differentiated from real-portfolio tabs so users don't expect to
   add/edit trades from it. */
.portfolio-tab-summary {
  border-style: dashed;
  background: #f4f8fd;
  color: #3a5980;
}
.portfolio-tab-summary:hover {
  border-style: dashed;
  background: #e9f1fb;
}
.portfolio-tab.portfolio-tab-summary.is-active {
  border-style: solid;
  background: linear-gradient(135deg, #5b85b6, #3f658e);
  color: #ffffff;
}

/* Per-trade portfolio attribution badge — only rendered in the Summary view
   so a single list of trades from p1/p2/p3 is still legible. */
.portfolio-row-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: #1c3253;
  color: #cfe1f7;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.portfolio-perf-trade strong .portfolio-row-badge {
  background: rgba(28, 50, 83, 0.08);
  color: #2c4870;
}

.portfolio-edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  font-size: 11px;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.65;
  vertical-align: middle;
}
.portfolio-edit-icon:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.portfolio-pick-field {
  margin-top: 4px;
}

.portfolio-pick-select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #bfd0e6;
  border-radius: 10px;
  background: #ffffff;
  color: #17345a;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  appearance: auto;
}

.portfolio-move-select {
  border: 1px solid #bfd0e6;
  border-radius: 8px;
  background: #ffffff;
  color: #4a6a8a;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  appearance: auto;
  cursor: pointer;
}

.portfolio-performance-banner {
  margin: 14px 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  width: calc(100% - 32px);
  text-align: left;
  cursor: pointer;
}

.portfolio-performance-banner strong {
  font-size: 12px;
  line-height: 1;
}

.portfolio-performance-banner small {
  font-size: 10px;
  font-style: italic;
}

.portfolio-caret {
  color: #90a6d1;
  font-size: 20px;
  line-height: 1;
}

.portfolio-performance-body {
  margin: 0 16px 12px;
  border: 1px solid #2a3c61;
  border-radius: 10px;
  background: linear-gradient(180deg, #1b2742, #17233b);
  padding: 10px;
}

.portfolio-performance-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8ea3ce;
  font-size: 10px;
  margin-bottom: 8px;
}

.portfolio-performance-top b {
  color: #2ff2a7;
}

.portfolio-refresh-btn {
  border: 0;
  background: transparent;
  color: #8ca3cf;
  font-size: 10px;
  cursor: pointer;
}

.portfolio-performance-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.portfolio-performance-stats article {
  border: 1px solid #30466f;
  border-radius: 8px;
  background: #1d2b46;
  padding: 8px 6px;
  text-align: center;
}

.portfolio-performance-stats article.wins {
  border-color: #2b8866;
  background: #1d3f3d;
}

.portfolio-performance-stats article.losses {
  border-color: #7a3049;
  background: #402333;
}

.portfolio-performance-stats article.avg {
  border-color: #2f6582;
  background: #1f3946;
}

.portfolio-performance-stats strong {
  display: block;
  font-size: 20px;
  line-height: 1;
  color: #d7e8ff;
}

.portfolio-performance-stats small {
  color: #7f96c0;
  font-size: 9px;
  text-transform: uppercase;
}

.portfolio-performance-pending {
  border: 1px dashed #30456f;
  border-radius: 8px;
  background: #152238;
  min-height: 70px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #7f95c1;
  font-size: 11px;
}

.portfolio-performance-pending strong {
  color: #9db4df;
  font-size: 12px;
}

.portfolio-perf-trades-list {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.portfolio-perf-trade {
  border: 1px solid #2f4f66;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(26, 53, 66, 0.9), rgba(21, 42, 56, 0.85));
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
}

.portfolio-perf-trade.down {
  border-color: #6a3b4f;
  background: linear-gradient(180deg, rgba(64, 33, 47, 0.82), rgba(45, 24, 34, 0.78));
}

.portfolio-perf-trade-left strong {
  display: block;
  color: #e3efff;
  font-size: 14px;
  line-height: 1.1;
}

.portfolio-perf-trade-left small {
  display: block;
  color: #8ba2cc;
  font-size: 11px;
  margin-top: 2px;
}

.portfolio-perf-trade-right {
  text-align: right;
}

.portfolio-perf-trade-right b {
  display: block;
  color: #2ff2a7;
  font-size: 14px;
}

.portfolio-perf-trade.down .portfolio-perf-trade-right b {
  color: #ff7898;
}

.portfolio-perf-trade-right small {
  display: block;
  color: #8ea5d0;
  font-size: 11px;
  margin-top: 2px;
}

.portfolio-perf-delete-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #4b6f9c;
  border-radius: 999px;
  background: #16243d;
  color: #b8d7ff;
  font-size: 14px;
  cursor: pointer;
}

.portfolio-perf-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.portfolio-perf-undo-btn {
  height: 32px;
  border: 1px solid #2f7f66;
  border-radius: 999px;
  background: #153a33;
  color: #5df4b8;
  font-size: 11px;
  font-weight: 700;
  padding: 0 10px;
  cursor: pointer;
}

.portfolio-active-header {
  margin: 0 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  line-height: 1;
}

.portfolio-active-title {
  white-space: nowrap;
}

#portfolio-active-count {
  display: inline;
  white-space: nowrap;
}

.portfolio-howto {
  margin: 0 16px 14px;
  font-size: 10px;
}

.portfolio-analytics-shell {
  margin: 0 16px 14px;
}

.portfolio-line-head {
  font-size: 12px;
}

.portfolio-list-rich {
  margin: 0 16px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.portfolio-trade {
  max-width: none;
  padding: 16px 18px;
  border: 1px solid #d7e5f4;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  box-shadow: 0 12px 26px rgba(41, 69, 110, 0.08);
}

.portfolio-trade-list-item {
  padding: 0;
  overflow: hidden;
}

.portfolio-trade-summary {
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 0.9fr);
  gap: 20px;
  align-items: center;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
}

.portfolio-trade-summary-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.portfolio-trade-summary-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: #587093;
  font-size: 13px;
  line-height: 1.5;
}

.portfolio-trade-summary-sub span {
  min-width: 0;
}

.portfolio-trade-summary-profit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portfolio-trade-summary-profit .portfolio-pct-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 0;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.portfolio-trade-summary-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.portfolio-trade-summary-metric {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.portfolio-trade-summary-metric small {
  color: #6d84a7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.portfolio-trade-summary-metric strong {
  color: #183253;
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.portfolio-trade-summary-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #d0def0;
  border-radius: 999px;
  color: #6e86aa;
  font-size: 18px;
  transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.portfolio-trade-summary:hover .portfolio-trade-summary-chevron,
.portfolio-trade.is-expanded .portfolio-trade-summary-chevron {
  border-color: #a8c2e3;
  color: #28496f;
  background: #eef5ff;
}

.portfolio-trade.is-expanded .portfolio-trade-summary-chevron {
  transform: rotate(180deg);
}

.portfolio-trade-details {
  padding: 0 18px 16px;
  border-top: 1px solid #e6edf8;
}

.portfolio-active-controls {
  margin: 10px 16px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 12px;
  align-items: end;
}

.portfolio-control-field {
  display: grid;
  gap: 6px;
}

.portfolio-control-field span {
  font-size: 11px;
  font-weight: 800;
  color: #5c7598;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.portfolio-control-field select {
  border: 1px solid #c6d8ee;
  border-radius: 12px;
  background: #ffffff;
  color: #2d4669;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
}

.portfolio-trade-head {
  font-size: 13px;
  margin-bottom: 4px;
}

.portfolio-trade-symbol-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  row-gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 800;
}

.portfolio-live-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #22c76b;
  box-shadow: 0 0 8px rgba(34, 199, 107, 0.5);
}

.portfolio-long-pill {
  border: 1px solid #299a68;
  background: #19483d;
  color: #45f2a8;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  line-height: 1;
}

.portfolio-type-pill {
  border: 1px solid #bfd3eb;
  background: #f4f8ff;
  color: #4d678c;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  line-height: 1;
}

.portfolio-pct-pill {
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  line-height: 1;
}

.portfolio-pct-pill.up {
  border: 1px solid #299a68;
  background: #19483d;
  color: #45f2a8;
}

.portfolio-pct-pill.down {
  border: 1px solid #963f53;
  background: #432335;
  color: #ff7f9f;
}

.portfolio-trade-meta {
  font-size: 14px;
  color: #314d74;
  line-height: 1.55;
}

.portfolio-trade-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr);
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}

.portfolio-trade-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.portfolio-trade-column-main {
  padding: 14px 16px;
  border: 1px solid #dbe7f4;
  border-radius: 14px;
  background: linear-gradient(180deg, #fcfdff, #f7fbff);
}

.portfolio-trade-column-main .portfolio-trade-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 8px;
  padding: 8px 0;
  border-bottom: 1px solid #e7eef8;
}

.portfolio-trade-column-main .portfolio-trade-meta:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.portfolio-trade-column-main .portfolio-trade-meta:first-child {
  padding-top: 0;
}

.portfolio-trade-column-stats {
  display: block;
  min-width: 0;
}

.portfolio-trade-stat-list {
  display: grid;
  gap: 8px;
}

.portfolio-trade-stat-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid #d8e6f4;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff, #f5f9ff);
  padding: 12px 14px;
  min-width: 0;
}

.portfolio-trade-stat-row span {
  font-size: 12px;
  font-weight: 800;
  color: #6a82a4;
  line-height: 1.35;
}

.portfolio-trade-stat-row strong {
  font-size: 17px;
  line-height: 1.2;
  color: #1d375b;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: right;
}

.portfolio-trade.is-jump-highlight {
  border-color: #5aa9ff;
  box-shadow: 0 0 0 3px rgba(90, 169, 255, 0.18);
  background: linear-gradient(180deg, rgba(236, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.portfolio-trade-modal-card {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
}

.portfolio-trade-modal-body {
  padding-top: 4px;
}

.portfolio-trade-modal-body .portfolio-trade {
  margin: 0;
}

.portfolio-trade-modal-review-head {
  margin-bottom: 12px;
  color: #36527d;
  font-size: 14px;
  line-height: 1.45;
}

.portfolio-trade-modal-review-head p {
  margin: 0;
}

.portfolio-trade-modal-review-profit {
  margin-top: 4px !important;
  font-weight: 700;
}

.meta-icon {
  color: #507fb7;
  display: inline-block;
  width: 18px;
  text-align: center;
  margin-right: 4px;
}

.portfolio-edit-btn {
  margin-left: 6px;
  border: 0;
  background: transparent;
  color: #90a6d1;
  cursor: pointer;
  font-size: 12px;
}

.portfolio-trade-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid #e6edf8;
}

.portfolio-action-buy,
.portfolio-action-sell {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  padding: 7px 12px;
  cursor: pointer;
}

.portfolio-action-buy {
  border: 1px solid #299a68;
  background: #132d2a;
  color: #2ff2a7;
}

.portfolio-action-sell {
  border: 1px solid #963f53;
  background: #2d1c2a;
  color: #ff7f9f;
}

.portfolio-trade-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.portfolio-history-toggle {
  border: 1px solid #3f5684;
  background: transparent;
  color: #8ea4d1;
  border-radius: 7px;
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
}

.portfolio-close-inline {
  border: 0;
  background: transparent;
  color: #8da2cc;
  font-size: 10px;
  cursor: pointer;
}

.portfolio-history-list {
  margin-top: 8px;
  border-top: 1px solid #2f446e;
  padding-top: 7px;
  color: #7f96c2;
  font-size: 12px;
}

.portfolio-history-list div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}

.portfolio-history-row {
  align-items: flex-start;
}

.portfolio-history-main {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.portfolio-history-edit-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  align-items: center;
  margin-left: auto;
  margin-right: 8px;
  font-size: 11px;
  color: #7f96c2;
}

.portfolio-history-list b {
  color: #b8cef4;
  margin-right: 4px;
}

.portfolio-history-list small {
  color: #738ab5;
  white-space: nowrap;
}

.portfolio-history-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.portfolio-history-time .portfolio-edit-btn {
  margin-left: 0;
}

.portfolio-disclaimer {
  padding: 16px 18px;
  text-align: center;
  color: #667da8;
  font-size: 9px;
}

#panel-portfolio.privacy-enabled .privacy-sensitive {
  filter: none;
  opacity: 1;
}

#panel-portfolio.privacy-disabled .privacy-sensitive {
  filter: blur(4px);
  opacity: 0.75;
}

.up {
  color: #35ecaa;
  font-weight: 700;
}

.down {
  color: #ff7898;
  font-weight: 700;
}

@media (max-width: 1080px) {
  .portfolio-trade-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-trade-summary-side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }
}

@media (max-width: 720px) {
  .portfolio-trade-summary {
    gap: 14px;
    padding: 14px;
  }

  .portfolio-trade-details {
    padding: 0 14px 14px;
  }

  .portfolio-trade-summary-sub {
    flex-direction: column;
    gap: 6px;
  }

  .portfolio-trade-summary-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-trade-summary-chevron {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  html,
  body {
    font-size: 16px;
  }

  .ticker-track {
    gap: 9px;
    padding: 8px 10px;
    animation-duration: 34s;
  }

  .ticker-item {
    gap: 8px;
    padding: 7px 10px;
    border-radius: 9px;
  }

  .ticker-symbol {
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .ticker-logo {
    width: 16px;
    height: 16px;
  }

  .ticker-logo-fallback {
    font-size: 9px;
  }

  .ticker-price {
    font-size: 11px;
  }

  .ticker-change {
    font-size: 10px;
    padding: 2px 6px;
  }

  .ai-modal-head h3 {
    font-size: 32px;
  }

  .ai-modal-panel strong {
    font-size: 24px;
  }

  .ai-weights-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .portfolio-head {
    flex-direction: column;
    align-items: stretch;
  }

  .portfolio-title-wrap {
    align-items: flex-start;
  }

  .portfolio-head h2 {
    font-size: 26px;
  }

  .portfolio-head p {
    font-size: 12px;
  }

  .portfolio-add-btn {
    font-size: 18px;
    padding: 10px 14px;
    width: 100%;
  }

  .portfolio-performance-banner strong {
    font-size: 20px;
  }

  .portfolio-active-header {
    font-size: 16px;
  }

  .portfolio-tabs {
    flex-wrap: wrap;
  }

  .portfolio-analytics-shell {
    grid-template-columns: 1fr;
  }

  .portfolio-trade-head {
    font-size: 19px;
  }

  .portfolio-trade-symbol-wrap {
    font-size: 22px;
    flex-wrap: wrap;
  }

  .portfolio-active-controls {
    grid-template-columns: 1fr;
  }

  .portfolio-list-rich {
    grid-template-columns: 1fr;
  }

  .portfolio-trade-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-trade-stat-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .portfolio-trade-stat-row strong {
    text-align: left;
  }

  .portfolio-long-pill,
  .portfolio-type-pill,
  .portfolio-pct-pill {
    font-size: 12px;
  }

  .portfolio-trade-meta {
    font-size: 12px;
  }

  .watchlist-selector select {
    max-width: 100%;
  }

  .asset-controls {
    grid-template-columns: 1fr;
  }

  .add-asset-btn {
    width: 100%;
  }

  .asset-row {
    grid-template-columns: 1fr 1fr;
  }

  .asset-row:first-child {
    display: none;
  }

  .calc-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

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

  .legend-row {
    grid-template-columns: 1fr;
  }

  .legend-asset-head {
    display: none;
  }

  .coin-cell {
    grid-template-columns: 1fr;
  }

  .coin-type-col {
    border-right: 0;
    border-top: 1px dashed rgba(52, 75, 113, 0.55);
    padding-top: 8px;
    padding-right: 0;
  }

  .coin-type-col:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .signal-cell {
    min-height: 32px;
    justify-content: start;
    padding: 0 12px 10px;
  }
}

/* Unified hover lighting */
.logout-btn,
.add-asset-btn,
.reset-assets-btn,
.row-remove-btn,
.row-quick-buy,
.row-quick-sell,
.row-quick-close,
.close-info-btn,
.risk-submit-btn,
.active-close-btn,
.ghost-btn,
.danger-btn,
.portfolio-add-btn,
.portfolio-privacy-pill,
.portfolio-action-buy,
.portfolio-action-sell,
.portfolio-history-toggle,
.ai-info-icon-btn,
.add-coin-result-btn,
.add-coin-shortcuts button,
.add-metal-btn,
.start-type-btn {
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 120ms ease, color 140ms ease;
}

.logout-btn:hover,
.row-remove-btn:hover,
.row-quick-sell:hover,
.active-close-btn:hover,
.danger-btn:hover,
.portfolio-action-sell:hover {
  border-color: #cf506b;
  box-shadow: 0 0 0 1px rgba(255, 124, 153, 0.3), 0 0 14px rgba(255, 124, 153, 0.2);
  transform: translateY(-1px);
}

.add-asset-btn:hover,
.risk-submit-btn:hover:not(:disabled),
.portfolio-action-buy:hover,
.row-quick-buy:hover,
.portfolio-add-btn:hover,
.add-coin-result-btn:hover,
.add-metal-btn:hover,
.start-type-btn:hover {
  border-color: #43d39a;
  box-shadow: 0 0 0 1px rgba(67, 211, 154, 0.32), 0 0 16px rgba(67, 211, 154, 0.24);
  transform: translateY(-1px);
}

.reset-assets-btn:hover,
.ghost-btn:hover,
.row-quick-close:hover,
.portfolio-history-toggle:hover,
.close-info-btn:hover,
.portfolio-privacy-pill:hover,
.ai-info-icon-btn:hover,
.add-coin-shortcuts button:hover {
  border-color: #5f84c0;
  box-shadow: 0 0 0 1px rgba(133, 174, 246, 0.24), 0 0 12px rgba(133, 174, 246, 0.18);
  transform: translateY(-1px);
}

#login-btn {
  border-color: #2d8e63;
  background: #e9fff4;
  color: #176746;
}

#login-btn:hover {
  border-color: #2a7f58;
  box-shadow: 0 0 0 1px rgba(45, 158, 105, 0.28), 0 0 14px rgba(45, 158, 105, 0.2);
}

#logout-btn {
  border-color: #2d8e63;
  background: #e9fff4;
  color: #176746;
  cursor: pointer;
}

#logout-btn:hover {
  border-color: #2a7f58;
  box-shadow: 0 0 0 1px rgba(45, 158, 105, 0.28), 0 0 14px rgba(45, 158, 105, 0.2);
}

#billing-btn {
  border-color: #2d8e63;
  background: #e9fff4;
  color: #176746;
  cursor: pointer;
}

#billing-btn:hover {
  border-color: #2a7f58;
  box-shadow: 0 0 0 1px rgba(45, 158, 105, 0.28), 0 0 14px rgba(45, 158, 105, 0.2);
}

.portfolio-perf-delete-btn:hover {
  border-color: #6a9ad8;
  box-shadow: 0 0 0 1px rgba(130, 174, 243, 0.28), 0 0 12px rgba(130, 174, 243, 0.2);
  transform: translateY(-1px);
}

.portfolio-perf-undo-btn:hover {
  border-color: #40b58f;
  box-shadow: 0 0 0 1px rgba(84, 214, 171, 0.24), 0 0 12px rgba(84, 214, 171, 0.2);
  transform: translateY(-1px);
}

.portfolio-edit-btn,
.portfolio-close-inline {
  transition: color 140ms ease, text-shadow 140ms ease;
}

.portfolio-edit-btn:hover,
.portfolio-close-inline:hover {
  color: #d7e8ff;
  text-shadow: 0 0 8px rgba(136, 188, 255, 0.3);
}

.watchlist-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1400;
  border: 1px solid rgba(67, 211, 154, 0.42);
  border-radius: 10px;
  padding: 10px 14px;
  color: #dcfff0;
  background: linear-gradient(135deg, rgba(19, 36, 66, 0.96), rgba(16, 63, 67, 0.94));
  box-shadow: 0 12px 34px rgba(4, 10, 24, 0.58), 0 0 18px rgba(67, 211, 154, 0.22);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.watchlist-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stackable Notification Panel (DAY theme — default) ── */
.watchlist-notification-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1400;
  width: 360px;
  max-width: calc(100vw - 36px);
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(96, 120, 160, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 48px rgba(15, 30, 60, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  color: #182437;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  overflow: hidden;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.watchlist-notification-panel:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}

.watchlist-notification-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(96, 120, 160, 0.16);
  background: linear-gradient(135deg, rgba(239, 245, 253, 0.85), rgba(225, 240, 242, 0.75));
  flex-shrink: 0;
}

.watchlist-notification-title {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3b5474;
  flex: 1;
  min-width: 0;
}

.watchlist-notification-count {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #0f7a5b;
  background: rgba(67, 211, 154, 0.16);
  border: 1px solid rgba(67, 211, 154, 0.4);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.watchlist-notification-close-all {
  border: 1px solid rgba(70, 100, 140, 0.4);
  background: rgba(255, 255, 255, 0.85);
  color: #23395c;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  flex-shrink: 0;
}

.watchlist-notification-close-all:hover {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.55);
  color: #a21b3b;
}

.watchlist-notification-list {
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column-reverse; /* newest on top */
  gap: 8px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 120, 160, 0.4) transparent;
}

.watchlist-notification-list::-webkit-scrollbar {
  width: 8px;
}

.watchlist-notification-list::-webkit-scrollbar-track {
  background: transparent;
}

.watchlist-notification-list::-webkit-scrollbar-thumb {
  background: rgba(96, 120, 160, 0.4);
  border-radius: 999px;
}

.watchlist-notification-list::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 120, 160, 0.6);
}

.watchlist-notification-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(96, 120, 160, 0.18);
  color: #1b2a43;
  line-height: 1.45;
  box-shadow: 0 1px 3px rgba(20, 40, 70, 0.06);
  transform: translateX(12px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease, background 140ms ease;
}

.watchlist-notification-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.watchlist-notification-item.is-leaving {
  opacity: 0;
  transform: translateX(12px);
}

.watchlist-notification-item-message {
  font-size: 0.86rem;
  word-break: break-word;
}

.watchlist-notification-item-symbol {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.watchlist-notification-item-close {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: 1px solid rgba(96, 120, 160, 0.28);
  background: rgba(255, 255, 255, 0.9);
  color: #5a6b88;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.watchlist-notification-item-close:hover {
  background: rgba(244, 63, 94, 0.16);
  border-color: rgba(244, 63, 94, 0.55);
  color: #a21b3b;
}

/* ── Tone-aware backgrounds (day) ── */
/* Green for buy-zone transitions, red for sell/risky-zone transitions. */
.watchlist-notification-item.is-buy {
  background: rgba(67, 211, 154, 0.22);
  border-color: rgba(67, 211, 154, 0.5);
}
.watchlist-notification-item.is-sell {
  background: rgba(244, 63, 94, 0.2);
  border-color: rgba(244, 63, 94, 0.5);
}

/* ── NIGHT theme override ── */
[data-theme="night"] .watchlist-notification-panel {
  border-color: rgba(120, 160, 200, 0.28);
  background: rgba(14, 22, 42, 0.72);
  box-shadow: 0 18px 48px rgba(4, 10, 24, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: #e6edf7;
}

[data-theme="night"] .watchlist-notification-header {
  border-bottom-color: rgba(120, 160, 200, 0.18);
  background: linear-gradient(135deg, rgba(19, 36, 66, 0.55), rgba(16, 63, 67, 0.45));
}

[data-theme="night"] .watchlist-notification-title {
  color: #c5d4e8;
}

[data-theme="night"] .watchlist-notification-count {
  color: #7fe0bc;
  background: rgba(67, 211, 154, 0.12);
  border-color: rgba(67, 211, 154, 0.3);
}

[data-theme="night"] .watchlist-notification-close-all {
  border-color: rgba(180, 200, 230, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: #e6edf7;
}

[data-theme="night"] .watchlist-notification-close-all:hover {
  background: rgba(244, 63, 94, 0.14);
  border-color: rgba(244, 63, 94, 0.55);
  color: #ffd4de;
}

[data-theme="night"] .watchlist-notification-list {
  scrollbar-color: rgba(120, 160, 200, 0.35) transparent;
}

[data-theme="night"] .watchlist-notification-list::-webkit-scrollbar-thumb {
  background: rgba(120, 160, 200, 0.3);
}

[data-theme="night"] .watchlist-notification-list::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 160, 200, 0.5);
}

[data-theme="night"] .watchlist-notification-item {
  background: rgba(19, 36, 66, 0.55);
  border-color: rgba(120, 160, 200, 0.2);
  color: #dcfff0;
  box-shadow: none;
}

[data-theme="night"] .watchlist-notification-item-close {
  border-color: rgba(180, 200, 230, 0.25);
  background: rgba(255, 255, 255, 0.04);
  color: #cdd8ec;
}

[data-theme="night"] .watchlist-notification-item-close:hover {
  background: rgba(244, 63, 94, 0.2);
  border-color: rgba(244, 63, 94, 0.55);
  color: #ffd4de;
}

/* ── Tone-aware backgrounds (night) ── */
[data-theme="night"] .watchlist-notification-item.is-buy {
  background: rgba(67, 211, 154, 0.18);
  border-color: rgba(67, 211, 154, 0.38);
  color: #c8f7e4;
}
[data-theme="night"] .watchlist-notification-item.is-sell {
  background: rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.4);
  color: #ffd4de;
}

/* Alphora Professional Rebrand */
:root {
  --bg-0: #eff3f8;
  --text: #182437;
  --muted: #60718b;
}

/* Theme transition for smooth daylight ↔ night switch */
html, body, .top-nav, .ticker-wrap, .ticker-item, .market-cycle-tab,
.dashboard, .card-head, .calc-panel, .arena, .hero h1, .hero p,
.brand-title, .brand-sub, .meta-pill, .locale-wrap, .logout-btn,
.theme-toggle-btn, .app-bg, .portfolio-head, .portfolio-performance-body,
.portfolio-donut-card, .portfolio-line-card, .portfolio-trade,
.execution-notices, .coin, .legend-row, .asset-row,
.info-head, .app-legal-footer {
  transition: background 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

html,
body {
  font-family: "IBM Plex Sans", sans-serif;
  color: #1a2435;
  background: #eff3f8;
}

h1,
h2,
h3,
.brand-title,
.arena strong,
.card-head h2 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.01em;
}

.app-bg {
  background:
    radial-gradient(circle at 6% -10%, rgba(65, 123, 206, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 100% 0%, rgba(24, 180, 167, 0.16) 0%, transparent 38%),
    linear-gradient(180deg, #f5f8fc 0%, #edf2f8 50%, #e8eef6 100%);
}

.app-bg::after {
  background-image:
    linear-gradient(rgba(54, 96, 159, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 96, 159, 0.06) 1px, transparent 1px);
  opacity: 0.55;
}

.ticker-wrap {
  border-bottom: 1px solid #d4deea;
  background: rgba(249, 252, 255, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px rgba(18, 41, 70, 0.08);
}

.ticker-item {
  border-color: #d4deea;
  background: linear-gradient(180deg, #ffffff, #f6f9ff);
  color: #2a3b55;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 10px rgba(18, 41, 70, 0.08);
}

.ticker-symbol {
  color: #17253c;
}

.ticker-symbol::before {
  content: none;
}

.ticker-price {
  color: #324762;
}

.ticker-change.up {
  color: #0f8a62;
  border-color: #b6ead8;
  background: #e5f7f0;
}

.ticker-change.down {
  color: #b64557;
  border-color: #f0ccd3;
  background: #faecef;
}

.page {
  width: min(1480px, calc(100% - 28px));
}

.top-nav {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 24px rgba(18, 41, 70, 0.07);
}

.brand-dot {
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, #1f8aff, #1bc3a7);
  box-shadow: 0 6px 14px rgba(28, 126, 199, 0.28);
}

.brand-sub,
.hero-sub,
.meta-pill,
.card-head p,
.portfolio-head p {
  color: #61768f;
}

.meta-pill {
  border-color: #d8e2ef;
  background: #f7faff;
}

.logout-btn {
  border-color: #d4c1c7;
  background: #fff3f6;
  color: #ad4561;
}

.hero {
  margin-bottom: 20px;
}

.hero h1 {
  color: #1a2b43;
  font-size: clamp(30px, 4.2vw, 52px);
}

.hero h1 span {
  background: linear-gradient(90deg, #1977ff 0%, #19b4aa 52%, #f28b39 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero p {
  color: #647991;
}

.arena {
  border: 1px solid #d7e2ef;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  color: #273a56;
  border-radius: 12px;
  min-width: 255px;
}

.arena small {
  color: #7287a2;
}

.arena.active {
  border-color: #8cc1f8;
  background: linear-gradient(180deg, #ebf4ff 0%, #e7fff7 100%);
  color: #10385d;
  box-shadow: 0 0 0 1px rgba(78, 153, 241, 0.25), 0 12px 20px rgba(37, 96, 168, 0.12);
}

.dashboard {
  border: 1px solid #d9e3f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 18px 40px rgba(15, 39, 71, 0.1);
}

.dashboard.is-selected {
  border-color: #b2cdf2;
  box-shadow: 0 0 0 1px rgba(114, 167, 234, 0.22), 0 18px 40px rgba(15, 39, 71, 0.12);
}

.card-head,
.info-trigger,
.asset-row:first-child,
.portfolio-performance-body,
.portfolio-analytics-shell,
.portfolio-performance-banner {
  border-color: #dbe5f1;
}

.card-head {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.signal.stat-buy strong {
  color: #128b67;
}

.signal.stat-sell strong {
  color: #ba4057;
}

.calc-panel {
  background: #fbfdff;
}

.calc-panel h3,
.portfolio-line-head span:first-child {
  color: #2b3f5e;
}

.asset-row {
  border-bottom-color: #e2eaf5;
  color: #5e7089;
}

.asset-row:first-child {
  color: #6f829e;
  background: #f4f8ff;
}

.asset-row-data:hover,
.asset-row-data:focus-visible {
  background: #edf4fe;
}

.sentiment-tech-label { color: #8099bf; }
.tech-signal-low     { background: rgba(45,158,95,0.12); color: #1e7a48; }
.tech-signal-high    { background: rgba(200,60,60,0.10); color: #b83232; }
.tech-signal-neutral { background: rgba(100,120,160,0.12); color: #5a7090; }
.ai-dot-buy   { background: #2d9e5f; }
.ai-dot-sell  { background: #d94040; }
.ai-dot-watch { background: #3a78c9; }
.ai-dot-wait  { background: #8099bf; }
.ai-summary-cell.ai-tone-buy  .ai-summary-text { color: #1a6e40; }
.ai-summary-cell.ai-tone-sell .ai-summary-text { color: #aa2424; }
.ai-summary-cell.ai-tone-watch .ai-summary-text { color: #1d5fa8; }
.ai-summary-cell.ai-tone-wait  .ai-summary-text { color: #4a6282; }

.asset-group-row {
  color: #385376;
  background: #edf4ff;
  border-top: 1px solid #d9e5f5;
  border-bottom: 1px solid #d9e5f5;
}

.row-remove-btn {
  border-color: #d3dfef;
  background: #f8fbff;
  color: #647995;
}

.legend-row {
  border-bottom: 1px solid #e0e9f4;
  background: #ffffff;
}

.legend-row:hover {
  background: #f5faff;
}

.coin {
  border-color: #d4e0f0;
  background: #f7fbff;
  color: #2b4365;
}

.coin.trade-on {
  border-color: #81b5f0;
  background: #e8f3ff;
}

.legend-edit-btn {
  color: #4a6488;
}
.legend-edit-btn:hover {
  color: #1a6fd4;
}
.legend-edit-btn.is-active {
  color: #1a6fd4;
  font-size: 12px;
  font-weight: 600;
}
.coin-remove-btn {
  border-color: rgba(255,255,255,0.3);
}

.signal-cell {
  color: #4a6488;
}

.execution-notices {
  border-color: #dbe5f2;
  background: #fbfdff;
}

.execution-notices-head,
.execution-notice-item strong {
  color: #2a3f5e;
}
.popup-alert-toggle-label { color: #5a7090; }
.popup-alert-toggle-track { background: #d0dcea; }
.popup-alert-toggle-thumb { background: #8aA0be; }
.popup-alert-checkbox:checked ~ .popup-alert-toggle-track { background: #1a6fd4; }
.popup-alert-checkbox:checked ~ .popup-alert-toggle-track .popup-alert-toggle-thumb { background: #fff; }
.quick-toast-bar { background: rgba(30, 42, 68, 0.93); color: #e8eef8; }

.execution-notice-item {
  border-color: #e0e9f4;
}

.execution-notice-action {
  border-color: #c9d8ea;
  background: #f8fbff;
  color: #334c70;
}

.portfolio-head,
.portfolio-performance-body,
.portfolio-donut-card,
.portfolio-line-card,
.portfolio-trade,
.active-trade-row,
.close-trade-card,
.dashboard-trade-card,
.info-card {
  background: #ffffff;
  border-color: #d9e3f0;
  box-shadow: 0 10px 24px rgba(14, 37, 66, 0.07);
}

.portfolio-performance-banner {
  background: #f7fbff;
}

.portfolio-performance-stats article {
  background: #f9fcff;
  border-color: #d8e3f1;
}

.portfolio-performance-stats article.wins {
  border-color: #b8e2d0;
  background: #effaf5;
}

.portfolio-performance-stats article.losses {
  border-color: #ecc4ce;
  background: #fdf1f4;
}

.portfolio-performance-stats article.avg {
  border-color: #bfd7ea;
  background: #f2f8fd;
}

.portfolio-line-chart {
  background:
    linear-gradient(rgba(51, 95, 157, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 95, 157, 0.08) 1px, transparent 1px),
    #f8fbff;
}

.portfolio-trade-meta,
.portfolio-history-list,
.close-trade-sub,
.close-trade-metrics span {
  color: #60738f;
}

.portfolio-long-pill,
.portfolio-pct-pill.up,
.portfolio-action-buy,
.risk-submit-btn,
.start-type-btn.active {
  border-color: #9edbc9;
  background: #e9f9f3;
  color: #0f7c5a;
}

.portfolio-pct-pill.down,
.portfolio-action-sell,
.danger-btn {
  border-color: #efc0cd;
  background: #fdeff3;
  color: #b7445c;
}

.portfolio-history-toggle,
.ghost-btn,
.add-asset-btn,
.reset-assets-btn,
.portfolio-add-btn,
.add-coin-shortcuts button,
.close-info-btn,
.ai-info-icon-btn,
.ai-summary-info-btn,
.portfolio-privacy-pill {
  border-color: #d1deee;
  background: #f8fbff;
  color: #3f5779;
}

.risk-input-wrap input,
.close-trade-input-wrap input,
.start-field input,
.symbol-field input,
.calc-grid input,
.add-coin-search-wrap input {
  border-color: #d0dced;
  background: #ffffff;
  color: #1b2a41;
}

.risk-step {
  border-color: #d8e4f2;
  background: #f8fbff;
}

.risk-step-current {
  box-shadow: 0 0 0 1px rgba(87, 151, 229, 0.4) inset;
}

.risk-warning-note,
.trade-record-note {
  border-color: #e5d8b6;
  background: #fff7df;
  color: #826326;
}

.watchlist-toast {
  border-color: #b9d5f2;
  color: #1e3859;
  background: linear-gradient(135deg, rgba(246, 251, 255, 0.98), rgba(237, 248, 255, 0.97));
  box-shadow: 0 12px 30px rgba(14, 37, 66, 0.16);
}

.logout-btn:hover,
.row-remove-btn:hover,
.row-quick-sell:hover,
.active-close-btn:hover,
.danger-btn:hover,
.portfolio-action-sell:hover,
.add-asset-btn:hover,
.risk-submit-btn:hover:not(:disabled),
.portfolio-action-buy:hover,
.row-quick-buy:hover,
.portfolio-add-btn:hover,
.add-coin-result-btn:hover,
.add-metal-btn:hover,
.start-type-btn:hover,
.reset-assets-btn:hover,
.ghost-btn:hover,
.row-quick-close:hover,
.portfolio-history-toggle:hover,
.close-info-btn:hover,
.portfolio-privacy-pill:hover,
.ai-info-icon-btn:hover,
.add-coin-shortcuts button:hover {
  box-shadow: 0 0 0 1px rgba(95, 137, 196, 0.22), 0 8px 14px rgba(18, 41, 70, 0.12);
}

@media (max-width: 900px) {
  .top-nav {
    padding: 12px;
  }

  .hero h1 {
    font-size: clamp(26px, 8vw, 38px);
  }

  .arena {
    min-width: 100%;
  }

  .dashboard {
    border-radius: 14px;
  }
}

/* Global readable type scale uplift */
.ticker-item,
.asset-row,
.portfolio-trade-meta,
.portfolio-performance-top,
.portfolio-performance-stats small,
.portfolio-perf-trade-left small,
.portfolio-perf-trade-right small,
.risk-caption,
.risk-breakdown-title,
.risk-profit-note,
.close-trade-sub,
.close-trade-input-row label,
.start-tracking-note,
.start-field,
.add-coin-subtitle,
.active-trades-helper,
.legend-asset-head,
.portfolio-line-head,
.portfolio-line-label,
.watchlist-toast {
  font-size: max(0.88rem, 14px);
}

.asset-display-name,
.portfolio-performance-stats small,
.risk-warning-note,
.trade-record-note {
  font-size: max(0.82rem, 13px);
}

/* Rebrand Consistency Pass */
.info-modal {
  background: rgba(39, 61, 92, 0.24);
  backdrop-filter: blur(6px);
}

/* Promo Checkout Modal */
.promo-checkout-card {
  max-width: 440px;
  width: 100%;
  padding: 32px 28px 28px;
  position: relative;
}
.promo-modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 16px;
  color: #7a8fa6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, color 0.15s;
}
.promo-modal-close-btn:hover {
  transform: rotate(180deg);
  color: #0a1628;
}
.promo-checkout-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #0a1628;
  margin: 0 0 6px;
  padding-right: 32px;
}
.promo-checkout-card > p {
  font-size: 14px;
  color: #5a7091;
  margin: 0 0 24px;
}
.promo-timeline {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.promo-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.promo-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d1d9e6;
  flex-shrink: 0;
  margin-top: 4px;
}
.promo-timeline-dot--active {
  background: #f2cf9f;
}
.promo-timeline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.promo-timeline-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #0a1628;
  line-height: 1.3;
}
.promo-timeline-text span {
  font-size: 13px;
  color: #5a7091;
  line-height: 1.4;
}
.promo-timeline-connector {
  width: 1.5px;
  height: 20px;
  background: #d1d9e6;
  margin-left: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
}
.promo-code-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #3d5575;
  margin-bottom: 6px;
  margin-top: 4px;
}
.promo-code-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  background: #ffffff;
  color: #0a1628;
  outline: none;
  transition: border-color 0.15s;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.promo-code-input:focus {
  border-color: #0f6e56;
  box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.12);
}
.promo-code-error {
  font-size: 13px;
  color: #c0392b;
  min-height: 20px;
  margin: 6px 0 0;
  line-height: 1.4;
}
.promo-checkout-submit-btn {
  width: 100%;
  margin-top: 16px;
  transition: background 0.2s, filter 0.2s;
}

.info-head {
  border-bottom: 1px solid #dbe5f1;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.info-head h3,
.close-trade-card .info-head h3 {
  color: #1f304a;
}

.close-info-btn {
  border-color: #c9d9ee;
  background: #f8fbff;
  color: #416087;
}

.trading-guide-card,
.ai-modal-card,
.active-trades-card,
.risk-card,
.add-coin-card,
.add-metals-card,
.start-tracking-card {
  background: #ffffff;
  border-color: #d8e3f0;
}

.trading-guide-head p,
.trading-guide-panel p,
.ai-modal-intro,
.ai-modal-panel p,
.ai-modal-list,
.ai-modal-footnote,
.add-coin-subtitle,
.active-trades-helper,
.risk-caption,
.risk-breakdown-title,
.risk-profit-note,
.risk-price-line small,
.start-tracking-note,
.start-field,
.close-trade-sub {
  color: #5f738f;
}

/* Day-mode contrast for bold terms inside AI Summary info list + intro/footnote */
.ai-modal-list li b,
.ai-modal-intro b,
.ai-modal-footnote b {
  color: #1f304a;
  font-weight: 600;
}

.trading-guide-panel,
.trading-guide-panel-accent,
.ai-modal-panel,
.btc-chart-box,
.risk-chart-box,
.risk-neutral-panel,
.risk-targets-note,
.close-trade-metrics,
.start-units-box {
  border-color: #d7e3f1;
  background: #f8fbff;
}

.btc-chart-title,
.risk-chart-head,
.close-trade-metrics div,
.start-units-box {
  color: #5f7591;
}

.btc-chart {
  background:
    linear-gradient(rgba(51, 95, 157, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 95, 157, 0.08) 1px, transparent 1px),
    #f7fbff;
}

.risk-zone-badge,
.active-trade-side,
.close-trade-long-badge {
  border-color: #bdd7f5;
  background: #eaf4ff;
  color: #2c5587;
}

.risk-tab {
  border-color: #d2deed;
  background: #f8fbff;
  color: #506884;
}

.risk-tab.active {
  border-color: #9edbc9;
  background: #e9f9f3;
  color: #0f7c5a;
}

.risk-step {
  border-color: #d7e3f1;
  background: #f7fbff;
  color: #4e6685;
}

.step-caution,
.step-concern,
.step-fear,
.step-maxfear,
.step-reserve {
  background: #f7fbff;
}

/* Risk modal execution clarity */
#risk-modal .risk-breakdown {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--risk-breakdown-columns, 4), minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
  justify-items: stretch;
  align-items: end;
  margin: 4px 16px 16px;
  padding: 16px 0 12px;
  border: 1px solid #d7e3f1;
  border-radius: 14px;
  background: #fbfdff;
  overflow: hidden;
  isolation: isolate;
}

#risk-modal .risk-breakdown::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(80, 116, 171, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 116, 171, 0.06) 1px, transparent 1px);
  background-size: 100% 44px, calc(100% / var(--risk-breakdown-columns, 4)) 100%;
  background-position: top left, top left;
  pointer-events: none;
}

#risk-modal .risk-breakdown > * {
  position: relative;
  z-index: 1;
}

#risk-modal .risk-step {
  display: grid;
  grid-template-rows: auto 148px minmax(90px, auto);
  justify-items: stretch;
  align-items: end;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 274px;
  padding: 0 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: #264466 !important;
  overflow: visible;
  box-sizing: border-box;
}

#risk-modal .risk-step::before {
  content: none;
}

#risk-modal .risk-step-amount {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  color: #1f3f61 !important;
  font-size: 18px !important;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
}

#risk-modal .risk-step-bar-wrap {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
}

#risk-modal .risk-step-bar {
  position: relative;
  width: min(84px, calc(100% - 8px));
  height: max(36px, var(--risk-step-fill, 0%));
  min-height: 36px;
  border: 1px solid #c9d9ec;
  border-radius: 14px 14px 6px 6px;
  background: var(--risk-step-fill-bg, linear-gradient(180deg, #dce7f4, #c8d8ea));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  overflow: visible;
}

#risk-modal .step-caution {
  --risk-step-fill-bg: linear-gradient(180deg, #eed0f5, #cfb4ec);
}

#risk-modal .step-concern {
  --risk-step-fill-bg: linear-gradient(180deg, #cfe5f2, #b8d9eb);
}

#risk-modal .step-fear {
  --risk-step-fill-bg: linear-gradient(180deg, #d3eee6, #bce4d8);
}

#risk-modal .step-maxfear {
  --risk-step-fill-bg: linear-gradient(180deg, #d9efd0, #c1e3b4);
}

#risk-modal .risk-step-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 90px;
  padding: 0 6px 4px;
  text-align: center;
  line-height: 1.2;
  box-sizing: border-box;
  overflow: hidden;
}

#risk-modal .risk-step-label-title {
  display: block;
  max-width: 100%;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.28;
  letter-spacing: 0.005em;
  color: #27486f;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

#risk-modal .risk-step-label-status {
  display: block;
  margin-top: 6px;
  max-width: 100%;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 600;
  color: #5f7898;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

#risk-modal .risk-step-current {
  filter: saturate(1.02);
  border: 1px solid rgba(120, 157, 206, 0.55) !important;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(236, 244, 255, 0.88), rgba(248, 251, 255, 0.72)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 0 0 1px rgba(171, 196, 230, 0.12) !important;
}

#risk-modal .risk-step-executed {
  border: 1px solid rgba(93, 171, 132, 0.44) !important;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(236, 250, 242, 0.92), rgba(244, 252, 247, 0.78)) !important;
}

#risk-modal .risk-step-next {
  border: 1px solid rgba(120, 157, 206, 0.55) !important;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(236, 244, 255, 0.88), rgba(248, 251, 255, 0.72)) !important;
}

#risk-modal .risk-step-executed .risk-step-bar {
  opacity: 0.9;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(71, 159, 114, 0.18);
}

#risk-modal .risk-step-next .risk-step-bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(98, 148, 214, 0.18);
}

#risk-modal .risk-step-tag {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  width: min(70px, calc(100% - 14px));
  justify-content: center;
  min-height: 32px;
  padding: 3px 7px;
  border: 1px solid rgba(69, 106, 152, 0.22);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: none;
  color: #35567d;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: default;
  pointer-events: none;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}

#risk-modal .risk-step-tag::before {
  content: none;
}

/* Match risk-step tones to sentiment zones */
#risk-modal .risk-step.risk-tone-max-euphoria {
  --risk-step-fill-bg: linear-gradient(180deg, #f1b6d6, #eaa8cb);
}

#risk-modal .risk-step.risk-tone-extreme-greed {
  --risk-step-fill-bg: linear-gradient(180deg, #f2a8bc, #e99aaf);
}

#risk-modal .risk-step.risk-tone-high-greed {
  --risk-step-fill-bg: linear-gradient(180deg, #f6bc9f, #efae90);
}

#risk-modal .risk-step.risk-tone-greed {
  --risk-step-fill-bg: linear-gradient(180deg, #f2cf9f, #ebc38f);
}

#risk-modal .risk-step.risk-tone-mild-greed {
  --risk-step-fill-bg: linear-gradient(180deg, #e7d8a0, #dfce90);
}

#risk-modal .risk-step.risk-tone-neutral {
  --risk-step-fill-bg: linear-gradient(180deg, #d7d8ad, #ced09f);
}

#risk-modal .risk-step.risk-tone-mild-caution {
  --risk-step-fill-bg: linear-gradient(180deg, #c9b9e8, #bda9df);
}

#risk-modal .risk-step.risk-tone-caution {
  --risk-step-fill-bg: linear-gradient(180deg, #b6c2eb, #a9b6e3);
}

#risk-modal .risk-step.risk-tone-concern {
  --risk-step-fill-bg: linear-gradient(180deg, #a8cfdf, #9bc4d5);
}

#risk-modal .risk-step.risk-tone-fear {
  --risk-step-fill-bg: linear-gradient(180deg, #a9dacd, #9ad0c2);
}

#risk-modal .risk-step.risk-tone-max-fear {
  --risk-step-fill-bg: linear-gradient(180deg, #b5e2be, #a8d8b2);
}

#risk-modal .risk-step.risk-step-current .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(94, 132, 184, 0.18);
}

#risk-modal .risk-step.risk-step-current.risk-tone-max-euphoria .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(217, 146, 184, 0.28) !important;
}

#risk-modal .risk-step.risk-step-current.risk-tone-extreme-greed .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(221, 135, 159, 0.28) !important;
}

#risk-modal .risk-step.risk-step-current.risk-tone-high-greed .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(222, 149, 116, 0.28) !important;
}

#risk-modal .risk-step.risk-step-current.risk-tone-greed .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(212, 169, 111, 0.28) !important;
}

#risk-modal .risk-step.risk-step-current.risk-tone-mild-greed .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(201, 181, 111, 0.28) !important;
}

#risk-modal .risk-step.risk-step-current.risk-tone-neutral .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(183, 186, 130, 0.28) !important;
}

#risk-modal .risk-step.risk-step-current.risk-tone-mild-caution .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(165, 143, 206, 0.28) !important;
}

#risk-modal .risk-step.risk-step-current.risk-tone-caution .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(143, 158, 208, 0.28) !important;
}

#risk-modal .risk-step.risk-step-current.risk-tone-concern .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(127, 169, 188, 0.28) !important;
}

#risk-modal .risk-step.risk-step-current.risk-tone-fear .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(119, 181, 162, 0.28) !important;
}

#risk-modal .risk-step.risk-step-current.risk-tone-max-fear .risk-step-bar {
  box-shadow: inset 0 0 0 2px rgba(134, 188, 146, 0.28) !important;
}

#risk-modal .risk-zone-badge.risk-zone-hot {
  background: #ffe9ec !important;
  border-color: #e8bac2 !important;
  color: #a43a52 !important;
}

#risk-modal .risk-zone-badge.risk-zone-caution {
  background: #eef3ff !important;
  border-color: #c7d5ee !important;
  color: #375786 !important;
}

#risk-modal .risk-zone-badge.risk-zone-buy {
  background: #e6f8ef !important;
  border-color: #afdcc6 !important;
  color: #0f7b54 !important;
}

#risk-modal .risk-zone-badge.risk-zone-neutral {
  background: #f0f4fa !important;
  border-color: #ccd9eb !important;
  color: #3a597f !important;
}

.add-coin-search-wrap input,
.add-coin-result-btn,
.add-coin-shortcuts button,
.add-metal-btn,
.ghost-btn,
.danger-btn,
.active-close-btn {
  border-color: #d1deee;
}

.add-coin-result-btn,
.add-metal-btn {
  background: #f8fbff;
  color: #2f4667;
}

.add-coin-result-btn strong,
.add-metal-btn strong,
.active-trade-symbol {
  color: #203350;
}

.add-coin-result-btn small,
.add-metal-btn small,
.active-trade-row-meta {
  color: #607590;
}

.active-trade-row {
  border-color: #d8e3f0;
  background: #fbfdff;
}

/* Keep AI suggestion boxes in legacy green/red style */
.suggestion-pill {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.suggestion-pill-buy {
  border-color: #2a9f6f;
  background: linear-gradient(135deg, #2bc776, #21965e);
  color: #e9fff5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.suggestion-pill-sell {
  border-color: #a24b61;
  background: linear-gradient(135deg, #d24755, #a8354b);
  color: #ffeaf0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.suggestion-pill-watch-buy {
  border-color: #79b9a3;
  background: linear-gradient(135deg, #dff2ea, #d7eee5);
  color: #2d755f;
  box-shadow: none;
}

.suggestion-pill-watch-sell {
  border-color: #d4a6b1;
  background: linear-gradient(135deg, #f8e8ec, #f5e1e6);
  color: #8b4555;
  box-shadow: none;
}

/* Improve readability for small asset chips */
.coin {
  border-color: #c6d8ee;
  background: #edf4ff;
  color: #1f3f63;
}

.coin.trade-on {
  border-color: #8ec9b5;
  background: #e2f5ed;
  color: #155d4b;
}

/* Contrast Accessibility Pass */
body {
  color: #172a44;
}

.brand-sub,
.hero-sub,
.hero p,
.meta-pill,
.card-head p,
.portfolio-head p,
.portfolio-trade-meta,
.portfolio-history-list,
.close-trade-sub,
.close-trade-metrics span,
.trading-guide-head p,
.trading-guide-panel p,
.ai-modal-intro,
.ai-modal-panel p,
.ai-modal-footnote,
.add-coin-subtitle,
.active-trades-helper,
.risk-caption,
.risk-breakdown-title,
.risk-profit-note,
.risk-price-line small,
.start-tracking-note,
.start-field,
.asset-display-name,
.portfolio-line-head,
.portfolio-line-label,
.portfolio-performance-top,
.portfolio-performance-stats small,
.portfolio-perf-trade-left small,
.portfolio-perf-trade-right small {
  color: #445a76;
}

.asset-row,
.asset-row:first-child,
.asset-group-row,
.execution-notices-head,
.execution-notice-item strong,
.execution-notice-item small,
.legend-asset-head,
.legend-asset-head-cols span,
.coin-col-empty,
.risk-chart-head,
.close-trade-input-row label,
.risk-input-wrap label,
.symbol-field,
.calc-panel h3 {
  color: #3a516d;
}

.asset-symbol,
.brand-title,
.hero h1,
.card-head h2,
.portfolio-head h2,
.portfolio-trade-head,
.active-trade-symbol,
.close-trade-card .info-head h3,
.info-head h3 {
  color: #1a2f4a;
}

.portfolio-range-btn,
.portfolio-history-toggle,
.ghost-btn,
.close-info-btn,
.portfolio-privacy-pill,
.portfolio-edit-btn,
.portfolio-close-inline {
  color: #344e70;
}

.add-coin-result-btn strong,
.add-metal-btn strong,
.close-trade-metrics strong,
.portfolio-performance-stats strong,
.portfolio-perf-trade-left strong {
  color: #1f3552;
}

/* Legend Tone Adjustment */
.legend-asset-head {
  border-bottom-color: #284066;
  background: #1e3557;
  color: #dbe9ff;
}

.legend-asset-head-cols span,
.legend-asset-head > span:first-child,
.legend-asset-head > span:last-child {
  color: #dbe9ff;
}

.legend-row {
  border-top-color: #d7e3f2;
  border-bottom-color: #d7e3f2;
  background: #ffffff;
}

/* Keep zone table static on hover (no row/cell highlight). */
.legend-row:hover {
  background: #ffffff !important;
  box-shadow: none !important;
}

.coin-cell {
  background: #f7fbff;
}

.coin-type-col {
  border-right-color: #d2deed;
}

.coin-col-empty {
  color: #6f829e;
}

/* Exposure Bar Tone Cleanup */
.analysis-bar,
.analysis-grid article {
  border-color: #d4e0ef;
  background: #f8fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.bar-track {
  border: 1px solid #cbd9ec;
  background: linear-gradient(90deg, #edf3fb 0%, #e5edf8 48%, #dce7f5 100%);
}

.analysis-bar .bar-label {
  color: #2f4969;
}

.analysis-bar .bar-score {
  color: #345273;
}

.bar-fill {
  background: linear-gradient(90deg, #2adf98 0%, #f2d62c 52%, #ff5c61 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* ── Exposure Gauges ── */
.exposure-gauges {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 4px 0 8px;
}

.exposure-gauge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8fbff;
  border: 1px solid #d4e0ef;
  border-radius: 14px;
  padding: 14px 10px 10px;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.gauge-svg {
  width: 100%;
  max-width: 180px;
  overflow: visible;
}

.gauge-track {
  stroke: #dce8f7;
}

.gauge-needle {
  stroke: #2f4969;
  stroke-width: 2.5;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 400ms ease;
}

.gauge-needle-buy     { stroke: #1db97a; }
.gauge-needle-neutral { stroke: #c9a800; }
.gauge-needle-caution { stroke: #e04040; }

.gauge-pivot {
  fill: #2f4969;
}

.gauge-label {
  font-size: 11.5px;
  color: #2f4969;
  text-align: center;
  margin-top: 6px;
  font-weight: 500;
  line-height: 1.3;
}

.gauge-score {
  font-size: 13px;
  color: #1a3353;
  text-align: center;
  margin-top: 3px;
  font-weight: 600;
}

/* Night mode */
[data-theme="night"] .exposure-gauge {
  background: #161b22;
  border-color: #30363d;
  box-shadow: none;
}

[data-theme="night"] .gauge-track { stroke: #30363d; }
[data-theme="night"] .gauge-needle { stroke: #8b949e; }
[data-theme="night"] .gauge-needle-buy     { stroke: #3fb950; }
[data-theme="night"] .gauge-needle-neutral { stroke: #e3b341; }
[data-theme="night"] .gauge-needle-caution { stroke: #f85149; }
[data-theme="night"] .gauge-pivot  { fill: #8b949e; }
[data-theme="night"] .gauge-label  { color: #c9d1d9; }
[data-theme="night"] .gauge-score  { color: #e6edf3; }

#ai-bias-text {
  color: #000000;
}

/* Requested contrast tweak: price + BUY text */
.asset-row-data > span:nth-child(2),
.portfolio-trade-meta .up,
.active-profit-up,
.signal-cell.buy,
.suggestion-pill-buy,
.suggestion-pill-watch-buy {
  color: #000000;
}

/* Performance Panel Visibility + Readability Fix */
.portfolio-performance-pending[hidden],
#portfolio-perf-trades-list[hidden] {
  display: none !important;
}

.portfolio-perf-trade {
  border-color: #c9d9ed;
  background: linear-gradient(180deg, #f6fbff, #edf5ff);
}

.portfolio-perf-trade.down {
  border-color: #e4b8c3;
  background: linear-gradient(180deg, #fff3f6, #fdecef);
}

.portfolio-perf-trade-left strong {
  color: #1d3452;
}

.portfolio-perf-trade-left small,
.portfolio-perf-trade-right small {
  color: #4f6483;
}

.portfolio-perf-trade-right b {
  color: #1f8a65;
}

.portfolio-perf-trade.down .portfolio-perf-trade-right b {
  color: #b1455c;
}

/* Asset table gray-text contrast */
.asset-row:first-child {
  color: #233d5f;
}

.asset-display-name {
  color: #2f4a6e;
}

.asset-row-data > span:nth-child(4),
.asset-row-data > span:nth-child(5),
.asset-row-data > span:nth-child(6),
.asset-row-data > span:nth-child(7),
.asset-row-data .coin-col-empty {
  color: #2a4668;
}

.asset-row-data > span:nth-child(4),
.asset-row-data > span:nth-child(5) {
  color: #000000;
}

/* Inline dashboard explainer */
.dashboard-guide-inline {
  border-bottom: 1px solid #d7e3f2;
  background: #f8fbff;
}

.dashboard-guide-inline > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  color: #25466c;
  font-weight: 700;
  font-size: 14px;
}

.dashboard-guide-inline > summary::-webkit-details-marker {
  display: none;
}

.dashboard-guide-inline .guide-inline-caret {
  transition: transform 160ms ease;
}

.dashboard-guide-inline[open] .guide-inline-caret {
  transform: rotate(180deg);
}

.guide-inline-map {
  padding: 0 14px 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.guide-inline-map-item {
  border: 1px solid #d5e1f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px 12px;
}

.guide-inline-map-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #325378;
  margin-bottom: 3px;
}

.guide-inline-map-item strong {
  display: block;
  margin-bottom: 4px;
  color: #1c385a;
  font-size: 13px;
}

.guide-inline-map-item small {
  display: block;
  color: #3f6087;
  font-size: 12px;
  line-height: 1.4;
}

.guide-inline-map-item.map-top {
  border-color: #e8c2d1;
  background: linear-gradient(180deg, #fff8fb, #fff3f7);
}

.guide-inline-map-item.map-middle {
  border-color: #d8ddea;
  background: linear-gradient(180deg, #fbfdff, #f5f8fc);
}

.guide-inline-map-item.map-bottom {
  border-color: #bfe5d2;
  background: linear-gradient(180deg, #f4fff9, #effcf5);
}

.table-module-guide {
  margin-top: 10px;
  border: 1px solid #d2dfef;
  border-radius: 12px;
  background: #f8fbff;
  padding: 11px 12px;
}

.table-module-guide strong {
  display: block;
  margin-bottom: 4px;
  color: #1d395a;
  font-size: 15px;
}

.table-module-guide p {
  margin: 0;
  color: #3b5b82;
  font-size: 14px;
  line-height: 1.45;
}

/* Account settings subscription box: keep compact width, aligned with Manage Billing */
#panel-billing #entitlements-details.table-module-guide {
  width: min(100%, 460px);
  max-width: min(100%, 460px);
  margin-bottom: 10px;
}

#panel-billing #entitlements-details.table-module-guide p {
  white-space: nowrap;
}

#panel-billing #entitlements-details .billing-line {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  white-space: normal;
}

#panel-billing #entitlements-details .billing-k {
  color: #3b567a;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

#panel-billing #entitlements-details .billing-v {
  color: #1b3657;
  font-weight: 700;
  word-break: break-word;
  text-align: left;
  line-height: 1.25;
}

#panel-billing #entitlements-details .billing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 98px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #c0d3ea;
  background: #edf4fc;
}

#panel-billing #entitlements-details .billing-badge.is-good {
  border-color: #86d8b1;
  background: #e9fff3;
  color: #1d7750;
}

#panel-billing #entitlements-details .billing-badge.is-warning {
  border-color: #e8c88b;
  background: #fff9eb;
  color: #8f5f0f;
}

#panel-billing #entitlements-details .billing-badge.is-bad {
  border-color: #e0a0a0;
  background: #fff0f0;
  color: #9b2b2b;
}

#panel-billing #entitlements-details .billing-badge.is-neutral {
  border-color: #c0d3ea;
  background: #edf4fc;
  color: #2f4f76;
}

#panel-billing .calc-panel .asset-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 460px);
  max-width: min(100%, 460px);
}

#panel-billing .billing-timezone-row {
  width: min(100%, 460px);
  max-width: min(100%, 460px);
  margin: 10px 0 12px;
}

#panel-billing .billing-timezone-row label {
  display: block;
  margin-bottom: 6px;
  color: #2f4f76;
  font-size: 13px;
  font-weight: 700;
}

#panel-billing .billing-timezone-row select {
  width: 100%;
  border: 1px solid #bfd0e6;
  border-radius: 10px;
  background: #f9fcff;
  color: #17345a;
  font-size: 13px;
  padding: 8px 10px;
}

#panel-billing .billing-timezone-row p {
  margin: 6px 0 0;
  color: #5a7599;
  font-size: 12px;
}

#panel-billing .billing-profile-row {
  width: min(100%, 460px);
  max-width: min(100%, 460px);
  margin: 10px 0 14px;
}

#panel-billing .billing-profile-row h3 {
  margin: 0 0 10px;
  color: #1f3b60;
  font-size: 14px;
}

#panel-billing .billing-profile-grid {
  display: grid;
  gap: 6px;
}

#panel-billing .billing-profile-grid label {
  color: #2f4f76;
  font-size: 13px;
  font-weight: 700;
}

#panel-billing .billing-profile-grid select,
.profile-onboarding-grid select {
  width: 100%;
  border: 1px solid #bfd0e6;
  border-radius: 10px;
  background: #f9fcff;
  color: #17345a;
  font-size: 13px;
  padding: 8px 10px;
}

/* Searchable country combobox */
.country-combobox {
  position: relative;
  width: 100%;
}
.country-combobox .country-combobox-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
}
.country-combobox-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #bfd0e6;
  border-radius: 10px;
  background: #f9fcff;
  color: #17345a;
  font-size: 13px;
  padding: 8px 32px 8px 10px;
  outline: none;
}
.country-combobox-input:focus {
  border-color: #6aa7ff;
  box-shadow: 0 0 0 3px rgba(106, 167, 255, 0.18);
}
.country-combobox-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a7599;
}
.country-combobox-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
.country-combobox.is-open .country-combobox-toggle::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.country-combobox-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #bfd0e6;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 40, 70, 0.18);
  z-index: 10;
  padding: 4px;
}
.country-combobox-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #17345a;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.country-combobox-option:hover,
.country-combobox-option.is-active {
  background: #e6f0ff;
}
.country-combobox-option.is-selected {
  font-weight: 700;
}
.country-combobox-empty {
  padding: 10px;
  color: #5a7599;
  font-size: 13px;
  text-align: center;
}

#panel-billing #billing-profile-help {
  margin: 8px 0 0;
  color: #5a7599;
  font-size: 12px;
}

.profile-onboarding-card {
  width: min(100%, 460px);
}

.profile-onboarding-grid {
  padding: 14px 18px 8px;
  display: grid;
  gap: 6px;
}

.profile-onboarding-grid label {
  color: #2f4f76;
  font-size: 13px;
  font-weight: 700;
}

.profile-onboarding-actions {
  padding: 10px 18px 0;
  display: grid;
}

.profile-onboarding-save-btn {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  justify-content: center;
}

.profile-onboarding-help {
  margin: 12px 18px 4px;
  color: #5a7599;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.profile-onboarding-inline-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: #17345a;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.profile-onboarding-inline-link:hover,
.profile-onboarding-inline-link:focus-visible {
  color: #0f2846;
}

#panel-billing #manage-billing-btn,
#panel-billing #subscribe-monthly-btn,
#panel-billing #subscribe-annual-btn,
#panel-billing #update-plan-btn,
#panel-billing #cancel-plan-btn {
  width: 100%;
  min-width: 0;
}

#panel-billing #manage-billing-btn {
  grid-column: 1 / -1;
}

#billing-feedback-text {
  display: none !important;
}

@media (max-width: 780px) {
  #panel-billing #entitlements-details.table-module-guide {
    width: 100%;
    max-width: 100%;
  }

  #panel-billing #entitlements-details.table-module-guide p {
    white-space: normal;
  }

  #panel-billing #entitlements-details .billing-line {
    grid-template-columns: 124px minmax(0, 1fr);
    align-items: flex-start;
    gap: 8px;
  }

  #panel-billing .calc-panel .asset-actions {
    width: 100%;
  }

  #panel-billing .billing-timezone-row {
    width: 100%;
    max-width: 100%;
  }

  #panel-billing #manage-billing-btn,
  #panel-billing #subscribe-monthly-btn,
  #panel-billing #subscribe-annual-btn,
  #panel-billing #update-plan-btn,
  #panel-billing #cancel-plan-btn {
    width: 100%;
    min-width: 0;
  }
}

.portfolio-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.portfolio-head-actions .portfolio-add-btn,
.portfolio-head-actions .portfolio-reduce-cash-btn,
.portfolio-head-actions .portfolio-reset-btn,
.portfolio-head-actions .portfolio-currency-control {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  border-radius: 12px;
  min-height: 40px;
}

.portfolio-reset-btn {
  border: 1px solid #e6cdcd;
  background: #fdf6f6;
  color: #8a3a3a;
  cursor: pointer;
  padding: 8px 14px;
}

.portfolio-reset-btn:hover {
  border-color: #c14a4a;
  background: #c14a4a;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(193, 74, 74, 0.22), 0 8px 14px rgba(193, 74, 74, 0.18);
}

.portfolio-reset-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(193, 74, 74, 0.35);
}

.portfolio-currency-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #b9ccec;
  background: linear-gradient(180deg, #ffffff, #eef5ff);
  color: #27486d;
  padding: 8px 14px !important;
}

.portfolio-currency-control span {
  white-space: nowrap;
}

.portfolio-currency-select {
  border: 1px solid #c5d7ef;
  border-radius: 10px;
  background: #ffffff;
  color: #27486d;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 28px 6px 10px;
  min-height: 32px;
  cursor: pointer;
}

.portfolio-currency-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(95, 137, 196, 0.18);
}

.portfolio-reduce-cash-btn {
  border: 1px solid #d1deee;
  background: #f8fbff;
  color: #3f5779;
  cursor: pointer;
}

.portfolio-reduce-cash-btn:hover {
  box-shadow: 0 0 0 1px rgba(95, 137, 196, 0.22), 0 8px 14px rgba(18, 41, 70, 0.12);
}

.portfolio-currency-control:hover {
  box-shadow: 0 0 0 1px rgba(95, 137, 196, 0.22), 0 8px 14px rgba(18, 41, 70, 0.12);
}

@media (max-width: 780px) {
  .portfolio-head-actions {
    width: 100%;
    justify-content: flex-end;
  }
}


.zone-module-guide {
  margin-top: 12px;
  border: 1px solid #d2dfef;
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px 0 0;
}

.zone-module-guide h4 {
  margin: 0;
  padding: 0 14px 10px;
  color: #1d395a;
  font-size: 24px;
}

.zone-guide-subtitle {
  margin: 0;
  padding: 0 14px 6px;
  color: #456489;
  font-size: 13px;
}

.zone-guide-step {
  padding: 12px 14px 14px;
  border-top: 1px solid #deebf7;
}

.zone-guide-step:first-of-type {
  border-top: 0;
}

.zone-guide-row-title {
  margin: 0;
  padding: 0 0 10px;
  color: #27466b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.zone-guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-bottom: 12px;
}

.zone-guide-grid .guide-inline-execution {
  grid-column: 1 / -1;
}

.guide-inline-grid {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.guide-inline-card {
  border: 1px solid #d5e1f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.guide-inline-card strong {
  display: block;
  margin-bottom: 6px;
  color: #203a5b;
  font-size: 14px;
}

.guide-inline-card p {
  margin: 0;
  color: #445f80;
  font-size: 13px;
  line-height: 1.45;
}

.guide-inline-risk {
  border-color: #e8c2d1;
  background: linear-gradient(180deg, #fff8fb, #fff3f7);
}

.guide-inline-opportunity {
  border-color: #bfe5d2;
  background: linear-gradient(180deg, #f4fff9, #effcf5);
}

.guide-inline-execution {
  border-color: #bfd7ea;
  background: linear-gradient(180deg, #f7fbff, #f1f8ff);
}

.guide-inline-signals {
  border-color: #d6d9e8;
  background: linear-gradient(180deg, #fafbff, #f5f7fc);
}

@media (max-width: 900px) {
  .guide-inline-map {
    grid-template-columns: 1fr;
  }

  .guide-inline-grid {
    grid-template-columns: 1fr;
  }
}

.zone-guide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  width: 100%;
  justify-content: space-between;
}
.zone-guide-toggle::after {
  content: "\25B2";
  font-size: 10px;
  opacity: 0.5;
  transition: transform 200ms ease;
}
.zone-guide-body.is-collapsed + .zone-guide-toggle::after,
.zone-guide-toggle.is-collapsed::after {
  transform: rotate(180deg);
}
.zone-guide-body {
  transition: max-height 200ms ease, opacity 200ms ease;
  overflow: hidden;
}
.zone-guide-body.is-collapsed {
  display: none;
}

/* Global readability hardening — scoped to light mode only so dark mode overrides are not defeated */
html:not([data-theme="night"]) body {
  color: #13263f;
}

html:not([data-theme="night"]) h1,
html:not([data-theme="night"]) h2,
html:not([data-theme="night"]) h3,
html:not([data-theme="night"]) h4,
html:not([data-theme="night"]) h5,
html:not([data-theme="night"]) h6,
html:not([data-theme="night"]) strong,
html:not([data-theme="night"]) .brand-title,
html:not([data-theme="night"]) .card-head h2,
html:not([data-theme="night"]) .portfolio-head h2,
html:not([data-theme="night"]) .portfolio-trade-head,
html:not([data-theme="night"]) .active-trade-symbol,
html:not([data-theme="night"]) .guide-inline-card strong {
  color: #122740;
}

html:not([data-theme="night"]) p,
html:not([data-theme="night"]) small,
html:not([data-theme="night"]) label,
html:not([data-theme="night"]) span,
html:not([data-theme="night"]) .brand-sub,
html:not([data-theme="night"]) .hero p,
html:not([data-theme="night"]) .hero-sub,
html:not([data-theme="night"]) .meta-pill,
html:not([data-theme="night"]) .card-head p,
html:not([data-theme="night"]) .portfolio-head p,
html:not([data-theme="night"]) .asset-display-name,
html:not([data-theme="night"]) .portfolio-trade-meta,
html:not([data-theme="night"]) .portfolio-history-list,
html:not([data-theme="night"]) .close-trade-sub,
html:not([data-theme="night"]) .close-trade-input-row label,
html:not([data-theme="night"]) .risk-caption,
html:not([data-theme="night"]) .risk-breakdown-title,
html:not([data-theme="night"]) .risk-profit-note,
html:not([data-theme="night"]) .risk-price-line small,
html:not([data-theme="night"]) .portfolio-performance-top,
html:not([data-theme="night"]) .portfolio-performance-stats small,
html:not([data-theme="night"]) .portfolio-perf-trade-left small,
html:not([data-theme="night"]) .portfolio-perf-trade-right small,
html:not([data-theme="night"]) .portfolio-line-head,
html:not([data-theme="night"]) .portfolio-line-label,
html:not([data-theme="night"]) .execution-notice-item small,
html:not([data-theme="night"]) .trading-guide-head p,
html:not([data-theme="night"]) .trading-guide-panel p,
html:not([data-theme="night"]) .ai-modal-intro,
html:not([data-theme="night"]) .ai-modal-panel p,
html:not([data-theme="night"]) .ai-modal-footnote,
html:not([data-theme="night"]) .add-coin-subtitle,
html:not([data-theme="night"]) .active-trades-helper,
html:not([data-theme="night"]) .start-tracking-note,
html:not([data-theme="night"]) .start-field {
  color: #324c6e;
}

html:not([data-theme="night"]) .asset-row:first-child,
html:not([data-theme="night"]) .legend-asset-head,
html:not([data-theme="night"]) .asset-group-row,
html:not([data-theme="night"]) .execution-notices-head,
html:not([data-theme="night"]) .execution-notice-item strong,
html:not([data-theme="night"]) .symbol-field,
html:not([data-theme="night"]) .calc-panel h3 {
  color: #233f63;
}

html:not([data-theme="night"]) .asset-row-data > span:nth-child(2),
html:not([data-theme="night"]) .asset-row-data > span:nth-child(3),
html:not([data-theme="night"]) .asset-row-data > span:nth-child(4),
html:not([data-theme="night"]) .asset-row-data > span:nth-child(5),
html:not([data-theme="night"]) .asset-row-data > span:nth-child(6),
html:not([data-theme="night"]) .asset-row-data > span:nth-child(7) {
  color: #1f3a5a;
}

html:not([data-theme="night"]) .portfolio-range-btn,
html:not([data-theme="night"]) .portfolio-history-toggle,
html:not([data-theme="night"]) .ghost-btn,
html:not([data-theme="night"]) .danger-btn,
html:not([data-theme="night"]) .close-info-btn,
html:not([data-theme="night"]) .portfolio-privacy-pill,
html:not([data-theme="night"]) .portfolio-edit-btn,
html:not([data-theme="night"]) .portfolio-close-inline,
html:not([data-theme="night"]) .execution-notice-action,
html:not([data-theme="night"]) .add-coin-result-btn,
html:not([data-theme="night"]) .add-metal-btn,
html:not([data-theme="night"]) .add-coin-shortcuts button {
  color: #243f62;
  font-weight: 700;
}

html:not([data-theme="night"]) input,
html:not([data-theme="night"]) textarea,
html:not([data-theme="night"]) select,
html:not([data-theme="night"]) .add-coin-search-wrap input,
html:not([data-theme="night"]) .start-field input,
html:not([data-theme="night"]) .risk-input-wrap input,
html:not([data-theme="night"]) .close-trade-input-wrap input {
  color: #0f2440;
}

html:not([data-theme="night"]) .placeholder-row {
  color: #345071;
}

/* Final readability pass: stronger contrast + minimum legible sizing */
html {
  -webkit-text-size-adjust: 100%;
}

html:not([data-theme="night"]) body {
  color: #0f2238;
  line-height: 1.45;
}

small,
.asset-display-name,
.portfolio-line-label,
.portfolio-performance-stats small,
.risk-warning-note,
.trade-record-note,
.start-tracking-note,
.meta-pill,
.brand-sub,
.hero p,
.card-head p {
  font-size: 13px !important;
}

/* Preserve high contrast on dark onboarding/landing hero backgrounds. */
html:not([data-theme="night"]) #landing-intro .landing-trial-text {
  color: #ffffff !important;
  text-shadow: none !important;
}

html:not([data-theme="night"]) #landing-intro .landing-kicker,
html:not([data-theme="night"]) #landing-intro .landing-sub,
html:not([data-theme="night"]) .onboarding-hero .onboarding-eyebrow,
html:not([data-theme="night"]) .onboarding-hero .onboarding-copy p,
html:not([data-theme="night"]) .onboarding-hero .onboarding-status {
  color: #eef5ff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

html:not([data-theme="night"]) .asset-row:first-child,
html:not([data-theme="night"]) .asset-row,
html:not([data-theme="night"]) .legend-asset-head,
html:not([data-theme="night"]) .legend-asset-head-cols span,
html:not([data-theme="night"]) .asset-group-row,
html:not([data-theme="night"]) .asset-row-data > span,
html:not([data-theme="night"]) .asset-row-data > .sentiment-pill {
  color: #142e4b;
}

html:not([data-theme="night"]) .asset-row-data > span:nth-child(2),
html:not([data-theme="night"]) .asset-row-data > span:nth-child(3),
html:not([data-theme="night"]) .asset-row-data > span:nth-child(4),
html:not([data-theme="night"]) .asset-row-data > span:nth-child(5),
html:not([data-theme="night"]) .asset-row-data > span:nth-child(6),
html:not([data-theme="night"]) .asset-row-data > span:nth-child(7),
html:not([data-theme="night"]) .portfolio-trade-meta,
html:not([data-theme="night"]) .portfolio-line-head,
html:not([data-theme="night"]) .portfolio-performance-top,
html:not([data-theme="night"]) .execution-notice-item small,
html:not([data-theme="night"]) .risk-caption,
html:not([data-theme="night"]) .risk-breakdown-title,
html:not([data-theme="night"]) .close-trade-sub {
  color: #1e3d61;
}

html:not([data-theme="night"]) .portfolio-range-btn,
html:not([data-theme="night"]) .ghost-btn,
html:not([data-theme="night"]) .close-info-btn,
html:not([data-theme="night"]) .portfolio-history-toggle,
html:not([data-theme="night"]) .portfolio-privacy-pill,
html:not([data-theme="night"]) .portfolio-edit-btn,
html:not([data-theme="night"]) .portfolio-close-inline,
html:not([data-theme="night"]) .execution-notice-action {
  color: #1f3f63;
  font-weight: 700;
}

/* Keep executed notice pill readable despite global button text overrides */
html:not([data-theme="night"]) .execution-notice-action:disabled {
  color: #eef5ff;
  background: linear-gradient(180deg, #3b5f93, #2f507d);
  border-color: #6f95cb;
  opacity: 1;
}

html:not([data-theme="night"]) input,
html:not([data-theme="night"]) textarea,
html:not([data-theme="night"]) select,
html:not([data-theme="night"]) .symbol-field,
html:not([data-theme="night"]) .close-trade-input-row label,
html:not([data-theme="night"]) .risk-input-wrap label {
  color: #0f2640;
}

/* High-contrast WAIT pill */
html:not([data-theme="night"]) .suggestion-pill-wait {
  background: linear-gradient(180deg, #2e456d, #243a5d);
  border-color: #6f8fb8;
  color: #f4f8ff;
}

/* Improve readability for zone table header row */
html:not([data-theme="night"]) .legend-asset-head,
html:not([data-theme="night"]) .legend-asset-head-cols span,
html:not([data-theme="night"]) .legend-asset-head > span:first-child,
html:not([data-theme="night"]) .legend-asset-head > span:last-child {
  color: #eaf2ff;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Portfolio donut panel: restore light text on dark widgets */
html:not([data-theme="night"]) .portfolio-donut-inner .portfolio-donut-label {
  color: #111111;
}

html:not([data-theme="night"]) .portfolio-donut-inner .portfolio-donut-center-copy {
  color: #5f789d;
}

html:not([data-theme="night"]) .portfolio-donut-inner #portfolio-donut-change {
  color: #111111;
}

html:not([data-theme="night"]) .portfolio-donut-inner #portfolio-donut-change.is-positive {
  color: #157f4a;
}

html:not([data-theme="night"]) .portfolio-donut-inner #portfolio-donut-change.is-negative {
  color: #c93c4f;
}

html:not([data-theme="night"]) .portfolio-metrics-grid small {
  color: #556f92;
}

html:not([data-theme="night"]) .portfolio-metrics-grid strong {
  color: #111111;
}

html:not([data-theme="night"]) .portfolio-metrics-grid .positive strong {
  color: #157f4a;
}

html:not([data-theme="night"]) .portfolio-metrics-grid .negative strong {
  color: #c93c4f;
}

/* Asset search suggestions: light theme readability */
html:not([data-theme="night"]) .asset-suggestions {
  border-color: #ccd9ea;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(18, 41, 70, 0.12);
}

html:not([data-theme="night"]) .suggestion-item {
  border-top-color: #e2ebf6;
  color: #1f3656;
  background: #ffffff;
}

html:not([data-theme="night"]) .suggestion-symbol {
  color: #183253;
  font-weight: 800;
}

html:not([data-theme="night"]) .suggestion-name {
  color: #4f6787;
}

html:not([data-theme="night"]) .suggestion-item:hover,
html:not([data-theme="night"]) .suggestion-item:focus-visible {
  background: #edf5ff;
}

.asset-suggestions::-webkit-scrollbar {
  width: 10px;
}

.asset-suggestions::-webkit-scrollbar-track {
  background: #f2f7ff;
  border-radius: 10px;
}

.asset-suggestions::-webkit-scrollbar-thumb {
  background: #b9cce4;
  border-radius: 10px;
  border: 2px solid #f2f7ff;
}

/* Force light suggestions panel (highest priority) */
html:not([data-theme="night"]) .symbol-field .asset-suggestions {
  border: 1px solid #ccd9ea;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(18, 41, 70, 0.12);
}

html:not([data-theme="night"]) .symbol-field .asset-suggestions .suggestion-item {
  border-top: 1px solid #e2ebf6;
  background: #ffffff;
  color: #1f3656;
}

html:not([data-theme="night"]) .symbol-field .asset-suggestions .suggestion-symbol {
  color: #183253;
  font-weight: 800;
}

html:not([data-theme="night"]) .symbol-field .asset-suggestions .suggestion-name {
  color: #4f6787;
}

html:not([data-theme="night"]) .symbol-field .asset-suggestions .suggestion-item:hover,
html:not([data-theme="night"]) .symbol-field .asset-suggestions .suggestion-item:focus-visible {
  background: #edf5ff;
}

/* Portfolio performance pending card: force readable contrast on dark panel */
html:not([data-theme="night"]) .portfolio-performance-pending {
  background: #162845;
  border-color: #335382;
  color: #b8cdee;
}

html:not([data-theme="night"]) .portfolio-performance-pending strong {
  color: #e9f2ff;
}

html:not([data-theme="night"]) .portfolio-performance-pending small {
  color: #b8cdee;
}

/* Keep asset table rows vertically consistent even when "More" toggle appears. */
.asset-row.asset-row-data {
  min-height: 64px;
}

.asset-row-data .asset-name-cell {
  min-height: 40px;
  justify-content: center;
}

@media (max-width: 900px) {
  .landing-gallery {
    grid-template-columns: 1fr;
  }

  .onboarding-copy h3 {
    font-size: 24px;
  }

  .onboarding-ctas {
    align-items: stretch;
  }

  .landing-ctas {
    align-items: stretch;
  }
}

/* Mobile fit guardrails */
@media (max-width: 780px) {
  html,
  body {
    overflow-x: hidden;
  }

  .market-cycle-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 0 10px;
    gap: 8px;
  }

  .market-cycle-tab {
    width: auto;
    padding: 8px 12px;
  }

  .page {
    width: calc(100% - 16px) !important;
    margin: calc(var(--mega-nav-height) + 8px) auto 24px !important;
  }

  .top-nav {
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .mega-nav-tabs,
  .mega-nav-inner > .mega-nav-right {
    display: none !important;
  }

  .mega-nav-hamburger {
    display: flex;
  }

  .mega-nav-inner {
    padding: 0 16px;
  }

  .mega-nav-mobile-menu {
    display: none !important;
  }

  .mega-nav.is-mobile-open .mega-nav-mobile-menu {
    display: flex !important;
  }

  .dashboard-shell {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dashboard-side-nav {
    position: static;
  }

  .right-meta {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .brand-logo {
    width: 98px;
    height: 38px;
    border-radius: 8px;
    padding: 2px 6px;
  }

  .meta-pill {
    width: 100%;
    text-align: center;
  }

  #login-btn,
  #billing-btn,
  #logout-btn {
    flex: 1 1 calc(33.33% - 6px);
    text-align: center;
  }

  .arena {
    min-width: 100% !important;
  }

  .card-head {
    padding: 12px;
  }

  .card-head h2 {
    font-size: 18px;
  }

  .hero h1 {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.12;
  }

  .asset-sentiment-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .asset-row {
    min-width: 0 !important;
  }

  .asset-row.asset-row-data {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px 10px !important;
    padding: 10px 12px !important;
    align-items: start;
    min-height: auto !important;
  }

  .asset-row-data > span:nth-child(1) {
    grid-column: 1 / 2;
  }

  .asset-row-data > span:nth-child(7) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
    align-self: start;
    text-align: center;
  }

  .asset-row-data > span:nth-child(2),
  .asset-row-data > span:nth-child(3),
  .asset-row-data > span:nth-child(4),
  .asset-row-data > span:nth-child(5),
  .asset-row-data > span:nth-child(6),
  .asset-row-data > span:nth-child(8) {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left !important;
  }

  .asset-row-data > span:nth-child(2)::before,
  .asset-row-data > span:nth-child(3)::before,
  .asset-row-data > span:nth-child(4)::before,
  .asset-row-data > span:nth-child(5)::before,
  .asset-row-data > span:nth-child(6)::before,
  .asset-row-data > span:nth-child(8)::before {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c83a5;
  }

  .asset-row-data > span:nth-child(2)::before { content: "Price"; }
  .asset-row-data > span:nth-child(3)::before { content: "Sentiment"; }
  .asset-row-data > span:nth-child(4)::before { content: "Sentiment Signal"; }
  .asset-row-data > span:nth-child(5)::before { content: "Technical Signal"; }
  .asset-row-data > span:nth-child(6)::before { content: "AI Suggestion"; }
  .asset-row-data > span:nth-child(8)::before { content: "Actions"; }

  .asset-row-data .asset-action-cell {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
  }

  .asset-row-data .asset-remove-cell {
    justify-content: flex-end;
  }

  .asset-row-data .row-hold-actions {
    display: none !important;
  }

  .asset-sentiment-list.asset-table-advanced-hidden .asset-row > span:nth-child(4),
  .asset-sentiment-list.asset-table-advanced-hidden .asset-row > span:nth-child(5) {
    display: none !important;
  }
}

/* ── Thematic Research placeholder ── */
.thematic-research-placeholder {
  padding: 60px 24px;
  text-align: center;
  color: #60718b;
  border: 1px dashed rgba(143, 154, 189, 0.35);
  border-radius: 14px;
  margin: 20px 16px;
  background: rgba(248, 251, 255, 0.6);
}

.thematic-research-placeholder h3 {
  color: #2b3f5e;
  margin: 0 0 8px;
  font-size: 18px;
}

.thematic-research-placeholder p {
  margin: 0;
  font-size: 14px;
}

/* ── Theme toggle button ── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #d8e2ef;
  border-radius: 999px;
  background: #f7faff;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.theme-toggle-btn:hover {
  border-color: #89aeda;
  background: #edf5ff;
  box-shadow: 0 0 0 3px rgba(129, 167, 218, 0.12);
}

.theme-icon-moon { display: inline; }
.theme-icon-sun  { display: none; }

[data-theme="night"] .theme-icon-moon { display: none; }
[data-theme="night"] .theme-icon-sun  { display: inline; }


/* ══════════════════════════════════════════════════════════════
   DARK THEME — Complete Overhaul
   Palette:
     --bg-primary:    #0d1117   (page bg)
     --bg-secondary:  #161b22   (cards)
     --bg-tertiary:   #1c2333   (nested panels)
     --bg-elevated:   #21262d   (hover, dropdowns)
     --bg-input:      #1c2333   (inputs)
     --text-primary:  #e6edf3   (body text)
     --text-secondary:#8b949e   (subtitles)
     --text-muted:    #6e7681   (placeholders)
     --border-default:#30363d   (borders)
     --accent-primary:#58a6ff   (interactive blue)
     --accent-success:#3fb950   (positive)
     --accent-danger: #f85149   (negative)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Root Variables ── */
[data-theme="night"] {
  --bg-0: #0d1117;
  --text: #e6edf3;
  --muted: #8b949e;
  color-scheme: dark;
}

/* ── 2. Base & Background ── */
html[data-theme="night"],
html[data-theme="night"] body {
  color: #e6edf3;
  background: #0d1117;
}

[data-theme="night"] .app-bg {
  background: #0d1117;
}

[data-theme="night"] .app-bg::after {
  opacity: 0;
}

[data-theme="night"] ::selection {
  background: rgba(88, 166, 255, 0.3);
  color: #e6edf3;
}

/* ── Ticker Bar ── */
[data-theme="night"] .ticker-wrap {
  border-bottom-color: #30363d;
  background: #161b22;
  backdrop-filter: none;
  box-shadow: none;
}

[data-theme="night"] .ticker-item {
  border-color: #30363d;
  background: #161b22;
  color: #e6edf3;
  box-shadow: none;
}

[data-theme="night"] .ticker-symbol { color: #e6edf3; }
[data-theme="night"] .ticker-price  { color: #e6edf3; }

[data-theme="night"] .ticker-change.up {
  color: #3fb950;
  border-color: #2a5a3a;
  background: #1a3a2a;
}

[data-theme="night"] .ticker-change.down {
  color: #f85149;
  border-color: #5a2a2a;
  background: #3a1a1a;
}

/* ── Top Navigation ── */
[data-theme="night"] .top-nav {
  border-color: #30363d;
  background: #161b22;
  backdrop-filter: none;
  box-shadow: none;
}

[data-theme="night"] .brand-title { color: #e6edf3; }
[data-theme="night"] .brand-sub   { color: #8b949e; }

[data-theme="night"] .brand-logo {
  background: #ffffff;
  box-shadow: none;
}

[data-theme="night"] .locale-wrap,
[data-theme="night"] .locale-wrap span,
[data-theme="night"] #locale-label,
[data-theme="night"] #locale-label-mobile {
  border-color: #30363d;
  background: transparent;
  color: #e6edf3 !important;
}
[data-theme="night"] .locale-wrap {
  background: #21262d;
}

[data-theme="night"] .locale-select,
[data-theme="night"] select.locale-select {
  color: #e6edf3 !important;
  background: #21262d !important;
  border-color: #30363d !important;
}
[data-theme="night"] .locale-select option {
  color: #e6edf3;
  background: #21262d;
}

[data-theme="night"] .meta-pill,
[data-theme="night"] .meta-pill span,
[data-theme="night"] #updated-label,
[data-theme="night"] #updated-date {
  border-color: #30363d;
  color: #c9d1d9 !important;
}
[data-theme="night"] .meta-pill {
  background: #161b22;
}

[data-theme="night"] .logout-btn {
  border-color: #30363d;
  background: transparent;
  color: #e6edf3;
}

[data-theme="night"] .theme-toggle-btn {
  border-color: #30363d;
  background: #21262d;
  color: #e6edf3;
}

[data-theme="night"] .theme-toggle-btn:hover {
  border-color: #58a6ff;
  background: #21262d;
}

/* ── Hero Section ── */
[data-theme="night"] .hero h1 { color: #e6edf3; }
[data-theme="night"] .hero p   { color: #8b949e; }

[data-theme="night"] .hero h1 span {
  background: linear-gradient(90deg, #58a6ff 0%, #a5f3fc 52%, #f0a030 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Arena Cards ── */
[data-theme="night"] .arena {
  border-color: #30363d;
  background: #161b22;
  color: #e6edf3;
}

[data-theme="night"] .arena small { color: #8b949e; }
[data-theme="night"] .arena strong { color: #e6edf3; }

[data-theme="night"] .arena.active {
  border-color: #58a6ff;
  background: #1f3a5f;
  color: #e6edf3;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.2);
}

/* ── Sidebar Tabs ── */
[data-theme="night"] .market-cycle-tab {
  border-color: transparent;
  background: transparent;
  color: #8b949e;
}

[data-theme="night"] .market-cycle-tab:hover,
[data-theme="night"] .market-cycle-tab:focus-visible {
  border-color: #30363d;
  background: #21262d;
  color: #e6edf3;
  box-shadow: none;
  outline: none;
}

[data-theme="night"] .market-cycle-tab.is-active {
  border-color: #58a6ff;
  border-left: 3px solid #58a6ff;
  background: #1f3a5f;
  color: #58a6ff;
}

[data-theme="night"] .market-cycle-tab.has-alert {
  border-color: #f85149;
  background: #3a1a1a;
  color: #f85149;
}

[data-theme="night"] .market-cycle-tab-number {
  background: #21262d;
  color: #8b949e;
}

[data-theme="night"] .market-cycle-tab.is-active .market-cycle-tab-number {
  background: #58a6ff;
  color: #0d1117;
}

/* ── Dashboard Panels ── */
[data-theme="night"] .dashboard {
  border-color: #30363d;
  background: #161b22;
  box-shadow: none;
}

[data-theme="night"] .dashboard.is-selected {
  border-color: #30363d;
  box-shadow: none;
}

[data-theme="night"] .card-head {
  background: #161b22;
  border-color: #30363d;
}

[data-theme="night"] .card-head h2,
[data-theme="night"] .portfolio-head h2 { color: #e6edf3; }
[data-theme="night"] .card-head p,
[data-theme="night"] .portfolio-head p  { color: #8b949e; }

[data-theme="night"] .calc-panel { background: #161b22; }

[data-theme="night"] .calc-panel h3,
[data-theme="night"] .portfolio-line-head span:first-child {
  color: #e6edf3;
}

/* ── Asset Table ── */
[data-theme="night"] .asset-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: #8b949e;
}

[data-theme="night"] .asset-row:first-child {
  color: #8b949e;
  background: #21262d;
  border-color: #30363d;
}

[data-theme="night"] .asset-row-data:hover,
[data-theme="night"] .asset-row-data:focus-visible {
  background: #21262d;
}

[data-theme="night"] .asset-group-row {
  color: #8b949e;
  background: #1c2333;
  border-top-color: #30363d;
  border-bottom-color: #30363d;
}

[data-theme="night"] .asset-display-name { color: #8b949e; }
[data-theme="night"] .asset-symbol { color: #e6edf3; }

[data-theme="night"] .signal.stat-buy strong  { color: #3fb950; }
[data-theme="night"] .signal.stat-sell strong { color: #f85149; }

/* ── Asset Advanced Toggle ── */
[data-theme="night"] .asset-advanced-toggle-btn { color: #8b949e; }

[data-theme="night"] .asset-advanced-toggle-switch {
  background: #30363d;
}

[data-theme="night"] .asset-advanced-toggle-switch::after {
  background: #8b949e;
}

[data-theme="night"] .asset-advanced-toggle-btn[aria-pressed="true"] .asset-advanced-toggle-switch {
  background: #58a6ff;
}

[data-theme="night"] .asset-advanced-toggle-btn[aria-pressed="true"] .asset-advanced-toggle-switch::after {
  background: #e6edf3;
}

/* ── Asset Suggestions Dropdown ── */
[data-theme="night"] .symbol-field .asset-suggestions {
  border: 1px solid #30363d !important;
  background: #1c2333 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="night"] .suggestion-item {
  border-top: 1px solid #21262d !important;
  background: #1c2333 !important;
  color: #e6edf3 !important;
}

[data-theme="night"] .suggestion-item:hover {
  background: #21262d !important;
}

[data-theme="night"] .suggestion-symbol { color: #e6edf3 !important; }
[data-theme="night"] .suggestion-name   { color: #8b949e !important; }

/* ── Scrollbars ── */
[data-theme="night"] .asset-suggestions::-webkit-scrollbar-track {
  background: #0d1117;
}

[data-theme="night"] .asset-suggestions::-webkit-scrollbar-thumb {
  background: #30363d;
  border-color: #0d1117;
}

/* ── Legend / Zone Table ── */
[data-theme="night"] .legend-asset-head {
  border-bottom-color: #30363d;
  background: #21262d;
  color: #8b949e;
}

[data-theme="night"] .legend-asset-head-cols span,
[data-theme="night"] .legend-asset-head > span:first-child,
[data-theme="night"] .legend-asset-head > span:last-child {
  color: #8b949e;
}

[data-theme="night"] .legend-row {
  background: #161b22 !important;
  border-top-color: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="night"] .legend-row:hover {
  background: #1c2333 !important;
}

[data-theme="night"] .zone-label {
  color: #e6edf3;
}

[data-theme="night"] .zone-label small {
  color: #8b949e;
}

[data-theme="night"] .zone-info-btn {
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
}

[data-theme="night"] .coin-cell {
  background: rgba(13, 17, 23, 0.4);
}

[data-theme="night"] .coin-type-col {
  border-right-color: #30363d;
}

[data-theme="night"] .coin-col-empty {
  color: #30363d;
}

[data-theme="night"] .coin {
  border-color: #30363d;
  background: #21262d;
  color: #e6edf3;
  border-radius: 4px;
}

[data-theme="night"] .coin:hover {
  border-color: #58a6ff;
  background: #21262d;
  color: #e6edf3;
}

[data-theme="night"] .coin.trade-on {
  border-color: #3fb950;
  background: #1a3a2a;
  color: #3fb950;
}

[data-theme="night"] .signal-cell { color: #8b949e; }

/* ── Execution Notices ── */
[data-theme="night"] .execution-notices {
  border-color: #30363d;
  background: #161b22;
}

[data-theme="night"] .execution-notices-head,
[data-theme="night"] .execution-notice-item strong { color: #e6edf3; }

[data-theme="night"] .execution-notice-item { border-color: #30363d; }

[data-theme="night"] .execution-notice-action {
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
}

/* ── Portfolio ── */
[data-theme="night"] .portfolio-head,
[data-theme="night"] .portfolio-performance-body,
[data-theme="night"] .portfolio-donut-card,
[data-theme="night"] .portfolio-line-card,
[data-theme="night"] .portfolio-trade,
[data-theme="night"] .active-trade-row,
[data-theme="night"] .close-trade-card,
[data-theme="night"] .dashboard-trade-card,
[data-theme="night"] .info-card {
  background: #161b22;
  border-color: #30363d;
  box-shadow: none;
}

[data-theme="night"] .portfolio-performance-banner {
  background: #1c2333;
  border-color: #30363d;
}

[data-theme="night"] .portfolio-performance-stats article {
  background: #1c2333;
  border-color: #30363d;
}

[data-theme="night"] .portfolio-performance-stats article.wins {
  border-color: #2a5a3a;
  background: #1a3a2a;
}

[data-theme="night"] .portfolio-performance-stats article.losses {
  border-color: #5a2a2a;
  background: #3a1a1a;
}

[data-theme="night"] .portfolio-performance-stats article.avg {
  border-color: #30363d;
  background: #21262d;
}

[data-theme="night"] .portfolio-trade-meta,
[data-theme="night"] .portfolio-history-list,
[data-theme="night"] .close-trade-sub,
[data-theme="night"] .close-trade-metrics span { color: #8b949e; }

[data-theme="night"] .portfolio-line-chart {
  background:
    linear-gradient(rgba(48, 54, 61, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 54, 61, 0.3) 1px, transparent 1px),
    #0d1117;
}

[data-theme="night"] .portfolio-long-pill,
[data-theme="night"] .portfolio-pct-pill.up,
[data-theme="night"] .portfolio-action-buy,
[data-theme="night"] .risk-submit-btn,
[data-theme="night"] .start-type-btn.active {
  border-color: #2a5a3a;
  background: #1a3a2a;
  color: #3fb950;
}

[data-theme="night"] .portfolio-pct-pill.down,
[data-theme="night"] .portfolio-action-sell,
[data-theme="night"] .danger-btn {
  border-color: #5a2a2a;
  background: #3a1a1a;
  color: #f85149;
}

[data-theme="night"] .close-trade-long-badge,
[data-theme="night"] .risk-zone-badge,
[data-theme="night"] .active-trade-side {
  border-color: #30363d;
  background: #21262d;
  color: #58a6ff;
}

[data-theme="night"] .active-trade-symbol { color: #e6edf3; }
[data-theme="night"] .active-trade-row-meta { color: #8b949e; }
[data-theme="night"] .active-trade-row-head { color: #8b949e; }

/* ── Portfolio Tabs ── */
[data-theme="night"] .portfolio-tab {
  border-color: #30363d;
  background: #1c2333;
  color: #8b949e;
}

[data-theme="night"] .portfolio-tab.active {
  border-color: #58a6ff;
  background: #1f3a5f;
  color: #58a6ff;
}

/* ── Buttons (generic) ── */
[data-theme="night"] .row-remove-btn {
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
}

[data-theme="night"] .portfolio-history-toggle,
[data-theme="night"] .ghost-btn,
[data-theme="night"] .add-asset-btn,
[data-theme="night"] .reset-assets-btn,
[data-theme="night"] .portfolio-add-btn,
[data-theme="night"] .add-coin-shortcuts button,
[data-theme="night"] .close-info-btn,
[data-theme="night"] .ai-info-icon-btn,
[data-theme="night"] .portfolio-privacy-pill {
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
}

[data-theme="night"] .start-type-btn {
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
}

/* ── Button hover states ── */
[data-theme="night"] .logout-btn:hover,
[data-theme="night"] .row-remove-btn:hover,
[data-theme="night"] .row-quick-sell:hover,
[data-theme="night"] .active-close-btn:hover,
[data-theme="night"] .danger-btn:hover,
[data-theme="night"] .portfolio-action-sell:hover,
[data-theme="night"] .add-asset-btn:hover,
[data-theme="night"] .risk-submit-btn:hover:not(:disabled),
[data-theme="night"] .portfolio-action-buy:hover,
[data-theme="night"] .row-quick-buy:hover,
[data-theme="night"] .portfolio-add-btn:hover,
[data-theme="night"] .add-coin-result-btn:hover,
[data-theme="night"] .add-metal-btn:hover,
[data-theme="night"] .start-type-btn:hover,
[data-theme="night"] .reset-assets-btn:hover,
[data-theme="night"] .ghost-btn:hover,
[data-theme="night"] .row-quick-close:hover,
[data-theme="night"] .portfolio-history-toggle:hover,
[data-theme="night"] .close-info-btn:hover,
[data-theme="night"] .portfolio-privacy-pill:hover,
[data-theme="night"] .ai-info-icon-btn:hover,
[data-theme="night"] .add-coin-shortcuts button:hover {
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.2);
  border-color: #58a6ff;
}

/* ── Inputs ── */
[data-theme="night"] .risk-input-wrap input,
[data-theme="night"] .close-trade-input-wrap input,
[data-theme="night"] .start-field input,
[data-theme="night"] .symbol-field input,
[data-theme="night"] .calc-grid input,
[data-theme="night"] .add-coin-search-wrap input {
  border-color: #30363d;
  background: #21262d;
  color: #e6edf3;
}

[data-theme="night"] .risk-input-wrap input::placeholder,
[data-theme="night"] .close-trade-input-wrap input::placeholder,
[data-theme="night"] .start-field input::placeholder,
[data-theme="night"] .symbol-field input::placeholder,
[data-theme="night"] .calc-grid input::placeholder,
[data-theme="night"] .add-coin-search-wrap input::placeholder {
  color: #6e7681;
}

[data-theme="night"] .risk-input-wrap input:focus,
[data-theme="night"] .close-trade-input-wrap input:focus,
[data-theme="night"] .start-field input:focus,
[data-theme="night"] .symbol-field input:focus,
[data-theme="night"] .calc-grid input:focus,
[data-theme="night"] .add-coin-search-wrap input:focus {
  border-color: #58a6ff;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15);
}

[data-theme="night"] .symbol-field-label { color: #8b949e; }
[data-theme="night"] .symbol-search-icon { color: #6e7681; }
[data-theme="night"] .symbol-input-wrap:focus-within .symbol-search-icon { color: #58a6ff; }
[data-theme="night"] .symbol-field #asset-symbol { border-color: #30363d; background: #21262d; color: #e6edf3; }
[data-theme="night"] .symbol-field #asset-symbol::placeholder { color: #6e7681; }
[data-theme="night"] .symbol-field #asset-symbol:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.15); }

/* ── Add Coin / Add Metals ── */
[data-theme="night"] .add-coin-result-btn {
  background: #21262d;
  border-color: #30363d;
  color: #e6edf3;
}

[data-theme="night"] .add-coin-result-btn strong { color: #e6edf3; }
[data-theme="night"] .add-coin-result-btn small  { color: #8b949e; }

[data-theme="night"] .add-coin-subtitle,
[data-theme="night"] .active-trades-helper,
[data-theme="night"] .start-tracking-note { color: #8b949e; }

/* ── Risk & Chart ── */
[data-theme="night"] .risk-step {
  border-color: #30363d;
  background: #1c2333;
  color: #8b949e;
}

[data-theme="night"] .risk-tab {
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
}

[data-theme="night"] .risk-tab.active {
  border-color: #3fb950;
  background: #1a3a2a;
  color: #3fb950;
}

[data-theme="night"] .risk-warning-note,
[data-theme="night"] .trade-record-note {
  border-color: #d29922;
  background: #2a1f00;
  color: #d29922;
}

[data-theme="night"] .btc-chart {
  background:
    linear-gradient(rgba(48, 54, 61, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 54, 61, 0.3) 1px, transparent 1px),
    #161b22;
}

[data-theme="night"] .btc-chart-title,
[data-theme="night"] .risk-chart-head,
[data-theme="night"] .close-trade-metrics div,
[data-theme="night"] .start-units-box { color: #8b949e; }

/* ── Risk Modal ── */
[data-theme="night"] .info-modal {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

[data-theme="night"] .info-head {
  border-bottom-color: #30363d;
  background: #161b22;
}

[data-theme="night"] .info-head h3,
[data-theme="night"] .close-trade-card .info-head h3 { color: #e6edf3; }

[data-theme="night"] .trading-guide-card,
[data-theme="night"] .ai-modal-card,
[data-theme="night"] .active-trades-card,
[data-theme="night"] .risk-card,
[data-theme="night"] .add-coin-card,
[data-theme="night"] .add-metals-card,
[data-theme="night"] .start-tracking-card {
  background: #161b22;
  border-color: #30363d;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

[data-theme="night"] .close-info-btn {
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
}

[data-theme="night"] .close-info-btn:hover { color: #e6edf3; }

[data-theme="night"] .trading-guide-panel,
[data-theme="night"] .trading-guide-panel-accent,
[data-theme="night"] .ai-modal-panel,
[data-theme="night"] .btc-chart-box,
[data-theme="night"] .risk-chart-box,
[data-theme="night"] .risk-neutral-panel,
[data-theme="night"] .risk-targets-note,
[data-theme="night"] .close-trade-metrics,
[data-theme="night"] .start-units-box {
  border-color: #30363d;
  background: #1c2333;
}

[data-theme="night"] .trading-guide-head p,
[data-theme="night"] .trading-guide-panel p,
[data-theme="night"] .ai-modal-intro,
[data-theme="night"] .ai-modal-panel p,
[data-theme="night"] .ai-modal-list,
[data-theme="night"] .ai-modal-footnote { color: #8b949e; }

[data-theme="night"] .ai-modal-list li b,
[data-theme="night"] .ai-modal-intro b,
[data-theme="night"] .ai-modal-footnote b { color: #e6edf3; }

[data-theme="night"] .trading-guide-panel-accent ul li {
  color: #8b949e !important;
}

[data-theme="night"] .trading-guide-panel-accent ul li b,
[data-theme="night"] .trading-guide-panel-accent ul li strong {
  color: #b0bec5 !important;
}

/* ── Risk Modal: Backtest Snapshot ── */
[data-theme="night"] .risk-backtest-box {
  border-color: #30363d;
  background: #1c2333;
  border-radius: 8px;
}

[data-theme="night"] .risk-backtest-head strong { color: #e6edf3; }
[data-theme="night"] .risk-backtest-head small  { color: #8b949e; }

[data-theme="night"] .risk-backtest-row-label {
  border-color: #30363d;
  background: #21262d;
}

[data-theme="night"] .risk-backtest-row-label strong { color: #e6edf3; }
[data-theme="night"] .risk-backtest-row-label small  { color: #6e7681; }

[data-theme="night"] .risk-backtest-row-label.is-current {
  border-color: #2a5a3a;
  background: #1a3a2a;
}

[data-theme="night"] .risk-backtest-row-label.is-current strong { color: #3fb950; }
[data-theme="night"] .risk-backtest-row-label.is-current small  { color: #6e7681; }

[data-theme="night"] .risk-backtest-card {
  border-color: #30363d;
  background: #21262d;
}

[data-theme="night"] .risk-backtest-card span  { color: #8b949e; }
[data-theme="night"] .risk-backtest-card strong { color: #e6edf3; }
[data-theme="night"] .risk-backtest-card small  { color: #8b949e; }

[data-theme="night"] .risk-backtest-card.is-positive {
  background: #1a3a2a;
  border-color: #2a5a3a;
}

[data-theme="night"] .risk-backtest-card.is-positive strong { color: #3fb950; }

[data-theme="night"] .risk-backtest-card.is-positive span,
[data-theme="night"] .risk-backtest-card.is-positive small { color: #8b949e; }

[data-theme="night"] .risk-backtest-card.is-negative {
  background: #3a1a1a;
  border-color: #5a2a2a;
}

[data-theme="night"] .risk-backtest-card.is-negative strong { color: #f85149; }

[data-theme="night"] .risk-backtest-card.is-negative span,
[data-theme="night"] .risk-backtest-card.is-negative small { color: #8b949e; }

[data-theme="night"] .risk-backtest-card.is-na {
  background: #21262d;
  border-color: #30363d;
}

[data-theme="night"] .risk-backtest-card.is-na strong { color: #6e7681; }

/* ── Risk Modal: Entry Breakdown ── */
[data-theme="night"] #risk-modal .risk-breakdown {
  border-color: #30363d;
  background: #1c2333;
  border-radius: 8px;
}

[data-theme="night"] #risk-modal .risk-breakdown::before {
  background:
    linear-gradient(rgba(48, 54, 61, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 54, 61, 0.2) 1px, transparent 1px);
}

[data-theme="night"] #risk-modal .risk-step {
  background: transparent !important;
  color: #8b949e !important;
}

[data-theme="night"] #risk-modal .risk-step-amount {
  color: #e6edf3 !important;
}

[data-theme="night"] #risk-modal .risk-step-bar {
  border-color: rgba(48, 54, 61, 0.6);
  box-shadow: none;
}

[data-theme="night"] #risk-modal .risk-step-label-title { color: #e6edf3; }
[data-theme="night"] #risk-modal .risk-step-label-status { color: #6e7681; }

[data-theme="night"] #risk-modal .risk-step-tag {
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
}

[data-theme="night"] #risk-modal .risk-step-current {
  border-color: #58a6ff !important;
  background: #1f3a5f !important;
  box-shadow: none !important;
}

[data-theme="night"] #risk-modal .risk-step-executed {
  border-color: #3fb950 !important;
  background: #1a3a2a !important;
}

[data-theme="night"] #risk-modal .risk-step-next {
  border-color: #30363d !important;
  background: #1c2333 !important;
}

/* ── Risk Modal: Asset & Price ── */
[data-theme="night"] .risk-asset-line strong { color: #e6edf3; }
[data-theme="night"] .risk-price-line strong { color: #e6edf3; }
[data-theme="night"] .risk-price-line small  { color: #8b949e; }

[data-theme="night"] .risk-caption { color: #8b949e; }
[data-theme="night"] .risk-profit-note { color: #8b949e; }
[data-theme="night"] .risk-breakdown-title { color: #c9d8ef; border-left-color: #5a9ae0; }

/* ── Risk Zone Badges (colored) ── */
[data-theme="night"] .risk-zone-badge.risk-zone-hot {
  background: #3a1a1a;
  border-color: #5a2a2a;
  color: #f85149;
}

[data-theme="night"] .risk-zone-badge.risk-zone-caution {
  background: #1f3a5f;
  border-color: #30363d;
  color: #58a6ff;
}

[data-theme="night"] .risk-zone-badge.risk-zone-buy {
  background: #1a3a2a;
  border-color: #2a5a3a;
  color: #3fb950;
}

[data-theme="night"] .risk-zone-badge.risk-zone-neutral {
  background: #21262d;
  border-color: #30363d;
  color: #8b949e;
}

/* ── Risk Modal: Form section ── */
[data-theme="night"] .risk-input-wrap label { color: #e6edf3; }
[data-theme="night"] .risk-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Toast ── */
[data-theme="night"] .watchlist-toast {
  border-color: #30363d;
  color: #e6edf3;
  background: #1c2333;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ── Thematic Research Placeholder ── */
[data-theme="night"] .thematic-research-placeholder {
  border-color: #30363d;
  background: #1c2333;
  color: #8b949e;
}

[data-theme="night"] .thematic-research-placeholder h3 { color: #e6edf3; }

/* ── Info Trigger ── */
[data-theme="night"] .info-trigger {
  border-bottom-color: #30363d;
  background: #1c2333;
  color: #8b949e;
}

[data-theme="night"] .info-trigger:hover {
  color: #e6edf3;
  background: #21262d;
}

/* ── Exposure / Analysis bars ── */
[data-theme="night"] .analysis-bar,
[data-theme="night"] .analysis-grid article {
  border-color: #30363d;
  background: #161b22;
  box-shadow: none;
}

[data-theme="night"] .bar-track {
  border-color: #30363d;
  background: #30363d;
}

[data-theme="night"] .analysis-bar .bar-label { color: #e6edf3; }
[data-theme="night"] .analysis-bar .bar-score { color: #e6edf3; }

/* ── Zone Guide: How to Use This Dashboard ── */
[data-theme="night"] .zone-module-guide {
  border-color: #30363d;
  background: #1c2333;
}

[data-theme="night"] .zone-module-guide h4 { color: #e6edf3; }
[data-theme="night"] .zone-guide-subtitle   { color: #8b949e; }

[data-theme="night"] .zone-guide-step {
  border-top-color: #30363d;
}

[data-theme="night"] .zone-guide-row-title { color: #8b949e; }

[data-theme="night"] .guide-inline-card {
  border-color: #30363d;
  background: #21262d;
}

[data-theme="night"] .guide-inline-card strong { color: #e6edf3; }
[data-theme="night"] .guide-inline-card p      { color: #8b949e; }

[data-theme="night"] .guide-inline-map-item {
  border-color: #30363d;
  background: #21262d;
}

[data-theme="night"] .guide-inline-map-label { color: #8b949e; }
[data-theme="night"] .guide-inline-map-item strong { color: #e6edf3; }
[data-theme="night"] .guide-inline-map-item small  { color: #8b949e; }

[data-theme="night"] .guide-inline-map-item.map-top { border-color: #5a2a2a; }
[data-theme="night"] .guide-inline-map-item.map-caution { border-color: #30363d; }
[data-theme="night"] .guide-inline-map-item.map-buy { border-color: #2a5a3a; }
[data-theme="night"] .guide-inline-risk { border-color: #5a2a2a; }

/* ── Portfolio perf trades ── */
[data-theme="night"] .portfolio-perf-trade {
  border-color: #30363d;
  background: #1c2333;
}

[data-theme="night"] .portfolio-perf-trade.down {
  border-color: #5a2a2a;
  background: #3a1a1a;
}

[data-theme="night"] .portfolio-perf-trade-left strong { color: #e6edf3; }

[data-theme="night"] .portfolio-perf-trade-left small,
[data-theme="night"] .portfolio-perf-trade-right small { color: #8b949e; }

[data-theme="night"] .portfolio-perf-trade-right b { color: #3fb950; }
[data-theme="night"] .portfolio-perf-trade.down .portfolio-perf-trade-right b { color: #f85149; }

/* ── Portfolio currency select ── */
[data-theme="night"] .portfolio-currency-select {
  background: #21262d;
  border-color: #30363d;
  color: #e6edf3;
}

/* ── Landing Page ── */
[data-theme="night"] .landing-intro { color: #e6edf3; }
[data-theme="night"] .landing-head h1 { color: #e6edf3 !important; }
[data-theme="night"] .landing-kicker { color: #3fb950; }
[data-theme="night"] .landing-sub { color: #8b949e; }
[data-theme="night"] .landing-legal-links a { color: #8b949e; }

/* ── Onboarding ── */
[data-theme="night"] .onboarding-hero {
  border-color: #30363d;
  background: #161b22;
}

[data-theme="night"] .onboarding-hero h2,
[data-theme="night"] .onboarding-copy h3 { color: #e6edf3; }

[data-theme="night"] .onboarding-hero p,
[data-theme="night"] .onboarding-copy p { color: #8b949e; }

[data-theme="night"] .onboarding-eyebrow { color: #3fb950; }

[data-theme="night"] .onboarding-btn {
  background: #21262d;
  color: #e6edf3;
  box-shadow: none;
}

[data-theme="night"] .onboarding-btn.primary {
  background: #58a6ff;
  color: #0d1117;
  box-shadow: none;
}

[data-theme="night"] .trial-emphasis {
  background: #1c2333;
  border-color: #3fb950;
}

/* ── Footer ── */
[data-theme="night"] .app-legal-footer {
  border-top-color: #30363d;
}

[data-theme="night"] .app-legal-footer a { color: #8b949e; }
[data-theme="night"] .app-legal-footer a:hover { color: #58a6ff; }
[data-theme="night"] .app-legal-footer-disclaimer { color: #6e7681; }
[data-theme="night"] .app-legal-footer-tagline { color: #6e7681; }

/* ── Text readability: override all dark-on-dark ── */
[data-theme="night"] #ai-bias-text { color: #e6edf3; }

[data-theme="night"] .asset-row-data > span:nth-child(2) { color: #e6edf3; }

[data-theme="night"] .portfolio-trade-meta .up,
[data-theme="night"] .active-profit-up,
[data-theme="night"] .signal-cell.buy,
[data-theme="night"] .suggestion-pill-buy,
[data-theme="night"] .suggestion-pill-watch-buy {
  color: #3fb950;
}

[data-theme="night"] .asset-row,
[data-theme="night"] .asset-row:first-child,
[data-theme="night"] .execution-notice-item small,
[data-theme="night"] .close-trade-input-row label,
[data-theme="night"] .risk-input-wrap label,
[data-theme="night"] .symbol-field {
  color: #8b949e;
}

[data-theme="night"] .portfolio-range-btn,
[data-theme="night"] .portfolio-edit-btn,
[data-theme="night"] .portfolio-close-inline {
  color: #8b949e;
}

[data-theme="night"] .add-metal-btn strong,
[data-theme="night"] .close-trade-metrics strong,
[data-theme="night"] .portfolio-performance-stats strong,
[data-theme="night"] .portfolio-perf-trade-left strong {
  color: #e6edf3;
}

/* ── Signal pills ── */
[data-theme="night"] .signal-pill-buy { color: #3fb950; }
[data-theme="night"] .signal-pill-sell { color: #f85149; }
[data-theme="night"] .signal-pill-neutral { color: #8b949e; }

/* ── Dashboard side nav background ── */
[data-theme="night"] .dashboard-side-nav {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   MEGA-NAV — Dark theme overrides
   ═══════════════════════════════════════════════════════════════ */
[data-theme="night"] .mega-nav {
  background: #161b22;
  border-bottom-color: #30363d;
  box-shadow: none;
}

[data-theme="night"] .mega-nav-left .brand-logo {
  background: #ffffff;
}

[data-theme="night"] .mega-nav-tab {
  color: #8b949e;
}

[data-theme="night"] .mega-nav-tab:hover {
  color: #e6edf3;
  background: #21262d;
}

[data-theme="night"] .mega-nav-tab.is-active {
  color: #58a6ff;
  background: rgba(56, 139, 253, 0.12);
}

[data-theme="night"] .mega-nav-tab.is-active::after {
  background: #58a6ff;
}

[data-theme="night"] .mega-nav-hamburger {
  border-color: #30363d;
}

[data-theme="night"] .mega-nav-hamburger span {
  background: #8b949e;
}

[data-theme="night"] .mega-nav-mobile-menu {
  background: #161b22;
  border-bottom-color: #30363d;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="night"] .mega-nav-mobile-menu .mega-nav-right {
  border-top-color: #30363d;
}

[data-theme="night"] .mega-nav-mobile-auth {
  border-top-color: #30363d;
}

/* ── Pricing section dark mode ── */
[data-theme="night"] .pricing-section h2,
[data-theme="night"] .pricing-section > p { color: #e6edf3; }
[data-theme="night"] .pricing-card {
  background: #161b22; border-color: #30363d; color: #c9d1d9;
}
[data-theme="night"] .pricing-card-featured { border-color: #c9a84c; }
[data-theme="night"] .pricing-card-title { color: #e6edf3; }
[data-theme="night"] .pricing-card-desc { color: #8b949e; }
[data-theme="night"] .pricing-btn { background: linear-gradient(135deg, #3e89ff, #4fe9c7); color: #ffffff; border-color: transparent; }
[data-theme="night"] .pricing-btn:hover { filter: brightness(1.15); }
[data-theme="night"] .pricing-divider { border-color: #30363d; }
[data-theme="night"] .price-main { color: #e6edf3; }
[data-theme="night"] .price-note,
[data-theme="night"] .price-original { color: #8b949e; }
[data-theme="night"] .price-save { color: #3fb950; }
[data-theme="night"] .features-label { color: #8b949e; }
[data-theme="night"] .feature-list li { color: #c9d1d9; }
[data-theme="night"] .social-proof { color: #8b949e; }
[data-theme="night"] .pricing-card-badge-popular,
[data-theme="night"] .pricing-card-badge-promo { background: #c9a84c; color: #0d1117; }

/* ── Promo modal dark mode ── */
[data-theme="night"] #promo-checkout-modal .info-card {
  background: #161b22;
  border-color: #30363d;
}
[data-theme="night"] #promo-modal-title { color: #e6edf3; }
[data-theme="night"] #promo-modal-desc { color: #8b949e; }
[data-theme="night"] .promo-timeline-text strong { color: #e6edf3; }
[data-theme="night"] .promo-timeline-text span { color: #8b949e; }
[data-theme="night"] .promo-timeline-connector { background: #30363d; }
[data-theme="night"] .promo-timeline-dot { background: #30363d; }
[data-theme="night"] .promo-timeline-dot--active { background: #f2cf9f; }
[data-theme="night"] .promo-code-label { color: #8b949e; }
[data-theme="night"] .promo-code-input {
  background: #0d1117;
  border-color: #30363d;
  color: #e6edf3;
}
[data-theme="night"] .promo-code-input::placeholder { color: #484f58; }
[data-theme="night"] .promo-code-input:focus {
  border-color: #4fe9c7;
  box-shadow: 0 0 0 2px rgba(79, 233, 199, 0.15);
}
[data-theme="night"] .promo-modal-close-btn { color: #8b949e; }
[data-theme="night"] .promo-modal-close-btn:hover { color: #e6edf3; }

/* ── Portfolio summary dark mode ── */
[data-theme="night"] .portfolio-summary-panel {
  background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
  border-color: #30363d;
}
[data-theme="night"] .portfolio-summary-eyebrow { color: #8b949e; }
[data-theme="night"] .portfolio-summary-head h3 { color: #e6edf3; }
[data-theme="night"] .portfolio-summary-head p { color: #8b949e; }
[data-theme="night"] .portfolio-stat-card {
  background: #161b22; border-color: #30363d;
}
[data-theme="night"] .portfolio-stat-card small { color: #8b949e; }
[data-theme="night"] .portfolio-stat-card strong { color: #e6edf3; }

/* ── Portfolio donut dark mode ── */
[data-theme="night"] .portfolio-donut-inner {
  background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
  border-color: #30363d;
}
[data-theme="night"] .portfolio-donut-label { color: #e6edf3; }
[data-theme="night"] .portfolio-donut-center-copy { color: #8b949e; }
[data-theme="night"] .portfolio-donut-break-item { border-color: #21262d; }
[data-theme="night"] .portfolio-donut-break-label { color: #c9d1d9; }
[data-theme="night"] .portfolio-donut-break-pct { color: #8b949e; }
[data-theme="night"] .portfolio-mix-panel-title { color: #8b949e; }

/* ── Portfolio chart dark mode ── */
[data-theme="night"] .portfolio-history-tooltip {
  background: rgba(22, 27, 34, 0.96); color: #e6edf3;
  border-color: #30363d;
}
[data-theme="night"] .portfolio-chart-mode-btn {
  background: #161b22; color: #8b949e; border-color: #30363d;
}
[data-theme="night"] .portfolio-chart-mode-btn.is-active {
  background: #21262d; color: #e6edf3; border-color: #c9a84c;
}
[data-theme="night"] .portfolio-range-btn.is-active {
  background: #21262d; color: #e6edf3; border-color: #c9a84c;
}
[data-theme="night"] .portfolio-compare-item { color: #c9d1d9; }

/* ── Watchlist / portfolio controls dark mode ── */
[data-theme="night"] .watchlist-selector select {
  background: #161b22; color: #c9d1d9; border-color: #30363d;
}
[data-theme="night"] .watchlist-action-btn {
  background: #161b22; color: #8b949e; border-color: #30363d;
}
[data-theme="night"] .watchlist-action-btn:hover { background: #21262d; color: #e6edf3; }
[data-theme="night"] .portfolio-control-field select {
  background: #161b22; color: #c9d1d9; border-color: #30363d;
}
[data-theme="night"] .portfolio-control-field span { color: #8b949e; }
[data-theme="night"] .portfolio-type-pill { background: #21262d; color: #8b949e; }
[data-theme="night"] .portfolio-tab-count { background: rgba(255,255,255,0.08); color: #8b949e; }

/* ── Billing/settings dark mode ── */
[data-theme="night"] #panel-billing .billing-timezone-row label,
[data-theme="night"] #panel-billing .billing-profile-row h3,
[data-theme="night"] #panel-billing .billing-profile-grid label { color: #c9d1d9; }
[data-theme="night"] #panel-billing .billing-timezone-row select,
[data-theme="night"] #panel-billing .billing-profile-grid select {
  background: #161b22; color: #c9d1d9; border-color: #30363d;
}
[data-theme="night"] #panel-billing .billing-timezone-row p,
[data-theme="night"] #panel-billing #billing-profile-help { color: #8b949e; }
[data-theme="night"] .profile-onboarding-grid label { color: #c9d1d9; }
[data-theme="night"] .profile-onboarding-grid select {
  background: #161b22; color: #c9d1d9; border-color: #30363d;
}
[data-theme="night"] .profile-onboarding-help { color: #8b949e; }
[data-theme="night"] .profile-onboarding-inline-link { color: #58a6ff; }
[data-theme="night"] .country-combobox-input {
  background: #161b22; color: #c9d1d9; border-color: #30363d;
}
[data-theme="night"] .country-combobox-input:focus {
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.22);
}
[data-theme="night"] .country-combobox-toggle { color: #8b949e; }
[data-theme="night"] .country-combobox-menu {
  background: #0d1117; border-color: #30363d;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
[data-theme="night"] .country-combobox-option { color: #c9d1d9; }
[data-theme="night"] .country-combobox-option:hover,
[data-theme="night"] .country-combobox-option.is-active { background: #1f2733; }
[data-theme="night"] .country-combobox-empty { color: #8b949e; }

/* ─────────────────────────────────────────────────────────
   Dark-mode fixes: Market Sentiment Monitor readability
   ───────────────────────────────────────────────────────── */

/* Signal counter boxes (MATCH / RISK / WATCH) */
[data-theme="night"] .signal {
  border-color: #30363d;
  background: #161b22;
}
[data-theme="night"] .signal strong {
  color: #e6edf3;
}
[data-theme="night"] .stat-buy strong,
[data-theme="night"] .stat-buy span {
  color: #3fb950;
}
[data-theme="night"] .stat-sell strong,
[data-theme="night"] .stat-sell span {
  color: #f85149;
}
[data-theme="night"] .stat-watch strong,
[data-theme="night"] .stat-watch span {
  color: #58a6ff;
}

/* Empty cell dashes — was #30363d, nearly invisible */
[data-theme="night"] .coin-col-empty {
  color: #484f58;
}

/* Watchlist select dropdown */
[data-theme="night"] .watchlist-selector select,
[data-theme="night"] .watchlist-selector-sentiment select {
  border-color: #30363d;
  background: #21262d;
  color: #e6edf3;
}
[data-theme="night"] .watchlist-selector select option {
  background: #21262d;
  color: #e6edf3;
}

/* Watchlist label */
[data-theme="night"] .watchlist-selector-label {
  color: #e6edf3;
}

/* Zone guide collapsible */
[data-theme="night"] .zone-module-guide,
[data-theme="night"] .table-module-guide {
  border-color: #30363d;
  background: #161b22;
  color: #c9d1d9;
}
[data-theme="night"] .zone-module-guide strong,
[data-theme="night"] .table-module-guide strong {
  color: #e6edf3;
}
[data-theme="night"] .zone-module-guide p,
[data-theme="night"] .table-module-guide p {
  color: #8b949e;
}

/* Zone guide toggle button */
[data-theme="night"] #zone-guide-toggle,
[data-theme="night"] .zone-guide-toggle {
  border-color: #30363d;
  background: #21262d;
  color: #e6edf3;
}

/* Card head subtitle */
[data-theme="night"] .card-head > div > p {
  color: #8b949e;
}

/* Execution notices tab pills */
[data-theme="night"] .notice-tabs button {
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
}
[data-theme="night"] .notice-tabs button.active,
[data-theme="night"] .notice-tabs button[aria-selected="true"] {
  border-color: #58a6ff;
  background: #1f3a5f;
  color: #58a6ff;
}

/* Notice filter & sort controls */
[data-theme="night"] .execution-notices select {
  border-color: #30363d;
  background: #21262d;
  color: #e6edf3;
}

/* Delete-selected button in notices */
[data-theme="night"] .execution-notices .delete-selected-btn {
  border-color: #5a2a2a;
  background: #3a1a1a;
  color: #f85149;
}

/* Footer */
[data-theme="night"] .app-legal-footer {
  border-color: #30363d;
  background: #0d1117;
  color: #8b949e;
}
[data-theme="night"] .app-legal-footer a {
  color: #8b949e;
}
[data-theme="night"] .app-legal-footer-tagline {
  color: #6e7681;
}

/* Guide open button (Trading Guide) */
[data-theme="night"] .guide-open-btn {
  border-color: #30363d;
  background: #21262d;
  color: #8b949e;
}

/* ── Session Expired Screen ─────────────────────────────────────── */
.session-expired-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  animation: se-fade-in 280ms ease both;
}

.session-expired-screen[hidden] {
  display: none !important;
}

@keyframes se-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.session-expired-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 44px 48px 40px;
  max-width: 420px;
  width: calc(100% - 40px);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(80, 60, 120, 0.10);
  animation: se-card-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes se-card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.session-expired-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(62, 137, 255, 0.10), rgba(79, 233, 199, 0.10));
  border: 1.5px solid rgba(62, 137, 255, 0.20);
  border-radius: 18px;
  margin-bottom: 4px;
}

.session-expired-logo {
  height: 56px;
  width: auto;
  opacity: 1;
  margin-bottom: 4px;
}

.session-expired-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #182437;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0;
}

.session-expired-desc {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
  color: #60718b;
  text-align: center;
  line-height: 1.6;
  margin: 0;
  max-width: 300px;
}

.session-expired-btn {
  margin-top: 8px;
  min-width: 160px;
  font-size: 15px;
}

/* ── Oil & Gas import modal + shared watchlist picker ── */
.og-import-card,
.watchlist-picker-card {
  max-width: 460px;
  width: 100%;
}

/* Popover mode — triggered by positionPopover() adding .is-popover on the
   wrapper. The wrapper becomes a transparent click-catcher; the inner card is
   positioned as a compact, semi-transparent panel above the anchor. */
.info-modal.is-popover {
  background: transparent;
  pointer-events: auto;
  padding: 0;
}
.info-modal.is-popover .info-card {
  width: auto;
  max-width: 280px;
  min-width: 220px;
  padding: 10px 12px;
  font-size: 0.8rem;
  background: rgba(18, 28, 50, 0.72);
  border: 1px solid rgba(120, 160, 200, 0.28);
  border-radius: 10px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  color: #e6edf7;
}
[data-theme]:not([data-theme="night"]) .info-modal.is-popover .info-card,
html:not([data-theme]) .info-modal.is-popover .info-card {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(96, 120, 160, 0.28);
  color: #1b2a43;
}
.info-modal.is-popover .info-head {
  margin-bottom: 6px;
  padding: 0 0 6px 0;
  border-bottom: 1px solid rgba(120, 160, 200, 0.16);
}
.info-modal.is-popover .info-head h3 {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.info-modal.is-popover .close-info-btn {
  width: 20px;
  height: 20px;
  min-width: 20px;
  font-size: 11px;
  padding: 0;
}
.info-modal.is-popover .og-import-helper,
.info-modal.is-popover .watchlist-picker-empty {
  font-size: 0.76rem;
  margin: 0;
}
.info-modal.is-popover .og-import-choice-btn {
  padding: 8px 10px;
  border-radius: 7px;
}
.info-modal.is-popover .og-import-choice-btn strong {
  font-size: 0.82rem;
}
.info-modal.is-popover .og-import-choice-btn small {
  font-size: 0.7rem;
}
.info-modal.is-popover .watchlist-picker-list {
  gap: 4px;
  max-height: 240px;
  padding: 2px 0;
}
.info-modal.is-popover .watchlist-picker-item {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
}
.info-modal.is-popover .watchlist-picker-item-name {
  font-size: 0.82rem;
}
.info-modal.is-popover .watchlist-picker-item-count {
  font-size: 0.7rem;
}
.info-modal.is-popover .og-import-back-btn {
  font-size: 0.72rem;
  padding: 4px 9px;
}
.info-modal.is-popover .og-import-step {
  gap: 8px;
}

.og-import-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}

.og-import-helper {
  margin: 0;
  color: #4a5a73;
  font-size: 0.92rem;
  line-height: 1.45;
}

.og-import-choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.og-import-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid rgba(96, 120, 160, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  color: #1b2a43;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}

.og-import-choice-btn strong {
  font-size: 0.98rem;
  font-weight: 700;
}

.og-import-choice-btn small {
  color: #5a6b88;
  font-size: 0.82rem;
  font-weight: 500;
}

.og-import-choice-btn:hover {
  background: rgba(67, 211, 154, 0.08);
  border-color: rgba(67, 211, 154, 0.5);
}

.og-import-choice-btn:active {
  transform: translateY(1px);
}

.og-import-back-btn {
  align-self: flex-start;
  background: transparent;
  border: 1px solid rgba(96, 120, 160, 0.3);
  color: #4a5a73;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.og-import-back-btn:hover {
  background: rgba(96, 120, 160, 0.12);
  color: #1b2a43;
}

.watchlist-picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
}

.watchlist-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(96, 120, 160, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: #1b2a43;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  text-align: left;
  font: inherit;
  width: 100%;
}

.watchlist-picker-item:hover {
  background: rgba(67, 211, 154, 0.1);
  border-color: rgba(67, 211, 154, 0.5);
}

.watchlist-picker-item-name {
  font-weight: 700;
  font-size: 0.92rem;
}

.watchlist-picker-item-count {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: #5a6b88;
}

.watchlist-picker-item.is-create {
  border-style: dashed;
  color: #0f7a5b;
  border-color: rgba(67, 211, 154, 0.55);
  background: rgba(67, 211, 154, 0.08);
  font-weight: 700;
}

.watchlist-picker-item.is-create:hover {
  background: rgba(67, 211, 154, 0.18);
}

.watchlist-picker-empty {
  color: #60718b;
  font-size: 0.86rem;
  padding: 12px;
  text-align: center;
}

/* Night theme variants */
[data-theme="night"] .og-import-helper,
[data-theme="night"] .watchlist-picker-empty {
  color: #9aa8c5;
}

[data-theme="night"] .og-import-choice-btn {
  background: rgba(19, 36, 66, 0.6);
  border-color: rgba(120, 160, 200, 0.28);
  color: #e6edf7;
}

[data-theme="night"] .og-import-choice-btn small {
  color: #9aa8c5;
}

[data-theme="night"] .og-import-choice-btn:hover {
  background: rgba(67, 211, 154, 0.12);
  border-color: rgba(67, 211, 154, 0.45);
}

[data-theme="night"] .og-import-back-btn {
  border-color: rgba(180, 200, 230, 0.35);
  color: #c5d4e8;
}

[data-theme="night"] .og-import-back-btn:hover {
  background: rgba(120, 160, 200, 0.12);
  color: #e6edf7;
}

[data-theme="night"] .watchlist-picker-item {
  background: rgba(19, 36, 66, 0.55);
  border-color: rgba(120, 160, 200, 0.24);
  color: #e6edf7;
}

[data-theme="night"] .watchlist-picker-item:hover {
  background: rgba(67, 211, 154, 0.14);
  border-color: rgba(67, 211, 154, 0.45);
}

[data-theme="night"] .watchlist-picker-item-count {
  color: #9aa8c5;
}

[data-theme="night"] .watchlist-picker-item.is-create {
  color: #7fe0bc;
  background: rgba(67, 211, 154, 0.1);
  border-color: rgba(67, 211, 154, 0.45);
}
/* ─── TOS / Privacy Consent Modal (always light) ───────────────────────────── */

/* Force light appearance regardless of active theme */
#tos-consent-modal {
  background: rgba(30, 40, 60, 0.55);
  backdrop-filter: blur(6px);
}

.tos-consent-card,
[data-theme="night"] .tos-consent-card {
  width: min(680px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  border: 1px solid #d0d8e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

/* Header */
.tos-consent-head,
[data-theme="night"] .tos-consent-head {
  padding: 22px 24px 16px;
  border-bottom: 1px solid #e8edf5;
  flex-shrink: 0;
  text-align: center;
  background: #f7f9fc;
  border-radius: 12px 12px 0 0;
}

.tos-consent-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 10px;
}

.tos-brand-icon {
  font-size: 18px;
  line-height: 1;
}

.tos-brand-name,
[data-theme="night"] .tos-brand-name {
  font-size: 12px;
  font-weight: 700;
  color: #3a6ab0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tos-consent-head h3,
[data-theme="night"] .tos-consent-head h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #1a2a42;
  font-weight: 700;
}

.tos-consent-head p,
[data-theme="night"] .tos-consent-head p {
  margin: 0;
  font-size: 12.5px;
  color: #607898;
  line-height: 1.5;
}

/* Scrollable body */
.tos-consent-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  min-height: 0;
  max-height: 55vh;
  background: #ffffff;
}

.tos-consent-body::-webkit-scrollbar {
  width: 5px;
}

.tos-consent-body::-webkit-scrollbar-track {
  background: #f0f2f6;
  border-radius: 3px;
}

.tos-consent-body::-webkit-scrollbar-thumb {
  background: #c0ccdc;
  border-radius: 3px;
}

.tos-consent-body::-webkit-scrollbar-thumb:hover {
  background: #a0b0cc;
}

/* Document sections */
.tos-doc-section {
  padding: 18px 0 12px;
}

.tos-doc-header,
[data-theme="night"] .tos-doc-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e9f2;
}

.tos-doc-header h4,
[data-theme="night"] .tos-doc-header h4 {
  margin: 0 0 5px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3a6e;
  letter-spacing: 0.01em;
}

.tos-doc-header p,
[data-theme="night"] .tos-doc-header p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #7888a0;
  line-height: 1.5;
}

.tos-section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4dcea, transparent);
  margin: 10px 0;
}

/* Articles */
.tos-article {
  margin-bottom: 10px;
}

.tos-preamble,
[data-theme="night"] .tos-preamble {
  font-size: 12px;
  color: #556070;
  line-height: 1.7;
  margin: 0 0 10px;
  font-style: italic;
}

.tos-article-title,
[data-theme="night"] .tos-article-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #1e3a6e;
  margin-bottom: 3px;
}

.tos-article p,
[data-theme="night"] .tos-article p {
  margin: 0;
  font-size: 12px;
  color: #3a4a5c;
  line-height: 1.72;
}

.tos-doc-footer,
[data-theme="night"] .tos-doc-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e4e9f2;
}

.tos-doc-footer p,
[data-theme="night"] .tos-doc-footer p {
  margin: 3px 0;
  font-size: 11px;
  color: #7888a0;
}

.tos-doc-footer a,
[data-theme="night"] .tos-doc-footer a {
  color: #2a6ac8;
  text-decoration: none;
}

.tos-doc-footer a:hover {
  text-decoration: underline;
}

/* Body wrapper — holds the gradient fade overlay */
.tos-body-wrap {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tos-body-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 100%);
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.tos-body-wrap.tos-body-scrolled::after {
  opacity: 0;
}

/* Locale-gated content: show only the active language inside the TOS popup.
   Driven by `data-locale` set on <html> by script.js initializeI18n(). */
html[data-locale="zh-TW"] .tos-locale-block.lang-en { display: none; }
html[data-locale="en-US"] .tos-locale-block.lang-zh { display: none; }

/* Scroll hint bar */
.tos-scroll-hint,
[data-theme="night"] .tos-scroll-hint {
  flex-shrink: 0;
  background: linear-gradient(135deg, #1a4fa8 0%, #2563eb 100%);
  border: none;
  padding: 11px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff !important;
  letter-spacing: 0.02em;
  transition: opacity 0.4s ease, max-height 0.4s ease, padding 0.4s ease;
  max-height: 48px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tos-scroll-arrow,
#tos-scroll-hint-text,
html:not([data-theme="night"]) .tos-scroll-hint .tos-scroll-arrow,
html:not([data-theme="night"]) .tos-scroll-hint #tos-scroll-hint-text {
  color: #ffffff !important;
}

.tos-scroll-arrow {
  display: inline-block;
  animation: tos-bounce 1.1s ease-in-out infinite;
  font-size: 15px;
}

@keyframes tos-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

.tos-scroll-hint.tos-hint-gone {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Footer */
.tos-consent-footer,
[data-theme="night"] .tos-consent-footer {
  flex-shrink: 0;
  padding: 14px 24px 20px;
  border-top: 1px solid #e8edf5;
  background: #f7f9fc;
  border-radius: 0 0 12px 12px;
}

.tos-agree-note,
[data-theme="night"] .tos-agree-note {
  margin: 0 0 14px;
  font-size: 11.5px;
  color: #6878a0;
  text-align: center;
  line-height: 1.5;
}

/* Marketing opt-in row */
.tos-marketing-row,
[data-theme="night"] .tos-marketing-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 16px;
  cursor: pointer;
  user-select: none;
}

.tos-marketing-checkbox,
[data-theme="night"] .tos-marketing-checkbox {
  flex-shrink: 0;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: #1a5db8;
  cursor: pointer;
}

.tos-marketing-row span,
[data-theme="night"] .tos-marketing-row span {
  font-size: 12px;
  color: #3a4a5c;
  line-height: 1.5;
}

/* Buttons: agree = full primary, disagree = text link below */
.tos-consent-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.tos-action-btn {
  width: 100%;
  max-width: 320px;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: 0.01em;
  border: none;
}

.tos-action-agree,
[data-theme="night"] .tos-action-agree {
  background: linear-gradient(135deg, #1a5db8, #2070d8);
  color: #fff;
  box-shadow: 0 2px 12px rgba(32, 112, 216, 0.35);
}

.tos-action-agree:hover:not(:disabled),
[data-theme="night"] .tos-action-agree:hover:not(:disabled) {
  background: linear-gradient(135deg, #2070d8, #3488f5);
  box-shadow: 0 4px 18px rgba(32, 112, 216, 0.45);
}

.tos-action-agree:disabled,
[data-theme="night"] .tos-action-agree:disabled {
  background: #d0d8e8;
  color: #8898b8;
  box-shadow: none;
  cursor: not-allowed;
}

/* Disagree: understated text link */
.tos-action-disagree-link,
[data-theme="night"] .tos-action-disagree-link {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 12px;
  color: #8898b0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
  letter-spacing: 0.01em;
}

.tos-action-disagree-link:hover,
[data-theme="night"] .tos-action-disagree-link:hover {
  color: #4a6888;
}

/* ─── End TOS / Privacy Consent Modal ──────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   RISK MODAL — LAYER 3 (計畫外交易)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Collapsible container ───────────────────────────────────────── */
.risk-unmanaged-section {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.risk-unmanaged-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 20px;
  background: none;
  border: none;
  border-top: 1px solid rgba(80, 120, 170, 0.16);
  cursor: pointer;
  text-align: left;
}
.risk-unmanaged-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.risk-unmanaged-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a5f;
  letter-spacing: 0;
  text-transform: none;
  border-left: 3px solid #4a7fc1;
  padding-left: 10px;
}

.risk-unmanaged-chevron {
  font-size: 16px;
  color: #5e7a9a;
  transition: transform 0.2s ease;
  display: inline-block;
  line-height: 1;
}
.risk-unmanaged-header[aria-expanded="true"] .risk-unmanaged-chevron {
  transform: rotate(90deg);
}

.risk-unmanaged-body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Segmented control (tabs, has-position mode) ─────────────────── */
.risk-action-tabs {
  display: flex;
  background: rgba(210, 225, 245, 0.35);
  border: 1px solid rgba(120, 157, 206, 0.3);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}

.risk-action-tab {
  flex: 1;
  padding: 7px 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #5e7a9a;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.risk-action-tab.is-active {
  background: #fff;
  color: #1f3f61;
  box-shadow: 0 1px 4px rgba(80, 120, 170, 0.14);
}
.risk-action-tab:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.5);
  color: #2f5278;
}

/* ── Panel content ───────────────────────────────────────────────── */
.risk-unmanaged-panel-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.risk-unmanaged-panel-content .risk-input-wrap {
  margin: 0 0 8px;
}

/* 2-column grid: amount | price */
.risk-unmanaged-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 0;
}

/* Qty hint below price input */
.risk-qty-hint {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: #7a9bc5;
  line-height: 1.3;
}

/* ── Confirm button variants ─────────────────────────────────────── */
.risk-unmanaged-confirm-btn {
  margin-top: 2px;
  font-size: 13px;
}

/* is-buy: teal-green (entry) */
.risk-unmanaged-confirm-btn.is-buy {
  background: linear-gradient(135deg, #1a9e6a, #17c9a2);
  color: #fff;
  border: none;
}
.risk-unmanaged-confirm-btn.is-buy:hover:not(:disabled) {
  background: linear-gradient(135deg, #1eb87b, #19ddb4);
}

/* is-sell: red (reduce position) */
.risk-unmanaged-confirm-btn.is-sell {
  background: linear-gradient(135deg, #9e2a2a, #c43535);
  color: #fff;
  border: none;
}
.risk-unmanaged-confirm-btn.is-sell:hover:not(:disabled) {
  background: linear-gradient(135deg, #b53030, #d94040);
}

/* is-danger: grey-blue (full close) */
.risk-unmanaged-confirm-btn.is-danger {
  background: rgba(74, 100, 150, 0.22);
  color: #5a80a8;
  border: 1px solid rgba(74, 100, 150, 0.4);
}
.risk-unmanaged-confirm-btn.is-danger:hover:not(:disabled) {
  background: rgba(74, 100, 150, 0.34);
  color: #3a6090;
}

/* ── Item 6: is-warning — amber/orange for Scenario C (no-pos × GREED) ── */
.risk-unmanaged-confirm-btn.is-warning {
  background: linear-gradient(135deg, #b87000 0%, #d48c00 100%);
  color: #fff;
  border: none;
}
.risk-unmanaged-confirm-btn.is-warning:hover:not(:disabled) {
  background: linear-gradient(135deg, #d48c00 0%, #f0a800 100%);
}

/* ── Item 7: no-position mode section title (非 Tab，區段小標) ──── */
.risk-unmanaged-section-title {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 700;
  color: #4e6685;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Warning note inside each panel — plain text, no box */
.risk-unmanaged-warning {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 11px;
  color: #8fa5c0;
  text-align: center;
}

/* ── Night-theme overrides ───────────────────────────────────────── */
[data-theme="night"] .risk-unmanaged-header {
  border-top-color: rgba(60, 100, 155, 0.2);
}
[data-theme="night"] .risk-unmanaged-header:hover {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme="night"] .risk-unmanaged-title {
  color: #c9d8ef;
  border-left-color: #5a9ae0;
}
[data-theme="night"] .risk-action-tabs {
  background: rgba(30, 55, 100, 0.35);
  border-color: rgba(80, 130, 200, 0.28);
}
[data-theme="night"] .risk-action-tab {
  color: #4e6e90;
}
[data-theme="night"] .risk-action-tab.is-active {
  background: rgba(255, 255, 255, 0.07);
  color: #b8ccf0;
}
[data-theme="night"] .risk-qty-hint {
  color: #4e6e90;
}
[data-theme="night"] .risk-unmanaged-section-title {
  color: #405668;
}
[data-theme="night"] .risk-unmanaged-warning {
  color: #4e6885;
}

/* ── Day-theme overrides ─────────────────────────────────────────── */
[data-theme="day"] .risk-unmanaged-header {
  border-top-color: rgba(90, 140, 210, 0.2);
}
[data-theme="day"] .risk-unmanaged-title {
  color: #1a3560;
  border-left-color: #3a6db5;
}
[data-theme="day"] .risk-action-tabs {
  background: rgba(220, 235, 255, 0.5);
  border-color: rgba(100, 150, 220, 0.35);
}
[data-theme="day"] .risk-action-tab {
  color: #4a6a9a;
}
[data-theme="day"] .risk-action-tab.is-active {
  background: #fff;
  color: #1a3a68;
}
[data-theme="day"] .risk-qty-hint {
  color: #5a78a0;
}
[data-theme="day"] .risk-unmanaged-section-title {
  color: #3a5a80;
}
[data-theme="day"] .risk-unmanaged-warning {
  color: #6a8aaa;
}

/* ─── End Risk Modal Layer 3 ────────────────────────────────────── */

/* ─── Quick-trade modal (dashboard row actions) ──────────────────── */
.quick-trade-card {
  width: min(460px, 96vw);
  padding: 20px 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quick-trade-card .info-head {
  margin-bottom: 4px;
}
.quick-trade-card .info-head h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1e3a5f;
}
/* Reuse the Layer 3 two-column grid — no extra styles needed */
.quick-trade-grid {
  margin-bottom: 0;
}
.quick-trade-card .risk-submit-btn {
  margin-top: 4px;
}
[data-theme="night"] .quick-trade-card .info-head h3 {
  color: #c9d8ef;
}
/* ─── End Quick-trade modal ──────────────────────────────────────── */

/* ─── Main-app Feedback Bubble ───────────────────────────────────── */
.main-feedback-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.main-feedback-wrap.hidden { display: none; }

.main-feedback-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #141E35;
  border: 2px solid #1E2D4A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  transition: background 0.2s, border-color 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.main-feedback-btn:hover {
  background: #1e2e4a;
  border-color: #D4B65C;
}
[data-theme="night"] .main-feedback-btn { background: #141E35; border-color: #1E2D4A; }

.main-feedback-panel {
  width: 340px;
  background: #ffffff;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  order: -1;
}
.main-feedback-panel.hidden { display: none; }
[data-theme="night"] .main-feedback-panel { background: #080E1C; border-color: #1E2D4A; box-shadow: 0 8px 32px rgba(0,0,0,0.55); }

.mfb-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-theme="night"] .mfb-header { border-bottom-color: #1E2D4A; }

.mfb-title {
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
  letter-spacing: 0.01em;
}
[data-theme="night"] .mfb-title { color: #E2E8F0; }

.mfb-subtitle {
  font-size: 11px;
  color: #64748B;
  margin-top: 2px;
}
[data-theme="night"] .mfb-subtitle { color: #A8B8CC; }

.mfb-badge {
  background: rgba(212,182,92,0.13);
  border: 1px solid rgba(212,182,92,0.27);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 8px;
  color: #D4B65C;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.mfb-body { padding: 16px 18px 18px; }

.mfb-state { display: flex; flex-direction: column; align-items: center; }
.mfb-state.hidden { display: none; }
.mfb-form { align-items: stretch; }

.mfb-check { font-size: 32px; margin-bottom: 10px; color: #22D3A4; }
.mfb-warn  { font-size: 28px; margin-bottom: 8px;  color: #F43F5E; }

.mfb-success-title {
  font-size: 14px;
  font-weight: 700;
  color: #22D3A4;
  margin-bottom: 6px;
  text-align: center;
}
.mfb-success-desc {
  font-size: 12px;
  color: #64748B;
  margin-bottom: 20px;
  line-height: 1.6;
  text-align: center;
}
[data-theme="night"] .mfb-success-desc { color: #A8B8CC; }

.mfb-error-title {
  font-size: 13px;
  font-weight: 700;
  color: #F43F5E;
  margin-bottom: 6px;
  text-align: center;
}

.mfb-close-btn, .mfb-retry-btn {
  background: rgba(34,211,164,0.13);
  border: 1px solid rgba(34,211,164,0.33);
  border-radius: 6px;
  color: #22D3A4;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 20px;
  cursor: pointer;
}
.mfb-retry-btn {
  background: transparent;
  border-color: #CBD5E1;
  color: #64748B;
  margin-top: 12px;
}
[data-theme="night"] .mfb-retry-btn { border-color: #1E2D4A; color: #A8B8CC; }

.mfb-field { display: block; margin-bottom: 10px; }

.mfb-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
[data-theme="night"] .mfb-label { color: #A8B8CC; }
.mfb-required { color: #F43F5E; }

.mfb-input, .mfb-textarea {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  color: #1E293B;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
[data-theme="night"] .mfb-input,
[data-theme="night"] .mfb-textarea { background: #04080F; border-color: #1E2D4A; color: #E2E8F0; }
.mfb-textarea { resize: vertical; min-height: 100px; line-height: 1.55; }

.mfb-char-counter {
  text-align: right;
  font-size: 11px;
  color: #64748B;
  margin-bottom: 14px;
}
[data-theme="night"] .mfb-char-counter { color: #A8B8CC; }
.mfb-char-counter.over-limit { color: #F43F5E; }

.mfb-submit-btn {
  width: 100%;
  padding: 10px 0;
  background: rgba(212,182,92,0.2);
  border: none;
  border-radius: 7px;
  color: #1E293B;
  font-size: 13px;
  font-weight: 700;
  cursor: not-allowed;
  letter-spacing: 0.04em;
  transition: background 0.15s, opacity 0.15s;
}
.mfb-submit-btn.ready {
  background: #D4B65C;
  cursor: pointer;
}
.mfb-submit-btn.sending { opacity: 0.7; cursor: not-allowed; }

.mfb-footer-note {
  margin-top: 10px;
  font-size: 10px;
  color: #64748B;
  text-align: center;
  line-height: 1.5;
}
[data-theme="night"] .mfb-footer-note { color: #A8B8CC; }
/* ─── End Main-app Feedback Bubble ──────────────────────────────── */