/* =========================================================
   InPlay Symbol Page Modern UI
   Page-scoped facelift only. Shared inplay-ui.css remains intact.
   ========================================================= */

.page-symbol {
  --sym-bg: #08100b;
  --sym-panel: #0d1710;
  --sym-panel-2: #111d15;
  --sym-panel-3: #16221a;
  --sym-line: rgba(255,255,255,.075);
  --sym-line-strong: rgba(255,255,255,.12);
  --sym-text: #edf6f0;
  --sym-muted: #839488;
  --sym-green: #37df79;
  --sym-green-soft: rgba(55,223,121,.11);
  --sym-amber: #f4b400;
  --sym-amber-soft: rgba(244,180,0,.11);
  --sym-blue: #8db7ff;
  --sym-blue-soft: rgba(141,183,255,.11);
  --sym-cyan: #77d6df;
  --sym-cyan-soft: rgba(119,214,223,.11);
  --sym-red: #ff716c;
  --sym-red-soft: rgba(255,113,108,.10);
  --sym-shadow: 0 18px 50px rgba(0,0,0,.30);
  background: var(--sym-bg) !important;
  color: var(--sym-text);
}


/* Keep the legacy body spacer exactly the same height as this toolbar.
   base.css still forces body.dark-mode { padding-top:70px !important; }. */
body.dark-mode.page-symbol {
  padding-top: 66px !important;
}

/* =========================================================
   APP SHELL / TOOLBAR
   Symbol originally inherited the legacy absolute shell, so the
   hamburger and plan pill sat over the page. Match Dashboard:
   fixed coloured toolbar + normal document-flow main content.
   ========================================================= */

.page-symbol .main-content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100dvh;
  padding: 18px clamp(14px, 2.4vw, 34px) 120px !important;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 18% -10%, rgba(59,228,119,.13), transparent 32rem),
    radial-gradient(circle at 88% 18%, rgba(31,191,129,.07), transparent 30rem),
    linear-gradient(180deg, #08110b 0%, #07100a 42%, #060b08 100%);
  background-attachment: fixed;
}

.page-symbol .toolbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 66px;
  padding: 0 clamp(12px, 2vw, 28px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: visible;
  z-index: 1300;
  background: rgba(6,12,8,.78) !important;
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 10px 34px rgba(0,0,0,.18);
}

.page-symbol .toolbar-btn {
  min-width: 42px;
  min-height: 42px;
  padding: 9px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--sym-text) !important;
  box-shadow: none !important;
}

.page-symbol .toolbar-btn:hover {
  border-color: rgba(59,228,119,.20) !important;
  background: rgba(59,228,119,.09) !important;
}

.page-symbol .plan-pill {
  min-height: 32px;
  padding: 0 11px !important;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(59,228,119,.18) !important;
  border-radius: 999px;
  background: rgba(59,228,119,.075) !important;
  box-shadow: none !important;
}

.page-symbol .plan-pill a {
  padding: 0 !important;
  background: transparent !important;
  color: #dff9e8 !important;
  font-size: 12px;
  line-height: 30px;
  font-weight: 700;
  text-decoration: none;
}

.page-symbol .plan-pill:hover,
.page-symbol .plan-pill:hover a {
  background: rgba(59,228,119,.11) !important;
  color: #f0fff5 !important;
}


.page-symbol .symbol-page {
  width: min(1280px, calc(100% - 28px));
  max-width: 1280px;
  margin: 0 auto 40px;
  padding: 0;
  color: var(--sym-text);
}

/* =========================================================
   HEADER / QUOTE
   ========================================================= */

.page-symbol .sym-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 16px;
  align-items: center;
  margin: 0 0 12px;
  padding: 14px 15px;
  border: 1px solid var(--sym-line);
  border-radius: 15px;
  background:
    radial-gradient(circle at 0 0, rgba(55,223,121,.055), transparent 38%),
    var(--sym-panel);
  box-shadow: var(--sym-shadow);
}

.page-symbol .sym-ident {
  min-width: 0;
}

.page-symbol .sym-ticker {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #f4faf6;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  font-weight: 840;
  letter-spacing: -.035em;
}

.page-symbol .sym-company {
  margin-top: 7px;
  max-width: 820px;
  overflow: hidden;
  color: var(--sym-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-symbol .sym-ticker #btnAddToWl,
.page-symbol .sym-ticker > a.btn-pill {
  position: relative;
  top: 2px;
  min-height: 28px;
  margin: 0 0 0 2px;
  padding: 5px 9px;
  border: 1px solid rgba(141,183,255,.16);
  border-radius: 9px;
  background: var(--sym-blue-soft);
  color: var(--sym-blue);
  box-shadow: none;
  font-size: 11px;
  font-weight: 760;
}

.page-symbol .sym-ticker-inplay {
  display: none;
  margin-left: 1px;
}

.page-symbol .sym-ticker-inplay.active {
  display: inline-flex;
}

.page-symbol .inplay-chip {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(55,223,121,.19);
  border-radius: 999px;
  background: var(--sym-green-soft);
  color: #82efa7;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .045em;
  position: relative;
  top: 2px;
}

.page-symbol .inplay-chip .chip-dot {
  background: var(--sym-green);
  box-shadow: 0 0 10px rgba(55,223,121,.55);
}

.page-symbol .sym-quote {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 5px;
  white-space: nowrap;
}

.page-symbol .sym-price {
  color: #f4faf6;
  font-size: clamp(24px, 2.5vw, 31px);
  line-height: 1;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}

.page-symbol .sym-delta {
  display: flex;
  gap: 6px;
  color: var(--sym-green);
  font-size: 12px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.page-symbol #btn-star {
  min-width: 82px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--sym-line-strong);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: #c8d6cc;
  box-shadow: none;
  font-size: 12px;
  font-weight: 740;
}

.page-symbol #btn-star:hover {
  border-color: rgba(244,180,0,.26);
  background: rgba(244,180,0,.07);
  color: #ffe07b;
}

.page-symbol #btn-star.is-starred {
  border-color: rgba(244,180,0,.30);
  background: rgba(244,180,0,.085);
  color: #ffd45a;
}

.page-symbol #btn-star .star-ic {
  font-size: 16px;
}

/* =========================================================
   MAIN GRID / CHART
   ========================================================= */

.page-symbol .sym-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 12px;
  align-items: stretch !important;
}

.page-symbol .sym-chart-card,
.page-symbol .sym-side > .card,
.page-symbol .metric,
.page-symbol .alerts-card,
.page-symbol .comments-section {
  border: 1px solid var(--sym-line);
  background: var(--sym-panel);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}

.page-symbol .sym-chart-card {
  min-width: 0;
  padding: 11px;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
}

.page-symbol .chart-head {
  min-height: 34px;
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-symbol .tf-toggle {
  width: 100%;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.page-symbol .tf-toggle::-webkit-scrollbar {
  display: none;
}

.page-symbol .tf-toggle .pill {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid rgba(141,183,255,.10);
  border-radius: 8px;
  background: rgba(141,183,255,.055);
  color: #91a69a;
  box-shadow: none;
  font-size: 11px;
  font-weight: 760;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.page-symbol .tf-toggle .pill:hover {
  border-color: rgba(141,183,255,.20);
  background: rgba(141,183,255,.09);
  color: #c6d9fb;
}

.page-symbol .tf-toggle .pill.is-active {
  border-color: rgba(141,183,255,.25);
  background: var(--sym-blue-soft);
  color: var(--sym-blue);
}

.page-symbol .chart-wrap {
  min-height: 410px;
  flex: 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 11px;
  background: #0b140e;
}

.page-symbol #chart-canvas {
  width: 100%;
  height: 100%;
  min-height: 410px;
  background: transparent;
}

/* Quick stat pills intentionally keep their stronger colours. */
.page-symbol .ip-quick {
  margin: 10px 0 0;
  padding: 1px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.page-symbol .ip-item {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-symbol .ip-label {
  color: #6f8376;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
}

.page-symbol .ip-badge {
  min-height: 27px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.page-symbol #ip-gap {
  border: 1px solid rgba(55,223,121,.18);
  background: var(--sym-green-soft);
  color: #79efa1;
}

.page-symbol #ip-rvol {
  border: 1px solid rgba(244,180,0,.18);
  background: var(--sym-amber-soft);
  color: #ffd05e;
}

.page-symbol #ip-vwap {
  border: 1px solid rgba(119,214,223,.18);
  background: var(--sym-cyan-soft);
  color: #88e3e9;
}

.page-symbol #ip-vwap.above {
  color: #79efa1;
  border-color: rgba(55,223,121,.18);
  background: var(--sym-green-soft);
}

.page-symbol #ip-vwap.below {
  color: #ff8a85;
  border-color: rgba(255,113,108,.18);
  background: var(--sym-red-soft);
}

/* =========================================================
   RIGHT RAIL
   ========================================================= */

.page-symbol .sym-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-symbol .sym-side > .card {
  margin: 0 !important;
  padding: 12px;
  border-radius: 14px;
}

.page-symbol .card-title {
  margin: 0 0 9px;
  color: #e9f2ec;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 780;
}

.page-symbol .ai-summary-head {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.page-symbol .ai-summary-meta {
  color: #6c7f72;
  font-size: 11px;
}

.page-symbol .ai-summary-body {
  color: #aebfb4;
  font-size: 12px;
  line-height: 1.55;
}

.page-symbol .sk-line {
  height: 8px;
  margin: 6px 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.035) 25%,
    rgba(255,255,255,.075) 37%,
    rgba(255,255,255,.035) 63%
  );
  background-size: 400% 100%;
}

/* News gets the same understated rounded treatment used elsewhere. */
.page-symbol .news-card {
  max-height: none;
  overflow: visible;
}

.page-symbol .news-list {
  gap: 6px;
}

.page-symbol .news-item {
  padding: 0;
  border: 0;
  background: transparent;
}

.page-symbol .news-row {
  min-width: 0;
}

.page-symbol .news-cell {
  max-width: none !important;
  min-width: 0;
}

.page-symbol .news-cell > a,
.page-symbol .news-item a {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 9px;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 9px;
  background: rgba(255,255,255,.027);
  color: #cbd7cf;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 620;
  text-decoration: none;
  text-overflow: ellipsis;
}

.page-symbol .news-cell > a:hover,
.page-symbol .news-item a:hover {
  border-color: rgba(141,183,255,.15);
  background: rgba(141,183,255,.055);
  color: #e9f1ff;
  text-decoration: none;
}

.page-symbol .news-cell .muted,
.page-symbol .news-item .age {
  margin: 4px 2px 0 !important;
  display: block;
  color: #687b6f !important;
  font-size: 8px !important;
  line-height: 1.2;
  text-align: center;
}

/* Signal pills deliberately retain their green / amber / blue colour coding. */
.page-symbol .signals-row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-symbol .signals-row .badge {
  min-height: 28px;
  margin: 0;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--sym-line);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: #8da094;
  box-shadow: none;
  font-size: 11px;
  font-weight: 690;
}

.page-symbol .signals-row .badge strong {
  font-size: 12px;
  font-weight: 800;
}

.page-symbol .signals-row .badge.gap {
  border-color: rgba(55,223,121,.16);
  background: var(--sym-green-soft);
}

.page-symbol .signals-row .badge.gap strong {
  color: #78efa0;
}

.page-symbol .signals-row .badge.rvol {
  border-color: rgba(244,180,0,.16);
  background: var(--sym-amber-soft);
}

.page-symbol .signals-row .badge.rvol strong {
  color: #ffd05e;
}

.page-symbol .signals-row .badge.score {
  border-color: rgba(141,183,255,.16);
  background: var(--sym-blue-soft);
}

.page-symbol .signals-row .badge.score strong {
  color: var(--sym-blue);
}

.page-symbol .signals-row .badge.vwap {
  border-color: rgba(119,214,223,.16);
  background: var(--sym-cyan-soft);
}

.page-symbol .signals-row .btn-pill {
  min-height: 28px;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #9bada1;
  box-shadow: none;
  font-size: 11px;
}

/* Logged-out gated card */
.page-symbol .gated {
  padding: 2px 0 0;
}

.page-symbol .gated__copy {
  margin-bottom: 10px;
}

.page-symbol .gated__icon {
  font-size: 16px;
  margin: 0 7px 7px 0;
}

.page-symbol .gated__title {
  margin: 0 0 9px;
  color: #e7f1ea;
  font-size: 11px;
}

.page-symbol .gated__desc {
  margin: 5px 0;
  color: #9dafaa;
  font-size: 11px;
  line-height: 1.48;
}

.page-symbol .gated .cta-buttons {
  margin-top: 10px;
  gap: 6px;
}

.page-symbol .gated .btn-pill {
  min-height: 30px;
  min-width: auto;
  padding: 6px 9px;
  font-size: 11px;
}

/* =========================================================
   METRICS
   ========================================================= */

.page-symbol .sym-metrics {
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 7px;
}

.page-symbol .metric {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 11px;
  box-shadow: none;
}

.page-symbol .m-label {
  margin: 0 0 5px;
  color: #728578;
  font-size: 10px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.page-symbol .m-value {
  overflow: hidden;
  color: #dfe9e2;
  font-size: 14px;
  line-height: 1.15;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   ALERT HISTORY
   ========================================================= */

.page-symbol .sym-related {
  margin: 12px 0 22px;
}

.page-symbol .sym-related > h2 {
  margin: 0 0 7px;
  color: #dfe9e2;
  font-size: 12px;
  font-weight: 790;
}

.page-symbol .alerts-card {
  overflow: hidden;
  padding: 0;
  border-radius: 14px;
}

.page-symbol .alerts-head {
  padding: 11px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.018);
}

.page-symbol .alerts-title {
  color: #e7f0ea;
  font-size: 11px;
  font-weight: 780;
}

.page-symbol .alerts-sub {
  color: #6f8376;
  font-size: 10px;
}

.page-symbol .alerts-table {
  width: 100%;
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

.page-symbol .alerts-row {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(110px,1.2fr) repeat(3, minmax(72px,.8fr)) 54px;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}

.page-symbol .alerts-row > div {
  min-width: 0;
  padding: 7px 10px;
  color: #aebeb3;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.page-symbol .alerts-row--head {
  min-height: 31px;
  background: rgba(255,255,255,.018);
}

.page-symbol .alerts-row--head > div {
  color: #6e8174;
  font-size: 10px;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.page-symbol .alerts-row .btn-pill {
  width: 28px;
  min-width: 28px;
  height: 27px;
  min-height: 27px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center;
  vertical-align: middle;
  border: 1px solid rgba(244,180,0,.14);
  border-radius: 8px;
  background: var(--sym-amber-soft);
  box-shadow: none;
  font-size: 13px;
}

.page-symbol .alerts-row--msg {
  width: 100%;
  display: block !important;
  min-height: 0;
  background: rgba(255,255,255,.012);
}

.page-symbol .alerts-row--msg > div {
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
  padding: 7px 10px 9px;
  color: #7f9285;
  font-size: 10px;
  line-height: 1.45;
}

.page-symbol .alerts-card > p.muted {
  margin: 0;
  padding: 18px 12px;
  color: #728578;
  font-size: 11px;
}

/* Locked alert teaser */
.page-symbol .teaser-locked {
  position: relative;
}

.page-symbol .alerts-locked-overlay {
  border-radius: inherit;
  background: rgba(7,14,9,.76);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.page-symbol .al-content {
  color: #dfe9e2;
}

.page-symbol .al-badge {
  color: #ffd05e;
}

/* =========================================================
   PROFIT CALCULATOR + WATCHLIST PICKER
   ========================================================= */

.page-symbol #pc-modal {
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.page-symbol #pc-modal .modal-sheet {
  width: min(620px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--sym-line-strong);
  border-radius: 16px;
  background: #0d1710;
  color: var(--sym-text);
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}

.page-symbol #pc-modal .modal-head,
.page-symbol #pc-modal .modal-foot {
  border-color: rgba(255,255,255,.06);
  background: rgba(255,255,255,.018);
}

.page-symbol #pc-modal .grid {
  gap: 7px;
}

.page-symbol #pc-modal .grid .card {
  border: 1px solid var(--sym-line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  box-shadow: none;
}

.page-symbol #wlPicker .wl-picker__card {
  border: 1px solid var(--sym-line-strong);
  border-radius: 16px;
  background: #0d1710;
  color: var(--sym-text);
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}

.page-symbol #wlPicker input {
  border: 1px solid var(--sym-line-strong);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #e7f0ea;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {
  .page-symbol .sym-main {
    grid-template-columns: 1fr;
  }

  .page-symbol .sym-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .page-symbol .signals-card {
    grid-column: 1 / -1;
  }

  .page-symbol .sym-metrics {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {
  body.dark-mode.page-symbol {
    padding-top: 62px !important;
  }

  .page-symbol .main-content {
    padding: 10px 8px 110px !important;
  }

  .page-symbol .toolbar {
    height: 62px;
    padding: 0 10px;
    gap: 9px;
  }

  .page-symbol .toolbar-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 10px;
  }

  .page-symbol .plan-pill {
    min-height: 30px;
    padding: 0 9px !important;
  }

  .page-symbol .plan-pill a {
    font-size: 11px;
    line-height: 28px;
  }

  .page-symbol .symbol-page {
    width: calc(100% - 16px);
    margin-bottom: 28px;
  }

  .page-symbol .sym-header {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    padding: 11px;
    border-radius: 13px;
  }

  .page-symbol .sym-ident {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .page-symbol .sym-ticker {
    gap: 6px;
    font-size: 30px;
  }

  .page-symbol .sym-company {
    margin-top: 6px;
    font-size: 12px;
  }

  .page-symbol .sym-quote {
    padding: 0;
    gap: 7px;
  }

  .page-symbol .sym-price {
    font-size: 25px;
  }

  .page-symbol .sym-delta {
    gap: 4px;
    font-size: 12px;
  }

  .page-symbol #btn-star {
    min-width: 72px;
    min-height: 35px;
  }

  .page-symbol .sym-chart-card {
    padding: 8px;
    border-radius: 13px;
  }

  .page-symbol .chart-head {
    margin-bottom: 7px;
  }

  .page-symbol .tf-toggle .pill {
    min-width: 36px;
    min-height: 28px;
    padding: 5px 8px;
  }

  .page-symbol .chart-wrap,
  .page-symbol #chart-canvas {
    min-height: 300px;
  }

  .page-symbol .ip-quick {
    gap: 5px;
    flex-wrap: nowrap;
  }

  .page-symbol .ip-item {
    min-width: 0;
    flex: 1 1 0;
    gap: 4px;
  }

  .page-symbol .ip-label {
    font-size: 7px;
  }

  .page-symbol .ip-badge {
    min-width: 0;
    padding: 5px 7px;
    font-size: 11px;
    white-space: nowrap;
  }

  .page-symbol .sym-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .page-symbol .sym-side > .card {
    padding: 10px;
    border-radius: 12px;
  }

  .page-symbol .signals-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 5px;
  }

  .page-symbol .signals-row .badge,
  .page-symbol .signals-row .btn-pill {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .page-symbol .signals-row .btn-pill {
    justify-content: center;
  }

  .page-symbol .sym-metrics {
    margin: 8px 0;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 5px;
  }

  .page-symbol .metric {
    padding: 8px;
    border-radius: 9px;
  }

  .page-symbol .m-label {
    font-size: 7px;
  }

  .page-symbol .m-value {
    font-size: 11px;
  }

  /* Alerts become compact cards rather than a horizontally scrolling table. */
  .page-symbol .card.alerts-card {
    max-width: none;
    overflow: visible;
  }

  .page-symbol .alerts-row--head {
    display: none;
  }

  .page-symbol .alerts-table {
    width: 100%;
    padding: 6px;
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    box-sizing: border-box;
  }

  .page-symbol .alerts-row:not(.alerts-row--msg) {
    position: relative;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr)) 32px;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 10px;
    background: rgba(255,255,255,.022);
  }

  .page-symbol .alerts-row:not(.alerts-row--msg) > div {
    padding: 0;
    font-size: 11px;
  }

  .page-symbol .alerts-row:not(.alerts-row--msg) > div:first-child {
    grid-column: 1 / -1;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: #718477;
    font-size: 10px;
  }

  .page-symbol .alerts-row:not(.alerts-row--msg) > div:nth-child(2)::before,
  .page-symbol .alerts-row:not(.alerts-row--msg) > div:nth-child(3)::before,
  .page-symbol .alerts-row:not(.alerts-row--msg) > div:nth-child(4)::before {
    display: block;
    margin-bottom: 3px;
    color: #687b6f;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .page-symbol .alerts-row:not(.alerts-row--msg) > div:nth-child(2)::before { content: "Entry"; }
  .page-symbol .alerts-row:not(.alerts-row--msg) > div:nth-child(3)::before { content: "Stop"; }
  .page-symbol .alerts-row:not(.alerts-row--msg) > div:nth-child(4)::before { content: "Target"; }

  .page-symbol .alerts-row--msg {
    width: calc(100% - 8px);
    margin: -1px 4px 7px;
    display: block !important;
    border: 1px solid rgba(255,255,255,.045);
    border-top: 0;
    border-radius: 0 0 9px 9px;
    background: rgba(255,255,255,.014);
  }

  .page-symbol .alerts-row--msg > div {
    width: 100%;
    max-width: none !important;
    padding: 8px 9px 9px;
    box-sizing: border-box;
    font-size: 11px;
    line-height: 1.5;
  }

  /* If an alert has no message, still leave breathing room before the next one. */
  .page-symbol .alerts-row:not(.alerts-row--msg):has(+ .alerts-row:not(.alerts-row--msg)) {
    margin-bottom: 7px;
  }

  .page-symbol #pc-modal .row {
    display: grid;
    gap: 8px;
  }

  .page-symbol #pc-modal .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .page-symbol #pc-modal .card {
    float: none !important;
    margin: 0 !important;
  }
}

@media (max-width: 390px) {
  .page-symbol .sym-metrics {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .page-symbol .signals-row {
    grid-template-columns: 1fr;
  }
}