/* 通用字体与变量（尽量贴近 Coinglass） */
/* 全局启用 MiSans（若系统已安装或 /public/fonts 下存在字体文件则生效） */
@font-face {
  font-family: 'MiSans';
  src: local('MiSans'), local('MiSans Regular'), url('/fonts/MiSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MiSans';
  src: local('MiSans Medium'), url('/fonts/MiSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MiSans';
  /* 统一为实际存在的 Semibold 文件名，避免 404 */
  src: local('MiSans SemiBold'), url('/fonts/MiSans-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --cg-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --cg-text: #0f1114;
  --cg-subtle: #5a5f66;
  --cg-border: #e6e6e6;
  --cg-muted-bg: #f7f8fa;
  --cg-hover-bg: #f5f7fb;
  --cg-active: #1e5eff;
  --cg-shadow: 0 1px 2px rgba(10, 14, 29, 0.06), 0 4px 16px rgba(10, 14, 29, 0.06);
}

/* 暗色主题变量覆盖 */
.theme-dark {
  --cg-text: #dde3ea;
  --cg-subtle: #9aa4b2;
  --cg-border: #2a2f36;
  --cg-muted-bg: #0f141a;
  --cg-hover-bg: #151b22;
  --cg-active: #6aa8ff;
}

html, body {
  font-family: var(--cg-font);
  color: var(--cg-text);
  background: #fff;
}

.theme-dark body { background: #0f141a; }

/* 覆盖 TradingView 内置（仅在 iframe 内有效） */
.tv-side-toolbar, .layout__area--right { background: #fff; }
.theme-dark .tv-side-toolbar, .theme-dark .layout__area--right { background: #0f141a; }
/* Top/Bottom toolbars and status bars in dark mode */
.theme-dark .layout__area--top, 
.theme-dark .layout__area--bottom, 
.theme-dark .tv-header__layout, 
.theme-dark .chart-controls-bar, 
.theme-dark .chart-controls-bar-wrapper,
.theme-dark .layout__area--center .chart-controls-bar {
  background: #0f141a;
  border-color: var(--cg-border);
  color: var(--cg-text);
}

/* 页面与容器背景联动 */
.analysis-page, .layout, .chart-wrap { background: var(--cg-muted-bg); }
.theme-dark .analysis-page, .theme-dark .layout, .theme-dark .chart-wrap { background: var(--cg-muted-bg); }
.tv-widgetbar { width: 340px; }
.tv-widgetbar__body { border-left: 1px solid var(--cg-border); }
.tv-widgetbar__section-header { font-weight: 600; }

/* 顶部头像按钮样式与靠最左侧排序 */
/* 暂时隐藏工具栏内的自定义菜单按钮 */
.avatar-btn { display: none !important; }

/* 隐藏顶部导航里的“后退/前进”按钮（多语言兼容） */
button[title="Back"],
button[title="Forward"],
button[aria-label="Back"],
button[aria-label="Forward"],
[aria-label="后退"],
[aria-label="前进"],
[data-tooltip="Back"],
[data-tooltip="Forward"],
.js-back,
.js-forward {
  display: none !important;
}

/* ===== 移动端：隐藏 TradingView 底部日期范围/UTC/缩放等状态栏 ===== */
@media (max-width: 768px) {
  .layout__area--bottom,
  .chart-controls-bar-wrapper,
  .chart-controls-bar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }
}

/* ===== 不需要“比较商品 / Compare”按钮（PC + Mobile 双保险）===== */
button[title="Compare"],
button[aria-label="Compare"],
button[title="比较"],
button[aria-label="比较"],
[data-tooltip="Compare"],
[data-tooltip="比较"]{
  display: none !important;
}

/* TradingView 自定义标记 Tooltip：允许换行（text 中的 \n 生效） */
.chart-container .tooltip-eSLcXvvL {
  white-space: pre-line;
}

/* 右侧自定义面板容器（父页面内） */
.right-sidebar.baseBg.css-wmlhwz {
  width: 500px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--cg-border);
}
.theme-dark .right-sidebar.baseBg.css-wmlhwz { background: #0f141a; }

/* 右侧顶部工具条（语言切换 + 登出） */
.right-toolbar { display: flex; align-items: center; justify-content: flex-end; height: 44px; padding: 0 12px; border-bottom: 1px solid var(--cg-border); gap: 10px; }
.right-toolbar .menu-group { margin-right: auto; }
.right-toolbar .toolbar-actions { display:flex; align-items:center; gap:10px; margin-right: 14px; }
.right-toolbar .switch { display:block; position: relative; }
.right-toolbar .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.right-toolbar .slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  min-width: auto;
  background-color: #fff;
  transition: all .3s ease;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  cursor: pointer;
}
.right-toolbar .slider:before { content: none; }
.right-toolbar .flag-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.3;
  filter: grayscale(100%);
  transform: scale(0.9);
  transition: all .2s ease;
}
.right-toolbar .flag-toggle svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.right-toolbar .flag-toggle.active {
  opacity: 1;
  filter: none;
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.right-toolbar input:checked + .slider { background-color: #fff; border-color: #e5e7eb; }

.right-toolbar .logout-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; color:#ef4444; cursor:pointer; transition: all .2s ease; }
.right-toolbar .logout-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); transform: translateY(-1px); }
.right-toolbar .logout-btn svg { stroke: currentColor; }

/* 新增：右侧工具条最左侧“创建策略”按钮 */
.right-toolbar .create-stg-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;border:1px solid transparent;background:transparent;color:#374151;cursor:pointer;transition:background .15s ease, color .15s ease}
.right-toolbar .create-stg-btn:hover{background:#f5f7fb;color:#111}
.theme-dark .right-toolbar .create-stg-btn{color:#cbd5e1}
.theme-dark .right-toolbar .create-stg-btn:hover{background:#1b222b;color:#fff}

/* 卡片/段落容器 */
.right-section.css-kdbhus {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 列表区域固定滚动，详情固定在底部 */
.right-section.css-kdbhus.list-section { flex: 1 1 auto; overflow: hidden; }
.right-section.css-kdbhus.list-section .panel-body.list-body { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; }
.right-section.css-kdbhus.list-section .table-rows { flex: 1 1 auto; overflow: auto; }
.right-section.details.css-kdbhus { flex: 0 0 200px; border-top: 1px solid var(--cg-border); display: flex; flex-direction: column; }
.right-section.details.css-kdbhus .details-body { overflow: hidden; }
.stg-carousel { display: flex; align-items: center; gap: 8px; height: 100%; }
.stg-nav { width: 28px; height: 28px; border-radius: 6px; background: #fff; border: 1px solid #e6e6e6; cursor: pointer; transition: background .15s ease, transform .12s ease; }
.stg-nav:hover { background: #f5f7fb; transform: translateY(-1px); }
.theme-dark .stg-nav { background: #151b22; border-color: var(--cg-border); color: var(--cg-subtle); }
.theme-dark .stg-nav:hover { background: #1b222b; }
.theme-dark .stg-card { background: #151b22; border-color: #2a2f36; box-shadow: none; }

.right-section.css-kdbhus + .right-section.css-kdbhus {
  border-top: 1px solid var(--cg-border);
}

/* Tabs in right section */
.tabs { display: flex; gap: 16px; padding: 10px 12px 0 12px; border-bottom: 1px solid var(--cg-border); }
.tab { background: transparent; border: 0; color: var(--cg-subtle); padding: 8px 4px; cursor: pointer; font-weight: 600; position: relative; transition: color .2s ease; }
.tab:hover { color: var(--cg-text); }
.tab.active { color: var(--cg-text); }
.tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #1e5eff; animation: tabline .25s ease; }
@keyframes tabline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 面板标题 */
.panel-header {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--cg-text);
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.theme-dark .panel-header { border-bottom-color: var(--cg-border); }

/* 面板内容 */
.panel-body {
  padding: 8px 12px;
  overflow: auto;
}

.list-body { padding: 8px 0; }
.table-head, .row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; align-items: center; padding: 6px 10px; gap: 8px; }
.table-head { color: #888; font-size: 12px; }
.row { border-bottom: 1px dashed var(--cg-border); cursor: pointer; }
.row.selected { background: #eef3ff !important; box-shadow: inset 2px 0 0 #1e5eff; }

/* 提高优先级并把过渡放在默认态，确保 hover 生效 */
.right-section.css-kdbhus .table-rows .row {
  transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
  border-radius: 6px;
}
.right-section.css-kdbhus .table-rows .row:hover {
  background: var(--cg-hover-bg);
  transform: translateX(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.col.pair { display: flex; align-items: center; gap: 8px; }
.ex-icon { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); object-fit: contain; display: inline-block; }
.flag-emoji { font-size: 16px; width: 16px; text-align: center; }
.sym { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; font-weight: 600; font-size: 11px; letter-spacing: .2px; }
.tag { font-size: 11px; padding: 2px 6px; border-radius: 10px; margin-left: 6px; }
.tag.spot { background: #e9f5ff; color: #1a6ad8; }
.tag.perp { background: #fff3e0; color: #d97706; }
.theme-dark .tag.spot { background: #0b3a68; color: #7cc8ff; }
.theme-dark .tag.perp { background: #3b2e10; color: #f7b955; }
.plus-btn { width: 22px; height: 22px; border: 1px solid #e6e6e6; border-radius: 4px; background: #fff; cursor: pointer; transition: background .15s ease; }
.plus-btn:hover { background: #f5f7fb; }
.theme-dark .plus-btn { background: #151b22; border-color: var(--cg-border); color: var(--cg-subtle); }
.theme-dark .plus-btn:hover { background: #1b222b; }

/* 分组标题，仿 TV 小标题样式 */
.group-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cg-muted-bg);
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  padding: 8px 12px;
  border-top: 1px solid var(--cg-border);
  border-bottom: 1px solid var(--cg-border);
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
}
.group-title .chev { transition: transform .2s ease, stroke .2s ease; stroke: currentColor; color: var(--cg-subtle); }
.group-title .toggle { order: -1; }
.theme-dark .group-title { color: var(--cg-subtle); }

/* 折叠过渡 */
.collapse-enter-from, .collapse-leave-to { max-height: 0; opacity: 0; }
.collapse-enter-active, .collapse-leave-active { transition: max-height .2s ease, opacity .2s ease; overflow: hidden; }
.collapse-enter-to, .collapse-leave-from { max-height: 800px; opacity: 1; }

/* 自选列表 */
.watchlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.watchlist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px dashed #eee;
  cursor: pointer;
  color: var(--cg-text);
  font-size: 13px;
}

.watchlist li:hover {
  background: var(--cg-hover-bg);
}

.watchlist li.active {
  background: var(--cg-hover-bg);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--cg-active);
}

/* 详情面板 */
.details-body .detail-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12.5px;
}

.details-body .detail-row span:first-child {
  color: var(--cg-subtle);
}

.details-body .hint {
  color: var(--cg-subtle);
  font-size: 12px;
  padding-top: 8px;
}

/* 滚动条（更细致） */
.panel-body::-webkit-scrollbar, .table-rows::-webkit-scrollbar {
  width: 8px;
}
.panel-body::-webkit-scrollbar-thumb, .table-rows::-webkit-scrollbar-thumb {
  background: #d9dce1;
  border-radius: 4px;
}
.panel-body::-webkit-scrollbar-thumb:hover, .table-rows::-webkit-scrollbar-thumb:hover {
  background: #c8ccd3;
}

/* 卡片投影/边框（用于需要提升对比的区域） */
.mbh, .css-1lfd9om {
  background: #fff;
  box-shadow: var(--cg-shadow);
  border-radius: 8px;
  border: 1px solid rgba(10, 14, 29, 0.04);
}

/* 顶部/底部粘性 header（列表较长时保持在视口内） */
.watchlist-body .panel-header, .details-body .panel-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

/* Left align headers and data columns */
.table-head .col.price,
.table-head .col.change,
.table-head .col.pct,
.table-head .col.op,
.row .col.price,
.row .col.change,
.row .col.pct,
.row .col.op { text-align: left; justify-content: flex-start; }

/* smaller font for numeric columns */
.row .col.price,
.row .col.change,
.row .col.pct { font-size: 12px; }

.chart-wrap { flex: 1 1 0; min-width: 0; position: relative; }


/* structure op column font size aligned */
.row .col.op { font-size: 12px; }

.ios-check { display: inline-block; width: 14px; height: 14px; margin-left: 4px; border: 2px solid #22c55e; border-radius: 50%; position: relative; vertical-align: -2px; }
.ios-check::after { content: ''; position: absolute; left: 3px; top: 1px; width: 5px; height: 9px; border-right: 2px solid #22c55e; border-bottom: 2px solid #22c55e; transform: rotate(45deg); }