@charset "utf-8";

.cj-chart-study-kline-wrap,
.cj-chart-study-kline-wrap *{
  box-sizing:border-box;
}

.cj-chart-study-kline-wrap{
  width:100%;
  margin:18px 0 26px;
  padding:18px;
  border:1px solid var(--border-light, rgba(0,0,0,.08));
  border-radius:12px;
  background:var(--surface-1, #fff);
  color:var(--text, #111827);
  box-shadow:var(--elev-1, 0 8px 22px rgba(15,23,42,.06));
}

.cj-chart-study-kline-eyebrow{
  margin:0 0 6px;
  color:var(--brand-500, #7c5cff);
  font-size:12px;
  line-height:1.2;
  font-weight: var(--common-font-weight-bold, 600);
}

.cj-chart-study-kline-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
  margin:0;
}

.cj-chart-study-kline-pill{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 10px;
  border:1px solid var(--border-light, rgba(0,0,0,.08));
  border-radius:999px;
  color:var(--text-sub, #64748b);
  background:var(--surface-2, rgba(148,163,184,.08));
  font-size:12px;
  line-height:1;
  font-weight: var(--common-font-weight-bold, 600);
}

.cj-chart-study-kline-chart-box{
  position:relative;
  width:100%;
  min-height:420px;
  overflow:hidden;
  border:1px solid var(--border-light, rgba(0,0,0,.08));
  border-radius:12px;
  background:var(--surface-0, #fff);
}

.cj-chart-study-kline-chart{
  position:relative;
  width:100%;
  height:420px;
}

.cj-chart-study-kline-html-layer{
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
}

.cj-chart-study-kline-range-zone{
  position:absolute;
  min-width:56px;
  min-height:34px;
  overflow:visible;
  border:1px solid rgba(22,119,255,.5);
  border-top-color:rgba(22,119,255,.9);
  border-bottom-color:rgba(22,119,255,.9);
  border-radius:4px;
  background:rgba(22,119,255,.08);
  box-shadow:inset 0 1px 0 rgba(22,119,255,.18), inset 0 -1px 0 rgba(22,119,255,.18);
}

.cj-chart-study-kline-range-zone::before,
.cj-chart-study-kline-range-zone::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:#1677ff;
}

.cj-chart-study-kline-range-zone::before{
  top:-1px;
}

.cj-chart-study-kline-range-zone::after{
  bottom:-1px;
}

.cj-chart-study-kline-range-label{
  position:absolute;
  top:6px;
  left:6px;
  z-index:1;
  width:max-content;
  max-width:92px;
  overflow:visible;
  padding:3px 6px;
  border-radius:4px;
  background:#1677ff;
  color:#fff;
  font-size:11px;
  line-height:1.25;
  font-weight: var(--common-font-weight-bold, 600);
  white-space:nowrap;
  box-shadow:0 2px 7px rgba(15,23,42,.18);
}

.cj-chart-study-kline-status{
  position:absolute;
  inset:auto 12px 12px 12px;
  z-index:2;
  display:flex;
  min-height:36px;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border:1px solid var(--border-light, rgba(0,0,0,.08));
  border-radius:10px;
  background:color-mix(in srgb, var(--surface-1, #fff) 94%, transparent);
  color:var(--text-sub, #64748b);
  font-size:13px;
  line-height:1.35;
  font-weight: var(--common-font-weight-bold, 600);
  pointer-events:none;
}

.cj-chart-study-kline-status[data-state="ok"]{
  display:none;
}

.cj-chart-study-kline-status[data-state="error"]{
  color:var(--color-red, #ef4444);
}

.cj-chart-study-kline-guide{
  display:flex;
  flex-wrap:wrap;
  gap:9px 18px;
  align-items:center;
  margin:15px 0 2px;
  padding:0 2px;
  color:var(--text-sub, #64748b);
  font-size:12px;
  line-height:1.5;
  font-weight: var(--common-font-weight-bold, 600);
}

.cj-chart-study-kline-guide span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  min-width:0;
}

.cj-chart-study-kline-guide-mark{
  display:inline-block;
  flex:0 0 auto;
}

.cj-chart-study-kline-guide-mark--range{
  width:24px;
  border-top:2px solid #1677ff;
}

.cj-chart-study-kline-guide-mark--box{
  width:22px;
  height:14px;
  border:1px solid rgba(22,119,255,.55);
  border-radius:3px;
  background:rgba(22,119,255,.12);
}

.cj-chart-study-kline-guide-mark--current{
  width:24px;
  border-top:1px dashed #2dc08e;
}

@media (max-width:768px){
  .cj-chart-study-kline-wrap{
    margin:14px 0 22px;
    padding:14px;
    border-radius:10px;
  }

  .cj-chart-study-kline-meta{
    justify-content:flex-start;
    margin-top:10px;
  }

  .cj-chart-study-kline-guide{
    align-items:flex-start;
    gap:8px 12px;
    margin-top:13px;
    padding:0;
    font-size:11px;
  }

  .cj-chart-study-kline-guide span{
    align-items:flex-start;
  }

  .cj-chart-study-kline-chart-box{
    min-height:340px;
  }

  .cj-chart-study-kline-chart{
    height:340px;
  }

  .cj-chart-study-kline-range-label{
    top:4px;
    left:4px;
    max-width:76px;
    padding:2px 5px;
    font-size:10px;
  }
}