.sr-page {
  --sr-card: var(--card-bg, #fffdf6);
  --sr-line: var(--border, #e2d0a0);
  --sr-line-soft: var(--border-faint, #efe4c6);
  --sr-muted: var(--text-muted, #8a7444);
  --sr-head: var(--text, #4a3618);
  --sr-up: var(--up, #c23c38);
  --sr-down: var(--down, #2e8b57);
  --sr-gold: var(--brand-gradient, linear-gradient(135deg, #c9a24d, #8a6a2c));
  --sr-shadow: 0 5px 14px rgba(90, 70, 20, 0.1);
  max-width: 1280px;
  margin: 0 auto;
  padding: 4px 0 8px;
}

.sr-hd {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.sr-hd-text {
  min-width: 0;
}
.sr-logo {
  width: 76px;
  height: 76px;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(90, 70, 20, 0.3);
  flex: 0 0 auto;
}
.sr-hd-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--sr-head);
  line-height: 1.25;
}
.sr-hd-stamp {
  font-size: 11.5px;
  color: var(--sr-muted);
  font-weight: 500;
  padding-right: 92px;
}

.sr-dir {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--sr-card);
  border: 1px solid var(--sr-line);
  box-shadow: var(--sr-shadow);
}
.sr-dir-btn {
  position: relative;
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--sr-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease;
}
.sr-dir-btn + .sr-dir-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: var(--sr-line);
}
.sr-dir-btn.is-on::before,
.sr-dir-btn.is-on + .sr-dir-btn::before {
  opacity: 0;
}
.sr-dir-btn:hover {
  color: var(--sr-head);
}
.sr-dir-btn.is-on {
  color: var(--on-accent, #fff);
}
.sr-dir-btn[data-direction="bull"].is-on {
  background: var(--sr-up);
  box-shadow: 0 2px 7px rgba(194, 60, 56, 0.34);
}
.sr-dir-btn[data-direction="bear"].is-on {
  background: var(--sr-down);
  box-shadow: 0 2px 7px rgba(23, 129, 79, 0.34);
}
:root[data-theme="dark"] .sr-dir-btn.is-on {
  color: #17120a;
}

.sr-sel {
  position: relative;
  margin-bottom: 14px;
  z-index: 6;
}
.sr-sel-clip {
  overflow: hidden;
}
.sr-sel-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}
.sr-sel-tag {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--sr-muted);
  white-space: nowrap;
}
.sr-sel-split {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: var(--sr-line);
}
.sr-sel-chips {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}
.sr-cat-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--accent, #b07d16);
  color: var(--on-accent, #fff);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 9px rgba(138, 106, 44, 0.32);
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}
.sr-cat-pill:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(138, 106, 44, 0.4);
}
.sr-cat-caret {
  font-style: normal;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.18s ease;
}
.sr-cat-pill[aria-expanded="true"] .sr-cat-caret {
  transform: rotate(180deg);
}
.sr-cat-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 30;
  min-width: 152px;
  max-width: 100%;
  padding: 5px;
  border-radius: 14px;
  background: var(--sr-card);
  border: 1px solid var(--sr-line);
  box-shadow: 0 14px 28px rgba(60, 45, 12, 0.24);
  animation: sr-menu-in 140ms ease-out backwards;
}
.sr-cat-menu[hidden] {
  display: none;
}
.sr-cat-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sr-head);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sr-cat-opt + .sr-cat-opt {
  margin-top: 2px;
}
.sr-cat-opt:hover {
  background: var(--sr-line-soft);
}
.sr-cat-opt.is-on {
  background: var(--accent, #b07d16);
  color: var(--on-accent, #fff);
}
.sr-cat-opt-name {
  white-space: nowrap;
}
.sr-cat-opt-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--sr-muted);
  white-space: nowrap;
}
.sr-cat-opt.is-on .sr-cat-opt-count {
  color: var(--on-accent, #fff);
  opacity: 0.82;
}
@keyframes sr-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sr-cat-menu {
    animation: none;
  }
  .sr-cat-caret {
    transition: none;
  }
}
.sr-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--sr-card);
  border: 1px solid var(--sr-line);
  color: var(--sr-muted);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.sr-chip:hover {
  color: var(--sr-head);
}
.sr-chip.is-on {
  background: var(--accent, #b07d16);
  color: var(--on-accent, #fff);
  border-color: transparent;
  box-shadow: 0 3px 9px rgba(138, 106, 44, 0.32);
}
@media (max-width: 412px) {
  .sr-sel-row,
  .sr-sel-chips {
    gap: 5px;
  }
  .sr-sel-tag {
    font-size: 10.5px;
    letter-spacing: 0.5px;
  }
  .sr-cat-pill {
    padding: 7px 9px;
    font-size: 12px;
  }
  .sr-chip {
    padding: 7px 8px;
    font-size: 11.5px;
  }
}
@media (max-width: 340px) {
  .sr-sel-row,
  .sr-sel-chips {
    gap: 4px;
  }
  .sr-cat-pill {
    padding: 7px 8px;
    font-size: 11.5px;
  }
  .sr-chip {
    padding: 7px 6px;
    font-size: 11px;
  }
}

.sr-hero {
  background: var(--sr-card);
  border: 1px solid var(--sr-line);
  border-radius: 18px;
  padding: 14px 12px;
  margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(90, 70, 20, 0.12);
}
.sr-hero-title {
  font-size: 16.5px;
  font-weight: 900;
  color: var(--sr-head);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0;
}
.sr-hero-sub {
  font-size: 11.5px;
  color: var(--sr-muted);
  margin: 3px 0 10px;
}

.sr-twrap {
  overflow-x: auto;
}
.sr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sr-table thead th {
  background: var(--bg-alt, rgba(201, 169, 97, 0.14));
  padding: 7px 4px;
  font-weight: 800;
  color: var(--sr-head);
  border-bottom: 2px solid var(--border-strong, #c9a24d);
  white-space: nowrap;
}
.sr-table tbody td {
  padding: 7px 4px;
  text-align: center;
  border-bottom: 1px solid var(--sr-line-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sr-head);
}
.sr-table tbody tr.is-open {
  background: var(--hot-row-bg, rgba(201, 169, 97, 0.1));
}
.sr-table td.sr-lk {
  color: var(--sr-muted);
  letter-spacing: 1px;
}
.sr-table td.sr-tl,
.sr-table th.sr-tl {
  text-align: left;
  padding-left: 8px;
}
.sr-up {
  color: var(--sr-up);
  font-weight: 700;
}
.sr-down {
  color: var(--sr-down);
  font-weight: 700;
}
.sr-cell2 b {
  display: block;
  font-size: 12.5px;
  line-height: 1.3;
}
.sr-cell2 small {
  display: block;
  font-size: 10.5px;
  color: var(--sr-muted);
  font-variant-numeric: tabular-nums;
}
.sr-table a {
  color: inherit;
  text-decoration: none;
}
.sr-table a:hover {
  text-decoration: underline;
}

.sr-tdesk {
  display: none;
}
.sr-tmob {
  display: block;
}
@media (min-width: 768px) {
  .sr-tdesk {
    display: block;
  }
  .sr-tmob {
    display: none;
  }
}

.sr-cards {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .sr-cards {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
@media (min-width: 1100px) {
  .sr-cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.sr-card {
  background: var(--sr-card);
  border: 1px solid var(--sr-line);
  border-radius: 14px;
  padding: 11px 12px;
  box-shadow: var(--sr-shadow);
  min-width: 0;
}
.sr-ct {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.sr-sid {
  color: var(--accent, #8a6a2c);
  font-weight: 800;
  font-size: 13px;
}
.sr-nm {
  font-weight: 900;
  font-size: 15.5px;
  color: var(--sr-head);
}
.sr-pr {
  margin-left: auto;
  text-align: right;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sr-head);
}
.sr-quote {
  text-align: right;
}
.sr-pdate {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sr-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sr-ct.is-locked {
  justify-content: center;
  margin: 2px 0 8px;
}
.sr-lockpill {
  background: var(--sr-gold);
  color: var(--on-accent, #fff);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 16px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(138, 106, 44, 0.4);
  text-decoration: none;
  display: inline-block;
}
.sr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 7px;
}
.sr-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 97, 0.55);
  background: linear-gradient(180deg, #fffdf4, #f4e6c9);
  color: var(--sr-muted);
  box-shadow: inset 0 1px 0 #fffef7, 0 1px 2px rgba(90, 70, 20, 0.12);
  white-space: nowrap;
  flex: 0 0 auto;
}
.sr-tag-heat {
  background: linear-gradient(180deg, #ffe9b8, #f4c96a);
  border-color: #b5563a;
  color: #6d3417;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(150, 80, 40, 0.28);
}
.sr-tag-rev_up {
  background: linear-gradient(180deg, #fdeceb, #f7d9d7);
  border-color: rgba(194, 60, 56, 0.5);
  color: var(--sr-up);
}
.sr-tag-rev_down {
  background: linear-gradient(180deg, #e9f5ee, #d6ebdf);
  border-color: rgba(46, 139, 87, 0.5);
  color: var(--sr-down);
}
.sr-tag-thin {
  background: linear-gradient(180deg, #f4f1e8, #e6e1d3);
  border-color: rgba(122, 112, 90, 0.4);
  color: #6f6650;
}
.sr-tag-sm {
  font-size: 9.5px;
  padding: 3px 7px;
}
.sr-appear-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(169, 130, 47, 0.55);
  background: linear-gradient(180deg, #fffdf4, #f0e0bd);
  color: #7a5a1e;
  box-shadow: inset 0 1px 0 #fffef7, 0 1px 2px rgba(90, 70, 20, 0.12);
  white-space: nowrap;
  flex: 0 0 auto;
}
.sr-simple .sr-tag-sm {
  margin-left: -2px;
}

.sr-klabel,
.sr-plabel {
  font-size: 11px;
  color: var(--sr-muted);
  margin: 5px 0 3px;
  font-weight: 600;
}
.sr-appear {
  font-size: 11px;
  color: var(--sr-muted);
  margin: 0 0 5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.sr-plabel b {
  font-size: 12px;
}
.sr-kwrap,
.sr-pwrap {
  line-height: 0;
  background: linear-gradient(180deg, #fffdf4, #f4e6c9);
  border: 1px solid rgba(201, 169, 97, 0.55);
  border-radius: 12px;
  padding: 8px 6px 6px;
  box-shadow: inset 0 1px 0 #fffef7, 0 2px 8px rgba(122, 90, 30, 0.12);
}
.sr-pwrap {
  margin-top: 6px;
}
.sr-kwrap.is-blur svg {
  filter: blur(7px);
}
.sr-card a.sr-card-link {
  text-decoration: none;
  color: inherit;
}
.sr-card a.sr-card-link:hover .sr-nm {
  text-decoration: underline;
}

.sr-grid {
  stroke: #c9a961;
  stroke-width: 0.6;
  opacity: 0.4;
}
.sr-axis {
  stroke: #c9a961;
  stroke-width: 0.5;
  opacity: 0.55;
}
.sr-zero {
  stroke: #c9a961;
  stroke-width: 1;
  opacity: 0.65;
}
.sr-axis-label {
  fill: var(--sr-muted);
  font-size: 8.5px;
}
.sr-k-up {
  stroke: var(--sr-up);
  fill: var(--sr-up);
}
.sr-k-down {
  stroke: var(--sr-down);
  fill: var(--sr-down);
}
.sr-bar-up {
  fill: var(--sr-up);
}
.sr-bar-down {
  fill: var(--sr-down);
}
.sr-bar-last {
  fill: var(--watch-fg, #e0501f);
}
/* 營收年增率柱：歷史根壓低透明度、當月那根拉到滿，顏色走全站漲跌代幣。 */
.sr-rev-bar {
  fill: var(--sr-up);
  fill-opacity: 0.46;
}
.sr-rev-bar.is-down {
  fill: var(--sr-down);
}
.sr-rev-bar.sr-rev-live {
  fill-opacity: 0.95;
}
.sr-rev-zero {
  stroke: var(--sr-line);
  stroke-width: 0.9;
  stroke-opacity: 0.9;
}
.sr-rev-mean {
  stroke: #a9822f;
  stroke-width: 1;
  stroke-opacity: 0.85;
  stroke-dasharray: 3 2.4;
}
:root[data-theme="dark"] .sr-rev-mean {
  stroke: #d9b869;
}

/* 三大法人三色刻意不用漲跌代幣：同圖並置會被讀成「這一腿是漲還是跌」。 */
.sr-chip-zero {
  stroke: var(--sr-line);
  stroke-width: 0.9;
  stroke-opacity: 0.9;
}
.sr-chip-f {
  fill: #2f6fb0;
  fill-opacity: 0.62;
}
.sr-chip-t {
  fill: #a9822f;
  fill-opacity: 0.68;
}
.sr-chip-d {
  fill: #6b7280;
  fill-opacity: 0.62;
}
.sr-chip-f.is-live,
.sr-chip-t.is-live,
.sr-chip-d.is-live {
  fill-opacity: 1;
}
:root[data-theme="dark"] .sr-chip-f {
  fill: #6aa6e0;
}
:root[data-theme="dark"] .sr-chip-t {
  fill: #d9b869;
}
:root[data-theme="dark"] .sr-chip-d {
  fill: #9aa4b2;
}
.sr-trust-bar {
  fill: var(--sr-up);
  fill-opacity: 0.32;
}
.sr-trust-bar.is-down {
  fill: var(--sr-down);
}
.sr-trust-bar.is-streak {
  fill-opacity: 0.95;
}

/* 吸籌雙線刻意不用漲跌代幣：這張圖比的是形狀不是漲跌。 */
.sr-acc-net {
  stroke: #a9822f;
  stroke-width: 1.6;
  fill: none;
}
.sr-acc-price {
  stroke: var(--sr-muted);
  stroke-width: 1.1;
  fill: none;
  stroke-opacity: 0.85;
}
.sr-acc-band {
  fill: var(--sr-muted);
  fill-opacity: 0.16;
}
:root[data-theme="dark"] .sr-acc-net {
  stroke: #d9b869;
}

.sr-branch-bar {
  fill: var(--sr-up);
  fill-opacity: 0.3;
}
.sr-branch-bar.is-down {
  fill: var(--sr-down);
}
.sr-branch-bar.is-lead {
  fill-opacity: 0.92;
}
.sr-branch-name {
  font-size: 8.6px;
  font-weight: 600;
  fill: var(--sr-muted);
  dominant-baseline: auto;
}
.sr-branch-name.is-lead {
  fill: var(--sr-head);
  font-weight: 700;
}

.sr-ghost {
  stroke: var(--sr-muted);
  fill: none;
  stroke-width: 1.4;
  opacity: 0.55;
}
.sr-sigmark {
  fill: none;
  stroke: #a9822f;
  stroke-width: 1.1;
  stroke-linejoin: round;
  opacity: 0.9;
}
.sr-sigmark.is-now {
  fill: #a9822f;
  stroke: #7a5a1e;
  opacity: 1;
}
.sr-k-hit {
  fill: rgba(201, 162, 77, 0.3);
  stroke: rgba(122, 90, 30, 0.75);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.sr-bb-edge,
.sr-bb-mid {
  fill: none;
  stroke: #2f5d8c;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sr-bb-edge {
  stroke-opacity: 0.42;
  stroke-width: 0.8;
}
.sr-bb-edge.sr-bb-live {
  stroke-opacity: 0.68;
  stroke-width: 1;
}
.sr-bb-mid {
  stroke-opacity: 0.32;
  stroke-width: 0.7;
  stroke-dasharray: 3 2.4;
}
.sr-bb-halo {
  fill: none;
  stroke: #fffdf4;
  stroke-width: 2.8;
  stroke-opacity: 0.95;
}
.sr-bb-ring {
  fill: none;
  stroke: #d2401a;
  stroke-width: 1.8;
}
.sr-bb-core {
  fill: #d2401a;
  stroke: none;
}
/* 均線三色線與副圖：與布林軌道同一條理由，K 線底板在五個主題都是同一塊米色，
   線條與圈點一律用固定色，不借主題 token（深色主題的琥珀畫在米色上會糊掉）。 */
.sr-ma5,
.sr-ma20,
.sr-ma60 {
  fill: none;
  stroke-width: 0.85;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-opacity: 0.82;
}
.sr-ma5 {
  stroke: #c2622a;
}
.sr-ma20 {
  stroke: #2f7d5d;
}
.sr-ma60 {
  stroke: #2f5d8c;
}
.sr-ma-ring {
  fill: none;
  stroke: #7a5a1e;
  stroke-width: 1.8;
}
.sr-ma-core {
  fill: #7a5a1e;
  stroke: none;
}
.sr-sub-line {
  fill: none;
  stroke: #2f5d8c;
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sr-sub-base {
  stroke: #a9822f;
  stroke-width: 0.8;
  stroke-opacity: 0.6;
  stroke-dasharray: 3 2.4;
}
.sr-sub-ref {
  fill: none;
  stroke: #a9822f;
  stroke-width: 0.9;
  stroke-opacity: 0.75;
  stroke-linejoin: round;
  stroke-dasharray: 3 2.4;
}
.sr-sub-ring {
  fill: none;
  stroke: #d2401a;
  stroke-width: 1.8;
}
.sr-sub-core {
  fill: #d2401a;
  stroke: none;
}
.sr-ma-cross {
  stroke-width: 1.15;
  stroke-opacity: 0.92;
}
.sr-run-bull,
.sr-run-bear {
  stroke-width: 0.9;
  stroke-dasharray: 3 2.4;
}
.sr-run-bull {
  fill: rgba(194, 98, 42, 0.13);
  stroke: rgba(184, 87, 31, 0.5);
}
.sr-run-bear {
  fill: rgba(47, 93, 140, 0.13);
  stroke: rgba(47, 93, 140, 0.5);
}
.sr-vol-bar {
  fill: #8a6a2c;
  fill-opacity: 0.4;
}
.sr-vol-bar.sr-vol-live {
  fill: #d2401a;
  fill-opacity: 0.95;
}


.sr-bt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: linear-gradient(135deg, rgba(201, 162, 77, 0.10), rgba(138, 106, 44, 0.05));
  border: 1px solid var(--sr-line);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 2px 0 12px;
}
.sr-bt-tag {
  flex: 0 0 auto;
  background: linear-gradient(135deg, #c9a24d, #8a6a2c);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  margin-top: 1px;
  white-space: nowrap;
}
.sr-bt-text {
  font-size: 12px;
  line-height: 1.65;
  color: var(--sr-muted);
  min-width: 0;
}
.sr-mkt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin: 2px 0 12px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--sr-line);
  background: linear-gradient(135deg, rgba(201, 162, 77, 0.1), rgba(138, 106, 44, 0.05));
}
.sr-mkt-tag {
  flex: 0 0 auto;
  background: linear-gradient(135deg, #c9a24d, #8a6a2c);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.sr-mkt-val {
  flex: 0 0 auto;
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.sr-mkt-note {
  font-size: 11.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--sr-muted);
  min-width: 0;
}
.sr-datalag {
  font-size: 11.5px;
  color: var(--sr-muted);
  background: color-mix(in srgb, var(--sr-warn, #b8860b) 12%, transparent);
  border-radius: 8px;
  padding: 5px 10px;
  margin: 4px 0 8px;
}
.sr-simple-list {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .sr-simple-list {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
@media (min-width: 1100px) {
  .sr-simple-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.sr-simple {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, rgba(201, 169, 97, 0.14), rgba(201, 169, 97, 0) 60%), var(--sr-card);
  border: 1px solid var(--sr-line);
  border-radius: 13px;
  padding: 9px 11px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(90, 70, 20, 0.09);
  color: var(--sr-head);
  min-width: 0;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sr-simple::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sr-line);
}
.sr-simple.is-up::before {
  background: var(--sr-up);
}
.sr-simple.is-down::before {
  background: var(--sr-down);
}
a.sr-simple:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 22px rgba(90, 70, 20, 0.2);
  border-color: rgba(201, 169, 97, 0.8);
}
.sr-s-top,
.sr-s-bot {
  display: flex;
  align-items: center;
  min-width: 0;
}
.sr-s-top {
  gap: 4px 8px;
  flex-wrap: wrap;
}
.sr-s-bot {
  gap: 9px;
}
.sr-simple .sr-rank {
  background: linear-gradient(145deg, #f8e8bb 0%, #dcb867 40%, #a9822f 74%, #eed9a4 100%);
  color: #4a3618;
  font-size: 11.5px;
  font-weight: 800;
  min-width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(150, 116, 48, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 2px rgba(122, 90, 30, 0.4),
    0 1px 3px rgba(122, 90, 30, 0.32);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.sr-simple .sr-name {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.sr-mask {
  color: var(--sr-muted);
  letter-spacing: 1.5px;
  font-weight: 700;
}
.sr-simple .sr-quote {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.sr-s-snap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(201, 169, 97, 0.5);
}
.sr-s-pat {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.sr-pat-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--sr-head);
  border-bottom: 1px dashed rgba(169, 130, 47, 0.75);
  padding-bottom: 1px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.sr-pat-link i {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--sr-muted);
  flex: 0 0 auto;
}
.sr-pat-link:hover,
.sr-pat-link:focus-visible {
  color: var(--accent, #8a6218);
  border-bottom-color: currentColor;
}
.sr-pat-link:hover i,
.sr-pat-link:focus-visible i {
  color: inherit;
}
.sr-pat-link:focus-visible {
  outline: 2px solid var(--accent, #8a6218);
  outline-offset: 3px;
  border-radius: 3px;
}
.sr-pat-mask {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-pat-rel {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 3px rgba(60, 45, 15, 0.28);
}
.sr-pat-rel.is-high {
  background: linear-gradient(135deg, #b8912f, #7a5a1e);
}
.sr-pat-rel.is-medium {
  background: linear-gradient(135deg, #8d94a0, #5b6270);
}
.sr-pat-rel.is-low {
  background: linear-gradient(135deg, #a49c8f, #6e675c);
}
.sr-spark {
  flex: 1 1 60px;
  min-width: 0;
  line-height: 0;
  background: linear-gradient(180deg, #fffdf4, #f4e6c9);
  border: 1px solid rgba(201, 169, 97, 0.55);
  border-radius: 8px;
  padding: 3px 4px;
  box-shadow: inset 0 1px 0 #fffef7;
}
.sr-spark svg {
  display: block;
  width: 100%;
  height: 30px;
}
.sr-spark.is-empty {
  height: 38px;
}
.sr-spark.is-blur svg {
  filter: blur(3.5px);
}
.sr-kmini {
  padding: 4px 5px 3px;
}
.sr-kmini svg {
  height: 84px;
}
.sr-kmini.is-blur svg {
  filter: blur(4.5px);
}
.sr-kmini .sr-grid {
  opacity: 0.3;
}
.sr-kmini .sr-sigmark {
  stroke-width: 0.85;
}
.sr-kmini:not(.is-blur) svg {
  overflow: visible;
}
/* 副圖：與上方 K 線同一個外框、同寬、同一條日期軸，只是矮一截。 */
.sr-kmini svg.sr-sub {
  height: 44px;
  margin-top: 3px;
}
/* 分點橫條圖是五列帶字的清單，44px 裡每列只有 6px、名字會互相壓住。 */
.sr-kmini svg.sr-sub.sr-branchsub {
  height: 78px;
}
.sr-revsnap {
  flex: 0 0 auto;
  padding: 3px 4px 2px;
}
/* .sr-spark svg 的 30px 是迷你走勢線的高度，13 根柱子擠在裡面看不出起伏。 */
.sr-revsnap svg {
  height: 64px;
}
.sr-ksnap {
  flex: 0 0 auto;
  padding: 3px 4px 2px;
}
.sr-ksnap svg {
  height: 52px;
}
.sr-ksnap .sr-grid {
  opacity: 0.26;
}
.sr-sp-line {
  fill: none;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sr-sp-base {
  stroke: rgba(122, 90, 30, 0.38);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.sr-sp-dot {
  stroke: none;
}
.sr-sp-line.sr-sp-up {
  stroke: var(--sr-up);
}
.sr-sp-dot.sr-sp-up {
  fill: var(--sr-up);
}
.sr-sp-line.sr-sp-down {
  stroke: var(--sr-down);
}
.sr-sp-dot.sr-sp-down {
  fill: var(--sr-down);
}
.sr-sp-line.sr-sp-ghost {
  stroke: var(--sr-muted);
}
.sr-sp-dot.sr-sp-ghost {
  fill: var(--sr-muted);
}
.sr-sp-a.sr-sp-up,
.sr-sp-b.sr-sp-up {
  stop-color: var(--sr-up);
}
.sr-sp-a.sr-sp-down,
.sr-sp-b.sr-sp-down {
  stop-color: var(--sr-down);
}
.sr-sp-a.sr-sp-ghost,
.sr-sp-b.sr-sp-ghost {
  stop-color: var(--sr-muted);
}
.sr-sp-a {
  stop-opacity: 0.34;
}
.sr-sp-b {
  stop-opacity: 0.02;
}
.sr-volgrp {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sr-simple .sr-vol {
  color: var(--sr-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sr-volbar {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.25);
  box-shadow: inset 0 1px 1px rgba(122, 90, 30, 0.18);
  overflow: hidden;
  flex: 0 0 auto;
}
.sr-volbar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8d296, #a9822f);
}

.sr-panel-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}
.sr-panel-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--sr-head);
  margin: 0;
}
.sr-rev-line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
  color: var(--sr-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-rev-line b {
  font-weight: 800;
  color: var(--sr-head);
  font-variant-numeric: tabular-nums;
}
.sr-chip-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--sr-muted);
  font-variant-numeric: tabular-nums;
}
.sr-chip-line i {
  font-style: normal;
  white-space: nowrap;
}
.sr-chip-leg b,
.sr-chip-streak b {
  font-weight: 800;
  margin-right: 3px;
}
.sr-chip-leg.sr-chip-f b {
  color: #2f6fb0;
}
.sr-chip-leg.sr-chip-t b {
  color: #a9822f;
}
.sr-chip-leg.sr-chip-d b {
  color: #6b7280;
}
:root[data-theme="dark"] .sr-chip-leg.sr-chip-f b {
  color: #6aa6e0;
}
:root[data-theme="dark"] .sr-chip-leg.sr-chip-t b {
  color: #d9b869;
}
:root[data-theme="dark"] .sr-chip-leg.sr-chip-d b {
  color: #9aa4b2;
}
.sr-chip-sum,
.sr-chip-streak {
  font-weight: 800;
  color: var(--sr-head);
}
.sr-chip-streak b {
  color: #a9822f;
  font-size: 13px;
}
:root[data-theme="dark"] .sr-chip-streak b {
  color: #d9b869;
}
.sr-chip-branch {
  color: var(--sr-head);
  font-weight: 700;
}
.sr-chip-branch b {
  color: #a9822f;
  font-weight: 800;
  margin-right: 4px;
}
:root[data-theme="dark"] .sr-chip-branch b {
  color: #d9b869;
}
.sr-rev-legend {
  color: #a9822f;
  font-weight: 700;
}
:root[data-theme="dark"] .sr-rev-legend {
  color: #d9b869;
}
.sr-panel-learn {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sr-muted);
  border-bottom: 1px dashed rgba(169, 130, 47, 0.7);
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.sr-panel-learn:hover,
.sr-panel-learn:focus-visible {
  color: var(--accent, #8a6218);
  border-bottom-color: currentColor;
}
.sr-panel-learn:focus-visible {
  outline: 2px solid var(--accent, #8a6218);
  outline-offset: 3px;
  border-radius: 3px;
}
.sr-panel-desc {
  font-size: 11.5px;
  color: var(--sr-muted);
  margin: 0 0 10px;
}
.sr-note,
.sr-empty,
.sr-loading {
  font-size: 11.5px;
  color: var(--sr-muted);
  margin-top: 10px;
  line-height: 1.7;
}
.sr-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--sr-gold);
  color: var(--on-accent, #fff);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(138, 106, 44, 0.35);
}

.sr-ssr .sv-table-wrap {
  overflow-x: auto;
}

@media (max-width: 400px) {
  .sr-hero {
    padding: 12px 8px;
    border-radius: 14px;
  }
  .sr-table {
    font-size: 11px;
  }
  .sr-table thead th,
  .sr-table tbody td {
    padding: 6px 2px;
  }
  .sr-cell2 b {
    font-size: 11.5px;
  }
  .sr-cell2 small {
    font-size: 10px;
  }
  .sr-hd-title {
    font-size: 19px;
  }
  .sr-logo {
    width: 66px;
    height: 66px;
  }
  .sr-hd-stamp {
    padding-right: 84px;
  }
  .sr-dir-btn {
    padding: 5px 11px;
    font-size: 12px;
  }
  .sr-simple {
    padding: 8px 9px 9px 13px;
    gap: 6px;
  }
  .sr-simple .sr-name {
    font-size: 12.5px;
  }
  .sr-simple .sr-quote {
    font-size: 11px;
  }
  .sr-simple .sr-vol {
    font-size: 10.5px;
  }
  .sr-volbar {
    width: 34px;
  }
  .sr-spark svg {
    height: 26px;
  }
  .sr-kmini svg {
    height: 72px;
  }
  .sr-kmini svg.sr-sub {
    height: 40px;
  }
  .sr-kmini svg.sr-sub.sr-branchsub {
    height: 74px;
  }
  .sr-kmini {
    padding: 3px 4px 2px;
  }
  .sr-ksnap svg {
    height: 46px;
  }
  .sr-revsnap svg {
    height: 56px;
  }
  .sr-s-snap {
    gap: 4px;
    padding-top: 7px;
  }
  .sr-tag {
    font-size: 9px;
    padding: 3px 7px;
  }
  .sr-tag-sm {
    font-size: 9px;
    padding: 2px 6px;
  }
  .sr-appear {
    font-size: 10.5px;
  }
  .sr-appear-pill {
    font-size: 9px;
    padding: 2px 6px;
  }
  .sr-s-pat {
    gap: 6px;
  }
  .sr-pat-link {
    font-size: 11.5px;
  }
  .sr-pat-rel {
    font-size: 9px;
    padding: 2px 6px;
  }
  .sr-pat-mask {
    font-size: 11.5px;
  }
}
html.sr-js .sr-ssr {
  display: none;
}
html.sr-js #sr-body:has(.sr-ssr)::before {
  content: "起漲雷達資料載入中…";
  display: block;
  font-size: 11.5px;
  color: var(--sr-muted);
  margin-top: 10px;
  line-height: 1.7;
}
.sr-spark-axis,
.sr-pwrap-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.2;
  color: var(--sr-muted);
  font-variant-numeric: tabular-nums;
}
.sr-spark-axis i,
.sr-pwrap-axis i {
  font-style: normal;
}
/* 圖例極簡：夾在起訖日中間的一小顆，不多佔一列（版面永遠只有那一行日期軸）。 */
.sr-ma-key {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.sr-ma-key b {
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.6;
  padding: 0 4px;
  border-radius: 4px;
  color: #fffdf4;
}
.sr-ma-k5 {
  background: #c2622a;
}
.sr-ma-k20 {
  background: #2f7d5d;
}
.sr-ma-k60 {
  background: #2f5d8c;
}
.sr-sub-cap {
  font-size: 8.5px;
  letter-spacing: 0.01em;
  opacity: 0.85;
  white-space: nowrap;
}
.sr-pwrap-axis {
  margin-top: 3px;
  padding: 0 7px;
  font-size: 9.5px;
}
.sr-sp-mark {
  fill: #fffdf4;
  stroke: #a9822f;
  stroke-width: 1.4;
}

.sr-legend {
  background: var(--sr-card);
  border: 1px solid var(--sr-line);
  border-radius: 12px;
  margin: -4px 0 14px;
  box-shadow: var(--sr-shadow);
  overflow: hidden;
}
.sr-legend-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 13px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #3d2f14;
  background: linear-gradient(180deg, #fffdf4, #f4e6c9);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sr-legend-title::-webkit-details-marker {
  display: none;
}
.sr-legend-title::after {
  content: "\25BE";
  font-size: 11px;
  line-height: 1;
  color: #8a6d2f;
  transition: transform 0.18s ease;
}
.sr-legend[open] .sr-legend-title::after {
  transform: rotate(180deg);
}
.sr-legend-title:hover {
  color: #8a5a1c;
}
.sr-legend-list {
  list-style: none;
  margin: 0;
  padding: 10px 13px 12px;
  border-top: 1px solid var(--sr-line-soft);
  display: grid;
  gap: 8px;
}
.sr-legend-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.sr-legend-list .sr-tag,
.sr-legend-list .sr-appear-pill,
.sr-legend-list .sr-legend-mark {
  margin-top: 1px;
  min-width: 62px;
  justify-content: center;
}
/* 圖說的記號欄：卡面上的線色與副圖名稱，寬度與上面幾顆標籤對齊成同一欄。 */
.sr-legend-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #5b4a22;
}
.sr-legend-def {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--sr-muted);
  min-width: 0;
}

.sr-tip {
  position: fixed;
  z-index: 90;
  max-width: 240px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(169, 130, 47, 0.8);
  background: linear-gradient(180deg, #fffdf4, #f6ead0);
  color: var(--sr-head);
  font-size: 11.5px;
  line-height: 1.65;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(90, 70, 20, 0.3), inset 0 1px 0 #fffef7;
  pointer-events: none;
}

@media (max-width: 400px) {
  .sr-legend-title {
    padding: 8px 10px;
    font-size: 12px;
  }
  .sr-legend-list {
    padding: 9px 10px 11px;
  }
  .sr-legend-def {
    font-size: 11px;
  }
  .sr-legend-list .sr-tag,
  .sr-legend-list .sr-appear-pill {
    min-width: 56px;
  }
  .sr-tip {
    max-width: 216px;
    font-size: 11px;
  }
  .sr-pwrap-axis {
    font-size: 9px;
    padding: 0 4px;
  }
}

.sr-carry {
  display: flex;
  align-items: stretch;
  gap: 11px;
  margin: 2px 0 12px;
  padding: 10px 13px;
  border-radius: 12px;
  border: 1px solid rgba(169, 130, 47, 0.85);
  background: linear-gradient(135deg, rgba(201, 162, 77, 0.2), rgba(138, 106, 44, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px rgba(90, 70, 20, 0.12);
}
.sr-carry-date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 4px 8px;
  border-radius: 10px;
  background: linear-gradient(145deg, #f8e8bb 0%, #dcb867 42%, #a9822f 76%, #eed9a4 100%);
  border: 1px solid rgba(150, 116, 48, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 3px rgba(122, 90, 30, 0.3);
}
.sr-carry-date b {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.05;
  color: #4a3618;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.sr-carry-date i {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6b5020;
}
.sr-carry-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sr-carry-title {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--sr-head);
}
.sr-carry-note {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--sr-muted);
  font-weight: 500;
}

.sr-tp {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, rgba(201, 169, 97, 0.14), rgba(201, 169, 97, 0) 60%), var(--sr-card);
  border: 1px solid var(--sr-line);
  border-radius: 13px;
  padding: 9px 11px 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(90, 70, 20, 0.09);
  color: var(--sr-head);
  min-width: 0;
}
.sr-tp::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sr-line);
}
.sr-tp.is-up::before {
  background: var(--sr-up);
}
.sr-tp.is-down::before {
  background: var(--sr-down);
}
.sr-tp .sr-rank {
  background: linear-gradient(145deg, #f8e8bb 0%, #dcb867 40%, #a9822f 74%, #eed9a4 100%);
  color: #4a3618;
  font-size: 11.5px;
  font-weight: 800;
  min-width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(150, 116, 48, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 2px rgba(122, 90, 30, 0.4),
    0 1px 3px rgba(122, 90, 30, 0.32);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.sr-tp .sr-name {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
a.sr-tp-name {
  color: var(--sr-head);
  text-decoration: none;
}
a.sr-tp-name:hover {
  text-decoration: underline;
}
.sr-tp .sr-quote {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.sr-tp-sum {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(201, 162, 77, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.45);
}
.sr-tp-sum b {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sr-tp-gap {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sr-tp-src {
  font-size: 11px;
  font-weight: 600;
  color: var(--sr-muted);
  margin-left: auto;
  white-space: nowrap;
}
.sr-tp-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed rgba(201, 169, 97, 0.5);
}
.sr-tp-list.is-blur {
  filter: blur(2.6px);
  opacity: 0.62;
  user-select: none;
}
.sr-tp-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sr-tp-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 7px;
  min-width: 0;
}
.sr-tp-inst {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-tp-tier {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(150, 116, 48, 0.45);
  background: rgba(255, 253, 246, 0.75);
  color: var(--sr-muted);
}
.sr-tp-tier.is-L1 {
  background: linear-gradient(135deg, #c9a24d, #8a6a2c);
  border-color: transparent;
  color: #fff;
}
.sr-tp-tier.is-L2 {
  background: rgba(201, 162, 77, 0.28);
  color: #6b5020;
}
.sr-tp-price {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sr-tp-delta {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sr-tp-when {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
  white-space: nowrap;
}
.sr-tp-when,
.sr-tp-more {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sr-muted);
}
a.sr-tp-head,
span.sr-tp-head {
  display: block;
  font-size: 11.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--sr-muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
a.sr-tp-head i {
  font-style: normal;
  padding-left: 3px;
  color: var(--accent, #b07d16);
}
a.sr-tp-head:hover {
  color: var(--sr-head);
  text-decoration: underline;
}

@media (max-width: 400px) {
  .sr-carry {
    gap: 9px;
    padding: 9px 10px;
  }
  .sr-carry-date {
    min-width: 54px;
    padding: 3px 6px;
  }
  .sr-carry-date b {
    font-size: 19px;
  }
  .sr-carry-title {
    font-size: 12.5px;
  }
  .sr-carry-note {
    font-size: 11px;
  }
  .sr-mkt {
    gap: 4px 7px;
    padding: 7px 10px;
  }
  .sr-mkt-val {
    font-size: 14.5px;
  }
  .sr-mkt-note {
    font-size: 11px;
  }
  .sr-tp {
    padding: 9px 9px 10px 12px;
  }
  .sr-tp-sum {
    padding: 6px 8px;
  }
  .sr-tp-sum b {
    font-size: 13px;
  }
  .sr-tp-src {
    margin-left: 0;
  }
  .sr-tp-inst {
    max-width: 100%;
  }
}

.sr-etf {
  position: relative;
  overflow: hidden;
  background: linear-gradient(158deg, rgba(201, 169, 97, 0.14), rgba(201, 169, 97, 0) 60%), var(--sr-card);
  border: 1px solid var(--sr-line);
  border-radius: 13px;
  padding: 9px 11px 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(90, 70, 20, 0.09);
  color: var(--sr-head);
  min-width: 0;
}
.sr-etf::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sr-line);
}
.sr-etf.is-up::before {
  background: var(--sr-up);
}
.sr-etf.is-down::before {
  background: var(--sr-down);
}
.sr-etf .sr-rank {
  background: linear-gradient(145deg, #f8e8bb 0%, #dcb867 40%, #a9822f 74%, #eed9a4 100%);
  color: #4a3618;
  font-size: 11.5px;
  font-weight: 800;
  min-width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(150, 116, 48, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 2px rgba(122, 90, 30, 0.4),
    0 1px 3px rgba(122, 90, 30, 0.32);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.sr-etf .sr-name {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
a.sr-etf-title {
  color: var(--sr-head);
  text-decoration: none;
}
a.sr-etf-title:hover {
  text-decoration: underline;
}
.sr-etf .sr-quote {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.sr-etf-sum {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(201, 162, 77, 0.12);
  border: 1px solid rgba(201, 169, 97, 0.45);
}
.sr-etf-sum b {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sr-etf-total {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sr-etf-stamp {
  font-size: 11px;
  font-weight: 600;
  color: var(--sr-dim);
  margin-left: auto;
  white-space: nowrap;
}
.sr-etf-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px dashed rgba(201, 169, 97, 0.5);
}
.sr-etf-list.is-blur {
  filter: blur(2.6px);
  opacity: 0.62;
  user-select: none;
}
.sr-etf-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-width: 0;
}
.sr-etf-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.sr-etf-name {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15em;
}
.sr-etf-id {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--sr-dim);
  font-variant-numeric: tabular-nums;
}
.sr-etf-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 9px;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sr-etf-w,
.sr-etf-amt {
  color: var(--sr-dim);
  font-weight: 600;
}
.sr-etf-follow {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--sr-dim);
  display: flex;
  gap: 5px;
}
.sr-etf-follow i {
  font-style: normal;
  flex: 0 0 auto;
}

@media (max-width: 420px) {
  .sr-etf {
    padding: 9px 9px 10px 12px;
  }
  .sr-etf-sum {
    padding: 6px 8px;
  }
  .sr-etf-sum b {
    font-size: 13px;
  }
  .sr-etf-stamp {
    margin-left: 0;
    white-space: normal;
  }
  .sr-etf-meta {
    margin-left: 0;
  }
  .sr-etf-name {
    max-width: 100%;
  }
}

.sr-ai-tag {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--on-accent, #fff);
  background: var(--sr-gold);
  flex: 0 0 auto;
}
.sr-panel-title .sr-ai-tag {
  vertical-align: 2px;
}

.sr-rz-list {
  gap: 10px;
}
@media (min-width: 1100px) {
  .sr-rz-list {
    grid-template-columns: 1fr 1fr;
  }
}
.sr-rz-card .sr-spark {
  width: 100%;
  flex: 0 0 auto;
}
.sr-rz-hits {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--on-accent, #fff);
  background: var(--sr-gold);
  box-shadow: 0 2px 5px rgba(138, 106, 44, 0.32);
  font-variant-numeric: tabular-nums;
}

.sr-rzk {
  padding: 4px 5px 3px;
}
.sr-rzk svg {
  display: block;
  width: 100%;
  height: auto;
}
.sr-rzk .sr-grid {
  opacity: 0.3;
}
.sr-rzl {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-opacity: 0.9;
}
.sr-rzl-ma5 {
  stroke-width: 1.3;
}
.sr-rzl-ma20 {
  stroke-width: 1;
  stroke-dasharray: 5 2.6;
}
.sr-rzl-bb {
  stroke-width: 0.85;
  stroke-dasharray: 4 2;
  stroke-opacity: 0.72;
}
.sr-rzl-bbmid {
  stroke-width: 0.75;
  stroke-dasharray: 1.2 2.6;
  stroke-opacity: 0.55;
}
.sr-rzm,
.sr-rzd {
  stroke: #fffdf4;
  stroke-width: 0.5;
  stroke-linejoin: round;
}
.sr-rzc1 {
  stroke: #c2622a;
}
.sr-rzc2 {
  stroke: #1f7a55;
}
.sr-rzc3 {
  stroke: #2f5d8c;
}
.sr-rzc4 {
  stroke: #7d4a9c;
}
.sr-rzf1 {
  fill: #c2622a;
}
.sr-rzf2 {
  fill: #1f7a55;
}
.sr-rzf3 {
  fill: #2f5d8c;
}
.sr-rzf4 {
  fill: #7d4a9c;
}

.sr-rz-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sr-rz-badge {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.sr-rz-badge.is-bull {
  color: var(--sr-up);
  background: rgba(194, 60, 56, 0.11);
  border-color: rgba(194, 60, 56, 0.4);
}
.sr-rz-badge.is-bear {
  color: var(--sr-down);
  background: rgba(46, 139, 87, 0.12);
  border-color: rgba(46, 139, 87, 0.42);
}
.sr-rz-sw {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.sr-rzs1 {
  background: #c2622a;
}
.sr-rzs2 {
  background: #1f7a55;
}
.sr-rzs3 {
  background: #2f5d8c;
}
.sr-rzs4 {
  background: #7d4a9c;
}
.sr-rz-ai {
  display: block;
  position: relative;
  padding: 9px 10px 9px 11px;
  border-radius: 10px;
  background: rgba(201, 169, 97, 0.12);
  border: 1px dashed rgba(169, 130, 47, 0.55);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--sr-head);
}
.sr-rz-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 14px 24px;
  border-radius: 15px;
  border: 1px dashed rgba(169, 130, 47, 0.6);
  background: rgba(201, 169, 97, 0.09);
}
.sr-rz-lock-text {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sr-muted);
  text-align: center;
}
@media (max-width: 420px) {
  .sr-rz-card .sr-quote {
    margin-left: 0;
  }
}

.sr-rz-span {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sr-rz-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 10px;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--sr-muted);
}
.sr-rz-lg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.sr-rz-lgk {
  width: 13px;
  height: 3px;
  border-radius: 2px;
  flex: 0 0 auto;
}
/* 圖例色塊的形狀對齊圖上真的畫出來的那一種：虛線、三線帶、三角、圓點。 */
.sr-rz-lgk.is-ma20 {
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6.4px);
  mask-image: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 6.4px);
}
.sr-rz-lgk.is-bb {
  height: 9px;
  border-radius: 1px;
  -webkit-mask-image: linear-gradient(180deg, #000 0 1.6px, transparent 1.6px 3.7px, #000 3.7px 5.3px, transparent 5.3px 7.4px, #000 7.4px 9px);
  mask-image: linear-gradient(180deg, #000 0 1.6px, transparent 1.6px 3.7px, #000 3.7px 5.3px, transparent 5.3px 7.4px, #000 7.4px 9px);
}
.sr-rz-lgk.is-tri {
  width: 9px;
  height: 7px;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.sr-rz-lgk.is-triup {
  width: 9px;
  height: 7px;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.sr-rz-lgk.is-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.sr-rz-lgk.is-k {
  width: 11px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sr-up) 0 50%, var(--sr-down) 50% 100%);
}
.sr-rz-lgk.is-hit {
  width: 11px;
  height: 9px;
  border-radius: 2px;
  background: rgba(201, 162, 77, 0.3);
  border: 1px dashed rgba(122, 90, 30, 0.75);
}

.sr-rz-subs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sr-rz-sub {
  display: block;
  line-height: 0;
  padding: 4px 5px 3px;
  border-radius: 8px;
  border: 1px solid rgba(201, 169, 97, 0.55);
  background: linear-gradient(180deg, #fffdf4, #f4e6c9);
  box-shadow: inset 0 1px 0 #fffef7;
}
.sr-rz-subcap {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-bottom: 2px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--sr-muted);
}
.sr-rz-subcap .sr-rz-sw {
  margin-right: 0;
}
.sr-rz-subnote {
  font-style: normal;
  font-weight: 600;
  opacity: 0.82;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-rz-sub svg {
  display: block;
  width: 100%;
  height: 44px;
}
@media (max-width: 420px) {
  .sr-rz-sub svg {
    height: 40px;
  }
}
.sr-rz-sublg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 9px;
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.5;
  color: var(--sr-muted);
}
/* 以下每一條的色值與線型都對齊子圖 SVG 裡同一個元素的樣式，改一邊要改兩邊。 */
.sr-rz-lgk.is-instf,
.sr-rz-lgk.is-instt,
.sr-rz-lgk.is-instd,
.sr-rz-lgk.is-tbuy,
.sr-rz-lgk.is-tsell,
.sr-rz-lgk.is-pbuy,
.sr-rz-lgk.is-psell,
.sr-rz-lgk.is-volbar,
.sr-rz-lgk.is-accband {
  width: 9px;
  height: 8px;
  border-radius: 1px;
}
.sr-rz-lgk.is-instf {
  background: rgba(47, 111, 176, 0.62);
}
.sr-rz-lgk.is-instt {
  background: rgba(169, 130, 47, 0.68);
}
.sr-rz-lgk.is-instd {
  background: rgba(107, 114, 128, 0.62);
}
:root[data-theme="dark"] .sr-rz-lgk.is-instf {
  background: rgba(106, 166, 224, 0.62);
}
:root[data-theme="dark"] .sr-rz-lgk.is-instt {
  background: rgba(217, 184, 105, 0.68);
}
:root[data-theme="dark"] .sr-rz-lgk.is-instd {
  background: rgba(154, 164, 178, 0.62);
}
.sr-rz-lgk.is-tbuy {
  background: var(--sr-up);
  opacity: 0.38;
}
.sr-rz-lgk.is-tsell {
  background: var(--sr-down);
  opacity: 0.38;
}
.sr-rz-lgk.is-pbuy {
  background: var(--sr-up);
}
.sr-rz-lgk.is-psell {
  background: var(--sr-down);
}
.sr-rz-lgk.is-volbar {
  background: rgba(138, 106, 44, 0.4);
}
.sr-rz-lgk.is-accband {
  background: var(--sr-muted);
  opacity: 0.16;
}
.sr-rz-lgk.is-subline {
  background: #2f5d8c;
}
.sr-rz-lgk.is-accnet {
  background: #a9822f;
}
:root[data-theme="dark"] .sr-rz-lgk.is-accnet {
  background: #d9b869;
}
.sr-rz-lgk.is-accprice {
  background: var(--sr-muted);
  opacity: 0.85;
}
.sr-rz-lgk.is-vollive {
  width: 9px;
  height: 8px;
  border-radius: 1px;
  background: rgba(210, 64, 26, 0.95);
}
.sr-rz-lgk.is-subtip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1.6px solid #d2401a;
}
.sr-rz-lgk.is-subbase,
.sr-rz-lgk.is-subref {
  background: #a9822f;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5.4px);
  mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 5.4px);
}