/* Phone (≤640px) layout mirroring the WarrantScope App. Desktop keeps market-v2.html's own rules. */

.mobile-market-header,
.mm-rank-tabs,
.mm-broker-toolbar,
.mm-stock-title,
.mm-star-icon,
.mobile-only-text {
  display: none;
}

@media (max-width: 640px) {
  body {
    --mm-gutter: 16px;
    --mm-header: 56px;
    --mm-toolbar: 52px;
    --mm-gold-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  }

  /* App §37: light theme secondary text is darker for contrast. */
  body:not(.dark-mode) {
    --muted: #53657f;
    --faint: #5a6d86;
  }

  .mobile-only-text {
    display: inline;
  }

  .desktop-only-text {
    display: none;
  }

  .num {
    font-variant-numeric: tabular-nums;
  }

  /* ---------- Shared market header (App §19) ---------- */
  .topbar {
    min-height: var(--mm-header);
    height: var(--mm-header);
    padding: 0 4px 0 var(--mm-gutter);
    gap: 8px;
    border-bottom: 1px solid var(--line-soft);
    box-shadow: none;
  }

  .topbar .brand-mark,
  .topbar .ws-search.mobile-header-search {
    display: none !important;
  }

  .top-actions {
    flex: 0 0 auto;
  }

  .mobile-market-header {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 100%;
  }

  .mmh-mark {
    flex: 0 0 auto;
    width: 3px;
    height: 20px;
    background: var(--accent);
  }

  .mmh-title {
    flex: 0 0 auto;
    color: var(--text);
    font-size: 20px;
    font-weight: 800;
    line-height: 28px;
    white-space: nowrap;
  }

  .mmh-help,
  .mm-help-dot {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0.8px solid #34465d;
    border-radius: 50%;
    background: transparent;
    color: #8291a5;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }

  body:not(.dark-mode) .mmh-help,
  body:not(.dark-mode) .mm-help-dot {
    border-color: var(--line);
    color: var(--muted);
  }

  /* 22px circle, 44px touch target. */
  .mmh-help::after,
  .mm-help-dot::after {
    position: absolute;
    inset: -11px;
    content: "";
  }

  .mmh-help[hidden] {
    display: none;
  }

  .mmh-updated {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mmh-search {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c9deff;
  }

  body:not(.dark-mode) .mmh-search {
    color: var(--accent);
  }

  .mmh-search svg,
  .mm-icon-button svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Titles, dates and help that now live in the header. */
  #viewMonitor .page-head-title,
  #viewMonitor #stageHelp,
  #viewMainRank .mr-rank-title,
  #viewMainRank #mrSideSeg,
  #viewMainRank .mr-rank-head > .page-head-meta,
  #viewBrokerCapability .bc-title,
  #viewProfitLoss .pnl-head-copy h2,
  #viewDiscover .discover-page-head {
    display: none !important;
  }

  .page {
    padding: 0 var(--mm-gutter) 36px;
  }

  #viewMonitor > .page-head {
    padding-top: 16px;
  }

  #viewMonitor .page-head-side {
    display: block;
  }

  #viewBrokerCapability > .page-head {
    padding-top: 16px;
  }

  /* ---------- Sliding equal-width segments (App §30) ---------- */
  .seg.mm-sliding-seg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--mm-seg-count, 3), minmax(0, 1fr));
    isolation: isolate;
  }

  .seg.mm-sliding-seg::before {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    z-index: -1;
    width: calc((100% - 8px) / var(--mm-seg-count, 3));
    border-radius: 8px;
    background: var(--accent);
    content: "";
    transform: translateX(calc(100% * var(--mm-seg-index, 0)));
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .seg.mm-sliding-seg .seg-item,
  .seg.mm-sliding-seg .seg-item.is-active {
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .seg.mm-sliding-seg::before {
      transition: none;
    }
  }

  /* ---------- Watch list section header (App §21) ---------- */
  #viewMonitor .watch-panel,
  #viewMarketSearch .watch-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #viewMonitor .watch-panel-head {
    display: flex;
    align-items: center;
    height: 44px;
    margin: 8px calc(var(--mm-gutter) * -1) 0;
    padding: 0 var(--mm-gutter);
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
  }

  #viewMonitor .watch-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
  }

  #viewMonitor .watch-panel-title::before {
    width: 3px;
    height: 16px;
    background: var(--accent);
    content: "";
  }

  #viewMonitor .watch-panel-count {
    min-width: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: "Manrope", "Noto Sans TC", sans-serif;
    font-size: 12px;
    font-weight: 800;
  }

  #viewMonitor .watch-panel-count::after {
    content: "檔";
  }

  #viewMonitor .watch-row {
    width: calc(100% + var(--mm-gutter) * 2);
    max-width: none;
    margin-inline: calc(var(--mm-gutter) * -1);
    padding-inline: var(--mm-gutter);
    border-radius: 0;
  }

  /* The list is its own screen on phones, so it has no selected row (App §31). */
  #viewMonitor .watch-row.is-active,
  #viewMarketSearch .ws-row.is-active {
    border-left-color: transparent !important;
    background: transparent;
    box-shadow: none;
  }

  #viewMonitor .watch-row.is-active::before,
  #viewMarketSearch .ws-row.is-active::before {
    display: none;
  }

  #viewMonitor .watch-panel-count {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
  }
  /* ---------- Stock detail: toolbar and open layout (App §15–18) ---------- */
  body.mm-detail-open .topbar {
    display: none;
  }

  body.mm-detail-open .page {
    padding-top: 0;
  }

  .market-grid.show-detail .mobile-focus-card-shell {
    overflow: visible !important;
    margin: 0 calc(var(--mm-gutter) * -1) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .market-grid.show-detail .mobile-detail-actions {
    position: sticky;
    top: 0;
    z-index: 1200;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    height: var(--mm-toolbar);
    min-height: var(--mm-toolbar) !important;
    padding: 0 4px !important;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg);
    transition: transform 200ms ease;
  }

  body.market-chrome-hidden .market-grid.show-detail .mobile-detail-actions {
    transform: translateY(-100%);
    pointer-events: none;
  }

  .mobile-back-bar,
  .mobile-favorite-bar {
    display: inline-grid !important;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--accent);
    font-size: 0 !important;
  }

  .mobile-back-bar .mm-desktop-label {
    display: none;
  }

  .mobile-back-bar svg,
  .mm-star-icon svg,
  .mm-toolbar-back svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mm-star-icon {
    display: inline-grid;
    color: var(--accent);
  }

  .mm-star-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
  }

  .mobile-favorite-bar.is-starred .mm-star-icon svg {
    fill: currentColor;
  }

  .mm-stock-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .market-grid.show-detail .mobile-focus-card-shell > .focus-card {
    padding: 0;
    box-shadow: none;
  }

  /* Quote block (App §18): price | change, then close date | data note. */
  .market-grid.show-detail .focus-hero {
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas:
      "price change"
      "date note"
      "readout readout";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 12px var(--mm-gutter) !important;
  }

  /* OHLC + MA rows live inside the hero; a full-bleed rule separates them from the quote. */
  .market-grid.show-detail .focus-readout {
    grid-area: readout;
    margin: 10px calc(var(--mm-gutter) * -1) 0;
    padding: 12px var(--mm-gutter) 0;
    border-top: 1px solid var(--line-soft);
  }

  .market-grid.show-detail .focus-hero-main,
  .market-grid.show-detail .focus-title-block,
  .market-grid.show-detail .focus-quote {
    display: contents;
  }

  .market-grid.show-detail .focus-title,
  .market-grid.show-detail .focus-reason,
  .market-grid.show-detail .focus-hero .pill-button {
    display: none !important;
  }

  .market-grid.show-detail .focus-price {
    grid-area: price;
    justify-self: start;
    width: auto;
    text-align: left;
    font-size: 34px !important;
    font-weight: 800;
    line-height: 40px;
  }

  .market-grid.show-detail .focus-change {
    grid-area: change;
    justify-self: end;
    font-size: 18px !important;
    font-weight: 800;
    line-height: 24px;
    white-space: nowrap;
  }

  .market-grid.show-detail .focus-quote-date {
    grid-area: date;
    color: var(--muted);
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
  }

  .market-grid.show-detail #chartDataStatus {
    grid-area: note;
    justify-self: end;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--faint);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Chart legend (App §17): no title or hint; two justified rows. */
  .market-grid.show-detail .chart-area {
    padding: 0 var(--mm-gutter) !important;
  }

  .market-grid.show-detail .chart-card-head,
  .market-grid.show-detail .chart-title-row,
  .market-grid.show-detail #dailyLegend .cl-hint {
    display: none !important;
  }

  .market-grid.show-detail .chart-ohlc-legend,
  .market-grid.show-detail #dailyLegend {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 8px;
    row-gap: 4px;
    min-height: 20px;
    margin: 0;
    font-size: 13.12px;
    line-height: 20px;
  }

  .market-grid.show-detail #dailyLegend {
    align-items: center;
    margin: 4px 0 0;
  }

  .market-grid.show-detail .chart-ohlc-legend .ohlc-date {
    color: var(--accent);
    font-family: "Manrope", "Noto Sans TC", sans-serif;
    font-weight: 800;
  }

  .market-grid.show-detail .chart-ohlc-legend .ohlc-field.is-locked {
    display: none;
  }

  .market-grid.show-detail .chart-ohlc-legend .ohlc-field {
    display: inline-flex;
    gap: 4px;
    color: var(--muted);
  }

  .market-grid.show-detail .chart-ohlc-legend strong,
  .market-grid.show-detail #dailyLegend strong {
    font-family: "Manrope", "Noto Sans TC", sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
  }

  .market-grid.show-detail .chart-ohlc-legend .ohlc-field strong:not(.price-up):not(.price-down) {
    color: var(--muted);
  }

  .market-grid.show-detail #dailyLegend .ma-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
  }

  .market-grid.show-detail #dailyLegend .ma-item strong {
    color: var(--text);
  }

  .market-grid.show-detail #dailyLegend .ma-swatch {
    width: 12px;
    height: 2px;
    border-radius: 0;
  }

  /* Broker ranking block: open, full-bleed (App §15, §24). */
  .market-grid.show-detail .broker-card,
  .market-grid.show-detail .tg-scan-card,
  .market-grid.show-detail .trades-card {
    margin: 0 calc(var(--mm-gutter) * -1) !important;
    padding: 16px var(--mm-gutter) !important;
    border: 0 !important;
    border-top: 1px solid var(--line-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .market-grid.show-detail .broker-head-title h2 {
    font-size: 18px !important;
    font-weight: 800;
  }

  /* ---------- 主力排行 買超／賣超 tabs (App §25) ---------- */
  .mm-underline-tabs {
    display: flex;
    margin: 0 calc(var(--mm-gutter) * -1);
    border-bottom: 1px solid var(--line-soft);
  }

  .mm-underline-tabs > button {
    flex: 1 1 0;
    position: relative;
    height: 44px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
  }

  .mm-underline-tabs > button.is-active {
    color: var(--accent);
  }

  .mm-underline-tabs > button.is-active::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: currentColor;
    content: "";
  }

  .mm-rank-tabs > button.is-buy.is-active {
    color: var(--up);
  }

  .mm-rank-tabs > button.is-sell.is-active {
    color: #64799e;
  }

  #viewMainRank .mm-rank-tabs {
    display: flex;
  }

  #viewMainRank .mr-rank-head {
    display: block;
    padding-top: 12px;
  }

  #viewMainRank .mr-rank-card {
    padding: 8px 0 10px !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* ---------- Toolbars and full screens (App §28 PageToolbar) ---------- */
  .mm-toolbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    height: var(--mm-toolbar);
    padding: 0 4px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg);
  }

  .mm-toolbar-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mm-toolbar-side {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
  }

  .mm-icon-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
  }

  .mm-screen {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    opacity: 0;
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease;
  }

  .mm-screen-from-bottom {
    transform: translateY(100%);
  }

  .mm-screen-from-right {
    transform: translateX(100%);
  }

  .mm-screen.is-open {
    opacity: 1;
    transform: none;
  }

  .mm-screen > .mm-toolbar {
    flex: 0 0 auto;
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--mm-toolbar) + env(safe-area-inset-top, 0px));
  }

  .mm-screen-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--mm-gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  }

  body.mm-screen-open {
    overflow: hidden;
  }

  /* Bottom sheets (Modal `slide`) and dialogs (Modal `fade`). */
  .mm-sheet-layer,
  .mm-dialog-layer,
  .mm-help-layer {
    position: fixed;
    inset: 0;
    z-index: 1500;
  }

  .mm-sheet-backdrop,
  .mm-help-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    opacity: 0;
    transition: opacity 200ms ease;
  }

  body:not(.dark-mode) .mm-sheet-backdrop {
    background: rgba(8, 20, 38, 0.42);
  }

  .mm-help-backdrop {
    background: transparent;
  }

  .is-open > .mm-sheet-backdrop {
    opacity: 1;
  }

  .mm-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 48px);
    padding: 0 var(--mm-gutter) calc(16px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: var(--panel);
    transform: translateY(100%);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .is-open > .mm-sheet {
    transform: none;
  }

  .mm-sheet-grip {
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--line);
  }

  .mm-sheet-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    margin: 0 -12px;
  }

  .mm-sheet-head::before {
    content: "";
  }

  .mm-sheet-title {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    text-align: center;
  }

  .mm-sheet-body {
    min-height: 0;
    overflow-y: auto;
  }

  .mm-dialog {
    position: absolute;
    top: 50%;
    right: 28px;
    left: 28px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--panel);
    color: var(--text);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 180ms ease;
  }

  .mm-dialog-layer::before {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    content: "";
  }

  .mm-dialog-layer.is-open .mm-dialog {
    opacity: 1;
  }

  .mm-dialog p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
  }

  .mm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .mm-button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
  }

  .mm-button.is-primary {
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
  }

  .mm-button.is-danger {
    border-color: color-mix(in srgb, var(--up) 30%, transparent);
    color: var(--up);
  }

  .mm-button:disabled {
    opacity: 0.45;
  }

  .mm-help-card {
    position: absolute;
    right: 14px;
    left: 14px;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--panel);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .mm-help-layer.is-open .mm-help-card {
    opacity: 1;
  }

  .mm-help-title {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
  }

  .mm-help-body,
  .mm-help-body p,
  .mm-help-body li {
    color: var(--muted);
    font-size: 13px;
    line-height: 22px;
  }

  .mm-help-body h4 {
    margin: 10px 0 2px;
    color: var(--text);
    font-size: 13px;
  }

  .mm-help-body ul {
    margin: 0;
    padding-left: 18px;
  }

  .mm-help-body p {
    margin: 0 0 6px;
  }

  @media (prefers-reduced-motion: reduce) {
    .mm-screen,
    .mm-sheet,
    .mm-sheet-backdrop,
    .mm-dialog,
    .mm-help-card {
      transition: none;
    }
  }

  /* ---------- Bottom dock (App §38) ---------- */
  body.dark-mode .market-mobile-bottom-nav {
    border-color: rgba(132, 158, 190, 0.14);
    background: #0e131b;
  }

  body.dark-mode .market-mobile-bottom-item {
    color: #93a2b7;
  }

  body.dark-mode .market-mobile-bottom-item.is-active {
    color: #e3bd70;
  }

  /* 分點分析 page (App §28–29). */
  body.mm-broker-page .topbar {
    display: none;
  }

  #viewBrokerBranch .mm-broker-toolbar {
    position: sticky;
    top: 0;
    z-index: 1200;
    display: grid;
    margin: 0 calc(var(--mm-gutter) * -1);
    transition: transform 200ms ease;
  }

  body.market-chrome-hidden #viewBrokerBranch .mm-broker-toolbar {
    transform: translateY(-100%);
    pointer-events: none;
  }

  .mm-broker-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .mm-broker-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #viewBrokerBranch > nav[aria-label="分點頁導覽"],
  #viewBrokerBranch > .bb-hero {
    display: none !important;
  }

  /* ---------- Daily K as an open table (App §39) ---------- */
  #dailyWrap {
    position: relative;
    margin: 0 calc(var(--mm-gutter) * -1);
  }

  #dailyWrap > .chart-legend,
  #dailyWrap .chart-volume-head {
    padding-right: var(--mm-gutter);
    padding-left: var(--mm-gutter);
  }

  #dailyWrap .chart-flex > .chart-axis,
  #dailyChartNavigator {
    display: none !important;
  }

  #dailyWrap .chart-flex > .chart-body {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 0 18px 0 30px;
  }

  /* Volume sits right under the candles and is shorter than the flow plot (App 2026-09-27). */
  #dailyWrap .chart-flex + .chart-volume-head {
    margin: 4px 0 2px;
    padding-top: 6px;
  }

  #dailyWrap #dailyVolumeSvg {
    height: 42px !important;
  }

  /* The price plot owns every drag (pan / zoom / crosshair); volume and flow let vertical drags scroll the page. */
  #candleSvg,
  #dailyWrap .mm-kline-price {
    touch-action: none;
  }

  #dailyVolumeSvg,
  #flowSvg {
    touch-action: pan-y;
  }

  .mm-kline-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .mm-kline-grid {
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--line);
  }

  .mm-kline-tick {
    position: absolute;
    left: 4px;
    color: var(--faint);
    font-family: "Manrope", "Noto Sans TC", sans-serif;
    font-size: 9.6px;
    line-height: 12px;
  }

  .mm-kline-extreme {
    position: absolute;
    z-index: 2;
    font-family: "Manrope", "Noto Sans TC", sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 13px;
    white-space: nowrap;
  }

  .mm-kline-keys {
    position: absolute;
    right: 10px;
    z-index: 3;
    display: flex;
    gap: 4px;
  }

  .mm-kline-keys[hidden] {
    display: none;
  }

  .mm-kline-keys button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    /* Translucent so the candles behind stay visible (App 2026-09-27). */
    background: rgba(16, 21, 31, 0.55);
    color: var(--text);
  }

  body:not(.dark-mode) .mm-kline-keys button {
    background: rgba(255, 255, 255, 0.6);
  }

  .mm-kline-keys button::after {
    position: absolute;
    inset: -7px -2px;
    content: "";
  }

  .mm-kline-keys button:disabled {
    opacity: 0.35;
  }

  .mm-kline-keys svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mm-kline-keys [data-kline-key="latest"] svg {
    width: 15px;
    height: 15px;
  }
}