@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Noto+Sans+SC:wght@500;700;800&display=swap");

:root {
  /* iOS premium dark + Apple Wallet gold. Mirrors DESIGN.md §Color. */
  --bg: oklch(0.03 0.002 60);
  --bg-soft: oklch(0.08 0.003 60);
  --panel: oklch(0.11 0.003 60);          /* surface-1, Apple Wallet card */
  --panel-soft: oklch(0.16 0.004 60);     /* surface-2 */
  --stroke: oklch(0.26 0.005 60);
  --stroke-strong: oklch(0.32 0.006 60);
  --text: oklch(0.97 0.004 60);
  --muted: oklch(0.74 0.006 60);
  --accent: oklch(0.78 0.12 75);          /* Apple Wallet gold */
  --green: oklch(0.74 0.16 155);          /* status-up, teal-shifted */
  --red: oklch(0.66 0.18 25);             /* status-down, orange-shifted */
  --blue: oklch(0.78 0.12 75);            /* legacy alias → accent gold */
  --shadow: 0 8px 24px oklch(0.03 0.002 60 / 0.5);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Noto Sans SC", "Sora", "Segoe UI", sans-serif;
  color: var(--text);
  background: oklch(0.03 0.002 60);
  /* Final safety net for flex/grid min-content traps in any descendant.
   * `clip` (not `hidden`) avoids creating a scroll container while still
   * preventing horizontal viewport overflow. If any child still wants to
   * paint past the right edge, this clips it instead of letting the body
   * grow and the whole page horizontally scroll. The proper fix is
   * always to add min-width:0 at the offending flex container; this just
   * stops a single mistake from breaking the entire page. */
  overflow-x: clip;
}

/* Temporarily disable CSS Scroll Anchoring while applyView swaps one long
 * section for another. Keeping this scoped avoids changing normal long-feed
 * behavior after the view transition has settled. */
body.viewSwitching {
  overflow-anchor: none;
}

.appShell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

.sidebar {
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background:
    radial-gradient(260px 120px at 10% -10%, oklch(0.78 0.12 75 / 0.10), transparent 68%),
    oklch(0.11 0.003 60);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  position: sticky;
  top: 12px;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.sidebarHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

.brandDot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: oklch(0.78 0.12 75);
  box-shadow: 0 0 0 6px oklch(0.78 0.12 75 / 0.2);
}

.brandText {
  min-width: 0;
}

.brand h1 {
  margin: 0;
  font: 800 20px/1.2 "Sora", "Noto Sans SC", sans-serif;
}

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

.sideNav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.sideNav::-webkit-scrollbar {
  display: none;
}

.navBtn {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--muted, #95a9cf);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px 10px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: color 0.16s ease;
  white-space: nowrap;
  border-radius: 0;
}

.navBtn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background 0.16s ease;
}

.navLabel,
.navIcon {
  pointer-events: none;
}

.navIcon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: currentColor;
}

.navIcon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navBtn:hover {
  color: var(--text, #e8f0ff);
}

.navBtn.isActive {
  color: var(--accent);
}

.navBtn.isActive::after {
  background: var(--accent);
}

.sectionNav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 1px solid oklch(0.26 0.005 60 / 0.52);
  border-radius: 16px;
  background: oklch(0.03 0.002 60 / 0.72);
  box-shadow: inset 0 1px 0 oklch(0.97 0.004 60 / 0.04);
}

.sectionNav[hidden] {
  display: none;
}

.sectionNav::-webkit-scrollbar {
  display: none;
}

.sectionNavBtn {
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid oklch(0.26 0.005 60 / 0.58);
  border-radius: 999px;
  background: oklch(0.11 0.003 60 / 0.72);
  color: oklch(0.74 0.006 60);
  padding: 0 13px;
  font: 700 13px/1 "Noto Sans SC", "Sora", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sectionNavBtn:hover {
  border-color: oklch(0.78 0.12 75 / 0.72);
  color: oklch(0.92 0.004 60);
  background: oklch(0.16 0.004 60 / 0.86);
  transform: translateY(-1px);
}

.sectionNavBtn.isActive {
  border-color: oklch(0.78 0.12 75 / 0.82);
  color: oklch(0.85 0.08 75);
  background: linear-gradient(180deg, oklch(0.22 0.06 75 / 0.78), oklch(0.16 0.004 60 / 0.9));
  box-shadow: 0 0 0 1px oklch(0.78 0.12 75 / 0.12), inset 0 1px 0 oklch(0.85 0.08 75 / 0.1);
}

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

body.sidebarCollapsed .brand p {
  display: none;
}

.controlLabel {
  display: grid;
  gap: 6px;
}

.controlLabel span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

select,
button {
  font-family: inherit;
}

#symbolSelect {
  width: 100%;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--text);
  padding: 0 10px;
  font-weight: 700;
}

.ghostBtn,
.primaryBtn {
  width: 100%;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--stroke);
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.ghostBtn {
  background: var(--panel);
  color: var(--text);
}

.primaryBtn {
  background: oklch(0.78 0.12 75);
  color: oklch(0.12 0.005 60);
  border-color: oklch(0.78 0.12 75);
}

.sideControls {
  justify-self: end;
}

.sideControls .controlLabel {
  min-width: 146px;
}

.sideControls .primaryBtn,
.sideControls .ghostBtn {
  width: auto;
  min-width: 108px;
  padding: 0 14px;
}

.authMenuDock {
  position: relative;
  flex: 0 0 auto;
}

.authMenuBtn {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid oklch(0.32 0.006 60 / 0.82);
  background: oklch(0.11 0.003 60 / 0.96);
  color: oklch(0.97 0.004 60);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
  box-shadow: inset 0 1px 0 oklch(0.97 0.004 60 / 0.05);
}

.authMenuBtn:hover,
.authMenuBtn[aria-expanded="true"] {
  border-color: oklch(0.78 0.12 75 / 0.74);
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.authMenuPanel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 8;
  min-width: 210px;
  padding: 12px;
  border: 1px solid oklch(0.26 0.005 60 / 0.84);
  border-radius: 14px;
  background:
    radial-gradient(320px 120px at 12% -25%, oklch(0.78 0.12 75 / 0.14), transparent 70%),
    linear-gradient(180deg, oklch(0.11 0.003 60 / 0.98), oklch(0.03 0.002 60 / 0.98));
  box-shadow: 0 22px 34px oklch(0.03 0.002 60 / 0.5);
  display: grid;
  gap: 10px;
}

.authMenuPanel[hidden] {
  display: none !important;
}

.authMenuHead {
  display: grid;
  gap: 3px;
  padding-bottom: 4px;
  border-bottom: 1px solid oklch(0.26 0.005 60 / 0.42);
}

.authMenuScreen {
  display: grid;
  gap: 10px;
}

.authMenuScreen[hidden] {
  display: none !important;
}

.authMenuField {
  display: grid;
  gap: 6px;
}

.authMenuPageHead {
  display: grid;
  gap: 4px;
}

.authMenuPageTitle {
  margin: 0;
  color: oklch(0.92 0.004 60);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.authMenuFieldLabel {
  color: oklch(0.54 0.008 60);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.authMenuFieldSummary {
  margin: 0;
  color: oklch(0.54 0.008 60);
  font-size: 12px;
  line-height: 1.45;
}

.authLanguageStack {
  display: grid;
  gap: 8px;
}

.authMenuActionSplit {
  justify-content: space-between;
  padding-inline: 16px 14px;
  gap: 12px;
}

.authMenuActionTitle {
  color: oklch(0.92 0.004 60);
  font-size: 14px;
  font-weight: 800;
}

.authMenuActionChevron {
  color: oklch(0.54 0.008 60);
  font-size: 14px;
  font-weight: 900;
  transition: transform 0.14s ease, color 0.14s ease;
}

.authMenuActionSplit:hover .authMenuActionChevron {
  transform: translateX(2px);
  color: oklch(0.74 0.006 60);
}

.authMenuBack {
  border: 0;
  background: transparent;
  color: oklch(0.74 0.006 60);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.authMenuBackArrow {
  color: oklch(0.54 0.008 60);
  font-size: 14px;
  line-height: 1;
}

.authLanguageCard {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid oklch(0.32 0.006 60 / 0.82);
  background: oklch(0.11 0.003 60 / 0.96);
  color: oklch(0.92 0.004 60);
  display: grid;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.authLanguageCard:hover {
  transform: translateY(-1px);
  border-color: oklch(0.78 0.12 75 / 0.82);
  background: oklch(0.16 0.004 60 / 0.98);
}

.authLanguageCardTitle {
  font-size: 14px;
  font-weight: 800;
}

.authLanguageCardHint {
  color: oklch(0.54 0.008 60);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.authLanguageCard.isActive,
.authLanguageCard[aria-pressed="true"] {
  color: oklch(0.12 0.005 60);
  border-color: oklch(0.78 0.12 75 / 0.86);
  background: linear-gradient(135deg, oklch(0.78 0.12 75 / 0.98), rgba(255, 219, 155, 0.94));
  box-shadow: 0 8px 18px oklch(0.78 0.12 75 / 0.18);
}

.authLanguageCard.isActive .authLanguageCardHint,
.authLanguageCard[aria-pressed="true"] .authLanguageCardHint {
  color: oklch(0.12 0.005 60 / 0.72);
}

.authMenuActions {
  display: grid;
  gap: 8px;
}

.authMenuActions[hidden] {
  display: none;
}

.authMenuAction {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid oklch(0.32 0.006 60 / 0.82);
  background: oklch(0.11 0.003 60 / 0.96);
  color: oklch(0.92 0.004 60);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.authMenuAction.primary {
  border-color: oklch(0.78 0.12 75 / 0.86);
  background: linear-gradient(135deg, oklch(0.78 0.12 75 / 0.94), rgba(255, 214, 151, 0.9));
  color: oklch(0.12 0.005 60);
}

#authUserLabel {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================================================================ */
/* Desktop: Left Vertical Sidebar Layout + Smooth Transition (≥981px) */
/* ================================================================ */
@media (min-width: 981px) {

  /* Animate the grid column width on expand/collapse */
  .appShell {
    grid-template-columns: 216px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: start;
    transition: grid-template-columns 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Sidebar: sticky vertical flex column */
  .sidebar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 10px;
    position: sticky;
    top: 14px;
    height: calc(100vh - 28px);
    overflow: hidden;
    grid-template-columns: unset;
    transition: padding 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sidebarHeader {
    flex-shrink: 0;
    padding: 4px 4px 12px;
    border-bottom: 1px solid var(--stroke);
    margin-bottom: 6px;
    overflow: hidden;
  }

  /* Brand text: fade-out instead of display:none */
  .brandText {
    overflow: hidden;
    white-space: nowrap;       /* prevent wrapping at max-width:0, keeps height stable */
    max-width: 180px;
    opacity: 1;
    transition: opacity 0.18s ease, max-width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* sideNav: vertical list */
  .sideNav {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    flex-wrap: nowrap;
    gap: 2px;
    justify-content: flex-start;
    align-items: stretch;
    scrollbar-width: none;
  }

  /* Nav buttons: full-width, left-aligned, with animated sizing */
  .navBtn {
    width: 100%;
    justify-content: flex-start;
    border-radius: 11px;
    height: 42px;          /* fixed — never changes, prevents Y-shift */
    padding: 0 12px;
    gap: 10px;
    white-space: nowrap;
    min-width: unset;
    transition:
      border-color 0.16s ease,
      background 0.16s ease,
      box-shadow 0.16s ease,
      transform 0.16s ease,
      border-radius 0.24s cubic-bezier(0.4, 0, 0.2, 1),
      justify-content 0s,
      gap 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .navIcon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    transition: width 0.24s ease, height 0.24s ease;
  }

  /* Nav label: fade + shrink instead of display:none */
  .navLabel {
    overflow: hidden;
    max-width: 160px;
    opacity: 1;
    transition: opacity 0.16s ease, max-width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Controls at bottom */
  .sideControls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--stroke);
    justify-self: unset;
    overflow: hidden;
    transition: padding 0.24s ease, opacity 0.2s ease;
  }

  .sideControls .controlLabel {
    min-width: unset;
    width: 100%;
    overflow: hidden;
  }

  .sideControls .primaryBtn,
  .sideControls .ghostBtn {
    width: 100%;
    min-width: unset;
    padding: 0 12px;
    height: 38px;
    overflow: hidden;
    transition:
      width 0.24s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.24s ease,
      border-radius 0.24s ease,
      transform 0.16s ease,
      filter 0.16s ease;
  }

  .authMenuDock {
    width: 100%;
    transition: width 0.24s ease;
  }

  .authMenuBtn {
    width: 100%;
    height: 42px;
    border-radius: 11px;
    justify-content: flex-start;
    padding: 0 12px;
    gap: 10px;
    transition:
      width 0.24s cubic-bezier(0.4, 0, 0.2, 1),
      height 0.24s ease,
      padding 0.24s ease,
      border-radius 0.24s ease,
      border-color 0.14s ease,
      transform 0.14s ease,
      filter 0.14s ease;
  }

  .authMenuPanel {
    bottom: calc(100% + 8px);
    top: auto;
    left: 0;
    right: auto;
  }

  /* ── Collapsed state ── */
  body.sidebarCollapsed .appShell {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  body.sidebarCollapsed .sidebar {
    padding: 14px 8px;
    align-items: center;
  }

  body.sidebarCollapsed .sidebarHeader {
    display: flex;
    justify-content: center;
    padding: 4px 0 12px;
  }

  body.sidebarCollapsed .brandText {
    max-width: 0;
    opacity: 0;
  }

  body.sidebarCollapsed .brand {
    gap: 0;
  }

  body.sidebarCollapsed .brandDot {
    width: 11px;
    height: 11px;
    box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.18);
  }

  body.sidebarCollapsed .sideNav {
    align-items: stretch;
    gap: 2px;              /* same as expanded — no cumulative Y-shift */
    width: 100%;
  }

  /* Collapsed nav button: same height as expanded, icon centered */
  body.sidebarCollapsed .navBtn {
    height: 42px;          /* same as expanded — Y positions stay identical */
    padding: 0;
    gap: 0;                /* no gap to invisible label → icon truly centered */
    justify-content: center;
    border-radius: 13px;
  }

  /* Labels slide + fade away */
  body.sidebarCollapsed .navLabel {
    max-width: 0;
    opacity: 0;
  }

  body.sidebarCollapsed .navIcon {
    width: 17px;
    height: 17px;
  }

  /* Collapse controls: hide labels, shrink buttons */
  body.sidebarCollapsed .sideControls {
    align-items: center;
    gap: 6px;
    padding-top: 8px;
  }

  body.sidebarCollapsed .sideControls .controlLabel {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  body.sidebarCollapsed .sideControls .primaryBtn,
  body.sidebarCollapsed .sideControls .ghostBtn {
    width: 40px;
    padding: 0;
    border-radius: 13px;
    font-size: 0;
  }

  body.sidebarCollapsed .authMenuDock {
    width: auto;
  }

  body.sidebarCollapsed .authMenuBtn {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  body.sidebarCollapsed .authMenuPanel {
    left: calc(100% + 8px);
    bottom: 0;
    top: auto;
    right: auto;
  }
}

.ghostBtn:hover,
.primaryBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.mainPanel {
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: linear-gradient(180deg, oklch(0.03 0.002 60 / 0.92), oklch(0.03 0.002 60 / 0.94));
  box-shadow: var(--shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Same flex min-content trap as .rail / .root inside React — this layer
   * sits in the appShell grid. Without min-width: 0 a deep descendant
   * with nowrap intrinsic width drags the panel past viewport. Belt-and-
   * suspenders with body { overflow-x: clip } above. */
  min-width: 0;
  /* Also clip at this layer so an escapee never reaches the body level.
   * Critical for the React pages that nest a flex column inside this
   * panel — chained min-content traps need a hard stop somewhere. */
  overflow-x: clip;
}

/* Every <section class="view"> is a sibling flex item in .mainPanel.
 * Same min-width: 0 needed for the same reason. Without this, even the
 * inactive (display: none) views can poison the calculation in some
 * browsers' layout pre-pass. */
.view {
  min-width: 0;
}

.topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topBar[hidden],
.sectionNav[hidden],
.legacyHeaderHidden {
  display: none !important;
}

.topBarActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.topBarMain {
  min-width: 0;
}

.topBar h2 {
  margin: 0;
  font: 800 26px/1.15 "Sora", "Noto Sans SC", sans-serif;
  letter-spacing: 0.2px;
}

.topBar p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  opacity: 0.75;
}

.authUserChip {
  min-height: 48px;
  min-width: 228px;
  padding: 8px 10px 8px 8px;
  border-radius: 16px;
  border: 1px solid oklch(0.32 0.006 60 / 0.72);
  background:
    linear-gradient(135deg, oklch(0.16 0.004 60 / 0.96), oklch(0.11 0.003 60 / 0.94)),
    oklch(0.11 0.003 60 / 0.9);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 1px 0 oklch(0.97 0.004 60 / 0.04);
}

.authAvatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, oklch(0.78 0.12 75 / 0.24), rgba(116, 170, 255, 0.28));
  border: 0;
  color: oklch(0.97 0.004 60);
}

.authAvatarText {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

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

.authUserChipLabel {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

#authUserLabel {
  color: oklch(0.92 0.004 60);
  font-size: 14px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topBarLogoutBtn {
  width: auto;
  min-width: 104px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
}

.commandLauncherBtn {
  height: 30px;
  min-width: 132px;
  border-radius: 999px;
  border: 1px solid oklch(0.32 0.006 60 / 0.92);
  background: oklch(0.11 0.003 60 / 0.96);
  color: oklch(0.74 0.006 60);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 11px;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}

.commandLauncherBtn strong {
  color: oklch(0.82 0.10 75);
  font-size: 10px;
  letter-spacing: 0.2px;
}

.commandLauncherBtn:hover {
  transform: translateY(-1px);
  border-color: oklch(0.78 0.12 75 / 0.94);
  filter: brightness(1.06);
}

body.commandPaletteOpen {
  overflow: hidden;
}

.commandPalette {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
}

.commandPalette[hidden] {
  display: none;
}

.commandPaletteBackdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: oklch(0.03 0.002 60 / 0.66);
}

.commandPalettePanel {
  position: relative;
  z-index: 1;
  width: min(820px, calc(100vw - 34px));
  border: 1px solid oklch(0.26 0.005 60 / 0.94);
  border-radius: 14px;
  background:
    radial-gradient(500px 170px at 12% -25%, oklch(0.78 0.12 75 / 0.16), transparent 74%),
    radial-gradient(560px 200px at 96% -35%, oklch(0.78 0.12 75 / 0.16), transparent 74%),
    linear-gradient(180deg, oklch(0.11 0.003 60 / 0.98), oklch(0.03 0.002 60 / 0.98));
  box-shadow: 0 24px 46px oklch(0.03 0.002 60 / 0.62);
  padding: 11px;
  display: grid;
  gap: 9px;
}

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

.commandPaletteHead h3 {
  margin: 0;
  font: 800 16px/1.2 "Sora", "Noto Sans SC", sans-serif;
  color: oklch(0.92 0.004 60);
}

.commandInputWrap {
  display: grid;
  gap: 6px;
}

.commandLabel {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.commandInputRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

#globalCommandInput {
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: 1px solid oklch(0.32 0.006 60 / 0.85);
  background: oklch(0.11 0.003 60 / 0.96);
  color: var(--text);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 700;
}

#globalCommandInput:focus {
  outline: none;
  border-color: oklch(0.78 0.12 75 / 0.96);
  box-shadow: 0 0 0 1px oklch(0.78 0.12 75 / 0.35);
}

.commandRunBtn {
  min-width: 64px;
  height: 36px;
  border-radius: 10px;
  border-color: oklch(0.78 0.12 75 / 0.65);
  background: linear-gradient(135deg, oklch(0.78 0.12 75 / 0.86), rgba(255, 214, 151, 0.82));
  color: oklch(0.12 0.005 60);
}

.commandSuggest {
  border: 1px solid oklch(0.32 0.006 60 / 0.84);
  border-radius: 10px;
  background: oklch(0.11 0.003 60 / 0.96);
  max-height: 240px;
  overflow: auto;
  display: grid;
  gap: 2px;
  padding: 4px;
}

.commandSuggest[hidden] {
  display: none;
}

.commandSuggestItem {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: oklch(0.74 0.006 60);
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  display: grid;
  gap: 3px;
}

.commandSuggestItem:hover {
  border-color: oklch(0.78 0.12 75 / 0.64);
  background: oklch(0.22 0.005 60 / 0.44);
}

.commandSuggestItem.isActive {
  border-color: oklch(0.78 0.12 75 / 0.74);
  background: oklch(0.22 0.06 75 / 0.42);
}

.commandSuggestLabel {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.commandSuggestMeta {
  font-size: 11px;
  color: oklch(0.54 0.008 60);
}

.commandTokens {
  margin-top: 0;
  min-height: 28px;
  gap: 6px;
}

.commandTokens .chip {
  font-size: 11px;
  padding: 4px 8px;
}

.intentBar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}

.intentBtn {
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid oklch(0.32 0.006 60 / 0.88);
  background: oklch(0.16 0.004 60 / 0.92);
  color: oklch(0.74 0.006 60);
  font-size: 12px;
  font-weight: 700;
  padding: 0 8px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.intentBtn:hover {
  transform: translateY(-1px);
  border-color: oklch(0.78 0.12 75 / 0.95);
  filter: brightness(1.06);
}

.intentBtn.isActive {
  border-color: oklch(0.78 0.12 75 / 0.84);
  color: oklch(0.85 0.08 75);
  background: linear-gradient(180deg, oklch(0.22 0.06 75 / 0.75), oklch(0.16 0.004 60 / 0.94));
}

.statusBar {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: oklch(0.11 0.003 60 / 0.72);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  align-items: center;
  gap: 14px;
  padding: 5px 10px;
}

.statusItem {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.statusItem[hidden] {
  display: none !important;
}

.connectionStatusItem {
  align-items: center;
}

.connectionDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: var(--muted);
  box-shadow: 0 0 0 4px oklch(0.74 0.006 60 / 0.12);
}

.connectionDot.ok {
  background: var(--green);
  box-shadow: 0 0 0 4px oklch(0.74 0.16 155 / 0.14), 0 0 14px oklch(0.74 0.16 155 / 0.38);
}

.connectionDot.err {
  background: var(--red);
  box-shadow: 0 0 0 4px oklch(0.66 0.18 25 / 0.15), 0 0 14px oklch(0.66 0.18 25 / 0.35);
}

.decisionSymbolStatusItem {
  align-items: center;
}

.decisionStatusPairControl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.decisionStatusPairControl #symbolSelect {
  width: 156px;
  height: 28px;
  border-radius: 999px;
  border-color: oklch(0.78 0.12 75 / 0.48);
  background: oklch(0.16 0.004 60 / 0.95);
  color: oklch(0.85 0.08 75);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 800;
}

.statusLabel {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.statusValue {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.statusValue.ok {
  color: var(--green);
}

.statusValue.err {
  color: var(--red);
}

.statusValue.run {
  color: oklch(0.82 0.10 75);
  animation: statusPulse 0.9s ease-in-out infinite;
}

.statusValue.idle {
  color: var(--muted);
}

.statusActionBtn {
  border: 1px solid oklch(0.26 0.005 60 / 0.54);
  border-radius: 999px;
  background: oklch(0.11 0.003 60 / 0.74);
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.statusActionBtn:hover,
.statusActionBtn:focus-visible {
  border-color: oklch(0.78 0.12 75 / 0.88);
  background: oklch(0.16 0.004 60 / 0.92);
  transform: translateY(-1px);
  outline: none;
}

@keyframes statusPulse {
  0% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.75;
  }
}

.view {
  display: none;
  animation: rise 0.3s ease both;
}

.view.isActive {
  display: block;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes skeletonShift {
  0% {
    background-position: 180% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

@keyframes tvSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes statusPulse {
  0% {
    box-shadow: 0 0 0 0 oklch(0.74 0.16 155 / 0.24);
  }
  70% {
    box-shadow: 0 0 0 8px oklch(0.74 0.16 155 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 oklch(0.74 0.16 155 / 0);
  }
}

/* ================================================================ */
/* Overview: Category Tabs + Masonry Feed                            */
/* ================================================================ */

.overviewTabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.overviewTabs::-webkit-scrollbar {
  display: none;
}

.overviewTab {
  flex-shrink: 0;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: oklch(0.11 0.003 60 / 0.86);
  color: oklch(0.74 0.006 60);
  font: 700 13px/1 "Sora", "Noto Sans SC", sans-serif;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
  white-space: nowrap;
}

.overviewTab:hover {
  border-color: var(--stroke-strong);
  background: oklch(0.16 0.004 60 / 0.92);
  transform: translateY(-1px);
}

.overviewTab.isActive {
  border-color: oklch(0.78 0.12 75 / 0.85);
  color: oklch(0.85 0.08 75);
  background: linear-gradient(180deg, oklch(0.22 0.06 75 / 0.7), oklch(0.16 0.004 60 / 0.92));
  box-shadow: 0 0 0 1px oklch(0.78 0.12 75 / 0.18);
}

/* Masonry grid using CSS columns */
.overviewFeed {
  columns: 3 280px;
  column-gap: 14px;
}

/* Individual feed cards */
.feedCard {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: linear-gradient(180deg, oklch(0.16 0.004 60 / 0.94), oklch(0.11 0.003 60 / 0.96));
  padding: 14px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}

.feedCard:hover {
  border-color: var(--stroke-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px oklch(0.03 0.002 60 / 0.36);
}

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

.feedCardHeadActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feedCardTag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
}

.feedCardTag.sentiment { background: oklch(0.78 0.12 75 / 0.14); color: var(--accent); border: 1px solid oklch(0.78 0.12 75 / 0.28); }
.feedCardTag.alpha     { background: oklch(0.78 0.12 75 / 0.12); color: var(--blue);   border: 1px solid oklch(0.78 0.12 75 / 0.26); }
.feedCardTag.live      { background: oklch(0.74 0.16 155 / 0.10);  color: var(--green);  border: 1px solid oklch(0.74 0.16 155 / 0.24); }
.feedCardTag.news      { background: oklch(0.68 0.20 310 / 0.10); color: oklch(0.68 0.20 310);       border: 1px solid oklch(0.68 0.20 310 / 0.22); }
.feedCardTag.market    { background: oklch(0.66 0.18 25 / 0.10); color: var(--red);    border: 1px solid oklch(0.66 0.18 25 / 0.22); }

.feedCardMeta {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.feedCardTitle {
  margin: 0;
  font: 700 15px/1.3 "Sora", "Noto Sans SC", sans-serif;
  color: var(--text);
}

.feedCardBody {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.feedCardBodySub {
  font-size: 12px;
}

.feedCardFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid oklch(0.26 0.005 60 / 0.5);
}

.feedCardFootNote {
  font-size: 11px;
  color: var(--muted);
}

.feedCardCreateBtn {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  background: transparent;
  border: 1px solid oklch(0.78 0.12 75 / 0.4);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}

.feedCardCreateBtn:hover {
  border-color: oklch(0.78 0.12 75 / 0.8);
  background: oklch(0.78 0.12 75 / 0.08);
}

/* Vote bar */
.feedVoteBar {
  display: flex;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: oklch(0.66 0.18 25 / 0.3);
}

.feedVoteBarUp   { background: var(--green); border-radius: 999px 0 0 999px; transition: width 0.4s ease; }
.feedVoteBarDown { background: var(--red);   border-radius: 0 999px 999px 0; flex: 1; }

.feedVoteStats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.feedVoteStat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--muted);
}

.feedVoteStat.up  strong { color: var(--green); font-size: 18px; font-weight: 800; }
.feedVoteStat.down strong { color: var(--red);   font-size: 18px; font-weight: 800; }

.feedVoteActions {
  display: flex;
  gap: 8px;
}

.feedVoteBtn {
  flex: 1;
  height: 36px;
  border-radius: 999px;
  border: 1px solid;
  font: 700 13px/1 "Sora", "Noto Sans SC", sans-serif;
  cursor: pointer;
  transition: transform 0.14s, filter 0.14s;
}

.feedVoteBtn.up   { border-color: oklch(0.74 0.16 155 / 0.55); background: oklch(0.74 0.16 155 / 0.1); color: var(--green); }
.feedVoteBtn.down { border-color: oklch(0.66 0.18 25 / 0.55); background: oklch(0.66 0.18 25 / 0.1); color: var(--red); }
.feedVoteBtn:hover { transform: translateY(-1px); filter: brightness(1.1); }

/* Notes inside card */
.feedNotesGrid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--stroke) transparent;
}

/* Chat inside card */
.feedChatList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--stroke) transparent;
}

.feedChatComposer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid oklch(0.26 0.005 60 / 0.5);
}

.feedChatComposer textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: oklch(0.11 0.003 60 / 0.86);
  color: var(--text);
  padding: 8px 10px;
  font: 600 12px/1.5 "Noto Sans SC", "Sora", sans-serif;
  resize: none;
  box-sizing: border-box;
}

.feedChatComposer textarea:focus {
  outline: none;
  border-color: oklch(0.78 0.12 75 / 0.8);
}

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

.feedChatAttach {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}

/* Empty state inside cards */
.feedEmptyState {
  font-size: 12px;
  color: var(--muted);
  padding: 12px 0;
  text-align: center;
}

/* Placeholder cards (subtle) */
.feedCardPlaceholder {
  opacity: 0.65;
  cursor: default;
}

.feedCardPlaceholder:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--stroke);
}

/* News feed card image */
.feedCardImg {
  width: calc(100% + 28px);
  margin: -14px -14px 10px -14px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  display: block;
}

/* Dynamic post cards container sits inline in the masonry columns flow */
#overviewNewsCards {
  display: contents;
}

/* Community post cards in overview feed */
.feedCardPost {
  break-inside: avoid;
}

.feedPostAuthor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 6px;
}

.feedPostAvatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: oklch(0.97 0.004 60);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.feedPostName {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feedPostFoot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--stroke);
}

.feedPostLikes {
  font-size: 12px;
  color: var(--muted);
}

/* ── Watchlist button in tabs row ─────────────────────────────────────── */
.overviewTabAction {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.overviewTabAction:hover { color: var(--text); border-color: var(--accent); }

/* ── Watchlist modal ──────────────────────────────────────────────────── */
.watchlistModal {
  position: fixed;
  inset: 0;
  z-index: 140;
}
.watchlistBackdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.03 0.002 60 / 0.72);
  backdrop-filter: blur(8px);
}
.watchlistPanel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  max-height: 80vh;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.watchlistHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--stroke);
}
.watchlistTitle {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
}
.watchlistSub {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
  width: 100%;
}
.watchlistSearch {
  padding: 12px 16px;
  border-bottom: 1px solid var(--stroke);
}
.watchlistSearch input {
  width: 100%;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.watchlistSearch input:focus { border-color: var(--accent); }
.watchlistGrid {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.watchlistChip {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.watchlistChip:hover { border-color: var(--accent); }
.watchlistChip.isOn {
  background: var(--accent);
  border-color: var(--accent);
  color: oklch(0.97 0.004 60);
}
.watchlistFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--stroke);
}
.watchlistCount { font-size: 12px; color: var(--muted); }
.watchlistSaveBtn {
  height: 34px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--accent);
  color: oklch(0.97 0.004 60);
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.watchlistSaveBtn:hover { opacity: 0.85; }

@media (max-width: 980px) {
  .overviewFeed {
    columns: 2 240px;
    column-gap: 10px;
  }

  .feedCard {
    margin-bottom: 10px;
  }
}

@media (max-width: 600px) {
  .overviewFeed {
    columns: 1;
  }
}

/* ================================================================ */

.card {
  border: 1px solid var(--stroke);
  border-radius: 15px;
  background: linear-gradient(180deg, oklch(0.16 0.004 60 / 0.92), oklch(0.11 0.003 60 / 0.96));
  box-shadow: var(--shadow);
  padding: 14px;
}

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

.cardHead h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.intelSection > .cardHead {
  justify-content: flex-end;
}

.split {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 12px;
}

.marketStack {
  display: grid;
  gap: 12px;
}

.marketPrimary {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 700px;
}

.marketLoadingLayer {
  position: absolute;
  inset: 0;
  z-index: 28;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(860px 420px at 52% 42%, oklch(0.32 0.006 60 / 0.17), oklch(0.03 0.002 60 / 0.94) 68%),
    linear-gradient(180deg, rgba(5, 11, 23, 0.9), oklch(0.03 0.002 60 / 0.95));
  box-shadow: inset 0 0 0 1px oklch(0.32 0.006 60 / 0.48);
}

.view[data-view="market"].marketLoading .marketLoadingLayer {
  opacity: 1;
  pointer-events: auto;
}

.view[data-view="market"].marketLoading .marketPrimary > :not(.marketLoadingLayer) {
  opacity: 0.14;
  filter: blur(1.1px) saturate(0.72);
  pointer-events: none;
}

.marketLoadingShell {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(240px, 0.36fr) minmax(0, 1fr) minmax(210px, 0.34fr);
}

.marketLoadPane {
  min-width: 0;
}

.marketLoadPaneLeft,
.marketLoadPaneRight {
  background: linear-gradient(180deg, oklch(0.11 0.003 60 / 0.9), oklch(0.03 0.002 60 / 0.94));
}

.marketLoadPaneLeft {
  border-right: 1px solid oklch(0.32 0.006 60 / 0.38);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.marketLoadCoinIcon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid oklch(0.74 0.006 60 / 0.62);
  background:
    radial-gradient(circle at 35% 30%, oklch(0.92 0.004 60 / 0.94), oklch(0.74 0.006 60 / 0.78) 42%, oklch(0.32 0.006 60 / 0.7) 100%);
  box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.12);
}

.marketLoadCoinMeta {
  display: grid;
  gap: 2px;
}

.marketLoadSymbol {
  font-size: 32px;
  line-height: 1.08;
  font-weight: 800;
  color: oklch(0.92 0.004 60);
}

.marketLoadRank {
  color: oklch(0.54 0.008 60);
  font-size: 12px;
  font-weight: 700;
}

.marketLoadPrice {
  margin-top: 8px;
  font: 800 52px/1 "Sora", "Noto Sans SC", sans-serif;
  color: oklch(0.97 0.004 60);
  letter-spacing: -0.4px;
}

.marketLoadPrice.placeholder {
  color: oklch(0.54 0.008 60);
}

.marketLoadChange {
  font-size: 24px;
  font-weight: 800;
}

.marketLoadChange.up {
  color: var(--green);
}

.marketLoadChange.down {
  color: var(--red);
}

.marketLoadChange.flat {
  color: oklch(0.54 0.008 60);
}

.marketLoadLeftSkeleton {
  margin-top: 8px;
  display: grid;
  gap: 10px;
}

.marketLoadBoost {
  margin-top: auto;
  height: 44px;
  border-radius: 12px;
  border: 1px solid oklch(0.66 0.18 25 / 0.72);
  background: oklch(0.03 0.002 60 / 0.52);
  color: oklch(0.74 0.14 25);
  font: 800 23px/1 "Sora", "Noto Sans SC", sans-serif;
  letter-spacing: 0.2px;
}

.marketLoadPaneCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  border-right: 1px solid oklch(0.32 0.006 60 / 0.32);
  border-left: 1px solid oklch(0.32 0.006 60 / 0.32);
  background:
    radial-gradient(460px 260px at 50% 52%, oklch(0.78 0.12 75 / 0.14), transparent 66%),
    linear-gradient(180deg, oklch(0.03 0.002 60 / 0.55), oklch(0.03 0.002 60 / 0.58));
}

.marketLoadPaneCenter h3 {
  margin: 0;
  font: 800 40px/1.1 "Sora", "Noto Sans SC", sans-serif;
  letter-spacing: 0.2px;
}

.marketLoadPaneCenter p {
  margin: 0;
  color: oklch(0.54 0.008 60);
  font-size: 27px;
}

.marketLoadSpinner {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 3px solid oklch(0.78 0.12 75 / 0.3);
  border-top-color: oklch(0.78 0.12 75 / 0.96);
  animation: tvSpin 0.95s linear infinite;
}

.marketLoadPaneRight {
  padding: 17px 15px;
  display: grid;
  align-content: start;
  gap: 14px;
  border-left: 1px solid oklch(0.32 0.006 60 / 0.34);
}

.marketLoadBar {
  height: 18px;
  border-radius: 999px;
  display: block;
  background:
    linear-gradient(
      90deg,
      oklch(0.32 0.006 60 / 0.42) 0%,
      oklch(0.44 0.008 60 / 0.64) 50%,
      oklch(0.32 0.006 60 / 0.42) 100%
    );
  background-size: 230% 100%;
  animation: skeletonShift 1.3s ease-in-out infinite;
}

.marketLoadBar.w94 { width: 94%; }
.marketLoadBar.w92 { width: 92%; }
.marketLoadBar.w90 { width: 90%; }
.marketLoadBar.w88 { width: 88%; }
.marketLoadBar.w86 { width: 86%; }
.marketLoadBar.w84 { width: 84%; }
.marketLoadBar.w78 { width: 78%; }
.marketLoadBar.w74 { width: 74%; }
.marketLoadBar.w72 { width: 72%; }
.marketLoadBar.w68 { width: 68%; }
.marketLoadBar.w64 { width: 64%; }
.marketLoadBar.w62 { width: 62%; }
.marketLoadBar.w58 { width: 58%; }
.marketLoadBar.w54 { width: 54%; }

.marketTools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.intelLayout {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.intelSection {
  min-width: 0;
}

.intelSection[hidden] {
  display: none;
}

.view[data-view="intel"] .panelList,
.view[data-view="intel"] .timelineList {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.contextLayout {
  display: grid;
  gap: 12px;
}

.intelLower {
  display: contents;
}

.metalsLayout {
  display: grid;
  gap: 12px;
}

.metalsHeroCard {
  overflow: hidden;
  padding: 11px 12px;
}

.metalsHeroHead {
  align-items: flex-start;
  gap: 12px;
}

.metalsHeroTitleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.metalsHeroTitle {
  margin: 0;
}

.metalsHeroTitle::before,
.metalsHeroTitle::after,
.metalsStatusBadge,
#metalsStatusBadge,
.metalsStatusText,
#metalsStatusText {
  content: none !important;
  display: none !important;
}

.metalsHeroTitleRow::before,
.metalsHeroTitleRow::after {
  content: none !important;
  display: none !important;
}

.metalsFetchState {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid oklch(0.32 0.006 60 / 0.48);
  background: oklch(0.16 0.004 60 / 0.9);
  color: oklch(0.74 0.006 60);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.metalsFetchState.toneLoading,
.metalsFetchState.toneRefreshing {
  border-color: oklch(0.78 0.12 75 / 0.42);
  background: oklch(0.22 0.06 75 / 0.62);
  color: oklch(0.82 0.10 75);
}

.metalsFetchState.toneLive {
  border-color: oklch(0.78 0.12 75 / 0.38);
  background: oklch(0.22 0.005 60 / 0.46);
  color: oklch(0.74 0.006 60);
}

.metalsFetchState.toneCached {
  border-color: oklch(0.74 0.006 60 / 0.34);
  background: oklch(0.22 0.005 60 / 0.54);
  color: oklch(0.74 0.006 60);
}

.metalsFetchState.toneFallback {
  border-color: oklch(0.66 0.18 25 / 0.34);
  background: oklch(0.66 0.18 25 / 0.18);
  color: oklch(0.74 0.14 25);
}

.metalsHeroText {
  margin: 3px 0 0;
  color: oklch(0.54 0.008 60);
  font-size: 12px;
  line-height: 1.4;
}

.metalsSummary {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  color: oklch(0.92 0.004 60);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.metalsQuickGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.metalsKeywordChips {
  margin-top: 8px;
  gap: 6px;
}

.metalsHeroCard .hint {
  font-size: 12px;
}

.metalsHeroCard .cardHead h2,
.metalsHeroTitle {
  font-size: 16px;
}

.metalsHeroCard .chip {
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

.metalsQuickItem {
  min-height: 72px;
  padding: 10px 12px;
}

.metalsQuickItem span {
  font-size: 11px;
}

.metalsQuickItem strong {
  font-size: 17px;
}

.metalsMarketSection .cardHead {
  align-items: flex-start;
}

.metalsMarketRange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.5);
  background: oklch(0.11 0.003 60 / 0.86);
}

.segmentedBtn {
  min-width: 52px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: oklch(0.54 0.008 60);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.segmentedBtn:hover {
  color: oklch(0.74 0.006 60);
}

.segmentedBtn.isActive,
.segmentedBtn[aria-pressed="true"] {
  border-color: oklch(0.78 0.12 75 / 0.36);
  background: oklch(0.32 0.006 60 / 0.28);
  color: oklch(0.97 0.004 60);
  box-shadow: inset 0 0 0 1px oklch(0.78 0.12 75 / 0.14);
}

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

.metalsMarketItem {
  position: relative;
  border: 1px solid oklch(0.26 0.005 60 / 0.58);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 26, 48, 0.96), oklch(0.11 0.003 60 / 0.96));
  padding: 13px 13px 12px;
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.metalsMarketItem.isSelectable {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.metalsMarketItem.isSelectable:hover {
  transform: translateY(-1px);
  border-color: oklch(0.78 0.12 75 / 0.78);
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.56);
}

.metalsMarketItem.isSelectable:focus-visible {
  outline: 2px solid oklch(0.78 0.12 75 / 0.52);
  outline-offset: 2px;
}

.metalsMarketItem.isActive {
  border-color: oklch(0.78 0.12 75 / 0.78);
  background: linear-gradient(180deg, oklch(0.16 0.004 60 / 0.98), oklch(0.11 0.003 60 / 0.98));
  box-shadow:
    0 16px 30px -24px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px oklch(0.78 0.12 75 / 0.16);
}

.metalsMarketItem::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, oklch(0.78 0.12 75 / 0.94), oklch(0.78 0.12 75 / 0.45));
}

.metalsMarketItem.gold::before {
  background: linear-gradient(180deg, oklch(0.82 0.10 75 / 0.96), oklch(0.62 0.13 70 / 0.42));
}

.metalsMarketItem.silver::before {
  background: linear-gradient(180deg, oklch(0.78 0.12 75 / 0.96), oklch(0.78 0.12 75 / 0.42));
}

.metalsMarketHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.metalsMarketNameWrap {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.metalsMarketNameRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.metalsMarketName {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: oklch(0.92 0.004 60);
}

.metalsMarketTicker {
  color: oklch(0.54 0.008 60);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.metalsMarketPriceRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.metalsMarketPrice {
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  color: oklch(0.97 0.004 60);
  letter-spacing: -0.03em;
}

.metalsMarketDelta {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid oklch(0.32 0.006 60 / 0.52);
  background: oklch(0.16 0.004 60 / 0.92);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.metalsMarketDelta.up {
  color: oklch(0.78 0.12 75);
  border-color: oklch(0.78 0.12 75 / 0.35);
  background: oklch(0.32 0.006 60 / 0.18);
}

.metalsMarketDelta.down {
  color: oklch(0.66 0.18 25);
  border-color: oklch(0.66 0.18 25 / 0.35);
  background: oklch(0.66 0.18 25 / 0.18);
}

.metalsMarketDelta.flat {
  color: oklch(0.74 0.006 60);
}

.metalsSparkline {
  position: relative;
  height: 60px;
  border-radius: 12px;
  border: 1px solid oklch(0.26 0.005 60 / 0.38);
  background: linear-gradient(180deg, oklch(0.11 0.003 60 / 0.88), oklch(0.11 0.003 60 / 0.74));
  overflow: hidden;
}

.metalsSparklineSvg {
  display: block;
  width: 100%;
  height: 100%;
}

.metalsSparklineEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: oklch(0.54 0.008 60);
  font-size: 12px;
  font-weight: 700;
}

.metalsMarketStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.metalsMarketStat {
  border-radius: 12px;
  border: 1px solid oklch(0.26 0.005 60 / 0.38);
  background: oklch(0.11 0.003 60 / 0.72);
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.metalsMarketStat span {
  color: oklch(0.54 0.008 60);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metalsMarketStat strong {
  color: oklch(0.92 0.004 60);
  font-size: 13px;
  line-height: 1.35;
}

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

.metalsMarketDetailHint {
  color: oklch(0.54 0.008 60);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metalsMarketSourceHint {
  color: #7f96bc;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metalsMarketDetail {
  margin-top: 14px;
}

.metalsTokenPage {
  display: grid;
  gap: 12px;
}

.metalsTokenPageTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.metalsDetailBackBtn {
  width: auto;
  min-width: 220px;
  padding: 0 14px;
}

.metalsTokenDetailRoot {
  display: grid;
  gap: 12px;
}

.metalsTokenEmpty {
  padding: 18px;
}

.metalsTokenHeroCard,
.metalsTokenChartCard,
.metalsTokenStatsCard,
.metalsTokenResearchCard,
.metalsTokenPeerCard {
  overflow: hidden;
}

.metalsTokenHeroHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.metalsTokenHeroLead {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.metalsTokenHeroLeadText {
  display: grid;
  gap: 7px;
  min-width: 0;
}

/* Token logo on the detail hero. 52px — large enough to be the identity
   anchor of the page (the list rows use 34px), circle so it reads as a
   token mark. Real CoinGecko image fills it; the isFallback variant shows
   a first-letter chip with a deterministic warm-neutral tint. */
.metalsTokenHeroLogo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.97 0.004 60 / 0.06);
  border: 1px solid oklch(0.97 0.004 60 / 0.08);
}

.metalsTokenHeroLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.metalsTokenHeroLogo.isFallback {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: oklch(0.85 0.04 75);
  background: oklch(0.78 0.12 75 / 0.14);
  border-color: oklch(0.78 0.12 75 / 0.28);
}

.metalsTokenHeroTitleRow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.metalsTokenHeroTitle {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  color: oklch(0.97 0.004 60);
}

.metalsTokenHeroSide {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.metalsTokenHeroPrice {
  font-size: 42px;
  line-height: 0.98;
  /* Was 900/-0.05em: at 42px that's so tight the glyphs collide and the
     ultra-heavy weight reads as a logo, not a number. 750 + tabular-nums
     + gentler tracking makes the price legible AND aligned. */
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: oklch(0.97 0.004 60);
}

.metalsTokenHeroSummary {
  margin: 12px 0 0;
  color: oklch(0.82 0.006 60);
  font-size: 14px;
  line-height: 1.75;
}

.metalsTokenDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
  gap: 12px;
}

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

.metalsTokenKlineHead {
  align-items: flex-start;
}

.metalsTokenKlineRange {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.5);
  background: oklch(0.11 0.003 60 / 0.86);
}

.metalsTokenKlineMetaGrid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.metalsTokenKlineMeta {
  border-radius: 12px;
  border: 1px solid oklch(0.26 0.005 60 / 0.38);
  background: oklch(0.11 0.003 60 / 0.72);
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.metalsTokenKlineMeta span {
  color: oklch(0.54 0.008 60);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metalsTokenKlineMeta strong {
  color: oklch(0.92 0.004 60);
  font-size: 13px;
  line-height: 1.35;
}

.metalsTokenKlineChange.up {
  color: oklch(0.78 0.12 75);
}

.metalsTokenKlineChange.down {
  color: oklch(0.66 0.18 25);
}

.metalsTokenKlineChange.flat {
  color: oklch(0.84 0.006 60);
}

.metalsTokenKlineCanvas {
  margin-top: 12px;
  height: 320px;
  position: relative;
  border-radius: 14px;
  border: 1px solid oklch(0.26 0.005 60 / 0.38);
  background: linear-gradient(180deg, oklch(0.11 0.003 60 / 0.92), oklch(0.03 0.002 60 / 0.96));
  overflow: hidden;
}

.metalsOhlcStage {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.metalsOhlcSvg {
  display: block;
  width: 100%;
  height: 100%;
}

.metalsCandle {
  transition: opacity 120ms ease, filter 120ms ease, transform 120ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.metalsCandle.isHover {
  filter: drop-shadow(0 0 12px oklch(0.78 0.12 75 / 0.32));
}

.metalsCandle.isHover rect {
  stroke-width: 1.35;
}

.metalsKlineHoverLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.metalsKlineHoverBand {
  position: absolute;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(107, 152, 235, 0.12), rgba(107, 152, 235, 0.03));
  border: 1px solid rgba(123, 173, 255, 0.08);
}

.metalsKlineCrosshair {
  position: absolute;
  background: oklch(0.78 0.12 75 / 0.34);
}

.metalsKlineCrosshair.isVertical {
  width: 1px;
  margin-left: -0.5px;
}

.metalsKlineCrosshair.isHorizontal {
  height: 1px;
  margin-top: -0.5px;
  background: oklch(0.78 0.12 75 / 0.24);
}

.metalsKlinePriceTag {
  position: absolute;
  right: 10px;
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(88, 121, 180, 0.72);
  background: rgba(9, 18, 34, 0.94);
  color: oklch(0.84 0.006 60);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(0, 8, 18, 0.42);
}

.metalsKlinePriceTag.up {
  color: oklch(0.80 0.03 220);
}

.metalsKlinePriceTag.down {
  color: oklch(0.80 0.06 40);
}

.metalsKlinePriceTag.flat {
  color: oklch(0.84 0.006 60);
}

.metalsKlineTooltip {
  position: absolute;
  min-width: 176px;
  max-width: 210px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(74, 102, 153, 0.62);
  background: linear-gradient(180deg, oklch(0.11 0.003 60 / 0.98), oklch(0.03 0.002 60 / 0.98));
  box-shadow: 0 20px 42px rgba(2, 8, 19, 0.46);
  color: oklch(0.92 0.004 60);
}

.metalsKlineTooltipLabel {
  display: block;
  color: oklch(0.84 0.006 60);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metalsKlineTooltipGrid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
}

.metalsKlineTooltipGrid span {
  color: oklch(0.62 0.01 60);
  font-size: 11px;
  font-weight: 700;
}

.metalsKlineTooltipGrid strong {
  color: oklch(0.92 0.004 60);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.metalsKlineTooltipChange {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 800;
}

.metalsKlineTooltipChange.up {
  color: oklch(0.78 0.12 75);
}

.metalsKlineTooltipChange.down {
  color: oklch(0.66 0.18 25);
}

.metalsKlineTooltipChange.flat {
  color: oklch(0.84 0.006 60);
}

.metalsKlineState {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: oklch(0.70 0.008 60);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 0 18px;
}

.metalsKlineState.isError {
  color: oklch(0.74 0.14 25);
}

.metalsTokenChartPane {
  display: grid;
  gap: 10px;
}

.metalsTokenChartHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.metalsTokenChartHead strong {
  color: oklch(0.92 0.004 60);
  font-size: 14px;
  line-height: 1.35;
}

.metalsTokenChartSparkline {
  height: 150px;
}

.metalsTokenStatsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.metalsTokenResearchList {
  display: grid;
  gap: 10px;
}

.metalsTokenPeerGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.metalsTokenPeerBtn {
  border: 1px solid oklch(0.26 0.005 60 / 0.4);
  border-radius: 12px;
  background: oklch(0.11 0.003 60 / 0.72);
  padding: 11px 12px;
  display: grid;
  justify-items: start;
  gap: 7px;
  cursor: pointer;
  color: oklch(0.92 0.004 60);
  text-align: left;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.metalsTokenPeerBtn:hover {
  transform: translateY(-1px);
  border-color: oklch(0.78 0.12 75 / 0.58);
  background: rgba(14, 28, 53, 0.86);
}

.metalsTokenPeerBtn:focus-visible {
  outline: 2px solid oklch(0.78 0.12 75 / 0.5);
  outline-offset: 2px;
}

.metalsTokenPeerName {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

.metalsTokenPeerMeta {
  color: oklch(0.54 0.008 60);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.metalsMarketDetailPanel {
  border: 1px solid rgba(62, 92, 143, 0.56);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15, 27, 50, 0.96), rgba(8, 17, 33, 0.98));
  padding: 14px;
  display: grid;
  gap: 14px;
}

.metalsMarketDetailHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.metalsMarketDetailLead {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.metalsMarketDetailTitle {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  color: #f2f7ff;
}

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

.metalsDetailActionPill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(93, 128, 191, 0.5);
  background: rgba(18, 33, 60, 0.92);
  color: oklch(0.74 0.006 60);
  font-size: 12px;
  font-weight: 800;
}

.metalsMarketDetailBody {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.9fr);
  gap: 14px;
}

.metalsMarketDetailPrimary {
  display: grid;
  gap: 12px;
}

.metalsMarketDetailPriceRow {
  align-items: center;
}

.metalsMarketDetailDeltaStack {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.metalsSparklineDetail {
  height: 110px;
}

.metalsMarketDetailSummary {
  margin: 0;
  color: #d2def4;
  font-size: 13px;
  line-height: 1.7;
}

.metalsMarketDetailStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.metalsMarketDetailResearch {
  display: grid;
  gap: 10px;
}

.metalsMarketDetailResearchHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.metalsMarketDetailResearchHead h4 {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: oklch(0.92 0.004 60);
}

.metalsMarketDetailResearchList {
  display: grid;
  gap: 10px;
}

.metalsDetailResearchItem {
  border: 1px solid oklch(0.26 0.005 60 / 0.38);
  border-radius: 12px;
  background: oklch(0.11 0.003 60 / 0.72);
  padding: 10px 11px;
  display: grid;
  gap: 6px;
}

.metalsDetailResearchItem h5 {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: oklch(0.92 0.004 60);
}

.metalsDetailResearchItem p {
  margin: 0;
  color: #c3d4f2;
  font-size: 12px;
  line-height: 1.65;
}

.metalsResearchMetaStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.metalsResearchMetaPill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.48);
  background: oklch(0.11 0.003 60 / 0.88);
  color: #c7d7f2;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.metalsResearchMetaPill.isSource {
  color: oklch(0.92 0.004 60);
  border-color: rgba(88, 121, 180, 0.58);
}

.metalsResearchMetaPill.isType {
  color: #9bc5ff;
}

.metalsResearchMetaPill.isTime {
  color: #b8cae7;
}

.metalsResearchMetaPill.isTime.isMuted {
  color: #8ba0c4;
  border-style: dashed;
}

.metalsResearchMetaPill.isSentiment.neutral {
  color: #dce8fb;
}

.metalsResearchMetaPill.isSentiment.positive {
  color: #9bd9b1;
}

.metalsResearchMetaPill.isSentiment.negative {
  color: #f0b19d;
}

.metalsMarketMetaRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.metalsMarketMetaRow a {
  color: #9bc5ff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.metalsMarketMetaRow a:hover {
  text-decoration: underline;
}

.metalsResearchGrid,
.metalsLowerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.metalsLaneSummary {
  margin: 10px 0 0;
  color: #bfd0ee;
  font-size: 13px;
  line-height: 1.6;
}

.metalsResearchList,
.metalsMacroList,
.metalsFlowList {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.metalsFlowList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metalsResearchItem,
.metalsMacroItem {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(12, 23, 44, 0.88);
  padding: 11px 12px;
  display: grid;
  gap: 7px;
  box-shadow: inset 0 0 0 1px rgba(32, 53, 92, 0.28);
}

.metalsResearchItem.isSelectable,
.metalsMacroItem.isSelectable {
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.metalsResearchItem.isSelectable:hover,
.metalsMacroItem.isSelectable:hover {
  transform: translateY(-1px);
  border-color: oklch(0.78 0.12 75 / 0.46);
  background: rgba(14, 28, 52, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(57, 94, 156, 0.34),
    0 14px 28px rgba(4, 10, 24, 0.28);
}

.metalsResearchItem.isSelectable:focus-visible,
.metalsMacroItem.isSelectable:focus-visible {
  outline: none;
  border-color: oklch(0.78 0.12 75 / 0.56);
  box-shadow:
    inset 0 0 0 1px rgba(57, 94, 156, 0.36),
    0 0 0 3px oklch(0.78 0.12 75 / 0.14);
}

.metalsResearchItemHead,
.metalsMacroHead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.metalsMacroHead .macroDot {
  position: static;
  left: auto;
  top: auto;
  flex: 0 0 16px;
}

.metalsMacroDot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(140, 179, 235, 0.75);
  background: #75abff;
  box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.12);
  flex: 0 0 16px;
}

.metalsMacroDot.toneCritical {
  background: #ff6e7d;
  border-color: rgba(255, 154, 166, 0.78);
  box-shadow: 0 0 0 4px oklch(0.66 0.18 25 / 0.15);
}

.metalsMacroDot.toneHigh {
  background: #ffbf67;
  border-color: oklch(0.78 0.12 75 / 0.82);
  box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.14);
}

.metalsMacroDot.toneMedium {
  background: oklch(0.78 0.12 75);
  border-color: rgba(255, 209, 138, 0.78);
  box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.12);
}

.metalsMacroDot.toneLow {
  background: #75abff;
  border-color: rgba(157, 198, 255, 0.76);
  box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.12);
}

.metalsResearchItem h3,
.metalsMacroItem strong {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: oklch(0.92 0.004 60);
}

.metalsResearchItem p,
.metalsMacroItem p {
  margin: 0;
  color: #c3d4f2;
  font-size: 12px;
  line-height: 1.65;
}

.metalsResearchMeta {
  color: oklch(0.54 0.008 60);
  font-size: 11px;
  line-height: 1.5;
}

.metalsLaneTag,
.metalsTypeTag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(64, 93, 142, 0.48);
  background: oklch(0.16 0.004 60 / 0.96);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.metalsLaneTag.gold {
  color: #f3d08b;
  border-color: oklch(0.82 0.10 75 / 0.34);
  background: rgba(123, 88, 25, 0.18);
}

.metalsLaneTag.silver {
  color: #cae1ff;
  border-color: rgba(147, 193, 255, 0.34);
  background: oklch(0.32 0.006 60 / 0.18);
}

.metalsLaneTag.mixed {
  color: #d9def4;
  border-color: rgba(129, 146, 183, 0.34);
  background: rgba(67, 80, 106, 0.24);
}

.metalsTypeTag.news {
  color: oklch(0.78 0.12 75);
}

.metalsTypeTag.social {
  color: #d39a56;
}

.metalsTypeTag.official {
  color: #a9c96b;
}

.metalsTypeTag.market {
  color: #7dbdf6;
}

.metalsTypeTag.macro {
  color: #e7b3a8;
}

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

.metalsChecklistItem {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(12, 23, 44, 0.88);
  padding: 12px;
  display: grid;
  gap: 6px;
}

.metalsChecklistItem strong {
  color: oklch(0.92 0.004 60);
  font-size: 13px;
}

.metalsChecklistItem p {
  margin: 0;
  color: #bfd0ee;
  font-size: 12px;
  line-height: 1.65;
}

.metalsEmpty {
  border: 1px dashed rgba(84, 112, 164, 0.34);
  border-radius: 12px;
  background: oklch(0.11 0.003 60 / 0.6);
  padding: 14px 12px;
  color: #9bb3d8;
  font-size: 12px;
  line-height: 1.6;
}

.metalsEmpty.isLoading {
  border-style: solid;
  border-color: oklch(0.78 0.12 75 / 0.28);
  background:
    linear-gradient(90deg, rgba(14, 24, 43, 0.96) 0%, rgba(22, 39, 68, 0.96) 50%, rgba(14, 24, 43, 0.96) 100%);
  background-size: 220% 100%;
  color: #d7e6ff;
  animation: metalsLoadingSweep 1.7s ease-in-out infinite;
}

.metalsEmptyLabel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  color: oklch(0.82 0.10 75);
}

.metalsEmptyDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: oklch(0.78 0.12 75);
  box-shadow: 0 0 0 0 oklch(0.78 0.12 75 / 0.46);
  animation: metalsLoadingPulse 1.3s ease-in-out infinite;
  flex: 0 0 auto;
}

.metalsEmptySubtle {
  display: block;
  margin-top: 6px;
  color: #bfd0ee;
}

.metalsMarketGrid > .metalsEmpty {
  grid-column: 1 / -1;
}

@keyframes metalsLoadingSweep {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes metalsLoadingPulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 oklch(0.78 0.12 75 / 0.46);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px oklch(0.78 0.12 75 / 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 oklch(0.78 0.12 75 / 0);
  }
}

.overviewHero {
  overflow: hidden;
}

.overviewSummary {
  margin: 10px 0 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
}

.overviewAction {
  margin: 8px 0 0;
  color: #cfddfb;
  font-size: 14px;
}

.communityCard {
  --community-paper: rgba(8, 14, 28, 0.96);
  --community-surface: oklch(0.11 0.003 60 / 0.82);
  --community-surface-strong: rgba(18, 32, 58, 0.94);
  --community-ink: #e8f0ff;
  --community-subtle: #95a9cf;
  --community-line: rgba(53, 79, 124, 0.5);
  --community-line-strong: oklch(0.78 0.12 75 / 0.42);
  --community-accent: oklch(0.78 0.12 75);
  --community-accent-soft: oklch(0.78 0.12 75 / 0.14);
  --community-down: #ff6e7d;
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(53, 79, 124, 0.44);
  background:
    radial-gradient(320px 180px at 100% 0%, oklch(0.78 0.12 75 / 0.08), transparent 72%),
    linear-gradient(180deg, oklch(0.11 0.003 60 / 0.98) 0%, rgba(8, 15, 29, 0.99) 100%);
  box-shadow: 0 18px 36px oklch(0.03 0.002 60 / 0.28);
}

.communityCard::before,
.communityCard::after {
  content: none;
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(10px);
}

.communityCard::before {
  top: -82px;
  right: -44px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, oklch(0.78 0.12 75 / 0.14), transparent 70%);
}

.communityCard::after {
  left: -96px;
  bottom: -118px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, oklch(0.78 0.12 75 / 0.12), transparent 74%);
}

.communityHead {
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.communityHeadTitle {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.communityEyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  background: oklch(0.78 0.12 75 / 0.12);
  color: #9fcbff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.communityHeadTitle h2 {
  margin: 0;
  font: 900 31px/1.08 "Sora", "Noto Sans SC", sans-serif;
  letter-spacing: -0.03em;
  color: var(--community-ink);
}

.communityHeadTitle p {
  margin: 0;
  max-width: 44ch;
  color: #a9bddf;
  font-size: 14px;
  line-height: 1.65;
}

.communityHeadMeta {
  margin-left: auto;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.communityHotBadge,
.communitySymbolChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.communityHotBadge {
  border: 1px solid oklch(0.78 0.12 75 / 0.26);
  background: oklch(0.78 0.12 75 / 0.12);
  color: var(--community-accent);
}

.communitySymbolChip {
  border: 1px solid rgba(53, 79, 124, 0.68);
  background: oklch(0.11 0.003 60 / 0.88);
  color: #d5e3ff;
}

.communityGrid {
  position: relative;
  z-index: 1;
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.18fr);
  gap: 16px;
  align-items: start;
}

.communityVotePane,
.communityChatPane {
  display: grid;
  gap: 14px;
  align-content: start;
  color: var(--community-ink);
}

.communityVotePane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  align-content: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.communityChatPane {
  border: 1px solid rgba(53, 79, 124, 0.46);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(14, 25, 47, 0.92), rgba(9, 17, 32, 0.95));
  padding: 14px;
  box-shadow: 0 16px 32px oklch(0.03 0.002 60 / 0.18);
}

.communityVoteRail,
.communityNotesPanel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(53, 79, 124, 0.42);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(14, 25, 47, 0.92), oklch(0.11 0.003 60 / 0.96));
  box-shadow: 0 16px 32px oklch(0.03 0.002 60 / 0.18);
}

.communityVoteRail {
  align-content: start;
}

.communityNotesPanel {
  align-content: start;
  min-height: 340px;
}

.communityNoteHero {
  position: relative;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(53, 79, 124, 0.4);
  border-radius: 0;
  background: transparent;
  padding: 0 0 12px;
  display: grid;
  gap: 8px;
}

.communityNoteHero::after {
  content: none;
}

.communityPaneHead,
.communityChatHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.communityNoteIntro,
.communityChatTitleWrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}

.communityNoteIntro {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
}

.communityPaneHint {
  font-size: 10px;
  font-weight: 800;
  color: #9fcbff;
  border: 1px solid oklch(0.78 0.12 75 / 0.2);
  border-radius: 999px;
  padding: 4px 9px;
  background: oklch(0.16 0.004 60 / 0.56);
}

.communityBlockTitle {
  font-size: 14px;
  font-weight: 900;
  color: var(--community-ink);
}

.communityNoteTag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--community-accent-soft);
  color: var(--community-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.communityNoteTitle {
  margin: 0;
  max-width: none;
  font: 900 16px/1.12 "Noto Sans SC", "Sora", sans-serif;
  letter-spacing: -0.02em;
  color: var(--community-ink);
}

.communityHintText {
  margin: 0;
  grid-column: 1 / -1;
  max-width: none;
  font-size: 11px;
  color: #a8bbdd;
  line-height: 1.55;
}

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

.communityVoteDigest {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.communityVoteMini {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(53, 79, 124, 0.42);
  border-radius: 14px;
  min-height: 74px;
  padding: 11px 12px;
  display: grid;
  gap: 4px;
  align-content: start;
  box-shadow: none;
}

.communityVoteMini::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
}

.communityVoteMini.up {
  border-color: oklch(0.74 0.16 155 / 0.24);
  background: linear-gradient(180deg, rgba(13, 31, 45, 0.96), rgba(10, 21, 35, 0.98));
}

.communityVoteMini.up::before {
  background: linear-gradient(90deg, #34d798, #8af0c4);
}

.communityVoteMini.down {
  border-color: oklch(0.66 0.18 25 / 0.24);
  background: linear-gradient(180deg, rgba(25, 20, 35, 0.96), rgba(18, 15, 27, 0.98));
}

.communityVoteMini.down::before {
  background: linear-gradient(90deg, #ff6e7d, #ff9cab);
}

.communityVoteMiniLabel {
  font-size: 11px;
  color: #95a9cf;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.communityVoteMiniValue {
  font: 900 22px/1 "Sora", "Noto Sans SC", sans-serif;
  color: var(--community-ink);
  letter-spacing: -0.04em;
}

.communityVoteMiniMeta {
  font-size: 10px;
  color: #bfd2f8;
  font-weight: 700;
}

.communityCard .communityVoteBtn {
  height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(53, 79, 124, 0.56);
  background: linear-gradient(180deg, rgba(18, 32, 58, 0.88), rgba(14, 25, 47, 0.94));
  color: var(--community-ink);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 24px oklch(0.03 0.002 60 / 0.22);
  transition: transform 0.16s ease, filter 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.communityVoteBtn:hover {
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.communityVoteBtn.up.isActive {
  color: #dbffe5;
  border-color: oklch(0.74 0.16 155 / 0.58);
  background: linear-gradient(135deg, rgba(35, 112, 83, 0.92), rgba(24, 76, 56, 0.92));
  box-shadow: 0 18px 28px oklch(0.74 0.16 155 / 0.16);
}

.communityVoteBtn.down.isActive {
  color: #ffd8de;
  border-color: oklch(0.66 0.18 25 / 0.56);
  background: linear-gradient(135deg, rgba(120, 51, 63, 0.9), rgba(84, 34, 43, 0.92));
  box-shadow: 0 18px 28px oklch(0.66 0.18 25 / 0.14);
}

.communityKpiGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.communityKpi {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(53, 79, 124, 0.58);
  border-radius: 16px;
  background: oklch(0.11 0.003 60 / 0.82);
  padding: 11px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title value"
    "meta value";
  column-gap: 12px;
  row-gap: 5px;
  align-items: center;
  min-height: 68px;
  box-shadow: 0 14px 24px oklch(0.03 0.002 60 / 0.18);
}

.communityKpi::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 6px;
}

.communityKpi.up {
  border-color: oklch(0.74 0.16 155 / 0.2);
  background: linear-gradient(180deg, rgba(15, 30, 45, 0.94), rgba(11, 22, 36, 0.96));
}

.communityKpi.up::before {
  background: linear-gradient(90deg, #34d798, #8af0c4);
}

.communityKpi.down {
  border-color: oklch(0.66 0.18 25 / 0.2);
  background: linear-gradient(180deg, rgba(26, 22, 37, 0.96), rgba(19, 17, 29, 0.98));
}

.communityKpi.down::before {
  background: linear-gradient(90deg, #ff6e7d, #ff9cab);
}

.communityKpiTitle {
  grid-area: title;
  margin-top: 0;
  font-size: 11px;
  color: #95a9cf;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.communityKpiValue {
  grid-area: value;
  justify-self: end;
  font: 900 22px/1 "Sora", "Noto Sans SC", sans-serif;
  color: var(--community-ink);
  letter-spacing: -0.04em;
}

.communityKpiMeta {
  grid-area: meta;
  font-size: 10px;
  color: #bfd2f8;
  font-weight: 700;
}

.communityVoteStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.communityMetric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  color: #d3e2fd;
  border: 1px solid rgba(53, 79, 124, 0.5);
  background: rgba(18, 32, 58, 0.68);
  border-radius: 999px;
  box-shadow: none;
}

.communityVoteBar {
  overflow: hidden;
  display: flex;
  height: 8px;
  border-radius: 999px;
  background: rgba(18, 32, 58, 0.9);
  border: 1px solid rgba(53, 79, 124, 0.58);
}

.communityVoteBarUp {
  background: linear-gradient(90deg, oklch(0.74 0.16 155 / 0.95), rgba(110, 230, 181, 0.95));
  transition: width 0.22s ease;
}

.communityVoteBarDown {
  background: linear-gradient(90deg, oklch(0.66 0.18 25 / 0.95), rgba(255, 150, 164, 0.95));
  transition: width 0.22s ease;
}

.communityVoteFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0;
  padding-top: 0;
}

.communityMyVote {
  font-size: 12px;
  font-weight: 900;
  color: var(--community-ink);
}

.communityVoteFooter .meta,
.communityCard .hint {
  color: #95a9cf;
  font-size: 11px;
}

.communityNotesHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.communityNotesHeadActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.communityNotesTitleWrap {
  display: grid;
  gap: 4px;
}

.communityNotesSub {
  margin: 0;
  max-width: 40ch;
  color: #9db3d7;
  font-size: 12px;
  line-height: 1.5;
}

.communityCreateBtn {
  width: auto;
  min-width: 132px;
  padding: 0 16px;
}

.communityNotesGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  grid-auto-flow: dense;
}

.communityNotesGrid > .sampleEmpty {
  grid-column: 1 / -1;
}

/* ── Compose: editorial two-column writer ─────────────────────────────────
 * The user is at 11pm with a chart in mind and 90 seconds of conviction.
 * Layout reflects that: stance-first (every ChainUs note takes a position),
 * borderless writing surface that feels like paper, live preview pane on
 * the right that lets them see the post as it lands in the feed.
 * Mobile collapses the preview behind a toggle. Tokens straight from
 * DESIGN.md (--surface-0/1/2, --accent gold, status-up/down for stance).
 * ─────────────────────────────────────────────────────────────────────── */

.composePage {
  display: grid;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 20px 64px;
}

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

.composeBack {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid oklch(0.26 0.005 60 / 0.7);
  background: transparent;
  color: oklch(0.74 0.006 60);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.composeBack:hover {
  background: oklch(0.97 0.004 60 / 0.04);
  color: oklch(0.97 0.004 60);
  border-color: oklch(0.32 0.006 60 / 0.85);
}

.composeBack:focus-visible {
  outline: 2px solid oklch(0.78 0.12 75 / 0.6);
  outline-offset: 2px;
}

.composeDraftLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.54 0.008 60);
}

/* ── Layout ─────────────────────────────────────────────────────────── */

.composeGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 960px) {
  .composeGrid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Left: writing surface ─────────────────────────────────────────── */

.composeWriter {
  background: oklch(0.11 0.003 60);
  border: 1px solid oklch(0.26 0.005 60 / 0.7);
  border-radius: 14px;
  padding: 26px 28px 22px;
  display: grid;
  gap: 16px;
}

/* Stance bar — the leading affordance. A ChainUs note is a position,
 * not a status update. Each pill paints a soft tint of its semantic
 * color when chosen; the dot stays the truth signal. */
.composeStance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0 0 4px;
  border: 0;
}

.composeStanceLegend {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.54 0.008 60);
  margin-right: 4px;
  padding: 0;
}

.composeStancePill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.85);
  background: transparent;
  color: oklch(0.74 0.006 60);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.composeStancePill:hover {
  border-color: oklch(0.32 0.006 60 / 0.85);
  color: oklch(0.97 0.004 60);
}

.composeStancePill input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.composeStancePill:has(input:focus-visible) {
  outline: 2px solid oklch(0.78 0.12 75 / 0.6);
  outline-offset: 2px;
}

/* Selected state per stance: subtle paint, dot intensifies. */
.composeStancePill[data-stance="up"]:has(input:checked) {
  background: oklch(0.74 0.16 155 / 0.12);
  border-color: oklch(0.74 0.16 155 / 0.5);
  color: oklch(0.97 0.004 60);
}

.composeStancePill[data-stance="down"]:has(input:checked) {
  background: oklch(0.66 0.18 25 / 0.12);
  border-color: oklch(0.66 0.18 25 / 0.5);
  color: oklch(0.97 0.004 60);
}

.composeStancePill[data-stance="neutral"]:has(input:checked) {
  background: oklch(0.97 0.004 60 / 0.07);
  border-color: oklch(0.74 0.006 60 / 0.55);
  color: oklch(0.97 0.004 60);
}

.composeStanceDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.composeStanceDotUp      { background: oklch(0.74 0.16 155); }
.composeStanceDotDown    { background: oklch(0.66 0.18 25); }
.composeStanceDotNeutral { background: oklch(0.74 0.006 60 / 0.55); }

/* Title input — large, borderless, paper-like. The placeholder IS the label. */
.composeTitle {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: oklch(0.97 0.004 60);
  padding: 4px 0;
  font-family: inherit;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  outline: none;
}

.composeTitle::placeholder { color: oklch(0.54 0.008 60); font-weight: 700; }

.composeRule {
  height: 1px;
  background: oklch(0.26 0.005 60 / 0.7);
  margin: 2px 0 6px;
}

/* Body textarea — calm, reading-friendly. */
.composeBody {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: oklch(0.97 0.004 60 / 0.95);
  padding: 4px 0;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  min-height: 192px;
  resize: vertical;
  outline: none;
}

.composeBody::placeholder { color: oklch(0.54 0.008 60); }

/* Auto-extracted ticker / hashtag chips populated by compose-editor.js. */
.composeTickers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.composeTickerChip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: oklch(0.78 0.12 75 / 0.1);
  border: 1px solid oklch(0.78 0.12 75 / 0.3);
  color: oklch(0.78 0.12 75);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Tools row — image, counter, spacing. */
.composeTools {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid oklch(0.26 0.005 60 / 0.5);
}

.composeImageBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid oklch(0.26 0.005 60 / 0.85);
  background: transparent;
  color: oklch(0.74 0.006 60);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.composeImageBtn:hover {
  border-color: oklch(0.78 0.12 75 / 0.5);
  color: oklch(0.97 0.004 60);
  background: oklch(0.78 0.12 75 / 0.06);
}

.composeImageBtn input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.composeImageBtn span:first-of-type {
  font-size: 14px;
  line-height: 1;
  color: oklch(0.78 0.12 75);
}

.composeImagePreview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border-radius: 8px;
  background: oklch(0.16 0.004 60);
  border: 1px solid oklch(0.26 0.005 60 / 0.7);
  max-width: 280px;
}

.composeImagePreview img {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}

.composeImagePreviewName {
  font-size: 11px;
  color: oklch(0.74 0.006 60);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.composeImageClear {
  appearance: none;
  background: transparent;
  border: 0;
  color: oklch(0.54 0.008 60);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: inherit;
  transition: color 120ms ease, background 120ms ease;
}

.composeImageClear:hover {
  color: oklch(0.66 0.18 25);
  background: oklch(0.66 0.18 25 / 0.08);
}

.composeSpacer { flex: 1; }

.composeCounter {
  font-size: 11px;
  color: oklch(0.54 0.008 60);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.composeCounter[data-near] { color: oklch(0.78 0.14 80); }
.composeCounter[data-over] { color: oklch(0.66 0.18 25); }

/* Footer: hint + publish. */
.composeFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}

.composeHint {
  font-size: 12px;
  color: oklch(0.54 0.008 60);
}

.composePublish {
  appearance: none;
  background: oklch(0.78 0.12 75);
  color: oklch(0.12 0.005 60);
  border: 0;
  padding: 0 22px;
  height: 40px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 120ms ease, opacity 120ms ease;
}

.composePublish:hover { filter: brightness(1.05); }

.composePublish:focus-visible {
  outline: 2px solid oklch(0.78 0.12 75 / 0.6);
  outline-offset: 2px;
}

.composePublish:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
}

/* ── Right: live preview pane ─────────────────────────────────────── */

.composePreviewPane {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 20px;
}

.composePreviewLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.54 0.008 60);
}

.composePreviewCard {
  background: oklch(0.11 0.003 60);
  border: 1px solid oklch(0.26 0.005 60 / 0.7);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 10px;
  min-height: 220px;
}

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

.composePreviewAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: oklch(0.78 0.12 75 / 0.15);
  border: 1px solid oklch(0.78 0.12 75 / 0.35);
  color: oklch(0.78 0.12 75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.composePreviewMeta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.composePreviewName {
  font-size: 13px;
  font-weight: 700;
  color: oklch(0.97 0.004 60);
}

.composePreviewSub {
  font-size: 11px;
  color: oklch(0.54 0.008 60);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.composePreviewBadge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.composePreviewBadge[data-stance="up"] {
  background: oklch(0.74 0.16 155 / 0.12);
  border: 1px solid oklch(0.74 0.16 155 / 0.4);
  color: oklch(0.74 0.16 155);
}

.composePreviewBadge[data-stance="down"] {
  background: oklch(0.66 0.18 25 / 0.12);
  border: 1px solid oklch(0.66 0.18 25 / 0.4);
  color: oklch(0.66 0.18 25);
}

.composePreviewBadge[data-stance="neutral"] {
  background: oklch(0.97 0.004 60 / 0.06);
  border: 1px solid oklch(0.74 0.006 60 / 0.45);
  color: oklch(0.74 0.006 60);
}

.composePreviewMedia {
  width: 100%;
  max-height: 168px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid oklch(0.26 0.005 60 / 0.7);
}

.composePreviewMedia img {
  width: 100%;
  height: auto;
  display: block;
}

.composePreviewTitle {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: oklch(0.97 0.004 60);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.composePreviewBody {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: oklch(0.74 0.006 60);
  white-space: pre-wrap;
  word-break: break-word;
}

.composePreviewBody.isPlaceholder { color: oklch(0.54 0.008 60); font-style: italic; }

.composePreviewTags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.composePreviewTags .composeTickerChip {
  font-size: 10px;
  padding: 2px 7px;
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .composePreviewPane { position: static; }
}

@media (max-width: 640px) {
  .composePage { padding: 14px 12px 48px; gap: 12px; }
  .composeWriter { padding: 18px 16px 14px; gap: 14px; }
  .composeTitle { font-size: 22px; }
  .composeBody { font-size: 16px; min-height: 172px; }  /* ≥16px stops iOS zoom */
  .composeStanceLegend { width: 100%; margin-bottom: 4px; }
  .composeFoot { flex-direction: column; align-items: stretch; gap: 10px; }
  .composePublish { width: 100%; }
  .composeTools { flex-wrap: wrap; }
}

.communityPostCard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 168px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(53, 79, 124, 0.42);
  background: linear-gradient(180deg, rgba(16, 29, 53, 0.92), oklch(0.11 0.003 60 / 0.96));
  box-shadow: 0 10px 22px oklch(0.03 0.002 60 / 0.12);
}

.communityPostCard::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, oklch(0.78 0.12 75 / 0.92), oklch(0.78 0.12 75 / 0.88));
}

.communityPostCard::after {
  content: none;
}

.communityPostCard.isFeature {
  grid-column: 1 / -1;
  min-height: 208px;
}

.communityPostCard.isTall {
  min-height: 216px;
}

.communityPostCard.isCompact {
  min-height: 164px;
}

.communityPostCard.isUp {
  border-color: oklch(0.74 0.16 155 / 0.24);
}

.communityPostCard.isUp::before {
  background: linear-gradient(90deg, #34d798, #8af0c4);
}

.communityPostCard.isDown {
  border-color: oklch(0.66 0.18 25 / 0.26);
  background: linear-gradient(180deg, rgba(24, 20, 36, 0.96), rgba(13, 14, 28, 0.99));
}

.communityPostCard.isDown::before {
  background: linear-gradient(90deg, #ff6e7d, #ff9cab);
}

.communityPostCardHead,
.communityPostCardFoot,
.communityPostAuthor {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.communityPostCardFoot {
  margin-top: auto;
  align-items: flex-end;
}

.communityPostPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.communityPostType,
.communityPostStamp {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.communityPostType {
  background: oklch(0.78 0.12 75 / 0.14);
  color: var(--community-accent);
}

.communityPostMedia {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(53, 79, 124, 0.5);
  background: rgba(8, 15, 30, 0.92);
}

.communityPostMedia img {
  display: block;
  width: 100%;
  min-height: 180px;
  max-height: 320px;
  object-fit: cover;
}

.communityPostStamp {
  color: #9fcbff;
  border: 1px solid oklch(0.78 0.12 75 / 0.18);
  background: rgba(18, 32, 58, 0.74);
  white-space: nowrap;
}

.communityPostTitle {
  margin: 0;
  font: 900 18px/1.18 "Sora", "Noto Sans SC", sans-serif;
  letter-spacing: -0.03em;
  color: var(--community-ink);
}

.communityPostBody {
  margin: 0;
  color: #d7e5ff;
  font-size: 13px;
  line-height: 1.58;
}

.communityPostCard.isFeature .communityPostTitle {
  font-size: 24px;
}

.communityPostCard.isFeature .communityPostBody {
  font-size: 14px;
}

.communityPostCard.isFeature .communityPostTitle,
.communityPostCard.isFeature .communityPostBody,
.communityPostCard.isTall .communityPostTitle,
.communityPostCard.isTall .communityPostBody,
.communityPostCard.isCompact .communityPostTitle,
.communityPostCard.isCompact .communityPostBody {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.communityPostCard.isFeature .communityPostTitle {
  -webkit-line-clamp: 2;
}

.communityPostCard.isFeature .communityPostBody {
  -webkit-line-clamp: 5;
}

.communityPostCard.isTall .communityPostTitle {
  -webkit-line-clamp: 3;
}

.communityPostCard.isTall .communityPostBody {
  -webkit-line-clamp: 7;
}

.communityPostCard.isCompact .communityPostTitle {
  -webkit-line-clamp: 2;
}

.communityPostCard.isCompact .communityPostBody {
  -webkit-line-clamp: 4;
}

.communityPostAuthor {
  min-width: 0;
  justify-content: flex-start;
}

.communityPostActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.communityPostAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8cb8ff, #ffd08b);
  color: #112038;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 14px 24px rgba(32, 65, 119, 0.26);
}

.communityPostAuthorMeta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.communityPostAuthorMeta strong {
  font-size: 12px;
  color: var(--community-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.communityPostAuthorMeta span {
  font-size: 10px;
  color: #95a9cf;
}

.communityLikeBtn.communityLikeBtnNote {
  min-width: 88px;
  min-height: 34px;
  padding: 0 12px;
}

.communityDeleteBtn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid oklch(0.66 0.18 25 / 0.34);
  background: rgba(72, 24, 34, 0.36);
  color: #ffd8de;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.communityDeleteBtn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
  border-color: oklch(0.66 0.18 25 / 0.52);
  background: rgba(98, 31, 45, 0.46);
}

.communityDeleteBtn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.communityDeleteBtnMsg {
  min-height: 30px;
  padding: 0 10px;
  font-size: 11px;
}

.communityChatHead .communityMetric {
  min-width: 116px;
}

.communityChatSub {
  margin: 0;
  max-width: 42ch;
  font-size: 12px;
  color: #9db3d7;
  line-height: 1.5;
}

.communityIdentityCard {
  border: 1px solid rgba(53, 79, 124, 0.42);
  border-radius: 14px;
  background: oklch(0.11 0.003 60 / 0.5);
  padding: 12px;
}

.communityIdentityRow {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.communityIdentityLabel {
  display: grid;
  gap: 6px;
}

.communityIdentityStatic {
  min-width: 0;
}

.communityIdentityLabel > span {
  font-size: 10px;
  color: #95a9cf;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.communityIdentityStatic strong {
  color: var(--community-ink);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.communityCard .communityIdentityLabel input {
  height: 38px;
  border-radius: 13px;
  border: 1px solid rgba(53, 79, 124, 0.72);
  background: oklch(0.11 0.003 60 / 0.96);
  color: var(--community-ink);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
}

.communityCard .communityIdentityLabel input::placeholder,
.communityCard .communityComposer textarea::placeholder {
  color: #7f95bb;
}

.communityCard .communityIdentityLabel input:focus,
.communityCard .communityComposer textarea:focus {
  outline: none;
  border-color: oklch(0.78 0.12 75 / 0.66);
  box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.1);
}

.communityCard .tinyBtn {
  height: 38px;
  border-radius: 13px;
  border: 1px solid oklch(0.78 0.12 75 / 0.42);
  background: linear-gradient(135deg, oklch(0.78 0.12 75 / 0.9), rgba(255, 214, 151, 0.88));
  color: oklch(0.12 0.005 60);
  padding: 0 14px;
  font-weight: 800;
  box-shadow: 0 16px 28px oklch(0.78 0.12 75 / 0.12);
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.communityCard .tinyBtn:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

/* (Composer-specific .tinyBtn override removed. Compose page now uses
 * .composePublish, defined alongside the editorial composer styles above.) */

.communityChatList {
  margin-top: 0;
  min-height: 220px;
  max-height: 360px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 2px 2px 4px;
  display: grid;
  gap: 10px;
}

.communityMsg {
  border: 1px solid rgba(53, 79, 124, 0.42);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 28, 52, 0.84), rgba(11, 21, 41, 0.9));
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  box-shadow: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.communityMsg:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 34px oklch(0.03 0.002 60 / 0.24);
}

.communityMsgAvatar {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: linear-gradient(135deg, #75abff, oklch(0.78 0.12 75));
  color: #04101f;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: 0 12px 22px oklch(0.78 0.12 75 / 0.18);
}

.communityMsgMain {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.communityMsgHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.communityMsgIdentity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.communityMsgName {
  font-size: 13px;
  font-weight: 900;
  color: var(--community-ink);
}

.communityMsgTime {
  font-size: 10px;
  color: #95a9cf;
  white-space: nowrap;
}

.communityMsgBody {
  font-size: 13px;
  line-height: 1.55;
  color: #d8e5ff;
  white-space: pre-wrap;
  word-break: break-word;
}

.communityMsgFoot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.communityLikeBtn {
  min-width: 74px;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(53, 79, 124, 0.72);
  background: rgba(18, 32, 58, 0.84);
  color: #bfd2f8;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: transform 0.16s ease, border-color 0.16s ease, filter 0.16s ease, background 0.16s ease;
}

.communityLikeBtn strong {
  color: #e7f0ff;
  font-size: 11px;
  font-weight: 900;
}

.communityLikeBtn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: oklch(0.78 0.12 75 / 0.76);
  filter: brightness(1.04);
}

.communityLikeBtn.isActive {
  border-color: oklch(0.78 0.12 75 / 0.42);
  background: oklch(0.78 0.12 75 / 0.16);
  color: #ffd89c;
}

.communityLikeBtn.isActive strong {
  color: #ffe5bb;
}

.communityLikeBtn:disabled {
  cursor: wait;
  opacity: 0.75;
}

.communitySideTag {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  background: rgba(18, 32, 58, 0.86);
}

.communitySideTag.up {
  border-color: oklch(0.74 0.16 155 / 0.32);
  color: #dcffe7;
  background: oklch(0.74 0.16 155 / 0.14);
}

.communitySideTag.down {
  border-color: oklch(0.66 0.18 25 / 0.32);
  color: #ffd8de;
  background: oklch(0.66 0.18 25 / 0.14);
}

.communityComposer {
  margin-top: 0;
  border: 1px solid rgba(53, 79, 124, 0.58);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 32, 58, 0.95), oklch(0.11 0.003 60 / 0.97));
  padding: 12px;
  display: grid;
  gap: 10px;
}

.communityComposerLabel {
  font-size: 10px;
  font-weight: 900;
  color: #95a9cf;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.communityCard .communityComposer textarea {
  border: 1px solid rgba(53, 79, 124, 0.72);
  border-radius: 14px;
  background: oklch(0.11 0.003 60 / 0.96);
  color: var(--community-ink);
  padding: 12px;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  min-height: 84px;
}

.communityComposerFoot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

/* (Legacy attach-vote toggle styles removed. The editorial composer above
 * replaces the per-post vote attach with an explicit Stance bar; the legacy
 * #communityPostAttachVote checkbox is kept hidden in the markup purely as a
 * defensive fallback for any external code that still toggles it.) */

.communityCard .sampleEmpty {
  padding: 22px 18px;
  border: 1px dashed rgba(53, 79, 124, 0.6);
  border-radius: 20px;
  background: oklch(0.11 0.003 60 / 0.74);
  color: #95a9cf;
  font-size: 13px;
  text-align: center;
}

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

.quickItem {
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(13, 24, 45, 0.92);
  padding: 10px;
  display: grid;
  gap: 4px;
}

.quickItem span {
  color: var(--muted);
  font-size: 12px;
}

.quickItem strong {
  font: 700 16px/1.2 "Sora", "Noto Sans SC", sans-serif;
}

.overviewLinks {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.emotionFocusShell {
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(14, 24, 44, 0.94), rgba(9, 16, 31, 0.98));
  box-shadow: 0 18px 36px oklch(0.03 0.002 60 / 0.34);
}

.emotionFocusBoard,
.emotionFocusBoard * {
  font-family: "Noto Sans SC", "Sora", "Segoe UI", sans-serif;
}

.emotionFocusBoard {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid oklch(0.26 0.005 60 / 0.7);
  background: rgba(8, 15, 29, 0.9);
  box-shadow: 0 0 0 1px oklch(0.26 0.005 60 / 0.42) inset;
}

.emotionFocusHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.emotionFocusTitleWrap {
  display: grid;
  gap: 6px;
}

.emotionFocusTitleWrap h1 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: oklch(0.97 0.004 60);
}

.emotionFocusTitleWrap p {
  margin: 0;
  color: #9db3d8;
  font-size: 0.9rem;
  line-height: 1.5;
}

.emotionFocusBadge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(57, 88, 141, 0.48);
  background: oklch(0.16 0.004 60 / 0.88);
  color: #d7e4ff;
  font-size: 0.8rem;
  font-weight: 700;
}

.emotionFocusHero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: 14px;
  align-items: stretch;
}

.emotionFocusHeroMain,
.emotionFocusQuick,
.emotionFocusCard,
.emotionFocusFooter {
  border: 1px solid rgba(48, 77, 126, 0.5);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(12, 22, 41, 0.94), rgba(9, 17, 32, 0.98));
}

.emotionFocusHeroMain {
  display: grid;
  gap: 12px;
  padding: 18px 18px 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 190, 105, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(13, 24, 45, 0.96), oklch(0.11 0.003 60 / 0.99));
}

.emotionFocusHeroHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.emotionFocusUpdated {
  color: #8ea6cb;
  font-size: 0.76rem;
  font-weight: 700;
}

.emotionFocusScoreRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.emotionFocusScore {
  color: #f5f8ff;
  font-size: clamp(4rem, 7vw, 5.8rem);
  line-height: 0.88;
  letter-spacing: -0.08em;
  font-weight: 900;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.emotionFocusScoreMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.emotionFocusScoreMeta .emotionLegacyTag,
.emotionFocusScoreMeta .emotionPulseTone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: middle;
}

.emotionFocusScoreMeta .emotionPulseTone {
  grid-area: auto;
  justify-self: auto;
}

.emotionFocusHeadline {
  color: oklch(0.92 0.004 60);
  font-size: 1.35rem;
  line-height: 1.28;
  font-weight: 800;
  max-width: 28ch;
}

.emotionFocusSummary {
  color: #c9d7ef;
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 60ch;
}

.emotionFocusTrack {
  height: 16px;
}

.emotionFocusScale {
  font-size: 0.78rem;
}

.emotionFocusPrint {
  color: #8ea6cb;
  font-size: 0.78rem;
  font-weight: 700;
}

.emotionFocusQuick {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.emotionFocusQuickTitle {
  color: #f2f6ff;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.emotionFocusQuickGrid {
  display: grid;
  gap: 10px;
}

.emotionFocusQuickItem {
  display: grid;
  gap: 4px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(42, 66, 109, 0.46);
  background: oklch(0.11 0.003 60 / 0.7);
}

.emotionFocusQuickItem > span {
  color: #8fa9d8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.emotionFocusQuickItem > strong {
  color: oklch(0.92 0.004 60);
  font-size: 1.08rem;
  font-weight: 800;
}

.emotionFocusQuickItem > small {
  color: #a6bcdf;
  font-size: 0.8rem;
  line-height: 1.45;
}

.emotionFocusQuickNarrative {
  color: #97add1;
  font-size: 0.84rem;
  line-height: 1.6;
}

.emotionFocusDrivers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.emotionFocusCard {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.emotionFocusCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.emotionFocusCardLabel {
  color: #8fa9d8;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.emotionFocusCardValue {
  color: #f3f7ff;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 900;
}

.emotionFocusMomentumRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.emotionFocusCardHint {
  color: #8ea6cb;
  font-size: 0.76rem;
  font-weight: 700;
}

.emotionFocusCardStory {
  color: #d0ddf4;
  font-size: 0.92rem;
  line-height: 1.5;
}

.emotionFocusCardMeta {
  color: #8ea6cb;
  font-size: 0.76rem;
  line-height: 1.45;
}

.emotionFocusFooter {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.emotionFocusFooterLine {
  color: #d5e3fb;
  font-size: 0.88rem;
  font-weight: 700;
}

.emotionFocusFooterNote {
  color: #92a9cd;
  font-size: 0.82rem;
  line-height: 1.55;
}

.liquidityShell {
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(14, 24, 44, 0.94), rgba(9, 16, 31, 0.98));
  box-shadow: 0 18px 36px oklch(0.03 0.002 60 / 0.34);
}

.liquidityBoard,
.liquidityBoard * {
  font-family: "Noto Sans SC", "Sora", "Segoe UI", sans-serif;
}

.liquidityBoard {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid oklch(0.26 0.005 60 / 0.7);
  background: rgba(8, 15, 29, 0.9);
  box-shadow: 0 0 0 1px oklch(0.26 0.005 60 / 0.42) inset;
}

.liquidityHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.liquidityTitleWrap {
  display: grid;
  gap: 4px;
}

.liquidityTitleWrap h1 {
  margin: 0;
  color: oklch(0.97 0.004 60);
  font-size: 1.52rem;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.liquidityTitleWrap p {
  margin: 0;
  color: #9db3d8;
  font-size: 0.86rem;
  line-height: 1.48;
  max-width: 70ch;
}

.liquidityHeaderMeta {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(57, 88, 141, 0.48);
  background: oklch(0.16 0.004 60 / 0.88);
  color: #d7e4ff;
  font-size: 0.75rem;
  font-weight: 700;
}

.liquidityHero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: 8px;
  align-items: stretch;
}

.liquidityHero.compact {
  grid-template-columns: minmax(0, 1fr);
  display: none;
}

.liquidityHeroMain,
.liquidityQuickCard,
.liquidityDriverCard,
.liquidityTransmissionCard,
.liquidityCatalystCard,
.liquidityReadCard {
  border: 1px solid rgba(48, 77, 126, 0.5);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(12, 22, 41, 0.94), rgba(9, 17, 32, 0.98));
}

.liquidityHeroMain {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  background:
    radial-gradient(circle at top right, rgba(255, 190, 105, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(13, 24, 45, 0.96), oklch(0.11 0.003 60 / 0.99));
}

.liquidityHeroMain.tone-tight {
  background:
    radial-gradient(circle at top right, oklch(0.66 0.18 25 / 0.16), transparent 32%),
    linear-gradient(180deg, rgba(27, 18, 33, 0.96), rgba(14, 16, 28, 0.99));
}

.liquidityHeroMain.tone-easing {
  background:
    radial-gradient(circle at top right, rgba(97, 222, 174, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(10, 28, 33, 0.96), rgba(8, 18, 28, 0.99));
}

.liquidityHeroHead,
.liquidityDriverHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.liquidityEyebrow,
.liquidityDriverLabel,
.liquidityTransmissionLabel,
.liquiditySectionTitle,
.liquidityQuickTitle {
  color: #8fa9d8;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.liquidityHeroTag,
.liquidityDriverTag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  border: 1px solid rgba(84, 111, 162, 0.46);
  background: oklch(0.16 0.004 60 / 0.78);
  color: oklch(0.74 0.006 60);
}

.liquidityHeroTag.tone-tight,
.liquidityDriverTag.tone-tight,
.liquidityQuickItem.tone-tight strong,
.liquidityTransmissionCard.tone-tight strong {
  color: #ffb4b4;
}

.liquidityHeroTag.tone-easing,
.liquidityDriverTag.tone-easing,
.liquidityQuickItem.tone-easing strong,
.liquidityTransmissionCard.tone-easing strong {
  color: #9df0cf;
}

.liquidityHeroScoreRow {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.liquidityHeroScore {
  color: #f5f8ff;
  font-size: clamp(3.2rem, 5.2vw, 4.35rem);
  line-height: 0.88;
  letter-spacing: -0.08em;
  font-weight: 900;
  font-variant-numeric: tabular-nums lining-nums;
}

.liquidityHeroScoreMeta {
  display: grid;
  gap: 2px;
  max-width: 44ch;
}

.liquidityHeroScoreMeta span {
  color: oklch(0.92 0.004 60);
  font-size: 1.03rem;
  line-height: 1.14;
  font-weight: 800;
}

.liquidityHeroScoreMeta small {
  color: #c9d7ef;
  font-size: 0.86rem;
  line-height: 1.45;
}

.liquidityRegimeTrack {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 112, 128, 0.88), rgba(243, 198, 121, 0.9) 47%, rgba(98, 218, 175, 0.92));
  overflow: hidden;
}

.liquidityRegimeFill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 112, 128, 0.18), oklch(0.97 0.004 60 / 0) 24%, oklch(0.97 0.004 60 / 0) 76%, rgba(98, 218, 175, 0.18));
}

.liquidityRegimeMarker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #0f1b34;
  border: 2px solid rgba(245, 248, 255, 0.98);
  box-shadow: 0 0 0 4px rgba(13, 24, 45, 0.34);
  transform: translate(-50%, -50%);
}

.liquidityRegimeScale {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #8ea6cb;
  font-size: 0.72rem;
  font-weight: 700;
}

.liquidityQuickCard,
.liquidityReadCard,
.liquidityCatalystCard {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
}

.liquidityQuickCard.compact {
  align-content: start;
}

.liquidityQuickGrid,
.liquidityTransmissionGrid {
  display: grid;
  gap: 8px;
}

.liquidityQuickGrid.compact {
  gap: 6px;
}

.liquidityQuickGrid.compact.wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.liquidityQuickItem {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border-radius: 12px;
  border: 1px solid rgba(42, 66, 109, 0.46);
  background: oklch(0.11 0.003 60 / 0.72);
}

.liquidityHeroMain[role="button"],
.liquidityQuickItem[role="button"],
.liquidityDriverCard[role="button"],
.liquidityTransmissionCard[role="button"] {
  cursor: pointer;
  transition:
    border-color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.liquidityHeroMain[role="button"]:hover,
.liquidityHeroMain[role="button"]:focus-visible,
.liquidityQuickItem[role="button"]:hover,
.liquidityQuickItem[role="button"]:focus-visible,
.liquidityDriverCard[role="button"]:hover,
.liquidityDriverCard[role="button"]:focus-visible,
.liquidityTransmissionCard[role="button"]:hover,
.liquidityTransmissionCard[role="button"]:focus-visible {
  border-color: rgba(97, 139, 214, 0.72);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(3, 9, 21, 0.22);
  outline: none;
}

.liquidityHeroMain.isActive,
.liquidityQuickItem.isActive,
.liquidityDriverCard.isActive,
.liquidityTransmissionCard.isActive {
  border-color: rgba(120, 170, 255, 0.82);
  box-shadow:
    0 0 0 1px rgba(120, 170, 255, 0.25) inset,
    0 10px 20px oklch(0.03 0.002 60 / 0.24);
}

.liquidityQuickItem span {
  color: #8fa9d8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.liquidityQuickItem strong,
.liquidityTransmissionCard strong {
  color: oklch(0.92 0.004 60);
  font-size: 1rem;
  font-weight: 800;
}

.liquidityQuickNarrative,
.liquidityTransmissionCard p,
.liquidityReadCard p {
  margin: 0;
  color: #a6bcdf;
  font-size: 0.8rem;
  line-height: 1.5;
}

.liquidityDriverGrid,
.liquidityBottomGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.liquidityDriverGrid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.liquidityDriverCard,
.liquidityTransmissionCard {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.liquidityDriverGrid.compact .liquidityDriverCard {
  gap: 6px;
  padding: 10px 11px;
}

.liquidityDriverMetric {
  display: grid;
  gap: 4px;
}

.liquidityDriverScore {
  color: #f3f7ff;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 900;
}

.liquidityDriverScore small {
  margin-left: 4px;
  color: #87a0c7;
  font-size: 0.82rem;
  font-weight: 700;
}

.liquidityDriverScoreTrack {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 112, 128, 0.82), rgba(243, 198, 121, 0.86) 47%, rgba(98, 218, 175, 0.9));
  overflow: hidden;
}

.liquidityDriverScoreFill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, oklch(0.97 0.004 60 / 0.12), oklch(0.97 0.004 60 / 0) 24%, oklch(0.97 0.004 60 / 0) 76%, oklch(0.97 0.004 60 / 0.12));
}

.liquidityDriverScoreMarker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #0f1b34;
  border: 2px solid rgba(245, 248, 255, 0.98);
  box-shadow: 0 0 0 3px rgba(13, 24, 45, 0.26);
  transform: translate(-50%, -50%);
}

.liquidityDriverScoreScale {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #7f98c1;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.liquidityDriverStory {
  color: #d0ddf4;
  font-size: 0.82rem;
  line-height: 1.4;
}

.liquidityDriverTiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.liquidityDriverTile {
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border-radius: 10px;
  border: 1px solid rgba(44, 72, 118, 0.44);
  background: rgba(11, 22, 40, 0.72);
}

.liquidityDriverTile small {
  color: #8ea6cb;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.liquidityDriverTile strong {
  color: oklch(0.92 0.004 60);
  font-size: 0.8rem;
  line-height: 1.3;
}

.liquidityCompactRead {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(48, 77, 126, 0.42);
  border-radius: 14px;
  background: rgba(12, 22, 41, 0.74);
}

.liquidityCompactRead p {
  margin: 0;
  color: #d9e5fb;
  font-size: 0.8rem;
  line-height: 1.42;
}

.liquidityDetailPanel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(57, 88, 141, 0.48);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 24, 44, 0.92), rgba(10, 18, 33, 0.98));
}

.liquidityDetailTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.liquidityDetailHero {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(57, 88, 141, 0.46);
  background:
    radial-gradient(circle at top left, rgba(59, 98, 165, 0.16), transparent 52%),
    linear-gradient(180deg, rgba(14, 27, 49, 0.92), rgba(9, 18, 34, 0.94));
}

.liquidityDetailTitleWrap {
  display: grid;
  gap: 4px;
}

.liquidityDetailTitleWrap h3 {
  margin: 0;
  color: oklch(0.92 0.004 60);
  font-size: 1.08rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.liquidityDetailBadges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.liquidityDetailScore {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(82, 121, 189, 0.5);
  background: rgba(14, 27, 49, 0.86);
  color: oklch(0.92 0.004 60);
  font-size: 0.78rem;
  font-weight: 800;
}

.liquidityDetailReason {
  margin: 0;
  color: #d7e3f8;
  font-size: 0.86rem;
  line-height: 1.5;
}

.liquidityDetailSummary {
  margin: 0;
  color: #f2f7ff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

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

.liquidityDetailMetrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.liquidityDetailFact {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(49, 78, 128, 0.48);
  background: oklch(0.11 0.003 60 / 0.74);
}

.liquidityDetailFact span {
  color: #8ea6cb;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.liquidityDetailFact strong {
  color: oklch(0.92 0.004 60);
  font-size: 0.87rem;
  line-height: 1.45;
}

.liquidityDetailMetricTile {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(63, 98, 157, 0.52);
  background:
    radial-gradient(circle at top right, rgba(61, 100, 170, 0.18), transparent 48%),
    rgba(12, 23, 42, 0.8);
}

.liquidityDetailMetricTile span {
  color: #8ea6cb;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.liquidityDetailMetricTile strong {
  color: #f3f7ff;
  font-size: 0.94rem;
  line-height: 1.35;
}

.liquidityDetailMetricTile small {
  color: #8ea6cb;
  font-size: 0.72rem;
  line-height: 1.4;
}

.liquidityDetailTableCard {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 15px;
  border: 1px solid rgba(54, 86, 140, 0.5);
  background: oklch(0.11 0.003 60 / 0.72);
}

.liquidityMacroPanel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(58, 91, 147, 0.52);
  background:
    radial-gradient(circle at top right, rgba(51, 88, 152, 0.16), transparent 44%),
    linear-gradient(180deg, oklch(0.11 0.003 60 / 0.88), oklch(0.03 0.002 60 / 0.94));
}

.liquidityMacroLead {
  margin: 4px 0 0;
  color: #9cb2d6;
  font-size: 0.78rem;
  line-height: 1.45;
}

.liquidityMacroControls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.liquidityMacroFilter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.liquidityMacroFilter::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #8ea6cb;
  border-bottom: 2px solid #8ea6cb;
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.liquidityMacroFilter span {
  color: #8ea6cb;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.liquidityMacroFilter select {
  border: 0;
  background: transparent;
  color: oklch(0.92 0.004 60);
  width: auto;
  padding-right: 16px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color-scheme: dark;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.1;
  outline: none;
  cursor: pointer;
}

.liquidityMacroFilter select option {
  background: #0a1730;
  color: oklch(0.92 0.004 60);
  font-weight: 600;
}

.liquidityMacroEmpty {
  padding: 16px 18px;
  border: 1px dashed rgba(82, 118, 182, 0.38);
  border-radius: 14px;
  background: rgba(8, 18, 34, 0.52);
  color: #9cb2d6;
  font-size: 0.84rem;
  line-height: 1.5;
}

.liquidityRateLead,
.liquidityRateSub {
  margin: 0;
  line-height: 1.45;
}

.liquidityRateLead {
  color: oklch(0.92 0.004 60);
  font-size: 0.92rem;
  font-weight: 700;
}

.liquidityRateSub {
  color: #9cb2d6;
  font-size: 0.8rem;
}

.liquidityMacroTiles {
  margin-top: 2px;
}

.liquidityDetailTableHead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.liquidityDetailTableHead small {
  color: #8ea6cb;
  font-size: 0.72rem;
  line-height: 1.4;
}

.liquidityDetailTable {
  display: grid;
  gap: 6px;
}

.liquidityDetailTableRow {
  display: grid;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid rgba(42, 66, 109, 0.42);
}

.liquidityDetailTableRow:first-child {
  padding-top: 0;
  border-top: 0;
}

.liquidityDetailTableTitle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.liquidityDetailTableTitle strong {
  color: oklch(0.92 0.004 60);
  font-size: 0.82rem;
  line-height: 1.32;
}

.liquidityDetailTableTitle span {
  color: #8ea6cb;
  font-size: 0.7rem;
  line-height: 1.3;
}

.liquidityDetailTableStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.liquidityDetailTableStats span {
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border-radius: 12px;
  border: 1px solid rgba(45, 72, 118, 0.46);
  background: rgba(12, 23, 42, 0.72);
}

.liquidityDetailTableStats small {
  color: #8ea6cb;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.liquidityDetailTableStats strong {
  color: #f3f7ff;
  font-size: 0.8rem;
  line-height: 1.28;
}

.liquidityDetailCellNote {
  color: #8ea6cb;
  font-size: 0.64rem;
  font-style: normal;
  line-height: 1.28;
}

.liquidityDetailSpotlight {
  display: grid;
  gap: 6px;
  padding: 12px 13px;
  border-radius: 15px;
  border: 1px solid rgba(70, 111, 182, 0.5);
  background:
    radial-gradient(circle at right top, rgba(66, 106, 176, 0.2), transparent 48%),
    rgba(11, 22, 41, 0.84);
}

.liquidityDetailSpotlight span {
  color: #8ea6cb;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.liquidityDetailSpotlight strong {
  color: oklch(0.97 0.004 60);
  font-size: 0.94rem;
  line-height: 1.5;
}

.liquidityDetailGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.liquidityDetailCard {
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(42, 66, 109, 0.46);
  background: oklch(0.11 0.003 60 / 0.68);
}

.liquidityDetailList {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: #d7e3f8;
  font-size: 0.82rem;
  line-height: 1.5;
}

.liquidityDetailEmpty {
  color: #8ea6cb;
  font-size: 0.78rem;
  line-height: 1.45;
}

.liquidityDetailModal {
  position: fixed;
  inset: 0;
  z-index: 131;
  display: grid;
  place-items: center;
  padding: 24px;
}

.liquidityDetailModal[hidden] {
  display: none !important;
}

.liquidityDetailBackdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.03 0.002 60 / 0.76);
  backdrop-filter: blur(10px);
}

.liquidityDetailDialog {
  position: relative;
  width: min(92vw, 840px);
  max-height: min(88vh, 860px);
  margin: 0;
  display: grid;
  gap: 12px;
  padding: 18px;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(57, 88, 141, 0.56);
  background: linear-gradient(180deg, rgba(14, 24, 44, 0.98), rgba(9, 17, 32, 0.99));
  box-shadow: 0 24px 48px oklch(0.03 0.002 60 / 0.38);
}

.liquidityDetailHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.liquidityDetailEyebrow {
  color: #8fa9d8;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.liquidityDetailBody {
  display: grid;
  gap: 10px;
}

body.hasLiquidityDetailModal {
  overflow: hidden;
}

.liquidityDriverMeta,
.liquidityReadHint,
.liquidityCatalystItem span,
.liquidityCatalystEmpty {
  color: #8ea6cb;
  font-size: 0.72rem;
  line-height: 1.42;
}

.liquidityTransmissionGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.liquidityTransmissionGrid.compact {
  gap: 8px;
}

.liquidityTransmissionCard.compact {
  gap: 6px;
  padding: 10px 11px;
}

.liquidityCatalystList {
  display: grid;
  gap: 8px;
}

.liquidityCatalystItem {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(42, 66, 109, 0.46);
  background: oklch(0.11 0.003 60 / 0.72);
}

.liquidityCatalystItem strong {
  color: oklch(0.92 0.004 60);
  font-size: 0.88rem;
  line-height: 1.38;
}

.liquidityReadCard p {
  color: #e1ecff;
  font-size: 0.88rem;
}

@media (max-width: 1100px) {
  .emotionFocusHero {
    grid-template-columns: minmax(0, 1fr);
  }

  .emotionFocusDrivers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .liquidityHero,
  .liquidityBottomGrid,
  .liquidityTransmissionGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .liquidityDriverGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .liquidityDriverGrid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .liquidityQuickGrid.compact.wide,
  .liquidityTransmissionGrid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .liquidityDetailGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .liquidityDetailFacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .liquidityDetailMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .liquidityDetailTableStats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .emotionFocusBoard {
    padding: 14px;
  }

  .emotionFocusScore {
    font-size: 3.6rem;
  }

  .emotionFocusHeadline {
    font-size: 1.08rem;
  }

  .emotionFocusDrivers {
    grid-template-columns: minmax(0, 1fr);
  }

  .liquidityDriverGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .liquidityDriverGrid.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .liquidityQuickGrid.compact.wide,
  .liquidityTransmissionGrid.compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .liquidityDetailDialog {
    width: min(100vw - 20px, 760px);
    margin: 0;
    padding: 14px;
  }

  .liquidityDetailHero {
    padding: 12px;
  }

  .liquidityDetailFacts {
    grid-template-columns: minmax(0, 1fr);
  }

  .liquidityDetailMetrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .liquidityDetailTableTitle {
    grid-template-columns: minmax(0, 1fr);
  }

  .liquidityDetailTableStats {
    grid-template-columns: minmax(0, 1fr);
  }

  .liquidityDetailSummary {
    font-size: 0.94rem;
  }

  .liquidityHeroScoreRow {
    align-items: flex-start;
  }

  .liquidityHeroScoreMeta span {
    font-size: 1.15rem;
  }
}

.emotionLegacyShell {
  border: 1px solid var(--stroke);
  border-radius: 15px;
  padding: 12px;
  background: linear-gradient(180deg, oklch(0.16 0.004 60 / 0.92), oklch(0.11 0.003 60 / 0.96));
  box-shadow: var(--shadow);
}

.emotionLegacy,
.emotionLegacy * {
  font-family: "Noto Sans SC", "Sora", "Segoe UI", sans-serif;
}

.emotionLegacy {
  width: 100%;
  background: rgba(9, 16, 31, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 1.3rem 1.3rem 1.45rem;
  box-shadow:
    0 16px 34px oklch(0.03 0.002 60 / 0.45),
    0 0 0 1px oklch(0.26 0.005 60 / 0.7) inset;
  border: 1px solid var(--stroke);
}

.emotionLegacyHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1.7rem;
}

.emotionLegacyHeader h1 {
  margin: 0;
  font-size: 1.72rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, oklch(0.85 0.08 75), #9bc2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.emotionLegacyBadge {
  background: var(--panel-soft);
  padding: 0.35rem 1rem;
  border-radius: 40px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #d7e4ff;
  border: 1px solid var(--stroke);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.emotionPulseBoard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.95rem;
  margin-bottom: 1.2rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(48, 77, 126, 0.68);
  background:
    radial-gradient(circle at top left, oklch(0.78 0.12 75 / 0.1), transparent 34%),
    radial-gradient(circle at right, oklch(0.78 0.12 75 / 0.12), transparent 38%),
    linear-gradient(180deg, rgba(13, 24, 45, 0.92), oklch(0.11 0.003 60 / 0.96));
  box-shadow:
    0 10px 22px -18px rgba(0, 0, 0, 0.55),
    0 0 0 1px oklch(0.26 0.005 60 / 0.45) inset;
}

.emotionPulseLead {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 360px);
  grid-template-areas:
    "tone fear"
    "headline fear"
    "narrative fear"
    "legend fear";
  align-items: stretch;
  gap: 0.55rem 1rem;
  padding-bottom: 0.12rem;
}

.emotionPulseTone {
  grid-area: tone;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 30px;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(57, 88, 141, 0.5);
  background: rgba(21, 35, 63, 0.92);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.emotionPulseHeadline {
  grid-area: headline;
  color: #f0f5ff;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.35;
  max-width: 28ch;
}

.emotionPulseNarrative {
  grid-area: narrative;
  color: oklch(0.54 0.008 60);
  font-size: 0.84rem;
  line-height: 1.6;
  max-width: 70ch;
}

.emotionFearGreedHero {
  grid-area: fear;
  display: grid;
  gap: 0.72rem;
  align-self: stretch;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(62, 96, 150, 0.58);
  background:
    radial-gradient(circle at top left, rgba(255, 190, 105, 0.15), transparent 32%),
    linear-gradient(180deg, rgba(14, 27, 50, 0.94), rgba(9, 18, 36, 0.97));
  box-shadow:
    0 10px 26px -20px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(31, 52, 90, 0.5) inset;
}

.emotionFearGreedHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.emotionFearGreedEyebrow {
  color: #8fa9d8;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.emotionFearGreedSource {
  color: #c7d8f8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  border: 1px solid rgba(57, 88, 141, 0.5);
  background: rgba(20, 34, 60, 0.9);
}

.emotionFearGreedMain {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.emotionFearGreedMain strong {
  color: #f5f8ff;
  font-size: 3rem;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.emotionFearGreedDesc {
  color: #d2dff7;
  font-size: 0.9rem;
  line-height: 1.45;
  min-height: 2.6em;
}

.emotionFearGreedTrack {
  position: relative;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(61, 92, 145, 0.58);
  background: linear-gradient(90deg, #e86a79 0%, #ffb16f 22%, #d6d6c6 50%, #8ed3c7 76%, #36d798 100%);
  overflow: hidden;
}

.emotionFearGreedTrack::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 15, 28, 0.08), rgba(8, 15, 28, 0.26));
}

.emotionFearGreedNeedle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid #f5f8ff;
  background: rgba(11, 20, 36, 0.96);
  box-shadow: 0 0 0 2px oklch(0.16 0.004 60 / 0.72);
}

.emotionFearGreedScale {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  color: #9eb7dc;
  font-size: 0.75rem;
  font-weight: 700;
}

.emotionFearGreedScale span:nth-child(2) {
  text-align: center;
}

.emotionFearGreedScale span:last-child {
  text-align: right;
}

.emotionFearGreedMeta {
  color: #8ea6cb;
  font-size: 0.74rem;
  font-weight: 600;
}

.emotionMeterLegend {
  grid-area: legend;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-self: end;
  align-self: stretch;
  padding: 0.8rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(42, 66, 109, 0.46);
  background: rgba(9, 19, 37, 0.54);
  color: #96afd3;
  font-size: 0.76rem;
  font-weight: 600;
}

.emotionMeterLegendBar {
  width: 92px;
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(62, 91, 144, 0.52);
  background: linear-gradient(90deg, oklch(0.78 0.12 75) 0%, #5ea7e8 26%, #7e8fa8 48%, #d39a56 68%, #b75a46 84%, #6a2430 100%);
}

.emotionPulseStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.emotionPulseStat {
  display: grid;
  gap: 0.38rem;
  padding: 0.82rem 0.86rem;
  border-radius: 14px;
  background: rgba(9, 19, 37, 0.74);
  border: 1px solid rgba(42, 66, 109, 0.5);
  height: 100%;
}

.emotionPulseStat > span {
  color: #8fa9d8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.emotionPulseStat > strong {
  color: oklch(0.92 0.004 60);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.emotionPulseStat > small {
  color: #a5bcdf;
  font-size: 0.79rem;
  line-height: 1.45;
}

.emotionLegacyGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-bottom: 1.2rem;
}

.emotionLegacyGridTight {
  margin-bottom: 1.05rem;
}

.emotionLegacyCard {
  background: oklch(0.11 0.003 60 / 0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px;
  padding: 1.3rem 1.2rem 1.2rem 1.4rem;
  border: 1px solid var(--stroke);
  box-shadow:
    0 8px 16px -10px rgba(0, 0, 0, 0.4),
    0 0 0 1px oklch(0.26 0.005 60 / 0.5) inset;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.emotionLegacyCard:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 24px -14px oklch(0.03 0.002 60 / 0.68),
    0 0 0 1px rgba(54, 84, 137, 0.7) inset;
  background: rgba(13, 24, 45, 0.84);
}

.emotionLegacyLabel {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.42rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.emotionLegacyLabel span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background: var(--blue);
  opacity: 0.85;
}

.emotionLegacyValue {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.emotionLegacyValueSm {
  font-size: 2.05rem;
  margin-bottom: 0;
}

.emotionLegacyMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.emotionLegacyMetaText {
  color: #b6caef;
}

.emotionLegacyChange {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.75rem;
  border-radius: 30px;
  border: 1px solid var(--stroke);
  background: rgba(21, 35, 63, 0.92);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.emotionPositive {
  color: oklch(0.78 0.12 75);
  background: oklch(0.78 0.12 75 / 0.14);
  border-color: oklch(0.78 0.12 75 / 0.3);
}

.emotionWarning {
  color: #f0c58f;
  background: rgba(211, 154, 86, 0.15);
  border-color: rgba(211, 154, 86, 0.32);
}

.emotionNegative {
  color: #e7b3a8;
  background: oklch(0.66 0.18 25 / 0.16);
  border-color: oklch(0.66 0.18 25 / 0.34);
}

.emotionNeutral {
  color: #d4e2ff;
  background: rgba(126, 143, 168, 0.16);
  border-color: rgba(126, 143, 168, 0.28);
}

.emotionLegacyTiny {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.emotionLegacyTag {
  background: rgba(21, 35, 63, 0.92);
  color: #d4e2ff;
  padding: 0.2rem 0.85rem;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--stroke);
  letter-spacing: 0.01em;
}

.emotionLegacyHint {
  font-size: 0.8rem;
  color: var(--muted);
}

.emotionMeterInfo {
  margin-top: 0.68rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.emotionMeterInfoLabel {
  color: #8fa9d8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.emotionMeterInfoScore {
  color: oklch(0.92 0.004 60);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.emotionLegacyIndicator {
  margin-top: 0.45rem;
}

.emotionLegacyMeter {
  position: relative;
  margin-top: 0.42rem;
  height: 10px;
  width: 100%;
  border-radius: 999px;
  background: oklch(0.74 0.006 60 / 0.16);
  border: 1px solid rgba(57, 88, 141, 0.36);
  overflow: hidden;
}

.emotionLegacyMeter::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 24.5%,
      rgba(217, 228, 248, 0.18) 24.5%,
      rgba(217, 228, 248, 0.18) 25.5%,
      transparent 25.5%,
      transparent 49.5%,
      rgba(217, 228, 248, 0.18) 49.5%,
      rgba(217, 228, 248, 0.18) 50.5%,
      transparent 50.5%,
      transparent 74.5%,
      rgba(217, 228, 248, 0.18) 74.5%,
      rgba(217, 228, 248, 0.18) 75.5%,
      transparent 75.5%
    );
  pointer-events: none;
}

.emotionLegacyMeter > span {
  position: relative;
  z-index: 1;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(126, 143, 168, 0.78), rgba(126, 143, 168, 0.98));
  transition: width 0.24s ease, background 0.24s ease;
}

.emotionLegacyMeter > span::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(234, 242, 255, 0.95);
  transform: translate(0, -50%);
  background: inherit;
  box-shadow: 0 0 0 2px rgba(9, 19, 37, 0.72);
}

.emotionLegacyMeter > span.emotionMeterCalm {
  background: linear-gradient(90deg, oklch(0.78 0.12 75 / 0.82), oklch(0.78 0.12 75 / 0.98));
}

.emotionLegacyMeter > span.emotionMeterSteady {
  background: linear-gradient(90deg, oklch(0.78 0.12 75 / 0.82), oklch(0.78 0.12 75 / 0.98));
}

.emotionLegacyMeter > span.emotionMeterNeutral {
  background: linear-gradient(90deg, rgba(126, 143, 168, 0.78), rgba(126, 143, 168, 0.98));
}

.emotionLegacyMeter > span.emotionMeterStress {
  background: linear-gradient(90deg, rgba(211, 154, 86, 0.84), rgba(211, 154, 86, 0.98));
}

.emotionLegacyMeter > span.emotionMeterFear {
  background: linear-gradient(90deg, oklch(0.66 0.18 25 / 0.84), oklch(0.66 0.18 25 / 0.98));
}

.emotionLegacyMeter > span.emotionMeterPanic {
  background: linear-gradient(90deg, rgba(106, 36, 48, 0.88), rgba(106, 36, 48, 0.98));
}

.emotionMeterScale {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.28rem;
  color: #7f98bc;
  font-size: 0.68rem;
  font-weight: 600;
}

.emotionToneCalm {
  color: oklch(0.78 0.12 75);
  background: oklch(0.78 0.12 75 / 0.14);
  border-color: oklch(0.78 0.12 75 / 0.3);
}

.emotionToneSteady {
  color: #5ea7e8;
  background: oklch(0.78 0.12 75 / 0.14);
  border-color: oklch(0.78 0.12 75 / 0.3);
}

.emotionToneNeutral {
  color: #d4e2ff;
  background: rgba(126, 143, 168, 0.16);
  border-color: rgba(126, 143, 168, 0.28);
}

.emotionToneStress {
  color: #f0c58f;
  background: rgba(211, 154, 86, 0.15);
  border-color: rgba(211, 154, 86, 0.32);
}

.emotionToneFear {
  color: #e7b3a8;
  background: oklch(0.66 0.18 25 / 0.16);
  border-color: oklch(0.66 0.18 25 / 0.34);
}

.emotionTonePanic {
  color: #f2b1bf;
  background: rgba(106, 36, 48, 0.2);
  border-color: rgba(106, 36, 48, 0.42);
}

.emotionLegacyStory {
  margin-top: 0.75rem;
  color: #cbd9f4;
  font-size: 0.82rem;
  line-height: 1.5;
}

.emotionLegacyChip {
  background: rgba(21, 35, 63, 0.92);
  border-radius: 40px;
  padding: 0.25rem 0.95rem 0.25rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--stroke);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24);
  color: #d4e2ff;
}

.emotionLegacyChipDot {
  width: 9px;
  height: 9px;
  border-radius: 9px;
  background: #95a9cf;
  margin-right: 6px;
}

.emotionLegacyChipDot.pos {
  background: #5ea7e8;
}

.emotionLegacyChipDot.neg {
  background: #b75a46;
}

.emotionLegacyBar {
  margin-top: 10px;
  background: oklch(0.74 0.006 60 / 0.24);
  height: 5px;
  border-radius: 20px;
  width: 100%;
  overflow: hidden;
}

.emotionLegacyBarFill {
  width: 0;
  background: linear-gradient(90deg, oklch(0.78 0.12 75), #75abff);
  height: 5px;
  border-radius: 20px;
  transition: width 0.2s ease;
}

.emotionLegacyBarFill.emotionMeterPositive {
  background: linear-gradient(90deg, oklch(0.74 0.16 155 / 0.82), oklch(0.78 0.12 75 / 0.98));
}

.emotionLegacyBarFill.emotionMeterWarning {
  background: linear-gradient(90deg, oklch(0.78 0.12 75 / 0.84), rgba(255, 145, 93, 0.98));
}

.emotionLegacyBarFill.emotionMeterNegative {
  background: linear-gradient(90deg, oklch(0.66 0.18 25 / 0.84), rgba(255, 154, 120, 0.98));
}

.emotionLegacyBarFill.emotionMeterNeutral {
  background: linear-gradient(90deg, oklch(0.78 0.12 75 / 0.78), oklch(0.78 0.12 75 / 0.98));
}

.emotionLegacyBarLabel {
  display: flex;
  justify-content: space-between;
  margin-top: 0.32rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.emotionLegacyExtended {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.emotionLegacyWideCard {
  background: oklch(0.11 0.003 60 / 0.66);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--stroke);
  box-shadow: 0 8px 16px -10px rgba(0, 0, 0, 0.4);
}

.emotionLegacyComposite {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.emotionLegacyCallout {
  margin-top: 1rem;
  background: rgba(21, 35, 63, 0.9);
  border-radius: 20px;
  padding: 0.55rem 0.9rem;
  color: oklch(0.74 0.006 60);
  font-size: 0.87rem;
  border: 1px solid var(--stroke);
}

.emotionLegacyCoinGlass {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.emotionLegacyHeadline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.emotionLegacyCoinValue {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--text);
}

.emotionLegacyPill {
  background: rgba(21, 35, 63, 0.92);
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
  color: #d4e2ff;
  border: 1px solid var(--stroke);
  font-weight: 600;
}

.emotionLegacyPrecision {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.6rem;
  border-top: 1px dashed oklch(0.74 0.006 60 / 0.28);
  padding-top: 0.55rem;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

#emoOpenInterestFull,
#emoLiquidationFull {
  color: #c7d8f8;
}

.emotionLegacyDivider {
  margin: 1.2rem 0 0.82rem;
  border: none;
  height: 1px;
  background: oklch(0.74 0.006 60 / 0.24);
}

.emotionLegacyInfoRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.9rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.emotionLegacyFootnote {
  text-align: right;
  font-size: 0.71rem;
  color: var(--muted);
  margin-top: 0.52rem;
  opacity: 0.78;
}

.hint {
  color: var(--muted);
  font-size: 12px;
}

.briefMeta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.risk {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid transparent;
}

.riskLow {
  color: var(--green);
  background: oklch(0.74 0.16 155 / 0.15);
  border-color: oklch(0.74 0.16 155 / 0.36);
}

.riskMid {
  color: var(--accent);
  background: oklch(0.78 0.12 75 / 0.16);
  border-color: oklch(0.78 0.12 75 / 0.37);
}

.riskHigh {
  color: var(--red);
  background: oklch(0.66 0.18 25 / 0.16);
  border-color: oklch(0.66 0.18 25 / 0.36);
}

.riskLoading {
  color: #91ffd8;
  background: rgba(24, 133, 94, 0.3);
  border-color: oklch(0.74 0.16 155 / 0.56);
  animation: statusPulse 1.4s ease-out infinite;
}

.tinyBtn {
  height: 28px;
  border-radius: 9px;
  border: 1px solid var(--stroke);
  background: var(--panel-soft);
  color: var(--text);
  padding: 0 11px;
  cursor: pointer;
  font-weight: 700;
}

.briefSummary {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.42;
  color: oklch(0.74 0.006 60);
  max-width: 72ch;
}

.briefAction {
  margin: 10px 0 0;
  color: oklch(0.92 0.004 60);
  font-size: 18px;
  line-height: 1.38;
  font-weight: 800;
}

.decisionHeroGrid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(280px, 0.72fr);
  gap: 12px;
  align-items: stretch;
}

.decisionScorePanel {
  border: 1px solid rgba(71, 108, 173, 0.56);
  border-radius: 16px;
  padding: 16px;
  background:
    radial-gradient(circle at top left, rgba(58, 112, 203, 0.24), transparent 46%),
    linear-gradient(180deg, rgba(16, 31, 60, 0.98), rgba(8, 17, 33, 0.94));
  display: grid;
  gap: 10px;
}

.decisionScoreTop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 16px;
  align-items: center;
}

.decisionScoreText {
  min-width: 0;
}

.decisionHeroSymbol {
  font: 800 32px/1.05 "Sora", "Noto Sans SC", sans-serif;
  color: oklch(0.97 0.004 60);
  letter-spacing: 0.2px;
}

.decisionDial {
  --dial-fill: 0deg;
  position: relative;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  padding: 10px;
  background:
    conic-gradient(from 220deg, var(--dial-color, oklch(0.78 0.12 75 / 0.95)) var(--dial-fill), rgba(23, 40, 73, 0.86) 0deg);
  box-shadow: inset 0 0 0 1px rgba(98, 143, 221, 0.24);
}

.decisionDial::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(20, 44, 84, 0.96), rgba(8, 17, 33, 0.98));
  border: 1px solid rgba(78, 110, 164, 0.34);
}

.decisionDialInner {
  position: absolute;
  inset: 18px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px 12px;
  text-align: center;
  border-radius: 50%;
}

.decisionDialInner > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.decisionDialInner > strong {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  margin: 0;
  min-height: 42px;
  font: 800 38px/0.92 "Sora", "Noto Sans SC", sans-serif;
  color: #f5f8ff;
  line-height: 0.92;
  white-space: nowrap;
}

.decisionDialValue {
  font-size: 1em;
  letter-spacing: -0.04em;
}

.decisionDialUnit {
  padding-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #acc4ec;
  letter-spacing: 0;
}

.decisionDial.meterOk {
  --dial-color: oklch(0.74 0.16 155 / 0.98);
}

.decisionDial.meterWarn {
  --dial-color: oklch(0.78 0.12 75 / 0.98);
}

.decisionDial.meterErr {
  --dial-color: oklch(0.66 0.18 25 / 0.98);
}

.decisionDial.meterInfo {
  --dial-color: oklch(0.78 0.12 75 / 0.98);
}

.decisionActionCard {
  border: 1px solid oklch(0.78 0.12 75 / 0.5);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, oklch(0.78 0.12 75 / 0.18), transparent 44%),
    linear-gradient(180deg, rgba(45, 33, 17, 0.78), oklch(0.11 0.003 60 / 0.92));
  padding: 16px;
  display: grid;
  align-content: center;
  min-height: 100%;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.08);
}

.decisionSectionLabel {
  display: inline-flex;
  color: #91addc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
 }

.decisionQuickGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.decisionQuickItem {
  border: 1px solid rgba(57, 88, 141, 0.34);
  border-radius: 12px;
  background: oklch(0.11 0.003 60 / 0.66);
  padding: 9px 10px;
  display: grid;
  gap: 7px;
}

.decisionQuickHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.decisionQuickHead > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.decisionQuickHead > strong {
  font: 800 15px/1.1 "Sora", "Noto Sans SC", sans-serif;
  color: #f2f7ff;
  text-align: right;
}

.decisionQuickBar {
  height: 7px;
  border-radius: 999px;
  background: rgba(20, 35, 63, 0.94);
  border: 1px solid rgba(56, 84, 131, 0.42);
  overflow: hidden;
}

.decisionQuickBar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, oklch(0.78 0.12 75 / 0.76), oklch(0.78 0.12 75 / 0.98));
  transition: width 0.24s ease-out;
}

.decisionQuickBar > span.meterOk {
  background: linear-gradient(90deg, oklch(0.74 0.16 155 / 0.7), oklch(0.74 0.16 155 / 0.98));
}

.decisionQuickBar > span.meterWarn {
  background: linear-gradient(90deg, oklch(0.78 0.12 75 / 0.74), oklch(0.78 0.12 75 / 0.98));
}

.decisionQuickBar > span.meterErr {
  background: linear-gradient(90deg, oklch(0.66 0.18 25 / 0.74), oklch(0.66 0.18 25 / 0.98));
}

.decisionQuickBar > span.meterInfo {
  background: linear-gradient(90deg, oklch(0.78 0.12 75 / 0.7), oklch(0.78 0.12 75 / 0.98));
}

.decisionQuickItem > small {
  color: #829ac3;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.decisionHealthLine {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 0;
  font-size: 12px;
  color: var(--muted);
}

.decisionStatPill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(57, 88, 141, 0.42);
  background: rgba(13, 24, 45, 0.86);
  padding: 0 11px;
  color: #cbd9f4;
  white-space: nowrap;
}

.decisionWhyChips .chip {
  background: oklch(0.16 0.004 60 / 0.88);
}

.diligentGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.diligentCard {
  border: 1px solid rgba(57, 88, 141, 0.36);
  border-radius: 14px;
  padding: 11px 12px;
  background:
    radial-gradient(circle at top right, rgba(34, 73, 138, 0.1), transparent 42%),
    oklch(0.11 0.003 60 / 0.66);
  display: grid;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.diligentCard:hover,
.diligentCard:focus-visible {
  border-color: rgba(96, 136, 209, 0.72);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
  outline: none;
}

.diligentLabel {
  color: #8fa9d8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diligentHeadline {
  color: oklch(0.92 0.004 60);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.28;
  min-height: 34px;
}

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

.diligentMeterLabel {
  color: #8fa9d8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.diligentMeterScore {
  font: 800 15px/1.1 "Sora", "Noto Sans SC", sans-serif;
  color: oklch(0.92 0.004 60);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.diligentMeterScore[data-diligent-trigger] {
  border-radius: 999px;
  border: 1px solid rgba(81, 116, 183, 0.46);
  background: oklch(0.16 0.004 60 / 0.72);
  padding: 4px 8px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.diligentCard:hover .diligentMeterScore[data-diligent-trigger],
.diligentCard:focus-visible .diligentMeterScore[data-diligent-trigger] {
  border-color: rgba(114, 160, 240, 0.82);
  background: rgba(27, 45, 81, 0.92);
  transform: translateY(-1px);
}

.diligentMeter {
  position: relative;
  height: 8px;
  width: 100%;
  border-radius: 999px;
  background: oklch(0.74 0.006 60 / 0.16);
  border: 1px solid rgba(57, 88, 141, 0.36);
  overflow: hidden;
}

.diligentMeter::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 24.5%,
      rgba(217, 228, 248, 0.16) 24.5%,
      rgba(217, 228, 248, 0.16) 25.5%,
      transparent 25.5%,
      transparent 49.5%,
      rgba(217, 228, 248, 0.16) 49.5%,
      rgba(217, 228, 248, 0.16) 50.5%,
      transparent 50.5%,
      transparent 74.5%,
      rgba(217, 228, 248, 0.16) 74.5%,
      rgba(217, 228, 248, 0.16) 75.5%,
      transparent 75.5%
    );
  pointer-events: none;
}

.diligentMeterFill {
  position: relative;
  z-index: 1;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 0.24s ease, background 0.24s ease;
}

.diligentMeterFill::after {
  display: none;
}

.diligentMeterOk {
  background: linear-gradient(90deg, oklch(0.74 0.16 155 / 0.76), oklch(0.74 0.16 155 / 0.98));
}

.diligentMeterWarn {
  background: linear-gradient(90deg, oklch(0.78 0.12 75 / 0.8), oklch(0.78 0.12 75 / 0.98));
}

.diligentMeterErr {
  background: linear-gradient(90deg, oklch(0.66 0.18 25 / 0.78), oklch(0.66 0.18 25 / 0.98));
}

.diligentMeterInfoTone {
  background: linear-gradient(90deg, oklch(0.78 0.12 75 / 0.76), oklch(0.78 0.12 75 / 0.98));
}

.diligentScoreOk {
  color: #9af4cc;
}

.diligentScoreWarn {
  color: #ffd294;
}

.diligentScoreErr {
  color: #ffc0c8;
}

.diligentScoreLoading {
  color: oklch(0.74 0.006 60);
}

.diligentMeterScale {
  display: none;
  justify-content: space-between;
  gap: 12px;
  color: #7f98bc;
  font-size: 11px;
  font-weight: 700;
}

.diligentCard .compactList {
  display: none;
}

.diligentDetailCue {
  justify-self: start;
  color: #8fa9d8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.78;
}

.diligentDetailModal {
  position: fixed;
  inset: 0;
  z-index: 130;
}

.diligentDetailBackdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.03 0.002 60 / 0.72);
  backdrop-filter: blur(10px);
}

.diligentDetailPanel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(720px, calc(100vw - 32px));
  max-height: min(78vh, 760px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(64, 100, 160, 0.54);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(11, 24, 46, 0.985), rgba(6, 16, 31, 0.995));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  padding: 20px;
  display: grid;
  gap: 16px;
  overflow: auto;
}

.diligentDetailHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.diligentDetailEyebrow {
  color: #8fa9d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diligentDetailHead h3 {
  margin: 6px 0 0;
  color: oklch(0.92 0.004 60);
  font: 800 26px/1.15 "Sora", "Noto Sans SC", sans-serif;
}

.diligentDetailSummary {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.diligentDetailScoreWrap {
  border: 1px solid rgba(55, 86, 141, 0.46);
  border-radius: 18px;
  background: rgba(14, 28, 51, 0.72);
  padding: 14px;
  display: grid;
  gap: 7px;
  align-content: start;
}

.diligentDetailMeter {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: oklch(0.74 0.006 60 / 0.16);
  border: 1px solid rgba(57, 88, 141, 0.36);
  overflow: hidden;
}

.diligentDetailMeter::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 24.5%,
      rgba(217, 228, 248, 0.16) 24.5%,
      rgba(217, 228, 248, 0.16) 25.5%,
      transparent 25.5%,
      transparent 49.5%,
      rgba(217, 228, 248, 0.16) 49.5%,
      rgba(217, 228, 248, 0.16) 50.5%,
      transparent 50.5%,
      transparent 74.5%,
      rgba(217, 228, 248, 0.16) 74.5%,
      rgba(217, 228, 248, 0.16) 75.5%,
      transparent 75.5%
    );
  pointer-events: none;
}

.diligentDetailMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.diligentDetailMetaPill {
  border-radius: 999px;
  border: 1px solid oklch(0.74 0.006 60 / 0.32);
  background: oklch(0.74 0.006 60 / 0.1);
  color: #cfe0ff;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
}

.diligentDetailScore {
  color: oklch(0.92 0.004 60);
  font: 800 40px/0.95 "Sora", "Noto Sans SC", sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.diligentDetailStatus {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid oklch(0.74 0.006 60 / 0.35);
  background: oklch(0.74 0.006 60 / 0.12);
  color: #d5e3ff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.diligentDetailStatus.isOk {
  border-color: oklch(0.74 0.16 155 / 0.36);
  background: oklch(0.74 0.16 155 / 0.14);
  color: #9af4cc;
}

.diligentDetailStatus.isWarn {
  border-color: oklch(0.78 0.12 75 / 0.39);
  background: oklch(0.78 0.12 75 / 0.16);
  color: #ffd294;
}

.diligentDetailStatus.isErr {
  border-color: oklch(0.66 0.18 25 / 0.4);
  background: oklch(0.66 0.18 25 / 0.16);
  color: #ffc0c8;
}

.diligentDetailTakeaway {
  border: 1px solid rgba(55, 86, 141, 0.42);
  border-radius: 18px;
  background: rgba(12, 24, 45, 0.62);
  padding: 14px 16px;
  color: oklch(0.92 0.004 60);
  font: 700 16px/1.4 "Sora", "Noto Sans SC", sans-serif;
  display: flex;
  align-items: center;
  min-height: 100%;
}

.diligentDetailBlock {
  border: 1px solid rgba(55, 86, 141, 0.42);
  border-radius: 18px;
  background: rgba(9, 20, 38, 0.72);
  padding: 16px 18px;
}

.diligentDetailBlockTitle {
  color: #8fa9d8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.diligentDetailMetricCard {
  border: 1px solid rgba(55, 86, 141, 0.42);
  border-radius: 16px;
  background: oklch(0.11 0.003 60 / 0.72);
  padding: 12px 13px;
  display: grid;
  gap: 6px;
}

.diligentDetailMetricLabel {
  color: #8fa9d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.diligentDetailMetricValue {
  color: oklch(0.92 0.004 60);
  font: 800 18px/1.2 "Sora", "Noto Sans SC", sans-serif;
}

.diligentDetailMetricNote {
  color: #a8bcdd;
  font-size: 12px;
  line-height: 1.4;
}

.diligentDetailMetricItems {
  margin: 2px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #d8e5ff;
  font-size: 12px;
  line-height: 1.38;
}

.diligentDetailSignals {
  margin-top: 12px;
  padding-left: 18px;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
}

body.hasDiligentDetailModal {
  overflow: hidden;
}

body.hasNewsDetailModal {
  overflow: hidden;
}

@media (max-width: 720px) {
  .diligentDetailPanel {
    width: min(100vw - 20px, 680px);
    padding: 16px;
  }

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

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

  .diligentDetailHead {
    align-items: stretch;
  }

  .diligentDetailHead .tinyBtn {
    width: 100%;
  }
}

.briefCard.isLoading .briefSummary {
  color: #edf5ff;
}

.briefCard.isLoading .briefAction {
  color: #d4e2ff;
}

.briefCard.isLoading .decisionQuickHead > strong {
  color: #e4eeff;
}

.chips {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(21, 35, 63, 0.92);
  color: #d4e2ff;
  padding: 5px 10px;
  font-size: 12px;
}

.chipOk {
  border-color: oklch(0.74 0.16 155 / 0.36);
  background: oklch(0.74 0.16 155 / 0.14);
  color: #9af4cc;
}

.chipWarn {
  border-color: oklch(0.78 0.12 75 / 0.39);
  background: oklch(0.78 0.12 75 / 0.16);
  color: #ffd294;
}

.chipErr {
  border-color: oklch(0.66 0.18 25 / 0.4);
  background: oklch(0.66 0.18 25 / 0.16);
  color: #ffc0c8;
}

.chipUnknown {
  border-color: oklch(0.74 0.006 60 / 0.35);
  background: oklch(0.74 0.006 60 / 0.12);
  color: #c8d5ef;
}

.list {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
  color: #d5e3ff;
  font-size: 13px;
}

.compactList {
  margin-top: 4px;
}

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

.decisionSupportPanel {
  border: 1px solid rgba(57, 88, 141, 0.26);
  border-radius: 13px;
  background: oklch(0.11 0.003 60 / 0.5);
  padding: 10px;
  opacity: 0.9;
}

.decisionCardList {
  padding-left: 0;
  gap: 10px;
}

.decisionCardList > li {
  list-style: none;
  border: 1px solid oklch(0.26 0.005 60 / 0.9);
  border-radius: 12px;
  background: rgba(13, 24, 45, 0.8);
  padding: 10px 11px;
}

.decisionCardListHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.decisionCardListMeta {
  color: #8ea8d4;
  font-size: 12px;
}

.decisionCardListTitle {
  margin-top: 7px;
  color: #e8f0ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.decisionCardListDesc {
  margin-top: 6px;
  color: oklch(0.54 0.008 60);
  font-size: 12px;
  line-height: 1.45;
}

.decisionCardListMore {
  list-style: none;
  border: 1px dashed rgba(72, 103, 159, 0.58);
  border-radius: 12px;
  background: rgba(13, 24, 45, 0.42);
  padding: 9px 11px;
  color: #8ea8d4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.metricsLine {
  margin-top: 8px;
  border-top: 1px solid var(--stroke);
  padding-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

@media (min-width: 1280px) and (min-height: 760px) {
  .view[data-view="decision"].isActive {
    height: calc(100vh - 176px);
    overflow: auto;
    padding-right: 4px;
  }

  .view[data-view="decision"] .briefCard {
    min-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.78fr);
    grid-template-rows: auto auto 1fr auto;
    gap: 12px;
    padding: 12px;
    overflow: visible;
    align-content: start;
  }

  .view[data-view="decision"] .cardHead,
  .view[data-view="decision"] .decisionHeroGrid,
  .view[data-view="decision"] .metricsLine {
    grid-column: 1 / -1;
  }

  .view[data-view="decision"] .decisionHeroGrid {
    margin-top: 0;
    gap: 12px;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    align-items: start;
  }

  .view[data-view="decision"] .decisionScorePanel {
    padding: 12px 13px;
    gap: 10px;
  }

  .view[data-view="decision"] .decisionScoreTop {
    grid-template-columns: minmax(0, 1fr) 124px;
    gap: 12px;
  }

  .view[data-view="decision"] .decisionHeroSymbol {
    font-size: 30px;
  }

  .view[data-view="decision"] .briefSummary,
  .view[data-view="decision"] .briefAction {
    font-size: 14px;
    line-height: 1.38;
    display: block;
    overflow: visible;
  }

  .view[data-view="decision"] .decisionDial {
    width: 124px;
    height: 124px;
    padding: 8px;
  }

  .view[data-view="decision"] .decisionDial::after {
    inset: 8px;
  }

  .view[data-view="decision"] .decisionDialInner {
    inset: 14px;
    gap: 4px;
    padding: 8px 6px 10px;
  }

  .view[data-view="decision"] .decisionDialInner > span {
    font-size: 10px;
  }

  .view[data-view="decision"] .decisionDialInner > strong {
    min-height: 32px;
    font-size: 31px;
  }

  .view[data-view="decision"] .decisionDialUnit {
    padding-bottom: 3px;
    font-size: 14px;
  }

  .view[data-view="decision"] .decisionActionCard {
    padding: 8px 10px;
  }

  .view[data-view="decision"] .decisionQuickGrid {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  .view[data-view="decision"] .decisionQuickItem {
    padding: 8px 10px;
    gap: 6px;
    min-height: 112px;
  }

  .view[data-view="decision"] .decisionQuickHead > span {
    font-size: 10px;
  }

  .view[data-view="decision"] .decisionQuickHead > strong {
    font-size: 16px;
  }

  .view[data-view="decision"] .decisionQuickBar {
    height: 8px;
  }

  .view[data-view="decision"] .decisionQuickItem > small {
    font-size: 11px;
    line-height: 1.32;
  }

  .view[data-view="decision"] .diligentGrid {
    grid-column: 1 / 2;
    margin-top: 0;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  .view[data-view="decision"] .diligentCard {
    padding: 10px 11px;
    gap: 5px;
    min-height: 0;
  }

  .view[data-view="decision"] .diligentLabel,
  .view[data-view="decision"] .diligentMeterLabel,
  .view[data-view="decision"] .diligentMeterScale {
    font-size: 10px;
  }

  .view[data-view="decision"] .diligentHeadline {
    font-size: 14px;
    min-height: 34px;
    line-height: 1.22;
    display: block;
    overflow: visible;
  }

  .view[data-view="decision"] .diligentMeterScore {
    font-size: 15px;
  }

  .view[data-view="decision"] .diligentMeter {
    height: 10px;
  }

  .view[data-view="decision"] .diligentMeterFill::after {
    width: 8px;
    height: 8px;
  }

  .view[data-view="decision"] .diligentCard .compactList {
    margin-top: 3px;
    max-height: 72px;
    overflow: auto;
    padding-right: 3px;
    gap: 4px;
    font-size: 11px;
  }

  .view[data-view="decision"] .decisionSupportGrid {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    margin-top: 0;
    gap: 10px;
    grid-template-columns: 1fr;
    align-content: start;
  }

  .view[data-view="decision"] .decisionSupportPanel {
    padding: 10px 11px;
    min-height: 0;
    display: grid;
    gap: 8px;
  }

  .view[data-view="decision"] .decisionSupportPanel .chips {
    margin-top: 0;
    gap: 6px;
  }

  .view[data-view="decision"] #alertList.decisionCardList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
  }

  .view[data-view="decision"] .decisionCardList {
    margin: 0;
    gap: 6px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .view[data-view="decision"] .decisionCardList > li {
    padding: 8px 9px;
  }

  .view[data-view="decision"] #alertList.decisionCardList > li {
    min-height: 84px;
    padding: 8px 10px;
  }

  .view[data-view="decision"] #alertList .decisionCardListHead {
    align-items: flex-start;
  }

  .view[data-view="decision"] .decisionCardListMeta {
    font-size: 11px;
    white-space: nowrap;
  }

  .view[data-view="decision"] #alertList .decisionCardListMeta {
    font-size: 10px;
  }

  .view[data-view="decision"] .decisionCardListTitle {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .view[data-view="decision"] #alertList .decisionCardListTitle {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.24;
  }

  .view[data-view="decision"] .decisionCardListDesc {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .view[data-view="decision"] #alertList .decisionCardListDesc {
    display: none;
  }

  .view[data-view="decision"] .decisionCardListMore {
    padding: 8px 10px;
    font-size: 11px;
  }

  .view[data-view="decision"] #alertList .decisionCardListMore {
    min-height: 0;
    display: flex;
    align-items: center;
  }

  .view[data-view="decision"] .metricsLine {
    margin-top: 0;
    padding-top: 6px;
    font-size: 11px;
  }

  .view[data-view="decision"] .briefCard {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .view[data-view="decision"] .decisionQuickGrid,
  .view[data-view="decision"] .diligentGrid,
  .view[data-view="decision"] .decisionSupportGrid {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .view[data-view="decision"] .decisionQuickGrid,
  .view[data-view="decision"] .diligentGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .view[data-view="decision"] .decisionSupportGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.scraperToolbar {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(320px, 1.05fr) minmax(320px, 1.18fr) minmax(120px, 0.34fr);
  gap: 10px;
  align-items: stretch;
}

.scraperToolbar .tinyBtn {
  height: 40px;
  margin: 0;
  white-space: nowrap;
}

.scraperToolbarMain {
  display: grid;
  grid-template-columns: minmax(170px, 0.9fr) minmax(220px, 1.1fr);
  gap: 10px;
  align-items: end;
}

.scraperToolbarToggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.scraperToolbarAction {
  display: flex;
  align-items: end;
  justify-content: stretch;
}

.scraperToolbarAction .tinyBtn {
  width: 100%;
}

.filterField {
  display: grid;
  gap: 4px;
}

.filterField > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.filterField select,
.filterField input {
  width: 100%;
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--text);
  padding: 0 12px;
  font-size: 12px;
}

.toggleField {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  border: 1px solid var(--stroke);
  border-radius: 9px;
  padding: 0 12px;
  background: rgba(14, 25, 44, 0.92);
  color: #c9d9f8;
  font-size: 12px;
  font-weight: 700;
}

.toggleField input {
  margin: 0;
}

.okxCollectorCard {
  position: relative;
}

.okxCollectorCard[aria-busy="true"] {
  cursor: progress;
}

.collectorLoadingMask {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: oklch(0.03 0.002 60 / 0.68);
  backdrop-filter: blur(2px);
  border-radius: 14px;
}

.collectorLoadingMask[hidden] {
  display: none;
}

.collectorLoadingBox {
  min-width: min(520px, calc(100% - 40px));
  border: 1px solid rgba(80, 121, 195, 0.72);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(19, 35, 64, 0.96), rgba(11, 21, 40, 0.98));
  box-shadow: 0 20px 36px rgba(0, 6, 17, 0.5);
  padding: 16px 18px;
  display: grid;
  gap: 6px;
}

.collectorLoadingBox > strong {
  color: #e9f2ff;
  font: 800 17px/1.2 "Sora", "Noto Sans SC", sans-serif;
}

.collectorLoadingBox > span {
  color: #9eb5dd;
  font-size: 12px;
  font-weight: 600;
}

.collectorLoadingSpinner {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid rgba(123, 167, 241, 0.35);
  border-top-color: #8ec0ff;
  animation: collectorSpin 0.9s linear infinite;
}

@keyframes collectorSpin {
  to {
    transform: rotate(360deg);
  }
}

#scraperApplyFilterBtn.isDirty {
  border-color: rgba(255, 194, 111, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 194, 111, 0.2);
}

#scraperApplyFilterBtn.isLoading {
  opacity: 0.92;
}

.okxHintLine {
  margin-top: 8px;
}

.okxToolbar {
  margin-top: 10px;
  border: 1px solid rgba(36, 55, 95, 0.88);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(17, 28, 50, 0.92), rgba(12, 21, 39, 0.92));
  padding: 10px;
}

.okxToolbar .filterField > span,
.okxToolbar .toggleField span {
  font-size: 10px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.scraperScopePanel {
  margin-top: 10px;
  border: 1px solid rgba(37, 56, 96, 0.88);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 27, 49, 0.9), rgba(11, 20, 37, 0.92));
  padding: 10px;
  display: grid;
  gap: 8px;
}

.scraperScopeHead {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.scraperScopeTitleWrap {
  display: grid;
  gap: 4px;
}

.scraperScopeTitleWrap > strong {
  color: #e8f1ff;
  font: 800 13px/1.2 "Sora", "Noto Sans SC", sans-serif;
}

.scraperScopeTitleWrap > span {
  color: #9bb0d7;
  font-size: 11px;
}

.scraperScopePicker {
  position: relative;
}

.scraperScopeControls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.scraperScopeDropdownBtn {
  width: 100%;
  height: 44px;
  border-radius: 9px;
  border: 1px solid rgba(55, 83, 131, 0.9);
  background: rgba(13, 25, 45, 0.94);
  color: oklch(0.74 0.006 60);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  cursor: pointer;
}

.scraperScopeDropdownBtn::after {
  content: "v";
  color: #9fb8e5;
  font-size: 11px;
}

.scraperScopeDropdownBtn[aria-expanded="true"] {
  border-color: rgba(96, 137, 205, 0.95);
  box-shadow: 0 0 0 1px rgba(96, 137, 205, 0.35) inset;
}

.scraperScopeDropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 100%;
  width: min(560px, calc(100vw - 80px));
  border: 1px solid rgba(53, 80, 126, 0.96);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(16, 29, 52, 0.98), rgba(10, 18, 33, 0.98));
  box-shadow: 0 16px 26px rgba(2, 8, 19, 0.48);
  padding: 8px;
  display: grid;
  gap: 8px;
}

.scraperScopeDropdown[hidden] {
  display: none;
}

#scraperChainSearch {
  width: 100%;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--stroke);
  background: var(--panel);
  color: var(--text);
  padding: 0 10px;
  font-size: 12px;
}

.scraperScopeActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.scraperScopeActions .tinyBtn {
  min-width: 108px;
  height: 40px;
  margin: 0;
  white-space: nowrap;
}

.scraperScopeSelected {
  margin-top: 0;
  min-height: 36px;
  display: grid;
  gap: 7px;
  padding-top: 2px;
}

.scraperScopeSummaryLine {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scraperScopeChip {
  border-radius: 999px;
  border: 1px solid rgba(69, 101, 162, 0.92);
  background: rgba(18, 34, 61, 0.94);
  color: #d4e3ff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  padding: 6px 9px;
  display: inline-grid;
  gap: 1px;
}

.scraperScopeChip strong {
  color: oklch(0.92 0.004 60);
  font-size: 12px;
  font-weight: 800;
}

.scraperScopeChip span {
  color: #99afd6;
}

.scraperScopeAggList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scraperScopeMeta {
  border-radius: 999px;
  border: 1px solid rgba(58, 85, 134, 0.9);
  background: rgba(15, 28, 50, 0.88);
  color: #adc0e2;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 9px;
}

.scraperScopeTagRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scraperScopeTag {
  border-radius: 999px;
  border: 1px solid rgba(60, 89, 141, 0.86);
  background: rgba(14, 27, 48, 0.9);
  color: #c8d8f6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.scraperScopeList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding-right: 1px;
}

.scraperScopeItem {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid rgba(50, 74, 119, 0.9);
  border-radius: 9px;
  background: rgba(15, 28, 50, 0.9);
  color: #c9d9f8;
  font-size: 12px;
  font-weight: 700;
  padding: 0 8px;
  cursor: pointer;
}

.scraperScopeItem input {
  margin: 0;
}

.scraperScopeItemName {
  flex: 1;
  min-width: 0;
}

.scraperScopeItemMeta {
  color: #95aad1;
  font-size: 10px;
  font-weight: 700;
}

.scraperScopeEmpty {
  grid-column: 1 / -1;
  border: 1px dashed rgba(61, 89, 141, 0.85);
  border-radius: 9px;
  color: #8fa7d0;
  font-size: 12px;
  padding: 7px 9px;
}

.okxHealthChips {
  margin-top: 10px;
}

.okxSummaryLine {
  margin-top: 10px;
}

.okxStatGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.okxStatCard {
  border: 1px solid rgba(40, 61, 104, 0.9);
  border-radius: 11px;
  background: rgba(12, 23, 42, 0.88);
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.okxStatCard > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.okxStatCard > strong {
  font: 800 18px/1.25 "Sora", "Noto Sans SC", sans-serif;
  color: oklch(0.92 0.004 60);
}

.okxStatCard > strong.warnTxt {
  color: #ffd59e;
}

.okxStatCard > small {
  color: #9fb3d8;
  font-size: 11px;
}

.okxChainTabs {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.okxChainActive {
  box-shadow: inset 0 0 0 1px oklch(0.78 0.12 75 / 0.25);
}

.okxChainCard {
  border: 1px solid rgba(57, 82, 130, 0.88);
  border-radius: 12px;
  background: oklch(0.16 0.004 60 / 0.88);
  padding: 8px 10px;
  display: grid;
  gap: 5px;
}

.okxChainCardCompact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 999px;
}

.okxChainCard.isActive {
  border-color: oklch(0.78 0.12 75 / 0.62);
  box-shadow: 0 0 0 1px oklch(0.78 0.12 75 / 0.2) inset;
  background: rgba(45, 36, 28, 0.7);
}

.okxChainCard.isZeroFlow {
  opacity: 0.7;
}

.okxChainCard.isBusy .okxChainTx {
  color: oklch(0.82 0.10 75);
}

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

.okxChainNameWrap {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.okxChainName {
  font-weight: 800;
  color: #e6efff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.okxChainRemoveBtn {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(86, 118, 173, 0.88);
  background: rgba(16, 30, 54, 0.9);
  color: #bfd2f4;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.okxChainRemoveBtn:hover {
  border-color: rgba(255, 150, 141, 0.8);
  color: #ffd2cc;
  background: rgba(63, 32, 36, 0.82);
}

.okxChainCompactMeta {
  color: #9fb3d8;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.okxChainTx {
  color: #adc2e7;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.okxChainBottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.okxChainFlowLabel {
  color: #8fa7d1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.okxChainFlow {
  color: #d7e6ff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.okxTableWrap {
  margin-top: 10px;
  border-radius: 12px;
  overflow-x: auto;
}

.okxTableHead,
.okxTableRow {
  display: grid;
  grid-template-columns: 1fr 0.9fr 0.8fr 1.5fr 1fr;
  min-width: 860px;
  gap: 10px;
  padding: 10px 12px;
  align-items: center;
}

.okxTableHead {
  background: linear-gradient(180deg, rgba(22, 37, 66, 0.98), rgba(17, 29, 52, 0.94));
  border-bottom: 1px solid rgba(38, 57, 99, 0.9);
  color: #9fb4d9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.okxTableRow {
  border-top: 1px solid oklch(0.26 0.005 60 / 0.85);
  font-size: 12px;
}

.okxTableRow.isAnomaly {
  border-left: 3px solid rgba(255, 128, 116, 0.8);
  background: linear-gradient(90deg, rgba(58, 29, 34, 0.5), rgba(17, 29, 52, 0.72));
}

.okxAssetCell,
.okxAmountCell,
.okxValueCell,
.okxTimeCell {
  min-width: 0;
}

.okxAssetCell {
  display: grid;
  gap: 6px;
}

.okxAssetMain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.okxChainBadge {
  border-radius: 999px;
  border: 1px solid rgba(72, 105, 166, 0.9);
  background: rgba(21, 37, 70, 0.95);
  color: #d6e3ff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 8px;
  white-space: nowrap;
}

.okxAssetUnit {
  color: #d8e7ff;
  font: 700 12px/1.15 "Sora", "Noto Sans SC", sans-serif;
}

.okxTagList {
  gap: 5px;
}

.okxCellMain {
  color: #eaf2ff;
  font-weight: 700;
}

.okxCellSub {
  margin-top: 3px;
  color: #98add3;
  font-size: 11px;
}

.okxHashCell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.okxAddrCell {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.okxAddrCell .okxCellMain {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.okxAddrCell .okxCellSub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.okxTimeCell .okxCellSub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priceHead {
  align-items: baseline;
}

.midPrice {
  font: 800 36px/1 "Sora", "Noto Sans SC", sans-serif;
}

.delta {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
}

.delta.up {
  color: var(--green);
}

.delta.down {
  color: var(--red);
}

.delta.flat {
  color: var(--muted);
}

.canvasWrap {
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(20, 34, 61, 0.94), rgba(12, 20, 37, 0.95));
  overflow: hidden;
}

#trendCanvas {
  width: 100%;
  height: 180px;
  display: block;
}

.exchangeGrid {
  margin-top: 10px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  overflow: hidden;
}

.tvHost {
  position: relative;
  margin-top: 8px;
  height: clamp(420px, 48vh, 560px);
  min-height: 420px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 34, 61, 0.94), rgba(12, 20, 37, 0.95));
}

.tvLoadingOverlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  text-align: center;
  background:
    radial-gradient(340px 170px at 50% 46%, oklch(0.78 0.12 75 / 0.2), rgba(10, 18, 35, 0.92) 72%),
    linear-gradient(180deg, rgba(6, 13, 25, 0.84), rgba(5, 10, 20, 0.94));
}

.tvHost.isLoading .tvLoadingOverlay {
  display: flex;
}

.tvLoadingTitle {
  font: 800 33px/1 "Sora", "Noto Sans SC", sans-serif;
  letter-spacing: 0.2px;
}

.tvLoadingSub {
  color: var(--muted);
  font-size: 18px;
}

.tvLoadingSpinner {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid oklch(0.78 0.12 75 / 0.32);
  border-top-color: oklch(0.78 0.12 75 / 0.98);
  animation: tvSpin 0.9s linear infinite;
}

.tvHost .tradingview-widget-container,
.tvHost .tradingview-widget-container__widget,
.tvHost iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  display: block;
}

.pointContextCard {
  padding-bottom: 12px;
}

.pointContextHead {
  align-items: flex-start;
}

.pointContextSub {
  margin: 5px 0 0;
  color: #9eb3d9;
  font-size: 13px;
}

.pointContextTools {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.pointField {
  min-width: 120px;
}

.pointField select:disabled {
  opacity: 0.85;
  cursor: not-allowed;
}

.pointToggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  color: #b4c8ec;
  background: rgba(16, 30, 54, 0.64);
}

.pointToggle input {
  accent-color: #fec76c;
}

.pointContextSplit {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 0.88fr);
  gap: 12px;
}

.pointContextMain,
.pointContextSide {
  min-width: 0;
}

.pointContextSide {
  display: grid;
  gap: 10px;
  align-content: start;
}

.pointNewsWide {
  margin-top: 10px;
}

.pointKlineWrap {
  border: 1px solid var(--stroke);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(420px 180px at 8% 0%, rgba(89, 140, 255, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(18, 32, 58, 0.96), rgba(10, 18, 35, 0.98));
  position: relative;
  box-shadow: inset 0 1px 0 rgba(130, 168, 239, 0.05);
}

.pointKlineMetaRow {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pointKlineMetaRow .hint {
  font-size: 12px;
  line-height: 1.45;
}

.pointStatGrid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pointStatItem {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(13, 24, 45, 0.72);
  display: grid;
  gap: 4px;
}

.pointStatItem span {
  color: #8da6d5;
  font-size: 12px;
}

.pointStatItem strong {
  font-size: 15px;
  color: #e7f0ff;
}

.pointFlowGrid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

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

.pointHoverTradePanel {
  position: absolute;
  left: 10px;
  top: 10px;
  width: min(332px, calc(100% - 20px));
  max-height: none;
  overflow: hidden;
  z-index: 8;
  border: 1px solid rgba(79, 112, 170, 0.9);
  border-radius: 8px;
  padding: 4px 5px;
  background: linear-gradient(180deg, rgba(8, 17, 33, 0.95), rgba(8, 15, 29, 0.95));
  box-shadow: 0 8px 16px rgba(3, 8, 16, 0.5);
  backdrop-filter: blur(5px);
  pointer-events: none;
}

.pointKlineCursorCard {
  position: absolute;
  z-index: 7;
  min-width: 188px;
  max-width: 220px;
  border: 1px solid rgba(86, 122, 188, 0.88);
  border-radius: 10px;
  padding: 8px 9px;
  background: linear-gradient(180deg, rgba(7, 16, 31, 0.96), rgba(8, 15, 28, 0.98));
  box-shadow: 0 10px 22px oklch(0.03 0.002 60 / 0.56);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

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

.pointKlineCursorHead strong {
  color: oklch(0.92 0.004 60);
  font-size: 11px;
  line-height: 1.25;
}

.pointKlineCursorMove {
  font-size: 11px;
  font-weight: 800;
}

.pointKlineCursorMove.up {
  color: oklch(0.78 0.12 75);
}

.pointKlineCursorMove.down {
  color: oklch(0.66 0.18 25);
}

.pointKlineCursorMove.flat {
  color: #dbe7fb;
}

.pointKlineCursorGrid {
  margin-top: 7px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
}

.pointKlineCursorGrid span {
  color: oklch(0.54 0.008 60);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pointKlineCursorGrid strong {
  color: #f2f7ff;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.pointKlineCursorMeta {
  margin-top: 7px;
  color: #a8bddf;
  font-size: 10px;
  font-weight: 700;
}

.pointHoverTradeHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 2px;
}

.pointHoverTradeHead strong {
  font-size: 10px;
  color: #e8f0ff;
}

.pointHoverTradeSummary {
  margin-bottom: 2px;
  color: #b8cae9;
  font-size: 9px;
  line-height: 1.15;
}

.pointHoverTradePanel.isCompact .pointTradeGrid {
  display: none;
}

.pointHoverTradePanel .pointTradeGrid.isSingle {
  grid-template-columns: 1fr;
}

.pointHoverTradePanel .pointTradeGrid {
  margin-top: 0;
  gap: 4px;
}

.pointHoverTradePanel .pointContextList {
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border-radius: 8px;
}

.pointHoverTradePanel .pointColumnHead .collectorBlockTitle {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 11px;
}

.pointHoverTradePanel .pointColumnHead {
  gap: 4px;
}

.pointHoverTradePanel .pointContextItem {
  padding: 4px 6px;
}

.pointHoverTradePanel .pointContextTitle {
  font-size: 10px;
}

.pointHoverTradePanel .pointContextMeta {
  margin-top: 1px;
  font-size: 9px;
}

.pointHoverTradePanel .pointContextItem.isTradeMore .pointContextMeta {
  margin-top: 0;
  color: #8ca9d7;
}

.pointHoverTradePanel .hint {
  font-size: 9px;
}

.pointHoverTradePanel .pointTradeSide {
  padding: 1px 6px;
  font-size: 10px;
}

.pointHoverTradePanel .pointContextEmpty {
  padding: 7px;
  font-size: 10px;
}

.pointFlowCard {
  border: 1px solid var(--stroke);
  border-radius: 9px;
  padding: 6px 8px;
  background: rgba(13, 24, 45, 0.72);
  display: grid;
  gap: 2px;
}

.pointFlowCard span {
  color: #8da6d5;
  font-size: 11px;
}

.pointFlowCard strong {
  font-size: 13px;
  color: #e8f0ff;
}

.pointFlowCard small {
  color: #9db2d8;
  font-size: 10px;
  line-height: 1.2;
}

.pointFlowCard.isLong strong,
.pointFlowCard.isBuy strong {
  color: #8ce6c3;
}

.pointFlowCard.isShort strong,
.pointFlowCard.isSell strong {
  color: #ffb0b8;
}

.pointFlowCard.isLarge {
  border-color: oklch(0.78 0.12 75 / 0.82);
  background: linear-gradient(180deg, rgba(54, 41, 22, 0.58), rgba(19, 24, 37, 0.72));
}

.pointStatItem.isEmpty {
  border-color: rgba(185, 146, 96, 0.82);
  background: linear-gradient(180deg, rgba(42, 31, 20, 0.56), rgba(26, 21, 17, 0.54));
}

.pointStatItem.isEmpty strong {
  color: #ffd7a0;
}

.pointNoNewsNotice {
  margin-top: 8px;
  border: 1px solid rgba(185, 146, 96, 0.85);
  border-radius: 10px;
  padding: 9px 11px;
  background: linear-gradient(180deg, rgba(43, 32, 20, 0.78), rgba(26, 21, 17, 0.72));
  color: #ffd7a0;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

#pointKlineCanvas {
  width: 100%;
  height: 350px;
  display: block;
  cursor: crosshair;
  outline: none;
}

@media (min-width: 1680px) {
  #pointKlineCanvas {
    height: 380px;
  }
}

#pointKlineCanvas:focus-visible {
  box-shadow: 0 0 0 2px rgba(254, 199, 108, 0.65);
  border-radius: 8px;
}

.pointContextGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

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

.pointTimelineHead {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pointTimeline {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  max-height: 300px;
  overflow: auto;
  background: rgba(9, 17, 33, 0.55);
}

.pointTimelineItem {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid oklch(0.26 0.005 60 / 0.9);
}

.pointTimelineItem:first-child {
  border-top: 0;
}

.pointTimelineBadge {
  border-radius: 999px;
  border: 1px solid rgba(67, 104, 167, 0.8);
  padding: 1px 8px;
  font-size: 11px;
  color: #b8ceef;
  background: rgba(16, 30, 54, 0.9);
}

.pointTimelineBadge.news {
  border-color: rgba(92, 147, 245, 0.8);
  color: #bdd8ff;
}

.pointTimelineBadge.liquidity {
  border-color: rgba(79, 188, 152, 0.82);
  color: #a9ebd2;
}

.pointTimelineBadge.whale {
  border-color: rgba(255, 142, 130, 0.82);
  color: #ffc6bf;
}

.pointTimelineBadge.perp {
  border-color: oklch(0.78 0.12 75 / 0.8);
  color: #ffe1b0;
}

.pointTimelineBadge.spot {
  border-color: rgba(123, 201, 255, 0.82);
  color: #cdeaff;
}

.pointTimelineBadge.liq {
  border-color: rgba(217, 153, 255, 0.82);
  color: #e7cbff;
}

.pointTimelineText {
  font-size: 12px;
  color: #d7e4fb;
  line-height: 1.35;
}

.pointTimelineTextWrap {
  display: grid;
  gap: 6px;
}

.pointTimelineTime {
  font-size: 11px;
  color: #8ca4cf;
}

.pointContextList {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  min-height: 260px;
  max-height: 460px;
  overflow: auto;
  background: rgba(9, 17, 33, 0.55);
}

#pointContextNews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
  align-items: start;
}

.pointContextItem {
  padding: 9px 10px;
  border-top: 1px solid oklch(0.26 0.005 60 / 0.9);
}

.pointContextItem:first-child {
  border-top: 0;
}

.pointNewsGroup {
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: rgba(9, 17, 33, 0.55);
  overflow: hidden;
  min-height: 0;
}

.pointNewsGroupHead {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid oklch(0.26 0.005 60 / 0.9);
  background: rgba(16, 30, 54, 0.72);
}

.pointNewsGroupList {
  max-height: 330px;
  overflow: auto;
}

.pointNewsGroupList .pointContextItem:first-child {
  border-top: 0;
}

.pointContextTitle {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.pointContextTitleRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.pointContextMeta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.pointImpactBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(67, 104, 167, 0.8);
  background: rgba(16, 30, 54, 0.9);
  color: #d7e4fb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}

.pointImpactBadge.is-low {
  border-color: rgba(101, 134, 188, 0.82);
  color: #cad9f5;
}

.pointImpactBadge.is-medium {
  border-color: oklch(0.78 0.12 75 / 0.86);
  color: #ffe1b0;
  background: rgba(46, 34, 20, 0.86);
}

.pointImpactBadge.is-high {
  border-color: rgba(255, 122, 122, 0.88);
  color: #ffc4c4;
  background: rgba(48, 23, 28, 0.88);
}

.pointContextLink {
  margin-top: 5px;
  display: inline-block;
  color: #9ec7ff;
  font-size: 12px;
}

.pointContextEmpty {
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}

.pointContextEmpty.isNoNews {
  color: #f6cd95;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(42, 31, 20, 0.5), rgba(26, 21, 17, 0.45));
  border: 1px dashed rgba(185, 146, 96, 0.62);
  border-radius: 10px;
  margin: 8px;
}

.pointContextItem.isTrade .pointContextTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pointTradeSide {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(75, 111, 173, 0.82);
  background: rgba(16, 30, 54, 0.84);
  color: #c6dcff;
}

.pointTradeSide.buy {
  border-color: rgba(76, 196, 156, 0.8);
  color: #b6eed7;
}

.pointTradeSide.sell {
  border-color: rgba(255, 136, 146, 0.8);
  color: #ffd0d5;
}

.exchangeHead,
.exchangeRow {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
  padding: 9px 10px;
}

.exchangeHead {
  background: rgba(21, 36, 64, 0.92);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.exchangeRow {
  border-top: 1px solid oklch(0.26 0.005 60 / 0.9);
  font-size: 12px;
}

.sampleGrid {
  margin-top: 8px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  max-width: 100%;
  overflow-x: auto;
}

.sampleHead,
.sampleRow {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.95fr 1fr 1.15fr;
  min-width: 560px;
  gap: 8px;
  padding: 8px 10px;
}

.sampleHead {
  background: rgba(21, 36, 64, 0.92);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sampleRow {
  border-top: 1px solid oklch(0.26 0.005 60 / 0.9);
  font-size: 12px;
}

.txHead,
.txRow {
  grid-template-columns: 0.78fr 0.86fr 0.86fr 0.8fr 0.86fr 1fr 1fr 0.95fr 1.05fr;
  min-width: 1080px;
}

.txHead > div,
.txRow > div {
  min-width: 0;
}

.txRow.isAnomaly {
  border-left: 3px solid oklch(0.66 0.18 25 / 0.7);
  background: rgba(63, 22, 33, 0.28);
}

.txTagList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.txTag {
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.92);
  background: rgba(16, 30, 54, 0.92);
  color: #b9caea;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  white-space: nowrap;
}

.txTag.alert {
  border-color: oklch(0.66 0.18 25 / 0.52);
  background: oklch(0.66 0.18 25 / 0.17);
  color: #ffc0c8;
}

.txTag.warn {
  border-color: oklch(0.78 0.12 75 / 0.52);
  background: oklch(0.78 0.12 75 / 0.16);
  color: #ffd79f;
}

.collectorHead,
.collectorRow {
  grid-template-columns: 0.9fr 0.95fr 1.1fr 1.2fr 1.15fr;
  min-width: 900px;
}

.collectorHead > div {
  white-space: nowrap;
}

.collectorMetric {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.collectorMain {
  line-height: 1.35;
  font-weight: 700;
  color: #e6efff;
  min-width: 0;
}

.collectorSub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

.collectorSub.mono {
  white-space: normal;
  overflow-wrap: anywhere;
}

.sampleEmpty {
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}

.hashMono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
}

.mono {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.upTxt {
  color: var(--green);
  font-weight: 800;
}

.downTxt {
  color: var(--red);
  font-weight: 800;
}

.watchTable {
  margin-top: 8px;
  display: grid;
  gap: 6px;
  max-height: min(72vh, 980px);
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(94, 137, 212, 0.72) rgba(9, 18, 34, 0.26);
  scrollbar-gutter: stable;
}

.watchTable::-webkit-scrollbar {
  width: 9px;
}

.watchTable::-webkit-scrollbar-track {
  background: rgba(9, 18, 34, 0.3);
  border-radius: 999px;
}

.watchTable::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(116, 170, 255, 0.74), rgba(78, 119, 194, 0.84));
  border: 2px solid rgba(9, 18, 34, 0.82);
}

.watchTable::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(144, 196, 255, 0.86), rgba(96, 145, 226, 0.92));
}

.watchSearchRow {
  margin-top: 8px;
}

.watchSearchInput {
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: 1px solid oklch(0.32 0.006 60 / 0.76);
  background: oklch(0.11 0.003 60 / 0.96);
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
}

.watchSearchInput::placeholder {
  color: #83a0cf;
}

.watchSearchInput:focus {
  outline: none;
  border-color: oklch(0.78 0.12 75 / 0.96);
  box-shadow: 0 0 0 1px oklch(0.78 0.12 75 / 0.28);
}

.watchRow {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 4px;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 6px;
  background: rgba(16, 28, 50, 0.92);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.watchRow:hover {
  transform: translateY(-1px);
  border-color: var(--stroke-strong);
  background: rgba(18, 32, 58, 0.96);
}

.watchRow.active {
  border-color: oklch(0.78 0.12 75 / 0.68);
  background: linear-gradient(180deg, rgba(70, 49, 19, 0.55), rgba(16, 28, 50, 0.9));
}

/* Star pin button */
.watchStarBtn {
  width: 24px;
  height: 100%;
  min-height: 28px;
  border: none;
  background: none;
  color: var(--stroke-strong);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s;
  align-self: center;
}
.watchStarBtn:hover { color: #f5a623; }
.watchStarBtn.isPinned { color: #f5a623; }
.watchStarBtn.isPinned:hover { color: var(--muted); }

/* Divider between pinned and other pairs */
.watchDivider {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 6px 4px;
  border-top: 1px solid var(--stroke);
  margin-top: 2px;
}

.watchRowMain {
  border: 0;
  background: transparent;
  color: inherit;
  min-width: 0;
  border-radius: 9px;
  padding: 3px 5px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto auto;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.watchRowMain:hover {
  background: oklch(0.97 0.004 60 / 0.02);
}

.watchRowMain:focus-visible,
.watchRowDetailBtn:focus-visible {
  outline: 2px solid oklch(0.78 0.12 75 / 0.9);
  outline-offset: 2px;
}

.watchSymBlock {
  min-width: 0;
}

.watchRowPrice {
  color: #dbe7fb;
  font-size: 15px;
  font-weight: 800;
}

.watchRowDelta {
  font-size: 13px;
  font-weight: 800;
}

.watchRowDetailBtn {
  align-self: center;
  min-width: 68px;
  border-radius: 9px;
  border: 1px solid rgba(77, 113, 171, 0.55);
  background: linear-gradient(180deg, rgba(14, 29, 56, 0.96), rgba(10, 21, 42, 0.98));
  color: #cfe2ff;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  min-height: 32px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.watchRowDetailBtn:hover {
  transform: translateY(-1px);
  border-color: oklch(0.78 0.12 75 / 0.72);
  background: linear-gradient(180deg, rgba(63, 48, 24, 0.88), rgba(27, 28, 37, 0.96));
  color: #ffe3b1;
}

.watchRow.active .watchRowDetailBtn {
  border-color: oklch(0.78 0.12 75 / 0.62);
}

.watchEmpty {
  border-radius: 10px;
  border: 1px dashed oklch(0.32 0.006 60 / 0.52);
  background: oklch(0.11 0.003 60 / 0.82);
  color: #9cb3d8;
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 700;
}

.marketDetailPage {
  display: grid;
  gap: 12px;
}

.marketDetailPageTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.marketDetailBackBtn {
  width: auto;
  min-width: 170px;
  padding: 0 12px;
}

.marketDetailRoot {
  display: grid;
  gap: 12px;
}

.marketDetailEmpty {
  padding: 18px;
}

.marketDetailHeroCard,
.marketDetailTrendCard,
.marketDetailSnapshotCard,
.marketDetailExchangeCard,
.marketDetailBacktestCard,
.marketDetailSwitchCard {
  overflow: hidden;
}

.marketDetailHeroHead {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.marketDetailHeroLead {
  display: grid;
  gap: 7px;
  flex: 1 1 620px;
  min-width: 0;
}

.marketDetailTitleRow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.marketDetailTitle {
  margin: 0;
  color: #f3f8ff;
  font-size: 28px;
  line-height: 1.1;
}

.marketDetailHeroMetaRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.marketDetailMetaPill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.52);
  background: oklch(0.11 0.003 60 / 0.78);
  color: #b9ccea;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.marketDetailTicker {
  color: #96b4df;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.marketDetailSummary {
  margin: 6px 0 0;
  color: #d2def4;
  font-size: 14px;
  line-height: 1.75;
}

.marketDetailHeroSide {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 260px;
  flex: 0 0 300px;
}

.marketDetailHeroPriceWrap {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.marketDetailHeroPrice {
  color: #f5f9ff;
  font-size: 48px;
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-weight: 900;
}

.marketDetailHeroDelta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.5);
  background: oklch(0.11 0.003 60 / 0.86);
  font-size: 18px;
  font-weight: 800;
}

.marketDetailHeroMicro {
  color: #93add6;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.marketDetailHeroDelta.up {
  color: oklch(0.78 0.12 75);
}

.marketDetailHeroDelta.down {
  color: oklch(0.66 0.18 25);
}

.marketDetailHeroDelta.flat {
  color: #dce8fb;
}

.marketDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(320px, 0.9fr);
  gap: 12px;
}

.marketDetailGridSecondary {
  align-items: start;
}

.marketDetailQuickStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.marketDetailQuickStat {
  border-radius: 12px;
  border: 1px solid oklch(0.26 0.005 60 / 0.38);
  background: linear-gradient(180deg, oklch(0.11 0.003 60 / 0.9), oklch(0.11 0.003 60 / 0.92));
  padding: 10px 12px;
  display: grid;
  gap: 5px;
}

.marketDetailQuickStat span {
  color: oklch(0.54 0.008 60);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marketDetailQuickStat strong {
  color: oklch(0.92 0.004 60);
  font-size: 18px;
  line-height: 1.2;
}

.marketDetailQuickStat strong.up {
  color: oklch(0.78 0.12 75);
}

.marketDetailQuickStat strong.down {
  color: oklch(0.66 0.18 25);
}

.marketDetailQuickStat strong.flat {
  color: #dce8fb;
}

.marketDetailTrendCanvasWrap {
  margin-top: 12px;
  height: 260px;
  border-radius: 14px;
  border: 1px solid oklch(0.26 0.005 60 / 0.38);
  background: linear-gradient(180deg, oklch(0.11 0.003 60 / 0.92), oklch(0.03 0.002 60 / 0.96));
  padding: 10px 12px;
}

.marketDetailTradingViewHost {
  height: clamp(500px, 62vh, 760px);
  min-height: 500px;
}

.marketDetailKlineCanvas {
  height: 420px;
}

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

.marketDetailMetricGridCompact {
  margin-top: 2px;
}

.marketDetailMetric {
  border-radius: 12px;
  border: 1px solid oklch(0.26 0.005 60 / 0.38);
  background: oklch(0.11 0.003 60 / 0.72);
  padding: 11px 12px;
  display: grid;
  gap: 5px;
}

.marketDetailMetric span {
  color: oklch(0.54 0.008 60);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marketDetailMetric strong {
  color: oklch(0.92 0.004 60);
  font-size: 20px;
  line-height: 1.2;
}

.marketDetailMetric strong.up {
  color: oklch(0.78 0.12 75);
}

.marketDetailMetric strong.down {
  color: oklch(0.66 0.18 25);
}

.marketDetailMetric strong.flat {
  color: oklch(0.92 0.004 60);
}

.marketDetailExchangeGrid {
  margin-top: 10px;
}

.marketDetailSwitchHead {
  align-items: center;
  gap: 12px;
}

.marketDetailSwitchSearchRow {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.marketDetailSwitchSearchInput {
  height: 40px;
}

.marketDetailSwitchCurrent {
  min-width: 156px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid oklch(0.26 0.005 60 / 0.52);
  background: oklch(0.11 0.003 60 / 0.78);
  display: grid;
  align-content: center;
  gap: 2px;
}

.marketDetailSwitchCurrent span {
  color: #89a6d3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.marketDetailSwitchCurrent strong {
  color: oklch(0.92 0.004 60);
  font-size: 14px;
  font-weight: 800;
}

.marketDetailSwitchList {
  margin-top: 10px;
  display: grid;
  gap: 8px;
  max-height: 308px;
  overflow: auto;
}

.marketDetailSwitchRow {
  border: 1px solid oklch(0.26 0.005 60 / 0.42);
  border-radius: 12px;
  background: oklch(0.11 0.003 60 / 0.74);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.marketDetailSwitchRow:hover {
  transform: translateY(-1px);
  border-color: rgba(122, 173, 255, 0.54);
  background: rgba(14, 27, 52, 0.82);
}

.marketDetailSwitchRowMain {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.marketDetailSwitchName {
  color: oklch(0.92 0.004 60);
  font-size: 15px;
  font-weight: 800;
}

.marketDetailSwitchCode {
  color: #8ca6d1;
  font-size: 12px;
}

.marketDetailSwitchRowSide {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.marketDetailSwitchPrice {
  color: #dbe7fb;
  font-size: 16px;
  font-weight: 800;
}

.marketDetailSwitchDelta {
  font-size: 13px;
  font-weight: 800;
}

.marketDetailSwitchEmpty {
  min-height: 84px;
  border: 1px dashed rgba(65, 95, 146, 0.58);
  border-radius: 12px;
  background: oklch(0.11 0.003 60 / 0.52);
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
  color: oklch(0.54 0.008 60);
  font-size: 13px;
  font-weight: 700;
}

.marketDetailSwitchMeta {
  margin-top: 10px;
  color: #89a6d3;
  font-size: 12px;
  font-weight: 700;
}

.watchSym {
  font-weight: 800;
}

.watchSkeletonRow {
  pointer-events: none;
  cursor: default;
  border-color: rgba(49, 74, 118, 0.84);
  background: linear-gradient(180deg, rgba(14, 26, 50, 0.95), oklch(0.11 0.003 60 / 0.96));
}

.watchSkeletonMain {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.watchSkeletonBar {
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(66, 93, 140, 0.35) 0%,
      rgba(93, 126, 185, 0.62) 50%,
      rgba(66, 93, 140, 0.35) 100%
    );
  background-size: 230% 100%;
  animation: skeletonShift 1.2s ease-in-out infinite;
}

.watchSkeletonSym.short {
  width: 46%;
}

.watchSkeletonSym.mid {
  width: 62%;
}

.watchSkeletonSym.long {
  width: 76%;
}

.watchSkeletonPrice {
  width: 78%;
  justify-self: end;
}

.watchSkeletonDelta {
  width: 68%;
  justify-self: end;
}

.watchSkeletonAction {
  width: 74px;
  min-height: 32px;
  border-radius: 9px;
}

.panelList {
  margin-top: 8px;
  max-height: 590px;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding-right: 2px;
}

.timelineList {
  margin-top: 8px;
  max-height: 420px;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding: 2px 4px 2px 0;
}

.newsItem {
  border: 1px solid var(--stroke);
  border-radius: 11px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(17, 29, 55, 0.92), rgba(12, 22, 41, 0.94));
}

.newsItem h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.36;
}

.newsTimelineDay {
  display: grid;
  gap: 10px;
}

.newsTimelineDayHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.newsTimelineDayLabel {
  color: oklch(0.92 0.004 60);
  font: 800 13px/1.2 "Sora", "Noto Sans SC", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.newsTimelineDayMeta {
  color: oklch(0.54 0.008 60);
  font-size: 11px;
  font-weight: 700;
}

.newsTimelineGroup {
  position: relative;
  display: grid;
  gap: 12px;
  padding-left: 0;
}

.newsTimelineGroup::before {
  content: "";
  position: absolute;
  left: 122px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, rgba(84, 121, 189, 0.08), rgba(102, 145, 224, 0.62), rgba(84, 121, 189, 0.08));
}

.newsTimelineItem {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.newsTimelineRail {
  position: relative;
  grid-column: 1;
  width: 100%;
  display: grid;
  justify-items: end;
  gap: 10px;
  padding-top: 2px;
}

.newsTimelineTime {
  color: oklch(0.74 0.006 60);
  font: 800 18px/1 "Sora", "Noto Sans SC", sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.03em;
}

.newsTimelineDot {
  width: 12px;
  height: 12px;
  margin-right: -6px;
  border-radius: 999px;
  border: 2px solid rgba(9, 16, 31, 0.95);
  background: #5d84cb;
  box-shadow: 0 0 0 4px rgba(78, 115, 185, 0.16);
}

.newsTimelineDot.is-critical {
  background: #ff6e7d;
  box-shadow: 0 0 0 4px oklch(0.66 0.18 25 / 0.16);
}

.newsTimelineDot.is-high {
  background: oklch(0.78 0.12 75);
  box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.16);
}

.newsTimelineDot.is-medium {
  background: #75abff;
  box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.16);
}

.newsTimelineDot.is-low {
  background: #5976aa;
  box-shadow: 0 0 0 4px rgba(89, 118, 170, 0.16);
}

.newsTimelineCard {
  position: relative;
  grid-column: 2;
  min-width: 0;
  border: 1px solid rgba(47, 77, 130, 0.9);
  border-radius: 14px;
  padding: 14px 16px 13px;
  background:
    linear-gradient(90deg, rgba(27, 48, 88, 0.18), rgba(17, 29, 55, 0) 32%),
    linear-gradient(180deg, rgba(17, 29, 55, 0.96), oklch(0.11 0.003 60 / 0.96));
  box-shadow: 0 12px 24px rgba(3, 8, 19, 0.24);
}

.newsTimelineCard.hasMedia {
  display: grid;
  grid-template-columns: minmax(104px, 32%) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.newsTimelineCard[role="button"] {
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.newsTimelineCard[role="button"]:hover,
.newsTimelineCard[role="button"]:focus-visible {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(98, 140, 215, 0.96);
  box-shadow: 0 18px 30px rgba(2, 8, 19, 0.3);
}

.newsTimelineMedia {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 92px;
  max-height: 138px;
  margin: 0;
  overflow: hidden;
  border-radius: 11px;
  border: 1px solid rgba(82, 116, 177, 0.38);
  background: rgba(7, 15, 29, 0.86);
  box-shadow: inset 0 1px 0 oklch(0.97 0.004 60 / 0.04);
}

.newsTimelineMedia[hidden] {
  display: none;
}

.newsTimelineMedia::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 10, 20, 0.02), rgba(5, 10, 20, 0.22)),
    linear-gradient(90deg, oklch(0.78 0.12 75 / 0.1), transparent 38%);
}

.newsTimelineImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.22s ease;
}

.newsTimelineCard[role="button"]:hover .newsTimelineImage,
.newsTimelineCard[role="button"]:focus-visible .newsTimelineImage {
  transform: scale(1.03);
}

.newsTimelineBody {
  min-width: 0;
}

.newsTimelineTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.newsTimelineRelative {
  color: #90a9d2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.newsTimelineCard h3 {
  margin: 0;
  color: oklch(0.74 0.006 60);
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.newsTimelineCard h3 a {
  color: inherit;
  text-decoration: none;
}

.newsTimelineCard h3 a:hover {
  color: #9bc5ff;
  text-decoration: underline;
}

.newsTimelineMeta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #93a8cd;
  font-size: 12px;
  line-height: 1.45;
}

.newsTimelineMeta > span,
.newsTimelineMeta > a {
  display: inline-flex;
  align-items: center;
}

.newsTimelineMeta > span:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: 8px;
  border-radius: 999px;
  background: oklch(0.78 0.12 75 / 0.34);
}

.newsTimelineMuted {
  color: #6f86af;
}

.newsTimelineAction {
  color: #9bc5ff;
  font-weight: 800;
}

.newsImpactBadge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(86, 115, 169, 0.56);
  background: rgba(16, 30, 54, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.newsImpactBadge.is-critical {
  color: #ffd7d2;
  border-color: rgba(255, 122, 122, 0.55);
  background: rgba(107, 32, 32, 0.3);
}

.newsImpactBadge.is-high {
  color: oklch(0.82 0.10 75);
  border-color: oklch(0.78 0.12 75 / 0.56);
  background: rgba(105, 73, 20, 0.26);
}

.newsImpactBadge.is-medium {
  color: #c8d9fb;
  border-color: oklch(0.78 0.12 75 / 0.46);
  background: rgba(28, 53, 92, 0.24);
}

.newsImpactBadge.is-low {
  color: #a8bfdf;
  border-color: rgba(70, 98, 147, 0.4);
  background: rgba(18, 33, 58, 0.24);
}

.newsDetailModal {
  position: fixed;
  inset: 0;
  z-index: 132;
}

.newsDetailModal[hidden] {
  display: none !important;
}

.newsDetailBackdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.03 0.002 60 / 0.78);
  backdrop-filter: blur(12px);
}

.newsDetailPanel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(880px, calc(100vw - 32px));
  max-height: min(84vh, 920px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(64, 100, 160, 0.58);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, oklch(0.78 0.12 75 / 0.12), transparent 28%),
    linear-gradient(180deg, rgba(11, 24, 46, 0.985), rgba(6, 16, 31, 0.995));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  padding: 22px;
  display: grid;
  gap: 14px;
  overflow: auto;
}

.newsDetailHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.newsDetailEyebrow {
  color: #8fa9d8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.newsDetailHead h3 {
  margin: 6px 0 0;
  color: oklch(0.92 0.004 60);
  font: 800 28px/1.18 "Sora", "Noto Sans SC", sans-serif;
}

.newsDetailMetaLine {
  margin-top: 8px;
  color: #97abd1;
  font-size: 12px;
  line-height: 1.5;
}

.newsDetailStatus {
  color: #88a6d8;
  font-size: 12px;
  font-weight: 700;
}

.newsDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 12px;
}

.newsDetailEntityGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.newsDetailBlock {
  border: 1px solid oklch(0.26 0.005 60 / 0.42);
  border-radius: 18px;
  background: rgba(14, 28, 51, 0.72);
  padding: 15px 16px;
  display: grid;
  gap: 10px;
}

.newsDetailSummaryBlock {
  background:
    radial-gradient(circle at top right, oklch(0.78 0.12 75 / 0.12), transparent 34%),
    rgba(14, 28, 51, 0.78);
}

.newsDetailBlockHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.newsDetailBlockHead h4 {
  margin: 0;
  color: oklch(0.92 0.004 60);
  font-size: 15px;
}

.newsDetailPill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid oklch(0.78 0.12 75 / 0.42);
  background: rgba(18, 33, 58, 0.74);
  color: oklch(0.74 0.006 60);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.newsDetailSummary {
  margin: 0;
  color: oklch(0.92 0.004 60);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
}

.newsDetailTakeaway {
  color: #b4c6e6;
  font-size: 13px;
  line-height: 1.6;
}

.newsDetailList {
  margin: 0;
  padding-left: 18px;
  color: #d3e1fa;
  display: grid;
  gap: 8px;
}

.newsDetailList li {
  line-height: 1.55;
}

.newsDetailChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.newsDetailChip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(77, 111, 178, 0.52);
  background: rgba(16, 30, 54, 0.92);
  color: #d9e6fd;
  font-size: 12px;
  font-weight: 700;
}

.newsDetailChip.isMuted {
  color: #95a8c8;
}

.newsDetailChatMessages {
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}

.newsDetailChatMsg {
  max-width: min(92%, 620px);
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(59, 86, 134, 0.46);
  background: rgba(12, 25, 47, 0.94);
  color: oklch(0.74 0.006 60);
}

.newsDetailChatMsg.user {
  justify-self: end;
  background: linear-gradient(135deg, oklch(0.78 0.12 75 / 0.9), rgba(255, 214, 151, 0.9));
  border-color: oklch(0.78 0.12 75 / 0.52);
  color: oklch(0.12 0.005 60);
}

.newsDetailChatMsg.isThinking {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-color: oklch(0.78 0.12 75 / 0.42);
  background:
    linear-gradient(135deg, rgba(14, 28, 52, 0.96), rgba(19, 37, 66, 0.96));
}

.newsDetailChatMsg p {
  margin: 0;
  line-height: 1.55;
}

.newsDetailChatMsg .aiDockAnswerBlocks {
  margin-top: 0;
}

.newsDetailChatMsg .aiDockAnswerBlock {
  background: rgba(14, 28, 52, 0.72);
}

.newsDetailChatMsg .aiDockAnswerBlock.primary {
  background: linear-gradient(135deg, rgba(18, 34, 62, 0.92), rgba(20, 40, 72, 0.92));
}

.newsDetailThinkingDots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.newsDetailThinkingDots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #8fb9ff;
  opacity: 0.35;
  animation: newsDetailThinkingPulse 1.2s ease-in-out infinite;
}

.newsDetailThinkingDots span:nth-child(2) {
  animation-delay: 0.18s;
}

.newsDetailThinkingDots span:nth-child(3) {
  animation-delay: 0.36s;
}

.newsDetailQuickRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.newsDetailQuickBtn {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(77, 111, 178, 0.52);
  background: rgba(16, 30, 54, 0.92);
  color: oklch(0.74 0.006 60);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.newsDetailQuickBtn:hover {
  border-color: oklch(0.78 0.12 75 / 0.68);
}

.newsDetailComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.newsDetailComposer input {
  min-width: 0;
  height: 44px;
  border-radius: 14px;
  border: 1px solid oklch(0.26 0.005 60 / 0.7);
  background: rgba(8, 19, 39, 0.96);
  color: oklch(0.92 0.004 60);
  padding: 0 14px;
}

.newsDetailComposer input:focus {
  outline: none;
  border-color: oklch(0.78 0.12 75 / 0.66);
  box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.1);
}

.newsDetailFooter {
  display: flex;
  justify-content: flex-end;
}

.newsDetailSourceLink {
  color: #8fb9ff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.newsDetailSourceLink:hover {
  text-decoration: underline;
}

@keyframes newsDetailThinkingPulse {
  0%, 80%, 100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (max-width: 960px) {
  .newsDetailPanel {
    width: min(94vw, 94vw);
    padding: 18px;
  }

  .newsDetailGrid,
  .newsDetailEntityGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .newsDetailComposer {
    grid-template-columns: minmax(0, 1fr);
  }
}

.newsItem a,
.macroDetail a,
.metalsResearchItem a,
.xItem a {
  color: #9bc5ff;
  text-decoration: none;
}

.newsItem a:hover,
.macroDetail a:hover,
.metalsResearchItem a:hover,
.xItem a:hover {
  text-decoration: underline;
}

.xItem {
  --social-stroke: oklch(0.26 0.005 60 / 0.92);
  --social-bg-start: rgba(16, 28, 52, 0.92);
  --social-bg-end: oklch(0.11 0.003 60 / 0.95);
  --social-accent: oklch(0.78 0.12 75);
  --social-accent-soft: oklch(0.78 0.12 75 / 0.18);
  --social-accent-border: oklch(0.78 0.12 75 / 0.5);
  border: 1px solid var(--social-stroke);
  border-radius: 16px;
  padding: 12px 13px;
  background:
    radial-gradient(circle at top right, oklch(0.97 0.004 60 / 0.03), transparent 28%),
    linear-gradient(180deg, var(--social-bg-start), var(--social-bg-end));
  box-shadow:
    inset 0 0 0 1px rgba(118, 159, 225, 0.04),
    0 14px 26px rgba(2, 8, 18, 0.2);
}

.xItem.platform-x {
  --social-stroke: rgba(82, 127, 199, 0.62);
  --social-bg-start: rgba(14, 35, 68, 0.94);
  --social-bg-end: rgba(10, 25, 49, 0.96);
  --social-accent: #75abff;
  --social-accent-soft: oklch(0.78 0.12 75 / 0.2);
  --social-accent-border: oklch(0.78 0.12 75 / 0.56);
}

.xItem.platform-reddit {
  --social-stroke: rgba(244, 117, 60, 0.56);
  --social-bg-start: rgba(49, 27, 17, 0.92);
  --social-bg-end: rgba(31, 18, 13, 0.96);
  --social-accent: #ff8d57;
  --social-accent-soft: rgba(255, 141, 87, 0.2);
  --social-accent-border: rgba(255, 141, 87, 0.52);
}

.xItem.platform-telegram {
  --social-stroke: rgba(78, 200, 255, 0.56);
  --social-bg-start: rgba(15, 38, 57, 0.92);
  --social-bg-end: rgba(9, 25, 38, 0.96);
  --social-accent: #59cdfc;
  --social-accent-soft: rgba(89, 205, 252, 0.2);
  --social-accent-border: rgba(89, 205, 252, 0.54);
}

.xItem.platform-discord {
  --social-stroke: rgba(144, 163, 255, 0.56);
  --social-bg-start: rgba(28, 32, 63, 0.92);
  --social-bg-end: rgba(16, 19, 43, 0.96);
  --social-accent: #9badff;
  --social-accent-soft: rgba(155, 173, 255, 0.2);
  --social-accent-border: rgba(155, 173, 255, 0.54);
}

.xItem.platform-lunarcrush {
  --social-stroke: rgba(208, 133, 255, 0.56);
  --social-bg-start: rgba(44, 24, 59, 0.92);
  --social-bg-end: rgba(28, 16, 41, 0.96);
  --social-accent: #d085ff;
  --social-accent-soft: rgba(208, 133, 255, 0.2);
  --social-accent-border: rgba(208, 133, 255, 0.54);
}

.xItem.platform-other {
  --social-stroke: oklch(0.78 0.12 75 / 0.5);
  --social-bg-start: rgba(30, 28, 44, 0.9);
  --social-bg-end: rgba(19, 18, 31, 0.95);
}

.xHead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.xAvatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #e7f0ff;
  border: 1px solid var(--social-accent-border);
  background: var(--social-accent-soft);
  font-size: 15px;
  box-shadow: inset 0 0 0 1px oklch(0.97 0.004 60 / 0.04);
}

.xIdentity {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.xHandle {
  font-size: 15px;
  font-weight: 900;
  color: #f1f6ff;
}

.xPill {
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.92);
  background: rgba(16, 30, 54, 0.92);
  color: #bacbec;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
}

.xPill.sourcePill {
  border-color: var(--social-accent-border);
  background: var(--social-accent-soft);
  color: var(--social-accent);
}

.xTime {
  color: #ff9d8d;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.xTimeWrap {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.xTimeFull {
  color: #8ea6cb;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.xTitle {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  color: oklch(0.92 0.004 60);
}

.xContent {
  margin-top: 8px;
  color: #d9e5fa;
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.xStats {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(73, 102, 152, 0.36);
}

.xStat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.72);
  background: rgba(12, 24, 44, 0.88);
}

.xStat strong {
  color: oklch(0.92 0.004 60);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.xStat span {
  color: #98afd3;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.xOpenLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--social-accent-border);
  background: var(--social-accent-soft);
  color: var(--social-accent);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.xOpenLink:hover {
  filter: brightness(1.08);
}

.macroItem {
  position: relative;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 12px 10px 44px;
  background: linear-gradient(180deg, rgba(16, 28, 52, 0.9), rgba(11, 21, 39, 0.95));
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.macroItem:hover,
.macroItem:focus-visible {
  border-color: rgba(119, 163, 234, 0.78);
  box-shadow: 0 14px 28px rgba(4, 11, 24, 0.34);
  transform: translateY(-1px);
  outline: none;
}

.macroItem::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -12px;
  bottom: -12px;
  width: 2px;
  background: linear-gradient(180deg, rgba(92, 133, 200, 0.88), rgba(55, 82, 129, 0.52));
  opacity: 0.9;
}

.macroItem:first-child::before {
  top: 20px;
}

.macroItem:last-child::before {
  bottom: 20px;
}

.macroDot {
  position: absolute;
  left: 10px;
  top: 16px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid oklch(0.78 0.12 75 / 0.85);
  background: #ffbf67;
  box-shadow: 0 0 0 4px oklch(0.78 0.12 75 / 0.14);
}

.macroDot.critical {
  border-color: oklch(0.66 0.18 25 / 0.9);
  background: #ff6e7d;
  box-shadow: 0 0 0 4px oklch(0.66 0.18 25 / 0.15);
}

.macroDot.high {
  border-color: oklch(0.78 0.12 75 / 0.88);
  background: oklch(0.78 0.12 75);
}

.macroDot.medium {
  border-color: oklch(0.78 0.12 75 / 0.88);
  background: #75abff;
}

.macroDot.low {
  border-color: oklch(0.74 0.16 155 / 0.88);
  background: #34d798;
}

.macroTitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.33;
  color: #e6efff;
}

.macroBadges {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.macroBadge {
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.9);
  background: rgba(16, 30, 54, 0.9);
  color: #b8caea;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 8px;
}

.macroBadge.badCritical {
  border-color: oklch(0.66 0.18 25 / 0.5);
  color: #ffc6cc;
  background: oklch(0.66 0.18 25 / 0.17);
}

.macroBadge.badHigh {
  border-color: oklch(0.78 0.12 75 / 0.52);
  color: #ffe2b8;
  background: oklch(0.78 0.12 75 / 0.16);
}

.macroBadge.badMedium {
  border-color: oklch(0.78 0.12 75 / 0.56);
  color: #cde2ff;
  background: oklch(0.78 0.12 75 / 0.14);
}

.macroBadge.badLow {
  border-color: oklch(0.74 0.16 155 / 0.55);
  color: #caf7e5;
  background: oklch(0.74 0.16 155 / 0.14);
}

.macroDetail {
  margin-top: 8px;
  color: #b4c7e9;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}

.meta {
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
}

.collectorGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.collectorSummary {
  margin: 0;
  font-size: 14px;
  color: #cfddfb;
}

.collectorBlockTitle {
  margin-top: 10px;
  margin-bottom: 6px;
  color: #c8d8fb;
  font-size: 12px;
  font-weight: 700;
}

.predictCard {
  display: grid;
  gap: 8px;
}

.predictIntroRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.predictIntroRowCompact {
  justify-content: flex-end;
}

.predictTagStrip {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding: 4px 0 8px;
  scrollbar-width: none;
}
.predictTagStrip::-webkit-scrollbar { display: none; }

.predictTagBtn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid oklch(0.97 0.004 60 / 0.12);
  background: oklch(0.97 0.004 60 / 0.05);
  color: var(--textPrimary, #e8edf8);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.predictTagBtn:hover { background: oklch(0.97 0.004 60 / 0.09); border-color: oklch(0.97 0.004 60 / 0.22); }
.predictTagBtn.isActive {
  background: #8FA9D8;
  border-color: rgba(143,169,216,0.3);
  color: #0d1625;
}

.predictLoadMoreRow {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}
.predictLoadMoreBtn {
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 600;
}

.predictSummary {
  margin: 0;
  color: #cbdaf6;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.predictSignalBoard {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.95fr);
  gap: 10px;
}

.predictMomentumHero,
.predictTrendHero {
  border: 1px solid rgba(56, 84, 133, 0.46);
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(circle at top right, rgba(51, 90, 161, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(17, 29, 55, 0.92), rgba(12, 22, 41, 0.95));
  box-shadow:
    0 14px 22px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(33, 55, 92, 0.34) inset;
}

.predictMomentumHero.predictSignalPos,
.predictTrendHero.predictSignalPos {
  background:
    radial-gradient(circle at top right, oklch(0.74 0.16 155 / 0.12), transparent 32%),
    linear-gradient(180deg, rgba(10, 27, 39, 0.92), rgba(9, 20, 34, 0.95));
}

.predictMomentumHero.predictSignalNeg,
.predictTrendHero.predictSignalNeg {
  background:
    radial-gradient(circle at top right, oklch(0.66 0.18 25 / 0.1), transparent 32%),
    linear-gradient(180deg, rgba(20, 24, 45, 0.92), oklch(0.11 0.003 60 / 0.95));
}

.predictSignalEyebrow {
  color: #8ea8d4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.predictMomentumTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.predictMomentumCopy {
  display: grid;
  gap: 6px;
}

.predictMomentumValue,
.predictTrendValue {
  color: oklch(0.92 0.004 60);
  font: 800 24px/1.05 "Sora", "Noto Sans SC", sans-serif;
}

.predictMomentumMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.predictQuickScore {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.predictSignalPos .predictQuickScore {
  color: #87e6c0;
}

.predictSignalNeg .predictQuickScore {
  color: #ffadb6;
}

.predictSignalNeutral .predictQuickScore {
  color: #d4e0f8;
}

.predictMomentumDriver {
  color: #a8bfdc;
  font-size: 12px;
  font-weight: 700;
}

.predictMomentumDetail {
  margin: 0;
  color: #cbdaf6;
  font-size: 12px;
  line-height: 1.4;
}

.predictMomentumBadge {
  min-width: 58px;
  min-height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: oklch(0.11 0.003 60 / 0.82);
  border: 1px solid rgba(80, 113, 170, 0.38);
  color: oklch(0.92 0.004 60);
  font: 800 14px/1 "Sora", "Noto Sans SC", sans-serif;
  letter-spacing: 0.06em;
}

.predictMomentumMeter {
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(13, 24, 45, 0.92);
  overflow: hidden;
  border: 1px solid rgba(66, 98, 156, 0.32);
}

.predictMomentumMeter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(112, 146, 199, 0.85), rgba(176, 195, 230, 0.96));
}

.predictMomentumMeter > span.predictSignalPos {
  background: linear-gradient(90deg, oklch(0.74 0.16 155 / 0.72), rgba(135, 230, 192, 0.96));
}

.predictMomentumMeter > span.predictSignalNeg {
  background: linear-gradient(90deg, oklch(0.66 0.18 25 / 0.82), rgba(255, 173, 182, 0.98));
}

.predictTrendMeter {
  margin-top: 8px;
}

.predictMomentumBreakdown {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.predictBreakdownItem {
  border-radius: 12px;
  border: 1px solid rgba(58, 86, 137, 0.42);
  background: oklch(0.11 0.003 60 / 0.82);
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.predictBreakdownItem span {
  color: #8ea8d4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.predictBreakdownItem strong {
  color: oklch(0.92 0.004 60);
  font: 800 18px/1.1 "Sora", "Noto Sans SC", sans-serif;
}

.predictBreakdownItem small {
  color: #a8bfdc;
  font-size: 10px;
  line-height: 1.3;
}

.predictBreakdownItem.predictSignalPos strong {
  color: #87e6c0;
}

.predictBreakdownItem.predictSignalNeg strong {
  color: #ffadb6;
}

.predictTrendHero {
  display: grid;
  gap: 8px;
  align-content: start;
}

.predictHero {
  display: grid;
  gap: 8px;
}

.predictHeroShell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(66, 98, 156, 0.48);
  border-radius: 16px;
  padding: 13px;
  background:
    radial-gradient(circle at top left, oklch(0.78 0.12 75 / 0.12), transparent 34%),
    linear-gradient(180deg, rgba(15, 28, 54, 0.96), oklch(0.11 0.003 60 / 0.96));
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  box-shadow:
    0 14px 26px -20px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(33, 55, 92, 0.38) inset;
}

.predictHeroShell.predictLeanYes {
  background:
    radial-gradient(circle at top left, oklch(0.74 0.16 155 / 0.15), transparent 34%),
    linear-gradient(180deg, rgba(11, 28, 40, 0.96), rgba(8, 19, 32, 0.96));
}

.predictHeroShell.predictLeanNo {
  background:
    radial-gradient(circle at top left, oklch(0.66 0.18 25 / 0.12), transparent 34%),
    linear-gradient(180deg, rgba(24, 22, 40, 0.96), oklch(0.11 0.003 60 / 0.96));
}

.predictHeroMain {
  display: grid;
  gap: 7px;
  align-content: start;
}

.predictHeroEyebrow {
  display: none;
  align-items: center;
  justify-self: start;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(18, 32, 58, 0.92);
  border: 1px solid rgba(63, 97, 154, 0.42);
  color: #d7e4ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.predictHeroTitle {
  margin: 0;
  color: oklch(0.92 0.004 60);
  font-size: 21px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.predictHeroTake {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.predictHeroBias {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(63, 97, 154, 0.42);
  background: rgba(18, 32, 58, 0.92);
  color: #f3f7ff;
  font: 800 14px/1 "Sora", "Noto Sans SC", sans-serif;
}

.predictHeroBias.predictLeanYes {
  color: #87e6c0;
  border-color: oklch(0.74 0.16 155 / 0.34);
  background: oklch(0.74 0.16 155 / 0.12);
}

.predictHeroBias.predictLeanNo {
  color: #ffadb6;
  border-color: oklch(0.66 0.18 25 / 0.34);
  background: oklch(0.66 0.18 25 / 0.12);
}

.predictHeroConviction {
  color: #a7bee2;
  font-size: 12px;
  font-weight: 700;
}

.predictHeroCompactMeta {
  color: #90a8d3;
  font-size: 11px;
  font-weight: 700;
}

.predictHeroNarrative {
  margin: 0;
  color: #d8e4fb;
  font-size: 13px;
  line-height: 1.38;
  max-width: none;
}

.predictHeroBar {
  margin-top: 2px;
}

.predictHeroPrimaryFact {
  color: #a6bcde;
  font-size: 11px;
  line-height: 1.32;
}

.predictHeroStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.predictHeroStat {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(58, 86, 137, 0.42);
  background: oklch(0.11 0.003 60 / 0.82);
}

.predictHeroStat > span {
  color: #8ea8d4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.predictHeroStat > strong {
  color: oklch(0.92 0.004 60);
  font-size: 15px;
  line-height: 1.2;
}

.predictHeroStat > small {
  color: #a8bfdc;
  font-size: 10px;
  line-height: 1.3;
}

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

.predictItem {
  border: 1px solid rgba(56, 84, 133, 0.46);
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(51, 90, 161, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(17, 29, 55, 0.92), rgba(12, 22, 41, 0.95));
  padding: 10px 11px;
  display: grid;
  gap: 7px;
  cursor: pointer;
  box-shadow:
    0 14px 22px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(33, 55, 92, 0.34) inset;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.predictItem:hover,
.predictItem:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(120, 161, 234, 0.72);
  box-shadow:
    0 18px 28px -22px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(86, 128, 205, 0.4) inset;
  outline: none;
}

.predictItem.predictLeanYes {
  background:
    radial-gradient(circle at top right, oklch(0.74 0.16 155 / 0.12), transparent 32%),
    linear-gradient(180deg, rgba(10, 27, 39, 0.92), rgba(9, 20, 34, 0.95));
}

.predictItem.predictLeanNo {
  background:
    radial-gradient(circle at top right, oklch(0.66 0.18 25 / 0.1), transparent 32%),
    linear-gradient(180deg, rgba(20, 24, 45, 0.92), oklch(0.11 0.003 60 / 0.95));
}

.predictItemTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.predictItemAngle {
  color: #cfe0ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.predictItemTake {
  margin: 0;
  color: #a8bfdc;
  font-size: 12px;
  line-height: 1.38;
}

.predictCardIdentity {
  display: grid;
  gap: 8px;
}

.predictCardIdentity.hasMedia {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.predictCardThumbWrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(118, 146, 197, 0.34);
  background:
    linear-gradient(180deg, rgba(22, 35, 62, 0.88), rgba(11, 18, 33, 0.94));
  box-shadow:
    0 12px 22px -16px rgba(0, 0, 0, 0.72),
    0 0 0 1px oklch(0.97 0.004 60 / 0.04) inset;
}

.predictCardThumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.predictHead {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-content: start;
}

.predictHead h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: #e7f0ff;
}

.predictHeadMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.predictOdds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.predictOddsRow {
  border: 1px solid oklch(0.26 0.005 60 / 0.9);
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(16, 30, 54, 0.88);
  display: grid;
  gap: 3px;
}

.predictOddsRow span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.predictOddsRow strong {
  font-size: 15px;
  letter-spacing: 0.2px;
}

.predictOddsRow.yes strong {
  color: #87e6c0;
}

.predictOddsRow.no strong {
  color: #ff9aa5;
}

.predictBar {
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.86);
  background: rgba(12, 23, 45, 0.88);
  overflow: hidden;
  height: 10px;
  display: flex;
}

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

.predictCardStat {
  border: 1px solid oklch(0.26 0.005 60 / 0.5);
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(13, 24, 45, 0.6);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.predictCardStat span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.predictCardStat strong {
  font-size: 12px;
  font-weight: 700;
}

.predictFunds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.predictFundsItem {
  border: 1px solid oklch(0.26 0.005 60 / 0.72);
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(13, 24, 45, 0.78);
  display: grid;
  gap: 3px;
}

.predictFundsItem span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.predictFundsItem strong {
  color: oklch(0.92 0.004 60);
  font-size: 14px;
  line-height: 1.2;
}

.predictFundsMeta {
  color: #9cb4dc;
  font-size: 10px;
  line-height: 1.3;
}

.predictCardAction {
  color: #88aee9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.predictBarYes {
  background: linear-gradient(90deg, rgba(45, 191, 131, 0.92), rgba(131, 230, 192, 0.92));
}

.predictBarNo {
  background: linear-gradient(90deg, rgba(255, 129, 144, 0.94), oklch(0.66 0.18 25 / 0.94));
}

.predictReasonList {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #c8d9fb;
  font-size: 12px;
  line-height: 1.38;
}

#predictRiskList {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.predictDetailCard {
  display: grid;
  gap: 12px;
}

.predictDetailNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.predictDetailRoot {
  min-height: 240px;
}

.predictDetailShell {
  display: grid;
  gap: 12px;
}

.predictDetailHero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.predictDetailIdentity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.predictDetailThumbWrap {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(91, 122, 181, 0.42);
  background: rgba(12, 22, 41, 0.88);
  box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.78);
}

.predictDetailThumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.predictDetailTitleBlock {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.predictDetailTitle {
  margin: 0;
  color: oklch(0.92 0.004 60);
  font: 800 28px/1.08 "Sora", "Noto Sans SC", sans-serif;
  letter-spacing: -0.03em;
}

.predictDetailSignalStrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.predictSignalBadge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(63, 97, 154, 0.42);
  background: rgba(18, 32, 58, 0.92);
  color: #f3f7ff;
  font: 800 14px/1 "Sora", "Noto Sans SC", sans-serif;
}

.predictSignalBadge.predictLeanYes {
  color: #87e6c0;
  border-color: oklch(0.74 0.16 155 / 0.34);
  background: oklch(0.74 0.16 155 / 0.12);
}

.predictSignalBadge.predictLeanNo {
  color: #ffadb6;
  border-color: oklch(0.66 0.18 25 / 0.34);
  background: oklch(0.66 0.18 25 / 0.12);
}

.predictSignalMetric {
  color: oklch(0.92 0.004 60);
  font: 800 22px/1 "Sora", "Noto Sans SC", sans-serif;
}

.predictSignalMini {
  color: #a9c0e3;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.predictDetailMetaBlock {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.predictMomentumInline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.predictMomentumInlineMain {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(63, 97, 154, 0.42);
  background: rgba(18, 32, 58, 0.92);
}

.predictMomentumInlineMain strong {
  color: oklch(0.92 0.004 60);
  font: 800 16px/1 "Sora", "Noto Sans SC", sans-serif;
}

.predictMomentumInlineMain span {
  color: #c8d8fb;
  font-size: 12px;
  font-weight: 700;
}

.predictMomentumInlineMain.predictSignalPos {
  border-color: oklch(0.74 0.16 155 / 0.34);
  background: oklch(0.74 0.16 155 / 0.12);
}

.predictMomentumInlineMain.predictSignalPos strong {
  color: #87e6c0;
}

.predictMomentumInlineMain.predictSignalNeg {
  border-color: oklch(0.66 0.18 25 / 0.34);
  background: oklch(0.66 0.18 25 / 0.12);
}

.predictMomentumInlineMain.predictSignalNeg strong {
  color: #ffadb6;
}

.predictMomentumInlineLabel {
  color: #8ea8d4 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.predictMomentumInlineMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.predictDetailStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.predictVisualGrid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 10px;
}

.predictDetailStat,
.predictDetailPanel {
  border: 1px solid rgba(56, 84, 133, 0.46);
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(51, 90, 161, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(17, 29, 55, 0.9), rgba(12, 22, 41, 0.94));
  box-shadow:
    0 14px 22px -20px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(33, 55, 92, 0.32) inset;
}

.predictDetailStat {
  padding: 11px 12px;
  display: grid;
  gap: 5px;
}

.predictDetailStat span {
  color: #8ea8d4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.predictDetailStat strong {
  color: oklch(0.92 0.004 60);
  font: 800 18px/1.15 "Sora", "Noto Sans SC", sans-serif;
}

.predictDetailStat small {
  color: #a8bfdc;
  font-size: 11px;
  line-height: 1.35;
}

.predictDetailLegGrid,
.predictDetailContextGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.predictLegCard {
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(56, 84, 133, 0.46);
  box-shadow:
    0 14px 22px -20px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(33, 55, 92, 0.34) inset;
}

.predictLegCard.yes {
  background:
    radial-gradient(circle at top right, oklch(0.74 0.16 155 / 0.14), transparent 32%),
    linear-gradient(180deg, rgba(10, 27, 39, 0.94), rgba(9, 20, 34, 0.96));
}

.predictLegCard.no {
  background:
    radial-gradient(circle at top right, oklch(0.66 0.18 25 / 0.12), transparent 32%),
    linear-gradient(180deg, rgba(20, 24, 45, 0.94), oklch(0.11 0.003 60 / 0.96));
}

.predictLegLabel {
  color: #8ea8d4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.predictLegValue {
  color: oklch(0.92 0.004 60);
  font: 800 34px/1 "Sora", "Noto Sans SC", sans-serif;
}

.predictLegCard.yes .predictLegValue {
  color: #87e6c0;
}

.predictLegCard.no .predictLegValue {
  color: #ffadb6;
}

.predictLegMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #d4e1fa;
  font-size: 12px;
  font-weight: 700;
}

.predictLegOutcome {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(10, 19, 34, 0.72);
  border: 1px solid rgba(80, 113, 170, 0.32);
  color: oklch(0.74 0.006 60);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.predictDetailPanel {
  padding: 12px;
  display: grid;
  gap: 8px;
}

.predictChartPanel {
  align-content: start;
}

.predictChartHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.predictChartSubhead,
.predictChartMeta,
.predictVolumeFootnote {
  color: #9cb4dc;
  font-size: 11px;
  line-height: 1.35;
}

.predictChartLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.predictLegendItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #b8cdef;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.predictLegendItem i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.predictLegendItem i.yes {
  background: linear-gradient(90deg, rgba(45, 191, 131, 0.92), rgba(131, 230, 192, 0.92));
}

.predictLegendItem i.no {
  background: linear-gradient(90deg, rgba(255, 129, 144, 0.94), oklch(0.66 0.18 25 / 0.94));
}

.predictLegendItem i.marker {
  width: 2px;
  border-radius: 2px;
  background: #e8f1ff;
}

.predictProbRailWrap {
  display: grid;
  gap: 8px;
}

.predictProbRail {
  position: relative;
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.86);
  background: rgba(12, 23, 45, 0.88);
  overflow: visible;
  height: 18px;
  display: flex;
}

.predictProbFill.yes {
  background: linear-gradient(90deg, rgba(45, 191, 131, 0.92), rgba(131, 230, 192, 0.92));
  border-radius: 999px 0 0 999px;
}

.predictProbFill.no {
  background: linear-gradient(90deg, rgba(255, 129, 144, 0.94), oklch(0.66 0.18 25 / 0.94));
  border-radius: 0 999px 999px 0;
}

.predictPriceMarker {
  position: absolute;
  top: -8px;
  width: 2px;
  height: 34px;
  background: rgba(236, 244, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(18, 32, 58, 0.92);
}

.predictPriceMarker em {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  color: #eaf2ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.predictPriceMarker.ask {
  background: #ffb3bc;
}

.predictPriceMarker.bid {
  background: #99ecd0;
}

.predictPriceMarker.isTight em {
  top: -22px;
}

.predictPriceMarker.isLower em {
  top: 20px;
}

.predictPriceMarker.merged {
  background: #eaf2ff;
}

.predictPriceMarker.merged em {
  background: rgba(8, 15, 30, 0.88);
  border: 1px solid rgba(82, 112, 170, 0.34);
  border-radius: 999px;
  padding: 2px 8px;
}

.predictProbScale {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  color: #87a1cb;
  font-size: 10px;
  font-weight: 700;
}

.predictProbScale span:nth-child(2),
.predictProbScale span:nth-child(3),
.predictProbScale span:nth-child(4) {
  justify-self: center;
}

.predictProbScale span:last-child {
  justify-self: end;
}

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

.predictChartStat {
  border-radius: 12px;
  border: 1px solid rgba(58, 86, 137, 0.42);
  background: oklch(0.11 0.003 60 / 0.76);
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}

.predictChartStat span {
  color: #8ea8d4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.predictChartStat strong {
  color: oklch(0.92 0.004 60);
  font: 800 18px/1.1 "Sora", "Noto Sans SC", sans-serif;
}

.predictChartStat.yes strong {
  color: #87e6c0;
}

.predictChartStat.no strong {
  color: #ffadb6;
}

.predictVolumeBars {
  display: grid;
  gap: 10px;
}

.predictVolumeRow {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.predictVolumeRow span {
  color: #bcd0ef;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.predictVolumeRow strong {
  color: oklch(0.92 0.004 60);
  font-size: 12px;
  font-weight: 800;
}

.predictVolumeTrack {
  height: 14px;
  border-radius: 999px;
  border: 1px solid oklch(0.26 0.005 60 / 0.86);
  background: rgba(12, 23, 45, 0.88);
  overflow: hidden;
}

.predictVolumeFill {
  height: 100%;
  border-radius: inherit;
}

.predictVolumeFill.liquidity {
  background: linear-gradient(90deg, rgba(96, 146, 255, 0.84), rgba(154, 188, 255, 0.98));
}

.predictVolumeFill.volume {
  background: linear-gradient(90deg, rgba(255, 191, 110, 0.84), rgba(255, 222, 140, 0.98));
}

.predictVolumeFill.yesBook {
  background: linear-gradient(90deg, rgba(45, 191, 131, 0.92), rgba(131, 230, 192, 0.92));
}

.predictVolumeFill.noBook {
  background: linear-gradient(90deg, rgba(255, 129, 144, 0.94), oklch(0.66 0.18 25 / 0.94));
}

.predictBookState {
  border-radius: 12px;
  border: 1px dashed rgba(80, 113, 170, 0.32);
  background: rgba(10, 19, 34, 0.58);
  color: #b7cbee;
  padding: 14px;
  font-size: 12px;
  line-height: 1.4;
}

.predictFactGrid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.predictFactCard {
  border-radius: 12px;
  border: 1px solid rgba(58, 86, 137, 0.42);
  background: oklch(0.11 0.003 60 / 0.76);
  padding: 10px;
}

.predictFactCard strong {
  color: #eaf2ff;
  font-size: 12px;
  line-height: 1.42;
  font-weight: 700;
}

.predictTagRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.predictQuickRules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.predictRulePill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(58, 86, 137, 0.42);
  background: oklch(0.11 0.003 60 / 0.76);
  color: #bcd0ef;
  font-size: 11px;
  font-weight: 700;
}

.predictDetailSwitchList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.predictDetailSwitchBtn {
  border: 1px solid rgba(56, 84, 133, 0.5);
  border-radius: 12px;
  background: rgba(12, 23, 45, 0.82);
  color: oklch(0.92 0.004 60);
  padding: 10px 11px;
  display: grid;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.predictDetailSwitchBtn:hover,
.predictDetailSwitchBtn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(120, 161, 234, 0.72);
  background: rgba(16, 30, 58, 0.92);
  outline: none;
}

.predictDetailSwitchTitle {
  color: #e8f1ff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.predictDetailSwitchMeta {
  color: #9cb4dc;
  font-size: 11px;
  line-height: 1.3;
}

@media (max-width: 1480px) {
  .predictHeroStats {
    grid-template-columns: 1fr;
  }

  .predictSignalBoard,
  .predictMomentumBreakdown,
  .predictDetailStats,
  .predictVisualGrid,
  .predictDetailLegGrid,
  .predictDetailContextGrid,
  .predictFactGrid,
  .predictDetailSwitchList {
    grid-template-columns: 1fr;
  }

  .predictDetailHero {
    flex-direction: column;
  }

  .predictDetailMetaBlock {
    justify-content: flex-start;
  }

  .predictMomentumInline {
    align-items: flex-start;
  }

  .predictChartHead {
    flex-direction: column;
  }

  .predictChartLegend {
    justify-content: flex-start;
  }
}

#predictRiskList li {
  line-height: 1.34;
}

.footerNote {
  margin-top: auto;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.aiDock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1150;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.aiDockFab {
  pointer-events: auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(89, 126, 196, 0.88);
  background:
    radial-gradient(120% 120% at 20% 18%, oklch(0.78 0.12 75 / 0.28), oklch(0.78 0.12 75 / 0) 56%),
    linear-gradient(160deg, oklch(0.11 0.003 60 / 0.98), rgba(8, 15, 30, 0.98));
  color: oklch(0.92 0.004 60);
  box-shadow: 0 14px 34px rgba(2, 8, 19, 0.58);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
}

.aiDockFab:hover {
  transform: translateY(-1px);
  border-color: oklch(0.78 0.12 75 / 0.95);
  filter: brightness(1.05);
}

.aiDockFabIcon {
  font: 800 15px/1 "Sora", "Noto Sans SC", sans-serif;
  letter-spacing: 0.4px;
}

.aiDockUnread {
  position: absolute;
  top: -4px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(24, 11, 6, 0.7);
  background: linear-gradient(140deg, oklch(0.66 0.18 25 / 0.96), rgba(255, 143, 109, 0.95));
  color: #fff6f3;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}

.aiDockPanel {
  pointer-events: auto;
  width: min(380px, calc(100vw - 28px));
  max-height: min(74vh, 700px);
  border-radius: 14px;
  border: 1px solid rgba(62, 93, 145, 0.92);
  background:
    radial-gradient(520px 180px at -12% -35%, oklch(0.78 0.12 75 / 0.14), transparent 73%),
    radial-gradient(560px 220px at 118% -40%, oklch(0.78 0.12 75 / 0.14), transparent 74%),
    linear-gradient(180deg, rgba(12, 21, 41, 0.98), rgba(8, 15, 30, 0.98));
  box-shadow: 0 26px 50px rgba(2, 8, 19, 0.64);
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto auto;
  gap: 10px;
  padding: 10px;
}

.aiDockPanel[hidden] {
  display: none !important;
}

.aiDockUnread[hidden] {
  display: none !important;
}

.aiDockHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.aiDockHead h3 {
  margin: 0;
  font: 800 15px/1.2 "Sora", "Noto Sans SC", sans-serif;
}

.aiDockHead p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.aiDockMessages {
  border-radius: 11px;
  border: 1px solid rgba(46, 74, 122, 0.9);
  background: rgba(8, 14, 28, 0.84);
  padding: 8px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 7px;
}

.aiDockMsg {
  border-radius: 10px;
  padding: 7px 9px;
  max-width: 94%;
  white-space: pre-wrap;
}

.aiDockMsgMeta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #8ea5d1;
  font-size: 10px;
  font-weight: 700;
}

.aiDockMsg p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.38;
}

.aiDockAnswerBlocks {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.aiDockAnswerBlock {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid rgba(56, 84, 134, 0.82);
  background: oklch(0.11 0.003 60 / 0.82);
}

.aiDockAnswerBlock.primary {
  border-color: rgba(89, 129, 198, 0.9);
  background: linear-gradient(135deg, oklch(0.16 0.004 60 / 0.96), rgba(19, 37, 67, 0.96));
}

.aiDockAnswerBlock.muted {
  border-color: rgba(74, 87, 114, 0.76);
  background: rgba(14, 20, 34, 0.82);
}

.aiDockAnswerLabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8ea5d1;
}

.aiDockAnswerText {
  font-size: 12px;
  line-height: 1.45;
  color: #e1ecff;
  white-space: normal;
}

.aiAnswerParagraph {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #e1ecff;
}

.aiAnswerKey {
  font-weight: 800;
  color: oklch(0.97 0.004 60);
}

.aiAnswerKey.metric {
  color: #ffd48f;
}

.aiAnswerKey.signal {
  color: #9fc6ff;
}

.aiAnswerKey.asset {
  color: #9cf0cf;
}

.aiAnswerBullet {
  display: inline-block;
  margin-right: 6px;
  color: #86b6ff;
  font-weight: 900;
}

.aiDockMsgFoot {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.aiDockMetaBlock {
  display: grid;
  gap: 4px;
}

.aiDockMetaLabel {
  font-size: 10px;
  font-weight: 700;
  color: #8ea5d1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aiDockMetaChips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.aiDockMetaNote {
  font-size: 11px;
  line-height: 1.35;
  color: #afbddb;
}

.aiDockMetaChip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(78, 113, 173, 0.88);
  background: rgba(13, 23, 42, 0.92);
  color: oklch(0.74 0.006 60);
  font-size: 10px;
  font-weight: 700;
}

.aiDockMetaChip.isMuted {
  border-color: rgba(93, 104, 129, 0.7);
  background: rgba(17, 23, 37, 0.85);
  color: #aab8d5;
}

.aiDockMetaChip.isConfidence.high {
  border-color: rgba(88, 162, 123, 0.86);
  background: rgba(17, 43, 29, 0.92);
  color: #bcf2cb;
}

.aiDockMetaChip.isConfidence.medium {
  border-color: rgba(188, 145, 83, 0.86);
  background: rgba(52, 35, 18, 0.9);
  color: #ffdba5;
}

.aiDockMetaChip.isConfidence.low {
  border-color: rgba(166, 97, 97, 0.82);
  background: rgba(47, 24, 24, 0.9);
  color: #ffc5c5;
}

.aiDockMsgAssistant {
  justify-self: start;
  border: 1px solid rgba(63, 97, 157, 0.92);
  background: rgba(18, 32, 58, 0.92);
  color: #e1ecff;
}

.aiDockMsg.isThinking {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-color: oklch(0.78 0.12 75 / 0.42);
  background:
    linear-gradient(135deg, rgba(14, 28, 52, 0.96), rgba(19, 37, 66, 0.96));
}

.aiDockMsgUser {
  justify-self: end;
  border: 1px solid oklch(0.78 0.12 75 / 0.62);
  background: rgba(60, 45, 24, 0.9);
  color: #ffe7bf;
}

.aiDockThinkingDots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.aiDockThinkingDots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #8fb9ff;
  opacity: 0.35;
  animation: newsDetailThinkingPulse 1.2s ease-in-out infinite;
}

.aiDockThinkingDots span:nth-child(2) {
  animation-delay: 0.18s;
}

.aiDockThinkingDots span:nth-child(3) {
  animation-delay: 0.36s;
}

.aiDockQuickRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.aiDockQuickBtn {
  min-height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(61, 93, 147, 0.9);
  background: rgba(15, 27, 50, 0.94);
  color: #d7e6ff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}

.aiDockQuickBtn:hover {
  transform: translateY(-1px);
  border-color: oklch(0.78 0.12 75 / 0.95);
  filter: brightness(1.05);
}

.aiDockComposer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

#aiDockInput {
  width: 100%;
  height: 35px;
  border-radius: 9px;
  border: 1px solid rgba(66, 99, 157, 0.88);
  background: rgba(8, 15, 29, 0.94);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
}

#aiDockInput:focus {
  outline: none;
  border-color: oklch(0.78 0.12 75 / 0.95);
  box-shadow: 0 0 0 1px oklch(0.78 0.12 75 / 0.34);
}

#aiDockInput:disabled,
#aiDockSend:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

body[data-user-mode="new"] .proOnly {
  display: none;
}

@media (max-width: 1360px) {
  .intelLower {
    grid-template-columns: 1fr;
  }

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

  .emotionPulseLead {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tone"
      "headline"
      "narrative"
      "fear"
      "legend";
  }

  .emotionMeterLegend {
    justify-self: start;
    align-self: start;
  }

  .emotionPulseStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1160px) {
  .commandPalettePanel {
    width: min(760px, calc(100vw - 30px));
  }

  .intentBar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .split,
  .collectorGrid,
  .intelLower {
    grid-template-columns: 1fr;
  }

  .metalsResearchGrid,
  .metalsLowerGrid,
  .metalsChecklistGrid {
    grid-template-columns: 1fr;
  }

  .metalsMarketGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .metalsTokenDetailGrid,
  .metalsTokenChartGrid,
  .metalsTokenPeerGrid {
    grid-template-columns: 1fr;
  }

  .metalsTokenKlineMetaGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketPrimary {
    min-height: 620px;
  }

  .marketLoadingShell {
    grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr);
  }

  .marketLoadPaneRight {
    display: none;
  }

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

  .communityHeadMeta {
    width: 100%;
    justify-items: start;
  }

  .communityIdentityRow {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .decisionQuickGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .emotionLegacyGrid,
  .emotionLegacyExtended {
    grid-template-columns: 1fr;
  }

  .emotionLegacy {
    border-radius: 16px;
    padding: 1.05rem 0.95rem 1.1rem;
  }

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

  .scraperToolbarMain,
  .scraperToolbarToggles {
    grid-template-columns: 1fr 1fr;
  }

  .okxStatGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .okxTableHead,
  .okxTableRow {
    min-width: 980px;
  }

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

  .scraperScopeActions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .scraperScopeDropdown {
    width: 100%;
  }

  .quickGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metalsQuickGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .decisionHeroGrid,
  .decisionSupportGrid {
    grid-template-columns: 1fr;
  }
  .predictGrid {
    grid-template-columns: 1fr;
  }

  .predictSignalBoard,
  .predictHeroShell {
    grid-template-columns: 1fr;
  }

  #predictRiskList {
    grid-template-columns: 1fr;
  }

  .predictGrid,
  .predictDetailSwitchList {
    grid-template-columns: 1fr;
  }

  .predictChartStats,
  .predictVolumeRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .appShell {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }

  .sidebar {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sidebarHeader {
    align-items: center;
    justify-content: space-between;
  }

  .sideNav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: unset;
    flex-wrap: unset;
  }

  .sideControls {
    display: grid;
    margin-top: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .aiDock {
    right: 12px;
    bottom: 12px;
  }

  body.sidebarCollapsed .sidebar {
    gap: 0;
    padding-bottom: 14px;
  }

  body.sidebarCollapsed .brandText h1 {
    font-size: 17px;
  }

  body.sidebarCollapsed .sideNav,
  body.sidebarCollapsed .sideControls {
    display: none;
  }
}

@media (max-width: 720px) {
  .mainPanel {
    padding: 12px;
  }

  .topBar {
    flex-wrap: wrap;
  }

  .commandLauncherBtn {
    min-width: 118px;
    height: 28px;
    padding: 0 10px;
    font-size: 10px;
  }

  .commandPalette {
    align-items: end;
    place-items: end stretch;
  }

  .commandPalettePanel {
    width: 100%;
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    padding: 10px;
    gap: 8px;
  }

  .commandPaletteHead h3 {
    font-size: 14px;
  }

  .commandInputRow {
    grid-template-columns: 1fr;
  }
  .commandRunBtn {
    width: 100%;
  }

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

  .topBar h2 {
    font-size: 22px;
  }

  .statusBar {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .emotionFearGreedHero {
    padding: 0.9rem;
  }

  .emotionFearGreedMain strong {
    font-size: 2.5rem;
  }

  .xHead {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .xTimeWrap {
    grid-column: 2;
    justify-items: start;
  }

  .xContent {
    font-size: 15px;
  }

  .newsTimelineGroup {
    padding-left: 0;
  }

  .newsTimelineGroup::before {
    left: 6px;
  }

  .newsTimelineItem {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 22px;
  }

  .newsTimelineRail {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    justify-items: start;
    gap: 6px;
    grid-column: auto;
  }

  .newsTimelineTime {
    font-size: 15px;
  }

  .newsTimelineDot {
    position: absolute;
    left: -22px;
    top: 3px;
    margin-right: 0;
  }

  .newsTimelineTop,
  .newsTimelineDayHead {
    flex-direction: column;
    align-items: flex-start;
  }

  .newsTimelineCard {
    grid-column: auto;
    width: 100%;
  }

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

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

  .metalsMarketGrid,
  .metalsMarketStats,
  .metalsMarketDetailStats,
  .metalsTokenKlineMetaGrid {
    grid-template-columns: 1fr;
  }

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

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

  .metalsMarketDetailHead,
  .metalsMarketDetailPriceRow {
    flex-direction: column;
    align-items: flex-start;
  }

  .metalsTokenHeroHead {
    flex-direction: column;
    align-items: flex-start;
  }

  .metalsTokenKlineHead {
    gap: 10px;
  }

  .metalsTokenHeroSide {
    justify-items: start;
  }

  .metalsMarketDetailDeltaStack {
    justify-items: start;
  }

  .metalsMarketSection .cardHead {
    gap: 10px;
  }

  .metalsTokenHeroTitle {
    font-size: 24px;
  }

  .metalsTokenHeroPrice {
    font-size: 34px;
  }

  .metalsTokenKlineRange {
    width: 100%;
    justify-content: flex-start;
  }

  .metalsTokenKlineCanvas {
    height: 280px;
  }

  .metalsMarketRange {
    width: 100%;
    justify-content: flex-start;
  }

  .metalsDetailBackBtn {
    width: 100%;
    min-width: 0;
  }

  .metalsMarketPrice {
    font-size: 24px;
  }

  .sideNav,
  .sideControls {
    grid-template-columns: 1fr;
  }

  .midPrice {
    font-size: 30px;
  }

  .overviewSummary {
    font-size: 20px;
  }

  .briefSummary {
    font-size: 15px;
  }

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

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

  .decisionDial {
    width: 120px;
    height: 120px;
  }

  .decisionDialInner {
    inset: 15px;
    gap: 4px;
    padding-bottom: 10px;
  }

  .decisionDialInner > strong {
    min-height: 36px;
    font-size: 32px;
  }

  .decisionDialUnit {
    padding-bottom: 3px;
    font-size: 14px;
  }

  .decisionHeroSymbol {
    font-size: 26px;
  }

  .emotionPulseBoard,
  .emotionPulseStats {
    grid-template-columns: 1fr;
  }

  .emotionLegacyShell {
    padding: 10px;
    border-radius: 13px;
  }

  .emotionLegacyHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .emotionLegacyHeader h1 {
    font-size: 1.42rem;
  }

  .emotionMeterInfo {
    gap: 0.35rem 0.75rem;
  }

  .emotionMeterInfoScore {
    font-size: 0.78rem;
  }

  .emotionMeterLegend {
    font-size: 0.72rem;
  }

  .emotionLegacyValue {
    font-size: 1.9rem;
  }

  .emotionLegacyCoinValue {
    font-size: 1.64rem;
  }

  .predictHeroTitle {
    font-size: 24px;
  }

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

  .panelList {
    max-height: 470px;
  }

  .metalsSummary {
    font-size: 15px;
  }

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

  .scraperToolbarMain,
  .scraperToolbarToggles {
    grid-template-columns: 1fr;
  }

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

  .okxTableHead,
  .okxTableRow {
    min-width: 860px;
  }

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

  .scraperScopeSummaryLine {
    flex-wrap: wrap;
  }

  .tvHost {
    height: min(58vh, 420px);
    min-height: 320px;
  }

  .marketDetailTradingViewHost {
    height: min(62vh, 520px);
    min-height: 360px;
  }

  .marketDetailKlineCanvas {
    height: 340px;
  }

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

  .watchRowMain {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .watchRowDelta {
    justify-self: end;
  }

  .watchRowDetailBtn {
    width: 100%;
    min-height: 34px;
  }

  #pointKlineCanvas {
    height: 230px;
  }

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

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

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

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

  .pointHoverTradePanel {
    position: static;
    margin-top: 8px;
    width: 100%;
    max-height: none;
    left: auto;
    top: auto;
  }

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

  #pointContextNews {
    grid-template-columns: 1fr;
  }

  .marketPrimary {
    min-height: 540px;
  }

  .marketDetailGrid,
  .marketDetailMetricGrid,
  .marketDetailQuickStrip {
    grid-template-columns: 1fr;
  }

  .marketDetailHeroHead {
    flex-direction: column;
  }

  .marketDetailHeroSide {
    justify-items: flex-start;
    min-width: 0;
    flex: 1 1 auto;
  }

  .marketDetailHeroPrice {
    font-size: 40px;
  }

  .marketDetailHeroPriceWrap {
    justify-items: flex-start;
  }

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

  .marketLoadPaneLeft {
    border-right: 0;
    border-bottom: 1px solid oklch(0.32 0.006 60 / 0.32);
  }

  .marketLoadPrice {
    font-size: 42px;
  }

  .marketLoadChange {
    font-size: 20px;
  }

  .marketLoadPaneCenter {
    border-left: 0;
    border-right: 0;
    min-height: 220px;
    padding: 20px 14px;
  }

  .marketLoadPaneCenter h3 {
    font-size: 31px;
  }

  .marketLoadPaneCenter p {
    font-size: 20px;
  }

  .marketLoadSpinner {
    width: 44px;
    height: 44px;
  }

  .tvLoadingTitle {
    font-size: 26px;
  }

  .tvLoadingSub {
    font-size: 15px;
  }

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

  .communityVoteDigest,
  .communityNotesGrid {
    grid-template-columns: 1fr;
  }

  .communityKpiGrid,
  .communityVoteStats {
    grid-template-columns: 1fr;
  }

  .communityCard {
    padding: 16px;
    border-radius: 24px;
  }

  .communityHeadTitle h2 {
    font-size: 26px;
  }

  .communityNoteTitle {
    max-width: none;
    font-size: 24px;
  }

  .communityNotesHead,
  .communityChatHead,
  .communityMsgHead {
    flex-direction: column;
    align-items: flex-start;
  }

  .communityNotesHeadActions {
    justify-items: start;
    justify-content: flex-start;
  }

  /* Compose-page mobile rules now live next to the editorial composer
   * styles above (search for @media (max-width: 640px)). */

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

  .communityPostCard.isFeature {
    grid-column: auto;
  }

  .communityPostCardFoot {
    flex-direction: column;
    align-items: flex-start;
  }

  /* (legacy .communityPostComposerFoot mobile rules removed alongside
   * the editorial composer rewrite.) */

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

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

  .marketDetailSwitchCurrent {
    min-width: 0;
  }

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

  .marketDetailSwitchRowSide {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

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

  .communityComposerFoot {
    flex-direction: column;
    align-items: flex-start;
  }

  .communityCard .tinyBtn,
  #communitySendBtn {
    width: 100%;
  }

  .aiDock {
    left: 10px;
    right: 10px;
    bottom: 10px;
    align-items: stretch;
  }

  .aiDockPanel {
    width: 100%;
    max-height: min(66vh, 560px);
  }

  .aiDockFab {
    align-self: flex-end;
  }

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

@media (prefers-reduced-motion: reduce) {
  .view,
  .navBtn,
  .watchRow,
  .ghostBtn,
  .primaryBtn {
    animation: none !important;
    transition: none !important;
  }

  .watchSkeletonBar,
  .tvLoadingSpinner,
  .marketLoadBar,
  .marketLoadSpinner,
  .riskLoading {
    animation: none !important;
  }
}

/* ================================================================ */
/* Gainers / Losers card                                             */
/* ================================================================ */

.gainersLosersCard {
  margin-top: 12px;
}

.gainersLosersContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .gainersLosersContainer {
    grid-template-columns: 1fr;
  }
}

.glPanel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.glPanelHead {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--border-color, #2a2e3a);
  margin-bottom: 4px;
}

.glHeader {
  display: grid;
  grid-template-columns: 2fr 2.2fr 1.6fr 2fr;
  font-size: 0.68rem;
  color: var(--hint-color, #7a8099);
  padding: 2px 0;
  gap: 4px;
}

.glRow {
  display: grid;
  grid-template-columns: 2fr 2.2fr 1.6fr 2fr;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 4px;
  transition: background 0.12s;
}

.glRow:hover {
  background: var(--hover-bg, oklch(0.97 0.004 60 / 0.04));
}

.glSym {
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glPrice {
  font-size: 0.78rem;
  text-align: right;
}

.glPct {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
}

.glVol {
  font-size: 0.7rem;
  text-align: right;
}

.glEmpty {
  color: var(--hint-color, #7a8099);
  font-size: 0.8rem;
  padding: 8px 0;
}

/* ================================================================ */
/* OI / Funding / Options / Whale / Cap Ranking                      */
/* ================================================================ */

.emoExtraCard {
  margin-top: 12px;
}

.emoChartIntervalRow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.emoMiniChart {
  min-height: 100px;
}

.emoSparkline {
  width: 100%;
  height: 80px;
  display: block;
}

.emoChartStats {
  display: flex;
  gap: 16px;
  font-size: 0.78rem;
  margin-top: 6px;
}

/* Options Analytics */
.optionsSnapshotContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.optionsMetaRow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

@media (max-width: 600px) {
  .optionsMetaRow {
    grid-template-columns: 1fr 1fr;
  }
}

.optionsMetaItem {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.optionsExpiryTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.optionsExpiryTable th,
.optionsExpiryTable td {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border-color, #2a2e3a);
}

.optionsExpiryTable th {
  color: var(--hint-color, #7a8099);
  font-weight: 600;
}

/* Whale Alert */
.whaleAlertShell {
  padding: 12px 16px;
  max-width: 900px;
}

.whaleAlertFeed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.whaleMeta {
  font-size: 0.72rem;
  margin-bottom: 6px;
}

.whaleRow {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 4px;
  border-bottom: 1px solid var(--border-color, #2a2e3a);
  font-size: 0.78rem;
}

.whaleUsd {
  font-weight: 700;
  color: var(--accent-color, #f7c94b);
  min-width: 60px;
}

.whaleToken {
  min-width: 40px;
}

.whaleFlow {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}

.whaleAddr {
  font-family: monospace;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.whaleArrow {
  color: var(--hint-color, #7a8099);
}

.whaleChain {
  min-width: 50px;
}

.whaleTime {
  min-width: 55px;
  text-align: right;
}

.whaleBadge {
  color: #ef5350;
  font-size: 0.7rem;
}

/* Market Cap Ranking */
.capRankingShell {
  padding: 12px 16px;
}

.capRankingTable {
  margin-top: 8px;
  overflow-x: auto;
}

.capTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.capTable th {
  padding: 6px 8px;
  text-align: left;
  color: var(--hint-color, #7a8099);
  font-weight: 600;
  border-bottom: 1px solid var(--border-color, #2a2e3a);
}

.capTable td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color, #1e2130);
}

.capRow:hover td {
  background: var(--hover-bg, oklch(0.97 0.004 60 / 0.03));
}

.capRank { min-width: 30px; }
.capName { display: flex; flex-direction: column; gap: 1px; }
.capSym { font-weight: 600; }
.capNameFull { font-size: 0.68rem; }
.capPrice, .capMcap, .capVol { text-align: right; }

/* Price Alert Toast */
.alertToast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card-bg, #1a1d2e);
  border: 1px solid #f7c94b;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  max-width: 300px;
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ================================================================
   Post Detail Drawer
   ================================================================ */
.postDetailOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9100;
  pointer-events: none;
}
.postDetailOverlay:not([hidden]) {
  display: flex;
  justify-content: flex-end;
  pointer-events: auto;
}
.postDetailBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  animation: pdBackdropIn 0.22s ease;
}
@keyframes pdBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.postDetailDrawer {
  position: relative;
  z-index: 1;
  width: min(520px, 100vw);
  height: 100%;
  background: #14161f;
  border-left: 1px solid oklch(0.97 0.004 60 / 0.07);
  display: flex;
  flex-direction: column;
  animation: pdDrawerIn 0.26s cubic-bezier(0.22,1,0.36,1);
}
@keyframes pdDrawerIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Fixed top bar */
.postDetailTop {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 12px 16px 8px;
  border-bottom: 1px solid oklch(0.97 0.004 60 / 0.06);
}
.postDetailCloseBtn {
  background: none;
  border: none;
  color: #8b8fa8;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.postDetailCloseBtn:hover { color: oklch(0.97 0.004 60); background: oklch(0.97 0.004 60 / 0.08); }

/* Scrollable middle section */
.postDetailScroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Author bar */
.postDetailAuthorBar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 10px;
}
.postDetailAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: oklch(0.97 0.004 60) !important;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.postDetailAuthorInfo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.postDetailAuthorName {
  font-size: 14px;
  font-weight: 600;
  color: #e4e6f1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.postDetailAuthorMeta {
  font-size: 11px;
  color: #5c607a !important;
  display: block;
}
.postDetailFollowBtn {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid #6366f1;
  background: transparent;
  color: #818cf8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.postDetailFollowBtn:hover { background: #6366f1; color: oklch(0.97 0.004 60); }
.postDetailFollowBtn.isFollowing {
  border-color: oklch(0.97 0.004 60 / 0.15);
  background: oklch(0.97 0.004 60 / 0.06);
  color: #8b8fa8;
}
.postDetailFollowBtn.isFollowing:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.08); }

/* Post body */
.postDetailBody {
  padding: 4px 20px 18px;
}
.postDetailSideTag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.postDetailSideTag.up      { background: rgba(16,185,129,0.15); color: #10b981 !important; }
.postDetailSideTag.down    { background: rgba(239,68,68,0.12);  color: #ef4444 !important; }
.postDetailSideTag.neutral { background: rgba(99,102,241,0.12); color: #818cf8 !important; }
.postDetailTitle {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #e4e6f1 !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
  display: block;
}
.postDetailContent {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #9ca3af !important;
  margin: 0 !important;
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
}
.postDetailImg {
  width: 100%;
  border-radius: 10px;
  margin-top: 14px;
  object-fit: cover;
  max-height: 280px;
}

/* Comments inside scroll area */
.postDetailCommentSection {
  padding: 0;
  border-top: 1px solid oklch(0.97 0.004 60 / 0.05);
  margin-top: 8px;
}
.postDetailCommentHeader {
  font-size: 13px;
  font-weight: 600;
  color: #8b8fa8;
  padding: 12px 20px 6px;
}
.postDetailCommentTotal {
  font-weight: 400;
  opacity: 0.6;
}
.postDetailCommentList {
  padding: 4px 20px 16px;
  display: flex;
  flex-direction: column;
}

/* Individual comment */
.pdComment {
  padding: 10px 0;
  border-bottom: 1px solid oklch(0.97 0.004 60 / 0.04);
  display: flex;
  gap: 10px;
}
.pdCommentAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #374151, #4b5563);
  color: #d1d5db !important;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.pdCommentBody { flex: 1; min-width: 0; }
.pdCommentName {
  font-size: 12px;
  font-weight: 600;
  color: #c7d2fe !important;
  margin-bottom: 3px;
  display: block;
}
.pdCommentText {
  font-size: 13px;
  color: #9ca3af !important;
  line-height: 1.5;
  word-break: break-word;
  display: block;
}
.pdCommentMeta {
  font-size: 11px;
  color: #4b5563 !important;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdCommentReplyBtn {
  background: none;
  border: none;
  color: #6366f1;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
}
.pdCommentReplyBtn:hover { color: #818cf8; }
.pdReplyThread {
  margin-left: 42px;
  margin-top: 2px;
}

/* Fixed bottom: actions + comment input */
.postDetailBottom {
  flex-shrink: 0;
  border-top: 1px solid oklch(0.97 0.004 60 / 0.08);
  background: #14161f;
}
.postDetailActions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 6px;
}
.postDetailActionBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid oklch(0.97 0.004 60 / 0.1);
  background: oklch(0.97 0.004 60 / 0.04);
  color: #8b8fa8;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.postDetailActionBtn:hover { border-color: oklch(0.97 0.004 60 / 0.2); color: #d1d5db; }
.postDetailActionBtn.pdLike.isLiked       { border-color: rgba(239,68,68,0.4);  color: #ef4444; background: rgba(239,68,68,0.08); }
.postDetailActionBtn.pdBookmark.isBookmarked { border-color: rgba(251,191,36,0.4); color: #fbbf24; background: rgba(251,191,36,0.07); }
.postDetailActionBtn.pdShare { margin-left: auto; }
.postDetailCommentInput {
  padding: 6px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.postDetailReplyBadge {
  font-size: 11px;
  color: #6366f1;
  font-weight: 500;
}
.postDetailCommentTextarea {
  width: 100%;
  background: oklch(0.97 0.004 60 / 0.05);
  border: 1px solid oklch(0.97 0.004 60 / 0.1);
  border-radius: 10px;
  color: #e4e6f1;
  font-size: 13px;
  padding: 9px 12px;
  resize: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
  line-height: 1.5;
}
.postDetailCommentTextarea:focus { outline: none; border-color: #6366f1; }
.postDetailCommentInputRow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.postDetailCancelReply {
  background: none;
  border: none;
  color: #8b8fa8;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.postDetailCancelReply:hover { color: #d1d5db; }
.postDetailSubmitComment {
  padding: 6px 18px;
  border-radius: 16px;
  border: none;
  background: #6366f1;
  color: oklch(0.97 0.004 60);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.postDetailSubmitComment:hover { background: #818cf8; }
.postDetailSubmitComment:disabled { background: #374151; color: #6b7280; cursor: not-allowed; }

/* ================================================================
   Post Tag Chips  (feed cards + detail drawer)
   ================================================================ */
.postTagList {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.postTag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: default;
  line-height: 1.6;
  border: 1px solid transparent;
}
/* Per-tag colours */
.postTag[data-tag="BTC"]      { background: rgba(249,115,22,0.12); color: #f97316; border-color: rgba(249,115,22,0.25); }
.postTag[data-tag="ETH"]      { background: rgba(168,85,247,0.12); color: #a855f7; border-color: rgba(168,85,247,0.25); }
.postTag[data-tag="SOL"]      { background: rgba(34,197,94,0.12);  color: #22c55e; border-color: rgba(34,197,94,0.25);  }
.postTag[data-tag="DeFi"]     { background: rgba(59,130,246,0.12); color: #3b82f6; border-color: rgba(59,130,246,0.25); }
.postTag[data-tag="NFT"]      { background: rgba(236,72,153,0.12); color: #ec4899; border-color: rgba(236,72,153,0.25); }
.postTag[data-tag="Macro"]    { background: rgba(234,179,8,0.12);  color: #eab308; border-color: rgba(234,179,8,0.25);  }
.postTag[data-tag="Technical"]{ background: rgba(6,182,212,0.12);  color: #06b6d4; border-color: rgba(6,182,212,0.25);  }
.postTag[data-tag="Onchain"]  { background: rgba(99,102,241,0.12); color: #818cf8; border-color: rgba(99,102,241,0.25); }
.postTag[data-tag="L2"]       { background: rgba(20,184,166,0.12); color: #14b8a6; border-color: rgba(20,184,166,0.25); }
.postTag[data-tag="Risk"]     { background: rgba(239,68,68,0.10);  color: #f87171; border-color: rgba(239,68,68,0.22);  }
.postTag[data-tag="Halving"]  { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.25); }
.postTag[data-tag="Ordinals"] { background: rgba(161,110,62,0.15); color: #d4923c; border-color: rgba(161,110,62,0.3);  }
/* Fallback for unknown tags */
.postTag { background: oklch(0.97 0.004 60 / 0.06); color: #8b8fa8; border-color: oklch(0.97 0.004 60 / 0.1); }

/* ─── NFT Section ─────────────────────────────────────────────────────── */
.nftLayout { display: grid; gap: 12px; }
.nftHeroCard { overflow: hidden; }
.nftHeroHead { align-items: flex-start; gap: 12px; }
.nftChainControl { flex-shrink: 0; }
.nftList { display: flex; flex-direction: column; }
.nftEmpty { padding: 24px 16px; color: var(--textSecondary, #8b8fa8); font-size: 14px; text-align: center; }
.nftRow {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 4px; cursor: pointer;
  border-bottom: 1px solid oklch(0.97 0.004 60 / 0.06);
  transition: background 0.15s;
}
.nftRow:last-child { border-bottom: none; }
.nftRow:hover, .nftRow:focus-visible { background: oklch(0.97 0.004 60 / 0.04); outline: none; }
.nftRow.isActive { background: oklch(0.97 0.004 60 / 0.06); }
.nftRowImg { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.nftRowImgFallback {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: oklch(0.97 0.004 60);
}
.nftRowMeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nftRowName { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nftRowChain { font-size: 11px; color: var(--textSecondary, #8b8fa8); font-weight: 600; }
.nftRowFloor { font-size: 14px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.nftRowChange { font-size: 13px; font-weight: 700; white-space: nowrap; flex-shrink: 0; min-width: 60px; text-align: right; }
.nftRowChange.up { color: var(--positive, #34d399); }
.nftRowChange.down { color: var(--negative, #f87171); }

/* NFT detail page */
.nftDetailPage { padding: 12px 16px 32px; display: flex; flex-direction: column; gap: 0; }
.nftDetailPageTop { display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; }
.nftDetailLayout { display: grid; gap: 12px; }
.nftDetailRoot { }
.nftDetailCard { }
.nftDetailHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.nftDetailHeadLeft { display: flex; align-items: center; gap: 12px; }
.nftDetailImg { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.nftDetailImgFallback {
  width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px; color: oklch(0.97 0.004 60);
}
.nftDetailHeadMeta { display: flex; flex-direction: column; gap: 4px; }
.nftDetailLabel { font-size: 11px; font-weight: 700; color: var(--accent, #8FA9D8); text-transform: uppercase; letter-spacing: 0.05em; }
.nftDetailName { font-size: 22px; font-weight: 900; margin: 0; line-height: 1.2; }
.nftDetailChainBadge {
  font-size: 11px; font-weight: 700; padding: 5px 10px;
  background: oklch(0.97 0.004 60 / 0.08); border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.nftDetailMetricRow { display: flex; gap: 8px; margin-bottom: 8px; }
.nftDetailMetricRow:last-child { margin-bottom: 0; }
.nftMetricCard { flex: 1; padding: 12px 14px; background: oklch(0.97 0.004 60 / 0.05); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nftMetricLabel { font-size: 11px; font-weight: 600; color: var(--textSecondary, #8b8fa8); }
.nftMetricValue { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nftMetricValue.up { color: var(--positive, #34d399); }
.nftMetricValue.down { color: var(--negative, #f87171); }
.nftRecentSalesCard { }
.nftSaleRow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid oklch(0.97 0.004 60 / 0.06);
}
.nftSaleRow:last-child { border-bottom: none; }
.nftSaleInfo { display: flex; flex-direction: column; gap: 3px; }
.nftSaleName { font-size: 14px; font-weight: 600; }
.nftSaleTime { font-size: 12px; color: var(--textSecondary, #8b8fa8); font-weight: 600; }
.nftSalePrice { font-size: 14px; font-weight: 700; }

/* Mobile: full-width bottom sheet */
@media (max-width: 640px) {
  .postDetailDrawer {
    width: 100vw;
    height: 92dvh;
    border-left: none;
    border-top: 1px solid oklch(0.97 0.004 60 / 0.08);
    border-radius: 18px 18px 0 0;
    animation: pdDrawerInMobile 0.28s cubic-bezier(0.22,1,0.36,1);
  }
  .postDetailOverlay:not([hidden]) { justify-content: center; align-items: flex-end; }
  @keyframes pdDrawerInMobile {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* Keep the five primary nav buttons in the top bar on desktop. */
@media (min-width: 981px) {
  .appShell,
  body.sidebarCollapsed .appShell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
  }

  .sidebar,
  body.sidebarCollapsed .sidebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    height: auto;
    min-height: 60px;
    padding: 12px 14px;
    position: sticky;
    top: 12px;
    overflow: visible;
  }

  .sidebarHeader,
  body.sidebarCollapsed .sidebarHeader {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    border-bottom: 0;
    overflow: visible;
  }

  .brand,
  body.sidebarCollapsed .brand {
    gap: 12px;
  }

  .brandText,
  body.sidebarCollapsed .brandText,
  .navLabel,
  body.sidebarCollapsed .navLabel {
    max-width: none;
    opacity: 1;
    overflow: visible;
  }

  .sideNav,
  body.sidebarCollapsed .sideNav {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 26px;
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
  }

  .navBtn,
  body.sidebarCollapsed .navBtn {
    position: relative;
    width: auto;
    min-width: 0;
    height: 30px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: oklch(0.74 0.006 60);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: none;
    transform: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    transition:
      color 0.16s ease,
      transform 0.16s ease;
  }

  .navBtn::after,
  body.sidebarCollapsed .navBtn::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: transparent;
  }

  .navBtn:hover {
    color: #e8f0ff;
    background: transparent;
    transform: none;
  }

  .navBtn.isActive {
    color: var(--accent, oklch(0.78 0.12 75));
    background: transparent;
    box-shadow: none;
  }

  .navBtn.isActive::after {
    background: var(--accent, oklch(0.78 0.12 75));
  }

  .navIcon,
  body.sidebarCollapsed .navIcon {
    width: 12px;
    height: 12px;
    opacity: 0.95;
  }

  .navIcon svg {
    stroke-width: 2;
  }

  .sideControls,
  body.sidebarCollapsed .sideControls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0;
    margin: 0;
    border-top: 0;
    opacity: 1;
    overflow: visible;
  }

  .sideControls .primaryBtn,
  .sideControls .ghostBtn,
  body.sidebarCollapsed .sideControls .primaryBtn,
  body.sidebarCollapsed .sideControls .ghostBtn {
    width: auto;
    height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
  }

  .authMenuDock,
  body.sidebarCollapsed .authMenuDock {
    width: auto;
  }

  .authMenuBtn,
  body.sidebarCollapsed .authMenuBtn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    padding: 0;
    justify-content: center;
  }
}

/* ── Single Back affordance per detail / deep page ────────────────────────────
   The global floating Back button is mounted in #react-back-btn-root at the top
   of <main class="mainPanel">, OUTSIDE every .view section. Each deep page also
   historically shipped its OWN in-page back button, in five different markup
   shapes — so users saw two. Hide the in-page one inside every deep (non-root)
   view; the global one is untouched (it lives outside .view).

   The in-page back buttons take these forms, all matched below:
     • React CSS-module headers → class `_backBtn_1qxhc`        → [class*=backbtn]
     • legacy app.js named btn  → `ghostBtn marketDetailBackBtn`→ [class*=backbtn]
     • app.js id-only btn       → id `nftDetailBackBtn`         → [id*=backbtn]
     • composer btn             → id `communityComposerBackBtn` → [id*=backbtn]
                                   + class `.composeBack`
     • generic ghost back btn   → `ghostBtn` + onclick history  → [onclick*=history.back]
   "backtest"/"feedback" don't contain "backbtn"; "Back to live" (a chart
   feature, not page-nav) lives in the ROOT "context" view which is NOT listed
   here — so feature buttons stay visible. NOTE: this is per-view enumeration,
   not an automatic rule — a brand-new deep view must be added to this list.
   Predict's React-internal detail renders under the root "predict" view (where
   the global button is hidden), so its in-page back is the ONLY affordance and
   is intentionally NOT hidden. */
.view:is(
  [data-view="marketDetail"], [data-view="nftDetail"], [data-view="metalsDetail"],
  [data-view="propertyDetail"], [data-view="postDetail"], [data-view="predictDetail"],
  [data-view="communityPost"], [data-view="search"], [data-view="tagTopic"],
  [data-view="profile"], [data-view="messages"]
) :is(
  [class*="backbtn" i], [id*="backbtn" i], [onclick*="history.back" i], .composeBack
) {
  display: none !important;
}

/* ── Mobile (≤640px): compact ChainUs header card ───────────────────
 * Put the brand + avatar on ONE row and shrink the card height. Scoped
 * to phones only — all the desktop/tablet sidebar rules above are
 * untouched, so >640px renders exactly as before. */
@media (max-width: 640px) {
  .sidebar {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 8px 14px;
    gap: 10px;
  }
  .sideControls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
  }
}