body.stock-kline-open {
  overflow: hidden;
}

.stock-kline-screen {
  --kline-bg: #111719;
  --kline-panel: #050606;
  --kline-edge: #30383c;
  --kline-muted: #9aa5aa;
  --kline-text: #f4f7f8;
  --kline-accent: #078c72;
  position: fixed;
  inset: 0;
  /* The shared stock-detail shell is 3210 and its action dialogs end at 3320.
     K-Line is the next full-screen destination, so it must own the hit-testing
     layer as well as the visible layer. */
  z-index: 3500;
  display: none;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--kline-bg);
  color: var(--kline-text);
  overscroll-behavior: none;
}

.stock-kline-screen.is-open {
  display: grid;
}

.stock-kline-screen button,
.stock-kline-screen canvas {
  -webkit-tap-highlight-color: transparent;
}

.stock-kline-topbar {
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(44px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px clamp(12px, 2.2vw, 28px);
  border-bottom: 1px solid #30383c;
  background: #202628;
}

.stock-kline-close,
.stock-kline-latest {
  min-height: 38px;
  border: 1px solid #536066;
  border-radius: 9px;
  background: #2b3336;
  color: var(--kline-text);
  font-weight: 750;
}

.stock-kline-close {
  width: 42px;
  padding: 0;
  font-size: 31px;
  line-height: 1;
}

.stock-kline-latest {
  padding: 0 14px;
}

.stock-kline-identity {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.stock-kline-identity > strong {
  overflow: hidden;
  font-size: clamp(18px, 2.5vw, 25px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-kline-quote {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: #ff5364;
  font: 800 clamp(14px, 2.1vw, 21px)/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
}

.stock-kline-quote small { font-size: 0.7em; }
.stock-kline-quote .down { color: #00e676; }

.stock-kline-toolbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid #293033;
  background: #171c1e;
}

.stock-kline-control-group {
  display: flex;
  gap: 4px;
}

.stock-kline-control-group button,
.stock-kline-indicator-tabs button {
  min-height: 36px;
  border: 1px solid #374247;
  border-radius: 7px;
  padding: 0 15px;
  background: #242b2e;
  color: #c9d0d3;
  font-weight: 800;
}

.stock-kline-control-group button.is-active,
.stock-kline-indicator-tabs button.is-active {
  border-color: #12a58a;
  background: var(--kline-accent);
  color: #fff;
}

.stock-kline-panel {
  min-height: 0;
  width: min(100%, 1600px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--kline-panel);
}

.stock-kline-surface {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(190px, 1fr) auto auto minmax(78px, 19%) auto minmax(98px, 23%);
  touch-action: none;
  user-select: none;
}

.stock-kline-price-host,
.stock-kline-volume-host,
.stock-kline-indicator-host {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.stock-kline-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.stock-kline-surface.is-dragging .stock-kline-canvas {
  cursor: grabbing;
}

.stock-kline-surface.is-crosshair-active .stock-kline-canvas {
  cursor: crosshair;
}

.stock-kline-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--kline-muted);
  pointer-events: none;
}

.stock-kline-state[hidden] {
  display: none;
}

.stock-kline-state.is-error {
  color: #ff8290;
}

.stock-kline-price-footer,
.stock-kline-pane-head {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border-top: 1px solid #2d3438;
  border-bottom: 1px solid #242a2d;
  background: #111517;
}

.stock-kline-price-footer {
  justify-content: space-between;
}

.stock-kline-price-footer small {
  color: var(--kline-muted);
  white-space: nowrap;
}

.stock-kline-legend,
.stock-kline-indicator-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 20px);
  font: 750 clamp(12px, 1.5vw, 17px)/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
}

.stock-kline-legend > b,
.stock-kline-pane-head > b {
  color: #fff;
}

.stock-kline-legend .ma5 { color: #f4df20; }
.stock-kline-legend .ma10 { color: #00cbe8; }
.stock-kline-legend .ma20 { color: #b227f4; }

.stock-kline-pane-head > span {
  font: 750 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.stock-kline-pane-head.is-indicator {
  justify-content: flex-start;
  min-height: 43px;
}

.stock-kline-indicator-tabs {
  display: flex;
  gap: 4px;
}

.stock-kline-indicator-tabs button {
  min-height: 31px;
  padding: 0 12px;
}

.stock-kline-indicator-summary span:nth-child(1) { color: #f4df20; }
.stock-kline-indicator-summary span:nth-child(2) { color: #00cbe8; }
.stock-kline-indicator-summary span:nth-child(3) { color: #ff5364; }

.stock-kline-crosshair {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 68px;
  width: min(320px, calc(100% - 92px));
  padding: 10px 12px;
  border: 1px solid #647077;
  border-radius: 8px;
  background: rgba(10, 13, 14, 0.94);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.34);
  color: var(--kline-text);
  pointer-events: none;
}

.stock-kline-crosshair[hidden] { display: none; }
.stock-kline-crosshair.align-left { right: auto; left: 10px; }
.stock-kline-crosshair > div,
.stock-kline-crosshair p { display: flex; flex-wrap: wrap; gap: 7px 13px; margin: 0; }
.stock-kline-crosshair > div { justify-content: space-between; margin-bottom: 7px; }
.stock-kline-crosshair p + p { margin-top: 6px; }
.stock-kline-crosshair span { white-space: nowrap; }
.stock-kline-crosshair i { color: var(--kline-muted); font-style: normal; }
.stock-kline-crosshair .up { color: #ff5364; }
.stock-kline-crosshair .down { color: #00e676; }

.stock-kline-navigation {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 7px 12px;
  border-top: 1px solid #30383c;
  background: #202628;
  touch-action: pan-y;
  user-select: none;
}

.stock-kline-navigation button {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: center;
  column-gap: 8px;
  border: 1px solid #435158;
  border-radius: 9px;
  background: #2a3336;
  color: #f2f6f7;
}

.stock-kline-navigation button > span {
  grid-row: 1 / 3;
  align-self: center;
  color: #40bda5;
  font-size: 23px;
}

.stock-kline-navigation button small { font-weight: 800; }
.stock-kline-navigation button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-kline-navigation button:disabled { opacity: 0.42; }
.stock-kline-navigation > p { align-self: center; margin: 0; color: #aeb8bc; font-size: 12px; line-height: 1.25; text-align: center; }
.stock-kline-navigation > p small { color: #6f7b80; }

@media (max-width: 680px) and (orientation: portrait) {
  .stock-kline-topbar { min-height: 58px; gap: 7px; padding-inline: 8px; }
  .stock-kline-close { width: 36px; min-height: 36px; }
  .stock-kline-latest { min-height: 35px; padding-inline: 8px; font-size: 12px; }
  .stock-kline-identity { display: grid; gap: 1px; justify-items: center; }
  .stock-kline-identity strong { font-size: 17px; }
  .stock-kline-quote { font-size: 14px; }
  .stock-kline-toolbar { min-height: 47px; gap: 6px; padding: 5px 6px; }
  .stock-kline-control-group { flex: 1 1 auto; gap: 3px; }
  .stock-kline-control-group button { min-width: 0; min-height: 34px; flex: 1 1 auto; padding-inline: 7px; font-size: 12px; }
  .stock-kline-surface { grid-template-rows: minmax(230px, 1fr) auto auto minmax(82px, 18%) auto minmax(104px, 21%); }
  .stock-kline-price-footer { display: block; min-height: 48px; padding: 5px 8px; }
  .stock-kline-price-footer small { display: block; margin-top: 4px; font-size: 10px; text-align: right; }
  .stock-kline-legend { justify-content: space-between; gap: 4px; font-size: 11px; }
  .stock-kline-pane-head { min-height: 32px; padding: 4px 8px; }
  .stock-kline-pane-head.is-indicator { min-height: 39px; gap: 7px; overflow: hidden; }
  .stock-kline-indicator-tabs { flex: 0 0 auto; }
  .stock-kline-indicator-tabs button { min-height: 29px; padding-inline: 9px; font-size: 11px; }
  .stock-kline-indicator-summary { gap: 7px; overflow: hidden; font-size: 10px; }
  .stock-kline-crosshair { top: 6px; right: 55px; width: min(268px, calc(100% - 66px)); padding: 7px 8px; font-size: 11px; }
  .stock-kline-navigation { min-height: 70px; grid-template-columns: 1fr 1fr; padding: 6px 8px; }
  .stock-kline-navigation > p { display: none; }
  .stock-kline-navigation button { font-size: 11px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .stock-kline-screen { grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 96px; }
  .stock-kline-topbar { grid-column: 1 / -1; min-height: 48px; padding-block: 4px; }
  .stock-kline-toolbar { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top) + 52px); left: calc(env(safe-area-inset-left) + 8px); min-height: 38px; padding: 3px; border: 0; border-radius: 9px; background: rgba(25, 30, 32, 0.92); }
  .stock-kline-control-group button { min-height: 31px; padding-inline: 8px; font-size: 11px; }
  .stock-kline-panel { grid-column: 1; width: 100%; }
  .stock-kline-surface { grid-template-rows: minmax(110px, 1fr) auto auto minmax(55px, 18%) auto minmax(65px, 21%); }
  .stock-kline-price-footer { min-height: 31px; padding: 3px 10px; }
  .stock-kline-legend { font-size: 10px; }
  .stock-kline-pane-head { min-height: 27px; padding: 2px 10px; }
  .stock-kline-pane-head.is-indicator { min-height: 31px; }
  .stock-kline-indicator-tabs button { min-height: 25px; padding-inline: 8px; font-size: 10px; }
  .stock-kline-indicator-summary { font-size: 10px; }
  .stock-kline-navigation { grid-column: 2; grid-row: 2; min-height: 0; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; padding: 7px; }
  .stock-kline-navigation > p { display: none; }
  .stock-kline-navigation button { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 3px; font-size: 10px; }
  .stock-kline-navigation button > span { grid-row: auto; font-size: 18px; }
  .stock-kline-crosshair { top: 5px; right: 54px; width: min(260px, 45%); font-size: 10px; }
}