:root{
  --card-radius:16px;
  --col-min:450px;

  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.10);
  --shadow:0 8px 20px rgba(2,6,23,.08);

  --tag-bg:#f8fafc;
  --tag-border:rgba(15,23,42,.10);

  --ok-bg:#ecfdf3;
  --ok-border:#b7f0c7;

  --err-bg:#fff5f5;
  --err-border:#ffdada;
  --err-text:#b42318;

  --header-h:56px;
}

:root[data-theme="dark"]{
  --bg:#0b1020;
  --panel:#101a2f;
  --text:#e9eef8;
  --muted:#a8b3c8;
  --border:rgba(255,255,255,.10);
  --shadow:0 10px 30px rgba(0,0,0,.35);

  --tag-bg:rgba(255,255,255,.06);
  --tag-border:rgba(255,255,255,.10);

  --ok-bg:rgba(34,197,94,.10);
  --ok-border:rgba(34,197,94,.20);

  --err-bg:rgba(244,63,94,.10);
  --err-border:rgba(244,63,94,.25);
  --err-text:#ffb4c2;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

header{
  position:fixed;
  top:0; left:0; right:0;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:6px 8px;
  box-shadow:var(--shadow);
  z-index:999;
}

.brand{
  font-weight:800;
  letter-spacing:.3px;
  margin:0;
  font-size:13px;
  line-height:1.1;
  white-space:nowrap;
}

.row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin:4px 0;
}

.row.topbar{
  margin:0;
  flex-wrap:nowrap;
  gap:6px;
}

/* ✅ 极限紧凑：一行工具栏 */

.row.topbar #interval{
  width:74px;
  padding:5px 8px;

  /* ✅ 全局时间步长下拉菜单：暗底白字 */
  color-scheme: dark;
  background:#111827;
  color:#ffffff;
}

/* 下拉列表选项（不同浏览器支持程度不同，但加了不会坏） */
.row.topbar #interval option{
  background:#111827;
  color:#ffffff;
}


.row.topbar #symInput{
  flex:1 1 auto;
  min-width:120px;
  width:auto;
  padding:5px 10px;
}

.row.topbar #symAdd{
  padding:5px 10px;
  font-weight:800;
  line-height:1;
}

.row.topbar #symHint{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.row.topbar #status{
  margin-left:auto;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:520px){
  .row.topbar #symHint{ display:none; }
  .switch .swText{ display:none; }
}


.row.topbar #status{
  margin-left:auto;
}

.muted{
  font-size:12px;
  color:var(--muted);
  font-style:normal;
}

#grid{
  padding:calc(var(--header-h) + 12px) 12px 18px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(var(--col-min), 1fr));
  gap:12px;
}

.card{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:var(--card-radius);
  overflow:hidden;
}

.head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 10px 8px;
  border-bottom:1px solid var(--border);
}

.sym{
  font-weight:700;
  letter-spacing:.2px;
}

.headRight{
  display:flex;
  align-items:center;
  gap:8px;
}

.stat{
  font-size:12px;
  color:var(--muted);
}

.fsBtn{
  cursor:pointer;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:4px 10px;
  font-size:12px;
}

.chart{
  height:270px; /* 默认窗口高：270 */
}

.footer{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-top:1px solid var(--border);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--tag-border);
  background:var(--tag-bg);
  color:var(--muted);
}

.tag.ok{
  border-color:var(--ok-border);
  background:var(--ok-bg);
  color:var(--text);
}

.tag.err{
  border-color:var(--err-border);
  background:var(--err-bg);
  color:var(--err-text);
}

select, input[type="text"], input[type="search"]{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
}

.btn{
  cursor:pointer;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:6px 12px;
  font-size:12px;
  min-width:auto;
}

.btn:hover{ filter:brightness(1.06); }

.switch{
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
  font-size:12px;
  color:var(--muted);
}

.switch input{ display:none; }

.track{
  width:38px;
  height:20px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.06);
  position:relative;
}

:root[data-theme="dark"] .track{
  background:rgba(255,255,255,.10);
}

.thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--border);
  transition:transform .18s ease;
}

.switch input:checked + .track .thumb{
  transform:translateX(18px);
}

.miniSel{
  margin-left:6px;
  padding:4px 8px;
  font-size:12px;
  border-radius:999px;
}



/* ====== Predict buttons (manual candle) ====== */
.predBtns{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* 让按钮靠右（interval 下拉菜单仍在最右） */
  gap:4px;
  margin-left:auto;
  flex:1;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0;
  scrollbar-width:thin;
}





.predBtns::-webkit-scrollbar{ height:4px; }
.predBtns::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; }

.predBtn{
  border:1px solid var(--tag-border);
  background:var(--tag-bg);
  color:var(--text);
  font-size:10px;
  padding:2px 6px;
  border-radius:999px;
  cursor:pointer;
  line-height:1.2;
  opacity:.92;
  user-select:none;
  white-space:nowrap;
}
.predBtn:hover{ opacity:1; }
.predBtn:disabled{ opacity:.45; cursor:not-allowed; }

.predBtn.neg{ color:var(--err-text); }
:root[data-theme="dark"] .predBtn.neg{ color:#ffb4c2; }

.predBtn.pos{ color:#0a7a2f; }
:root[data-theme="dark"] .predBtn.pos{ color:#86efac; }

.predBtn.back{
  color:var(--muted);
}

.card.isPred .headRight .stat{
  font-weight:700;
}
.card.isPred{
  outline:1px dashed rgba(100,116,139,.35);
  outline-offset:-6px;
}
:root[data-theme="dark"] .card.isPred{
  outline-color:rgba(168,179,200,.25);
}


/* ✅ mini interval dropdown：暗色主题下，下拉列表统一暗底白字 */
:root[data-theme="dark"] select.miniSel{
  color-scheme: dark;
  background: var(--panel);
  color: var(--text);
}
:root[data-theme="dark"] select.miniSel option{
  background: var(--panel);
  color: var(--text);
}



/* ===========================
   ✅ Fullscreen：图像占满整屏
   =========================== */
.card.isFs{
  /* fullscreen element itself gets the viewport; ensure internal layout fills it */
  display:flex;
  flex-direction:column;
  width:100vw;
  height:100vh;
  height:100dvh;
  height:100svh;
  border-radius:0;
}

/* 退出/进入全屏时，header/footer 不抢高度，图表吃满剩余空间 */
.card.isFs .head,
.card.isFs .footer{
  flex:0 0 auto;
}

.card.isFs .chart{
  flex:1 1 auto;
  min-height:0;
  height:auto !important; /* 覆盖 inline height:200px */
}

/* TradingView 注入的容器/iframe 强制撑满 */
.card.isFs .tvwrap,
.card.isFs .tradingview-widget-container,
.card.isFs .tradingview-widget-container__widget,
.card.isFs iframe{
  width:100% !important;
  height:100% !important;
  display:block;
}

/* ===========================
   iOS / 无原生 Fullscreen 的伪全屏支持
   =========================== */
html.kb-fs,
body.kb-fs{
  height:100%;
  overflow:hidden;
}

.card.isFsPseudo{
  position:fixed;
  inset:0;
  margin:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  width:100vw;
  height:100vh;
  height:100dvh;
  height:100svh;
  border-radius:0;
}

/* 伪全屏下，图表区域也要吃满 */
.card.isFsPseudo .chartInner,
.card.isFsPseudo .chart{
  flex:1 1 auto;
  min-height:0;
  height:auto !important;
}

.card.isFsPseudo .tvwrap,
.card.isFsPseudo .tradingview-widget-container,
.card.isFsPseudo .tradingview-widget-container__widget,
.card.isFsPseudo iframe{
  width:100% !important;
  height:100% !important;
  display:block;
}


/* iOS 全屏底部安全区：避免底边工具栏被 Home 指示条/地址栏遮住 */
.card.isFs .footer,
.card.isFsPseudo .footer{
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}