/* RSI24H_V1
   纯新增模块
   不修改原 RSI 算法
*/

#rsi24hPanel{
  margin-top:14px;
}

.r24-wrap{
  background:#071827;
  border:1px solid #173a55;
  border-radius:10px;
  padding:14px;
}

.r24-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

.r24-title{
  font-size:18px;
  font-weight:900;
  color:#e8f5ff;
}

.r24-sub{
  color:#6f8da5;
  font-size:12px;
  margin-top:4px;
}

.r24-update{
  color:#67869d;
  font-size:12px;
  white-space:nowrap;
}

.r24-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:12px;
}

.r24-card{
  background:#061521;
  border:1px solid #143149;
  border-radius:9px;
  padding:12px;
}

.r24-card-title{
  font-size:14px;
  font-weight:900;
  color:#dcefff;
  margin-bottom:8px;
}

.r24-legend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
  font-size:11px;
  color:#9eb4c5;
  margin-bottom:8px;
}

.r24-leg{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.r24-dot{
  width:9px;
  height:9px;
  border-radius:2px;
}

.r24-sb{background:#ff4d5a;}
.r24-eb{background:#ff754f;}
.r24-ss{background:#20d99a;}
.r24-es{background:#087b60;}

.r24-chart-scroll{
  overflow-x:auto;
  overflow-y:hidden;
}

.r24-chart{
  height:235px;
  min-width:860px;
  display:grid;
  grid-template-columns:repeat(24,minmax(28px,1fr));
  gap:3px;
  align-items:end;
  border-bottom:1px solid #21425c;
  padding:10px 2px 0;
  position:relative;
  background:
    linear-gradient(to top,
      transparent 24%,
      rgba(80,120,150,.10) 25%,
      transparent 26%,
      transparent 49%,
      rgba(80,120,150,.10) 50%,
      transparent 51%,
      transparent 74%,
      rgba(80,120,150,.10) 75%,
      transparent 76%);
}

.r24-hour{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  min-width:0;
  position:relative;
  border-radius:5px 5px 0 0;
}

.r24-hour.current{
  background:rgba(59,158,255,.08);
  outline:1px solid rgba(79,167,255,.20);
}

.r24-bars{
  height:182px;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:2px;
}

.r24-stack{
  width:11px;
  min-width:8px;
  max-width:14px;
  display:flex;
  flex-direction:column-reverse;
  border-radius:3px 3px 0 0;
  overflow:hidden;
  box-shadow:0 0 8px rgba(0,0,0,.20);
}

.r24-seg{
  width:100%;
  min-height:0;
}

.r24-empty{
  width:24px;
  height:1px;
  background:#18344a;
  opacity:.45;
}

.r24-hour-label{
  height:25px;
  line-height:25px;
  font-size:10px;
  color:#7691a6;
  margin-top:3px;
}

.r24-hour.current .r24-hour-label{
  color:#79bdff;
  font-weight:900;
}

.r24-foot{
  margin-top:9px;
  font-size:11px;
  color:#66839a;
}

.r24-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:10px;
}

.r24-alert{
  background:#061521;
  border:1px solid #16364f;
  border-radius:9px;
  padding:12px;
}

.r24-alert-title{
  font-size:14px;
  font-weight:900;
  color:#e1f1fc;
  margin-bottom:10px;
}

.r24-current-status{
  font-size:20px;
  font-weight:950;
  color:#ff5f67;
  margin-bottom:8px;
}

.r24-mainline{
  font-size:13px;
  color:#9bb2c2;
  margin:5px 0;
}

.r24-bull-text{
  color:#ff5964;
  font-weight:900;
}

.r24-bear-text{
  color:#1fd99a;
  font-weight:900;
}

.r24-spread{
  margin-top:9px;
  padding:8px;
  border-radius:7px;
  background:#0a2031;
  text-align:center;
  color:#9ccfff;
  font-weight:900;
}

.r24-deltas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.r24-delta{
  background:#0a2031;
  border-radius:6px;
  padding:7px 8px;
  font-size:12px;
}

.r24-delta b{
  float:right;
}

.r24-judge{
  margin-top:9px;
  padding:9px;
  border-radius:7px;
  background:#0a2031;
  color:#9fc8e6;
  font-size:12px;
  font-weight:800;
}

.r24-tip{
  position:fixed;
  z-index:99999;
  display:none;
  pointer-events:none;
  min-width:190px;
  padding:9px 10px;
  border-radius:7px;
  border:1px solid #2b6389;
  background:rgba(4,20,32,.97);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  color:#cbe7fa;
  font-size:12px;
  line-height:1.6;
}

@media(max-width:900px){
  .r24-layout{
    grid-template-columns:1fr;
  }
  .r24-side{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
}

@media(max-width:600px){
  .r24-side{
    grid-template-columns:1fr;
  }
  .r24-head{
    display:block;
  }
  .r24-update{
    margin-top:6px;
  }
}