.mini-kline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mini-kline svg {
  display: block;
}

/* Loading state / 加载状态 */
.mini-kline-loading {
  position: relative;
  overflow: hidden;
}

.mini-kline-skeleton {
  width: 100%;
  height: 50%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 2px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Empty/Error state / 空/错误状态 */
.mini-kline-empty {
  color: var(--text-secondary);
  font-size: 10px;
}

.mini-kline-dash {
  opacity: 0.5;
}
/* FutuBottomNav — shared 4-tab bottom bar under /futu/*.
   Scoped under .futu-bnav-* to avoid collision with FutuWatchlist's
   own .futu-bottom-nav/.futu-nav-* classes on the 自选 page. */

.futu-bnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 4px 0 2px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid #f0f0f0;
}

.futu-bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: #9AA0A6;
  padding: 4px 6px 2px;
  cursor: pointer;
  min-width: 48px;
  font-family: inherit;
}

.futu-bnav-item.active {
  color: #FF6B1A;
}

.futu-bnav-icon {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-bnav-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.futu-bnav-item.active .futu-bnav-label {
  color: #FF6B1A;
}
.alerts-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.alerts-popup-container {
  background: #111317;
  border: 1px solid #2d3748;
  border-radius: 6px;
  width: 100%;
  max-width: 350px;
  min-height: 650px;
  max-height: 750px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  animation: slideIn 0.2s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alerts-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #2d3748;
  flex-shrink: 0;
}

.alerts-popup-title {
  color: #e5e7eb;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.5px;
}

.alerts-close-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.alerts-close-btn:hover {
  background: rgba(45, 55, 72, 0.3);
  color: #e5e7eb;
}

.alerts-tabs-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2d3748;
  background: #0d0f12;
  flex-shrink: 0;
  padding: 0 12px;
}

.alerts-tabs {
  display: flex;
  flex: 1;
}

.alerts-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  white-space: nowrap;
}

.alerts-tab:hover {
  color: #e5e7eb;
}

.alerts-tab.active {
  color: #e5e7eb;
}

.alerts-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #df7513 0%, #df7513 100%);
}

.alerts-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.alerts-action-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 14px;
  cursor: pointer;
  padding: 6px;
  border-radius: 3px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.alerts-action-btn:hover {
  background: rgba(45, 55, 72, 0.3);
  color: #e5e7eb;
}

.alerts-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alerts-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 20px;
  color: #9ca3af;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #4b5563;
  opacity: 0.5;
}

.empty-icon i {
  display: block;
}

.empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 8px;
}

.empty-description {
  font-size: 13px;
  color: #6b7280;
  max-width: 280px;
  line-height: 1.5;
}

/* Scrollbar styling */
.alerts-content::-webkit-scrollbar {
  width: 8px;
}

.alerts-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.alerts-content::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

.alerts-content::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Responsive */
@media (max-width: 768px) {
  .alerts-popup-container {
    max-width: 95vw;
    margin: 10px;
  }

  .alerts-tabs {
    flex-direction: column;
  }

  .alerts-tab {
    border-bottom: 1px solid #2d3748;
  }

  .alerts-tab:last-child {
    border-bottom: none;
  }

  .alerts-tab.active::after {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 3px;
    height: auto;
  }

  .alerts-content {
    min-height: 300px;
  }
}

/* ═══════════════════════════════════════════════════════════
   FutuWatchlist — Pixel-perfect Futu iOS light theme (自选页)
   ═══════════════════════════════════════════════════════════ */

:root {
  --futu-bg: #ffffff;
  --futu-bg-alt: #f5f6f7;
  --futu-text: #111111;
  --futu-text-dim: #999999;
  --futu-text-mid: #666666;
  --futu-divider: #eeeeee;
  --futu-orange: #FF6B1A;
  --futu-up: #F04E3E;   /* 红 涨 */
  --futu-down: #00A368; /* 绿 跌 */
}

.futu-page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--futu-bg);
  color: var(--futu-text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* 显式禁止横向溢出和横向 pan：iOS Safari 即使 body 是 overflow:hidden，
     position:fixed 元素仍可能被横向"橡皮筋"拖动。touch-action: pan-y 在浏览器
     层面把横向手势直接吞掉，比任何 JS preventDefault 都稳。 */
  overflow-x: hidden;
  touch-action: pan-y;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
}

/* ─── Status bar (iOS Dynamic Island style) ─── */
.futu-statusbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 6px;
  height: 54px;
  flex-shrink: 0;
  color: #000;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.futu-statusbar-time {
  font-size: 15px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif;
  z-index: 2;
}

.futu-dynamic-island {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 118px;
  height: 34px;
  border-radius: 22px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 6px;
  z-index: 1;
}

.futu-dynamic-island-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8A3D 0%, #FF6B1A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-dynamic-island-dot svg {
  color: #fff;
}

.futu-statusbar-right {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #000;
  z-index: 2;
}

.futu-signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

.futu-signal-bars span {
  display: block;
  width: 3px;
  background: #000;
  border-radius: 0.5px;
}
.futu-signal-bars span:nth-child(1) { height: 4px; }
.futu-signal-bars span:nth-child(2) { height: 6px; }
.futu-signal-bars span:nth-child(3) { height: 8px; }
.futu-signal-bars span:nth-child(4) { height: 11px; }

.futu-wifi-icon { color: #000; }

.futu-battery {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: 2px;
}

.futu-battery-shell {
  position: relative;
  width: 26px;
  height: 12px;
  border: 1px solid #000;
  border-radius: 3px;
  padding: 1px;
  box-sizing: border-box;
}

.futu-battery-level {
  height: 100%;
  background: #38C759;
  border-radius: 1.5px;
}

.futu-battery-cap {
  width: 2px;
  height: 5px;
  background: #000;
  border-radius: 0 1px 1px 0;
  margin-left: 1px;
}

.futu-battery-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
  line-height: 1;
}

/* ─── Header ─── */
.futu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 10px;
  flex-shrink: 0;
  background: var(--futu-bg);
}

.futu-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.futu-logo {
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
}

.futu-header-title {
  font-size: 22px;
  font-weight: 800;
  color: #111;
  letter-spacing: 0.5px;
}

.futu-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.futu-header-btn {
  background: none;
  border: none;
  color: #111;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
}

.futu-header-btn:active {
  background: rgba(0,0,0,0.05);
}

.futu-ai-btn {
  background: #f2f2f2;
  border-radius: 16px;
  padding: 4px 10px 4px 4px;
  gap: 4px;
  display: flex;
  align-items: center;
  height: 30px;
}

.futu-ai-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a8c7ff 0%, #d9e5ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.futu-ai-label {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.3px;
}

.futu-notif-dot {
  position: absolute;
  top: 6px;
  right: 4px;
  width: 7px;
  height: 7px;
  background: #FF3B30;
  border-radius: 50%;
  border: 1.5px solid #fff;
}

/* ─── Category tabs ─── */
.futu-tabs-container {
  display: flex;
  align-items: center;
  padding: 0 14px;
  flex-shrink: 0;
  border-bottom: none;
}

.futu-tabs {
  display: flex;
  flex: 1;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 父级 .futu-page 设了 touch-action: pan-y，这里显式 pan-x 让 tab 条能横滑。 */
  touch-action: pan-x;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.futu-tabs::-webkit-scrollbar { display: none; }

.futu-tab {
  background: none;
  border: none;
  color: #666;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 10px 12px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 0.2s;
  flex-shrink: 0;
  font-family: inherit;
}

.futu-tab:first-child { padding-left: 0; }

.futu-tab.active {
  color: #111;
  font-weight: 800;
  font-size: 17px;
}

.futu-tab.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  background: var(--futu-orange);
  border-radius: 2px;
}

.futu-tab:first-child.active::after {
  left: 11px;
  transform: none;
}

.futu-tabs-more {
  background: none;
  border: none;
  padding: 8px 4px 8px 12px;
  color: #111;
  cursor: pointer;
  flex-shrink: 0;
}

/* ─── Toolbar (icons + sort) ─── */
.futu-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 10px;
  flex-shrink: 0;
}

.futu-toolbar-icons {
  display: flex;
  gap: 18px;
}

.futu-toolbar-icon {
  background: none;
  border: none;
  color: #222;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-toolbar-icon:active { opacity: 0.6; }

/* ── List-mode popover (anchored to chart icon) ── */
.futu-toolbar-icon-wrap {
  position: relative;
  display: inline-flex;
}

.futu-listmode-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: transparent;
}

.futu-listmode-menu {
  position: absolute;
  top: 32px;
  left: -8px;
  z-index: 50;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  min-width: 88px;
}

.futu-listmode-item {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  gap: 12px;
}
.futu-listmode-item:active {
  background: #f5f5f5;
}
.futu-listmode-item.active {
  color: #FF6B1A;
}
.futu-listmode-item.active svg { stroke: #FF6B1A; }

.futu-toolbar-sort {
  display: flex;
  align-items: center;
  gap: 18px;
}

.futu-sort-btn {
  background: none;
  border: none;
  color: #555;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: inherit;
}

.futu-sort-btn.active { color: #222; }

.futu-sort-arrow { flex-shrink: 0; }

/* ─── Stock list ─── */
.futu-stocklist {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* 主滚动列表只允许竖向 pan，禁止用户把整列横向拖出去。 */
  touch-action: pan-y;
  padding-bottom: 8px;
  background: var(--futu-bg);
  /* 隐掉 webkit/FF 默认滚动条，避免在宽屏下右侧露出深色轨道；
     iOS 原生富途就是无可见滚动条的。 */
  scrollbar-width: none;
}
.futu-stocklist::-webkit-scrollbar { display: none; }

.futu-stock-row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  gap: 8px;
  min-height: 62px;
}

.futu-stock-row:active { background: rgba(0,0,0,0.03); }

.futu-stock-delete {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.futu-stock-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.futu-stock-name {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

.futu-stock-code-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.futu-stock-code {
  font-size: 12px;
  color: #999;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.futu-position-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: 2px;
}

.futu-stock-sparkline {
  flex-shrink: 0;
  width: 62px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-stock-right {
  flex-shrink: 0;
  text-align: right;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.futu-stock-primary {
  display: flex;
  align-items: center;
  gap: 6px;
}

.futu-stock-price {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

.futu-stock-pct-pill {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
  min-width: 68px;
  text-align: center;
  box-sizing: border-box;
}

.futu-stock-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.futu-secondary-price {
  color: #999;
  font-weight: 500;
}

.futu-secondary-pct {
  font-weight: 500;
}

.futu-secondary-badge {
  font-size: 9px;
  font-weight: 600;
  color: #666;
  background: #f0f0f0;
  border-radius: 3px;
  padding: 1px 4px;
  letter-spacing: 0.3px;
}

/* Colors (Chinese convention: up=red, down=green) */
.futu-up   .futu-stock-price { color: var(--futu-up); }
.futu-up   .futu-stock-pct-pill { background: var(--futu-up); }
.futu-up   .futu-secondary-pct { color: var(--futu-up); }
.futu-down .futu-stock-price { color: var(--futu-down); }
.futu-down .futu-stock-pct-pill { background: var(--futu-down); }
.futu-down .futu-secondary-pct { color: var(--futu-down); }
.futu-flat .futu-stock-price { color: #666; }
.futu-flat .futu-stock-pct-pill { background: #999; }
.futu-flat .futu-secondary-pct { color: #666; }

/* ─── Loading skeleton ─── */
.futu-loading { padding: 0; }

.futu-skeleton-row {
  display: flex;
  align-items: center;
  padding: 14px 14px;
  gap: 12px;
}

.futu-skeleton-text,
.futu-skeleton-chart,
.futu-skeleton-price {
  background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
  background-size: 200% 100%;
  animation: futu-shimmer 1.5s infinite;
  border-radius: 4px;
}
.futu-skeleton-text  { flex: 1; height: 34px; }
.futu-skeleton-chart { width: 62px; height: 32px; }
.futu-skeleton-price { width: 90px; height: 34px; }

@keyframes futu-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Empty state ─── */
.futu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 14px;
  color: #aaa;
}

.futu-empty p { font-size: 14px; margin: 0; }

.futu-add-btn {
  margin-top: 8px;
  background: var(--futu-orange);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.futu-add-btn:active { opacity: 0.85; }

/* ─── Market indices horizontal scroll bar ─── */
.futu-index-bar {
  display: flex;
  overflow-x: auto;
  /* 父级 .futu-page 是 touch-action: pan-y；这里显式 pan-x 让指数条能横滑。 */
  touch-action: pan-x;
  scrollbar-width: none;
  padding: 7px 0;
  background: #fafafa;
  border-top: 1px solid var(--futu-divider);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.futu-index-bar::-webkit-scrollbar { display: none; }

.futu-index-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 14px;
  border-right: 1px solid var(--futu-divider);
  flex-shrink: 0;
  gap: 1px;
}
.futu-index-item:last-child { border-right: none; }

.futu-index-name {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
}

.futu-index-value {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

.futu-index-pct {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.futu-index-pct.up   { color: var(--futu-up); }
.futu-index-pct.down { color: var(--futu-down); }
.futu-index-pct.flat { color: #888; }

/* ─── Bottom market ticker — vertical marquee ─── */
.futu-index-marquee {
  height: 36px;
  background: #fafafa;
  border-top: 1px solid var(--futu-divider);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.futu-index-marquee-inner {
  display: flex;
  flex-direction: column;
  /* transform + transition set inline via React state */
  will-change: transform;
}
.futu-index-marquee-row {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  white-space: nowrap;
  flex-shrink: 0;
}
.futu-index-marquee-row .futu-index-name {
  font-size: 12px;
  color: #555;
  /* No min-width: full-name strings (纳斯达克指数, 标普500指数) are 5–6 chars
     wide; let the column size to content so value/pct don't get squeezed. */
}
.futu-index-marquee-row .futu-index-value {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
.futu-index-marquee-row .futu-index-pct {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
}


/* ─── Bottom navigation ─── */
.futu-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 4px 0 2px;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--futu-divider);
  flex-shrink: 0;
}

.futu-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: #999;
  padding: 4px 6px 2px;
  cursor: pointer;
  min-width: 48px;
  position: relative;
  font-family: inherit;
}

.futu-nav-item.active { color: var(--futu-orange); }

.futu-nav-icon {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.futu-nav-badge-dot {
  position: absolute;
  top: 0;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF3B30;
}

.futu-nav-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.futu-nav-item.active .futu-nav-label { color: var(--futu-orange); }

/* ─── Search page ─── */
.futu-search-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  /* 横向锁死: 父级 .futu-page 已经 pan-y, 但搜索页里 .futu-search-results
     有自己的 overflow-y:auto, iOS 会重起触摸上下文 → 横向回弹会漏出.
     这里和下面的 .futu-search-results 双保险, 把横向手势在两层都吞掉. */
  overflow-x: hidden;
  touch-action: pan-y;
}

.futu-search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 58px 14px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--futu-divider);
}

.futu-search-input-wrap {
  flex: 1 1 0;
  /* min-width: 0 必须显式写出来 — iOS Safari 下 <input> 默认 min-width ~175px,
     会把 .futu-search-cancel 挤出 viewport (内容超宽, overflow:hidden 只是切掉
     看不到, 不会让 flex 子项回缩). 这条让 wrap 真的能 shrink. */
  min-width: 0;
  display: flex;
  align-items: center;
  background: #f2f2f2;
  border-radius: 10px;
  padding: 0 12px;
  height: 36px;
  gap: 8px;
}

.futu-search-icon-sm {
  width: 16px;
  height: 16px;
  color: #888;
  flex-shrink: 0;
}

.futu-search-input {
  flex: 1 1 0;
  min-width: 0;        /* 同上, 让 input 能跟着 wrap 一起缩 */
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: #111;
  font-size: 15px;
  padding: 0;
  font-family: inherit;
}

.futu-search-input::placeholder { color: #aaa; }

.futu-search-clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
}

.futu-search-cancel {
  background: none;
  border: none;
  color: var(--futu-orange);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
  font-family: inherit;
}

.futu-search-results {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.futu-search-results::-webkit-scrollbar { display: none; }

.futu-search-loading,
.futu-search-empty {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.futu-search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--futu-divider);
}

.futu-search-result-item:active { background: rgba(0,0,0,0.03); }

.futu-search-result-left {
  flex: 1 1 0;
  min-width: 0;        /* 长股票名 (e.g. 'Berkshire Hathaway Inc.') 不挤跑右侧 + 按钮 */
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;    /* 超长名字配合下面的 ellipsis 截断 */
}

.futu-search-result-name {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  /* 单行截断, 不让长名顶飞右侧按钮 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.futu-search-result-code {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.futu-search-result-right {
  flex-shrink: 0;      /* 右侧固定宽度, 不被左侧挤压 */
  display: flex;
  align-items: center;
  gap: 10px;
}

.futu-search-result-market {
  font-size: 11px;
  color: #666;
  background: #f2f2f2;
  padding: 2px 6px;
  border-radius: 3px;
}

.futu-search-result-add { color: var(--futu-orange); }

/* ─── Desktop frame: ONLY for真桌面尺寸, 不要踩 iPhone 16 Pro Max (440px) ───
   原阈值 431px 会被 iPhone 16 Plus(430)/Pro Max(440) 触发, 加左右 border 后
   真机上看起来不充满屏幕. 提到 768px (iPad Mini portrait) 才算桌面. */
@media (min-width: 768px) {
  .futu-page {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    box-shadow: 0 0 40px rgba(0,0,0,0.08);
  }
}

/* iPhone safe area */
@supports (padding-top: env(safe-area-inset-top)) {
  .futu-statusbar {
    padding-top: max(14px, env(safe-area-inset-top));
  }
}

/* ─── Pull-to-refresh indicator ─── */
.futu-pull-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #888;
  overflow: hidden;
  transition: height 0.2s ease;
}

/* ─── Swipe-to-delete on stock row ─── */
.futu-stock-row {
  position: relative;
  background: var(--futu-bg);
  z-index: 1;
}
.futu-row-swipe-delete {
  position: absolute;
  right: -80px;
  top: 0;
  bottom: 0;
  width: 80px;
  background: #FF3B30;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.futu-row-swipe-delete:active { opacity: 0.85; }
/* Binance-style chart block for the /futu detail page.
   Scoped under .futu-bc so it cannot bleed into the rest of the page. */

.futu-bc {
  position: relative;
  background: #ffffff;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', sans-serif;
}

/* ===== Period tab bar =====
   Two rows of period tabs spread evenly across the full width
   so 7 tabs are equally spaced (matching Futu's intraday row layout). */
.futu-bc-tabs {
  display: flex;
  align-items: center;
  padding: 6px 8px 4px;
  border-bottom: 1px solid #f2f2f2;
}

.futu-bc-tabs-top {
  border-bottom: none;
  padding-bottom: 0;
}
.futu-bc-tabs-bottom {
  padding-top: 2px;
}
/* 币安单行 / 富途单行 */
.futu-bc-tabs-crypto,
.futu-bc-tabs-futu {
  padding: 4px 6px;
}

.futu-bc-tab {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: none;
  color: #8a8a8a;
  font-size: 13px;
  padding: 8px 0;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 6px;
}

.futu-bc-tab.active {
  color: #1a1a1a;
  font-weight: 600;
}

.futu-bc-tab-depth {
  color: #8a8a8a;
  margin-left: 2px;
}

.futu-bc-icon-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  color: #444;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.futu-bc-icon-btn + .futu-bc-icon-btn { margin-left: -2px; }

/* ===== Main chart ===== */
.futu-bc-main-wrap {
  position: relative;
  height: 280px;
  background: #ffffff;
  border-bottom: 1px solid #f5f5f5;
}

.futu-bc-main-canvas {
  width: 100%;
  height: 100%;
}

.futu-bc-ind-hdr {
  position: absolute;
  top: 6px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  gap: 12px;
  font-size: 11px;
  color: #444;
  pointer-events: none;
}
.futu-bc-ind-hdr-key { font-weight: 600; }
.futu-bc-ind-hdr-val b { font-weight: 600; }

.futu-bc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
  pointer-events: none;
  background: rgba(255,255,255,0.6);
}
.futu-bc-overlay.err { color: #f04a44; }

/* ===== MACD sub-pane ===== */
.futu-bc-macd-wrap {
  position: relative;
  height: 110px;
  border-bottom: 1px solid #f5f5f5;
  background: #ffffff;
}
.futu-bc-macd-canvas {
  width: 100%;
  height: 100%;
}
.futu-bc-macd-hdr {
  position: absolute;
  top: 4px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  gap: 12px;
  font-size: 11px;
  pointer-events: none;
}
.futu-bc-macd-hdr b { font-weight: 600; }

/* ===== Indicator toggle row ===== */
.futu-bc-ind-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid #f2f2f2;
  overflow-x: auto;
}
.futu-bc-ind-row::-webkit-scrollbar { display: none; }

.futu-bc-ind-chip {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #9a9a9a;
  font-size: 12px;
  font-family: inherit;
  padding: 4px 6px;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.futu-bc-ind-chip.on {
  color: #1a1a1a;
  font-weight: 600;
}

.futu-bc-ind-sep {
  width: 1px;
  height: 14px;
  background: #d8d8d8;
  margin: 0 8px;
  flex: 0 0 auto;
}

.futu-bc-ind-trend {
  margin-left: auto;
  background: transparent;
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* ===== 时段底部弹出表 ===== */
.futu-bc-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 200;
}

.futu-bc-period-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  z-index: 201;
  padding: 0 0 32px;
  max-width: 480px;
  margin: 0 auto;
}

.futu-bc-sheet-handle {
  width: 36px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  margin: 10px auto 4px;
}

.futu-bc-sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  padding: 12px 20px 8px;
}

.futu-bc-period-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 13px 20px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.futu-bc-period-row.selected {
  background: transparent;
}

.futu-bc-period-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-bc-period-label {
  flex: 1;
  font-size: 16px;
  color: #1a1a1a;
}

.futu-bc-period-check {
  flex: 0 0 auto;
}

/* ===== Binance 时段选择器（置顶 + 可用 + 自定义） =====
   Dark themed bottom sheet matching Binance reference UI. */
.futu-bc-period-sheet-binance {
  background: #1c1f24;
  color: #ffffff;
  padding-bottom: 28px;
}
.futu-bc-period-sheet-binance .futu-bc-sheet-handle {
  background: #3a3f48;
}

.futu-bc-binance-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 8px;
}
.futu-bc-binance-section-title {
  font-size: 14px;
  color: #a0a4ad;
  font-weight: 500;
}
.futu-bc-binance-edit {
  background: transparent;
  border: none;
  color: #f0b90b;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 4px;
}

.futu-bc-binance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 4px 14px 6px;
}

.futu-bc-binance-chip {
  background: #2b2f37;
  border: 1px solid transparent;
  color: #d4d6db;
  font-size: 14px;
  font-family: inherit;
  padding: 10px 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
}
.futu-bc-binance-chip.selected {
  background: #3a3f48;
  color: #ffffff;
  border-color: #f0b90b;
}
.futu-bc-binance-chip-add {
  color: #a0a4ad;
  font-size: 18px;
  font-weight: 400;
}

/* ===== Period stats strip ===== */
.futu-bc-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 10px 6px 14px;
  border-bottom: 1px solid #f2f2f2;
}

.futu-bc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.futu-bc-stat-lbl {
  font-size: 11px;
  color: #8a8a8a;
}
.futu-bc-stat-val {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #999;
}
/* ===== Intraday time axis ===== */
.futu-bc-time-axis {
  display: flex;
  justify-content: space-between;
  padding: 4px 60px 4px 10px; /* right pad ≈ price-scale width */
  font-size: 11px;
  color: #8a8a8a;
  background: #ffffff;
  border-bottom: 1px solid #f5f5f5;
  font-variant-numeric: tabular-nums;
}

/* Follow Binance's Western convention in this chart module: up=green, down=red.
   (Rest of the page keeps Asian convention; this block mirrors the reference.) */
.futu-bc-stat-val[data-pos="true"]  { color: #13aa5c; }
.futu-bc-stat-val[data-pos="false"] { color: #f04a44; }

/* K-Line picker + popups — color tokens match futu/docs/kline_ui_design_prd.html §7. */

.kp-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: #ffffff;
  border-bottom: 1px solid #e6e6e6;
  font-family: -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  /* 5 个 inline + 左右 pill + grid 在 402px 移动屏要全部塞下、不能换行；
     overflow-x:auto 是兜底，正常情况下不会出现滚动条 */
  overflow-x: auto;
  scrollbar-width: none;
}
.kp-row::-webkit-scrollbar { display: none; }

/* ─── Pills (left + right) ─────────────────────────────────────────── */
/* 基础样式不带 border / background, 跟 .kp-inline 视觉一致；右 pill (有
   caret 的下拉触发) 在 .kp-pill-right 上单独加回边框，让用户一眼看出
   "这里能点开 popup". 左 pill (1D) 是单选 label, 没有 popup, 不需要框. */
.kp-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  border-radius: 99px;
  font-weight: 500;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.kp-pill--active {
  background: #f0f0f0;
  font-weight: 600;
}
.kp-pill-caret {
  font-size: 10px;
  margin-left: 2px;
  color: #888888;
}
.kp-pill-right {
  margin-left: 4px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  background: #ffffff;
}

/* ─── Inline (5日 / 日K / 周K / 月K / 季K) ──────────────────────────── */
.kp-inline {
  padding: 4px 8px;
  border: none;
  background: transparent;
  font-weight: 500;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.kp-inline--active {
  background: #f0f0f0;
  font-weight: 600;
}

/* ─── Trailing icons ───────────────────────────────────────────────── */
.kp-icon {
  margin-left: auto;
  padding: 4px;
  border: none;
  background: transparent;
  color: #555555;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kp-icon[disabled] {
  color: #c0c0c0;
  cursor: not-allowed;
}
.kp-icon + .kp-icon {
  margin-left: 0;
}

/* ─── Bottom sheet (shared by both popups) ─────────────────────────── */
.kp-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
  animation: kp-fade-in 0.15s ease-out;
}
.kp-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 8px 18px 24px;
  z-index: 999;
  max-height: 70vh;
  overflow-y: auto;
  animation: kp-sheet-up 0.18s ease-out;
}
.kp-sheet-handle {
  width: 36px;
  height: 4px;
  background: #e6e6e6;
  border-radius: 2px;
  margin: 6px auto 14px;
}
.kp-sheet-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
}

/* ─── Session popup (left) ─────────────────────────────────────────── */
.kp-session-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kp-session-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 8px;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
}
.kp-session-row--active {
  border-color: #ff6a00;
}
.kp-session-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 26px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
}
.kp-session-label {
  flex: 1;
  font-size: 17px;
  font-weight: 500;
  color: #1a1a1a;
}
.kp-session-check {
  color: #ff6a00;
  font-size: 18px;
  font-weight: 700;
}

/* ─── Interval popup (right) ───────────────────────────────────────── */
.kp-section {
  margin-bottom: 22px;
}
.kp-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 12px;
}
.kp-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 600px) {
  .kp-section-grid { grid-template-columns: repeat(4, 1fr); }
}
.kp-grid-btn {
  height: 48px;
  padding: 0 10px;
  background: #fafafa;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kp-grid-btn--active {
  border-color: #ff6a00;
  font-weight: 600;
}

/* ─── Animations ───────────────────────────────────────────────────── */
@keyframes kp-fade-in {
  from { opacity: 0 } to { opacity: 1 }
}
@keyframes kp-sheet-up {
  from { transform: translateY(20%); opacity: 0 }
  to   { transform: translateY(0);   opacity: 1 }
}
/* Top-level chart shell. Picker has its own picker.css. */

.kc-root {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  width: 100%;
}

.kc-pane {
  position: relative;
  width: 100%;
  height: 480px;
  background: #ffffff;
}

.kc-canvas {
  position: absolute;
  inset: 22px 0 0 0;   /* leave room for the volume header */
}
/* Inner chart-only container — sibling of the session-shading SVG overlay.
   Both fill .kc-canvas so the SVG aligns pixel-for-pixel with the chart. */
.kc-canvas-chart {
  position: absolute;
  inset: 0;
}

.kc-vol-header {
  position: absolute;
  top: 6px;
  left: 12px;
  z-index: 2;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color: #888888;
  pointer-events: none;
}
/* Volume cumulative number is intentionally red regardless of direction —
   moomoo convention preserved (spec §12). */
.kc-vol-cum {
  color: #ec3a4c;
  font-weight: 600;
  margin-left: 4px;
}
.kc-vol-session {
  color: #888888;
  font-weight: 400;
  margin-left: 4px;
}
/* Close-auction note — small inline hint on intraday stock charts. The native
   tooltip (title attribute) carries the longer Chinese explanation; this just
   needs to be unobtrusive but discoverable. pointer-events:auto so the title
   tooltip activates (the parent disables them so the chart stays clickable). */
.kc-vol-note {
  color: #b0b0b0;
  font-weight: 400;
  font-size: 10px;
  margin-left: 8px;
  cursor: help;
  pointer-events: auto;
}

.kc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  color: #888888;
  z-index: 5;
  pointer-events: none;
}
.kc-overlay--err {
  color: #ec3a4c;
}

/* 1D 分时图：完全自定义 X 轴。lightweight-charts 自带 tick labels 通过
   tickMarkFormatter:()=>'' 隐藏，我们 overlay 这一行 absolute 定位的固定
   时刻 labels（富途 iOS 风格 set，按市场不同：港股 9:30/11:30/12:00/13:00/
   14:30/16:00；美股 9:30/11:00/12:30/14:00/15:30/16:00）。
   每个 .kc-x-axis-tick 的 left 由 chart.timeScale().timeToCoordinate(ts)
   计算（见 LineEngine），保证跟 chart 主体的时间轴像素对齐。 */
.kc-x-axis {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 14px;
  pointer-events: none;
  z-index: 4;
}
.kc-x-axis-tick {
  position: absolute;
  bottom: 0;
  font-size: 11px;
  color: #888888;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: nowrap;
  line-height: 1;
}
/* anchor 决定 label 相对 tick 像素位置怎么对齐——center 标签的中心，start
   标签从 tick 起 (用于最左 tick 防被 chart left edge 截), end 标签到 tick 止
   (用于最右 tick 防被 right edge 截). 默认 center 对应富途 iOS X 轴对齐. */
.kc-x-axis-tick--center { transform: translateX(-50%); }
.kc-x-axis-tick--start  { transform: translateX(0); }
.kc-x-axis-tick--end    { transform: translateX(-100%); }
/* FutuCompanyPanel — 分析(财务) + 概览 tab 内容的 Futu 浅色风格 */

.futu-cp {
  padding: 12px 16px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', sans-serif;
  color: #1a1a1a;
  background: #ffffff;
}

.futu-cp-state {
  padding: 60px 20px;
  text-align: center;
  color: #8a8a8a;
  font-size: 13px;
}
.futu-cp-err { color: #f04a44; }

.futu-cp-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 18px 0 10px;
}
.futu-cp-section-title:first-child { margin-top: 4px; }

/* ===== Financials grid (two-column rows) ===== */
.futu-cp-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #f2f2f2;
}
.futu-cp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #f6f6f6;
}
.futu-cp-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.futu-cp-lbl {
  font-size: 12px;
  color: #8a8a8a;
  flex-shrink: 0;
}
.futu-cp-val {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Overview — company summary + K-V lists ===== */
.futu-cp-summary {
  font-size: 13px;
  line-height: 1.7;
  color: #444;
  padding: 4px 0 4px;
  white-space: pre-wrap;
}

.futu-cp-kv {
  border-top: 1px solid #f2f2f2;
}
.futu-cp-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #f6f6f6;
}
.futu-cp-kv-row .futu-cp-lbl { flex: 0 0 auto; }
.futu-cp-kv-row .futu-cp-val {
  text-align: right;
  word-break: break-all;
  min-width: 0;
}
.futu-cp-kv-row .futu-cp-val a {
  color: #ff8a1e;
  text-decoration: none;
}

/* ===== Dark theme support (piggyback off the account-page toggle) ===== */
html[data-theme='dark'] .futu-cp {
  background: #0f1115;
  color: #f0f0f0;
}
html[data-theme='dark'] .futu-cp-section-title,
html[data-theme='dark'] .futu-cp-val { color: #f0f0f0; }
html[data-theme='dark'] .futu-cp-lbl { color: #8a8a8a; }
html[data-theme='dark'] .futu-cp-summary { color: #c5c5c5; }
html[data-theme='dark'] .futu-cp-grid,
html[data-theme='dark'] .futu-cp-kv { border-top-color: #242631; }
html[data-theme='dark'] .futu-cp-row,
html[data-theme='dark'] .futu-cp-kv-row { border-bottom-color: #1c1e26; }
/* ===== Futu iOS Detail Page — light theme, pixel-based on Futu iOS screenshot ===== */
.futu-detail-page {
  position: fixed;
  inset: 0;
  background: #ffffff;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== Top bar ===== */
.futu-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 4px 6px;
  height: 44px;
  flex-shrink: 0;
  background: #ffffff;
}

.futu-detail-back {
  background: transparent;
  border: none;
  color: #1a1a1a;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-detail-topbar-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.futu-detail-ai-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 4px;
  background: linear-gradient(135deg, #eaf0ff 0%, #f5f0ff 100%);
  border-radius: 16px;
  font-size: 13px;
  color: #4a7fff;
  font-weight: 500;
  margin-right: 4px;
}

.futu-detail-ai-face {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6ea8ff 0%, #3a5fd1 100%);
  box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.3);
}

.futu-detail-icon-btn {
  background: transparent;
  border: none;
  color: #1a1a1a;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-detail-fav-btn {
  color: #e74c3c;
}

/* ===== Category tabs ===== */
.futu-detail-cat-tabs {
  display: flex;
  padding: 0 12px;
  gap: 16px;
  border-bottom: 1px solid #eeeeee;
  overflow-x: auto;
  scrollbar-width: none;
  height: 40px;
  align-items: center;
  flex-shrink: 0;
}
.futu-detail-cat-tabs::-webkit-scrollbar {
  display: none;
}

.futu-detail-cat-tab {
  background: transparent;
  border: none;
  color: #666666;
  font-size: 15px;
  font-family: inherit;
  padding: 8px 0;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

.futu-detail-cat-tab.active {
  color: #1a1a1a;
  font-weight: 600;
  font-size: 17px;
}

.futu-detail-cat-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 1px;
}

.futu-detail-cat-dot {
  position: absolute;
  top: 6px;
  right: -4px;
  width: 5px;
  height: 5px;
  background: #ff3b30;
  border-radius: 50%;
}

/* ===== Scrollable content ===== */
.futu-detail-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
}

/* ===== Stock header ===== */
.futu-detail-stock-header {
  padding: 10px 14px 4px;
}

.futu-detail-stock-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.futu-detail-stock-symbol {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.3px;
}

.futu-detail-stock-name {
  font-size: 16px;
  color: #1a1a1a;
  font-weight: 500;
}

.futu-detail-stock-caret {
  font-size: 10px;
  color: #8a8a8a;
}

.futu-detail-stock-sub {
  margin-top: 4px;
  font-size: 11px;
  color: #9a9a9a;
}

/* ===== Price row (big price + mini 2x2 grid on right) ===== */
.futu-detail-price-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  padding: 4px 14px 10px;
  gap: 12px;
  align-items: center;
  overflow: hidden;
}

.futu-detail-price-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.futu-detail-big-price {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.futu-detail-price-arrow {
  font-size: 16px;
  font-weight: 500;
}

.futu-detail-change {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.futu-detail-change-pct {
  font-size: 12px;
}

.futu-detail-price-right-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  row-gap: 4px;
  column-gap: 10px;
  min-width: 0;
}

.futu-detail-mini-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
}

.futu-detail-mini-label {
  color: #8a8a8a;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.futu-detail-mini-val {
  color: #1a1a1a;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
  text-align: right;
}

.futu-detail-mini-val.high {
  color: #f04a44;
}

.futu-detail-mini-val.low {
  color: #13aa5c;
}

/* ===== Secondary metrics rows (collapsible) ===== */
.futu-detail-sec-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 6px 14px;
  gap: 6px;
  overflow: hidden;
}

.futu-detail-sec-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
}

.futu-detail-sec-label {
  color: #8a8a8a;
  white-space: nowrap;
  flex-shrink: 0;
}

.futu-detail-sec-val {
  color: #1a1a1a;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.futu-detail-sec-val.high {
  color: #f04a44;
}

.futu-detail-sec-val.low {
  color: #13aa5c;
}

.futu-detail-sec-caret {
  font-size: 9px;
  color: #8a8a8a;
}

.futu-detail-expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 0 10px;
  background: transparent;
  border: none;
  color: #9a9a9a;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.futu-detail-expand-toggle:active {
  opacity: 0.6;
}

/* ===== Post-market row ===== */
.futu-detail-post-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.futu-detail-post-label {
  color: #8a8a8a;
  font-size: 12px;
}

.futu-detail-post-price {
  font-weight: 600;
}

.futu-detail-post-change {
  margin-left: auto;
}

.futu-detail-post-time {
  color: #8a8a8a;
  font-size: 11px;
}

/* ===== BBO bar (买盘/卖盘 ratio + best bid/ask) ===== */
.futu-detail-bbo {
  padding: 12px 14px 10px;
  border-bottom: 1px solid #f0f0f0;
  font-variant-numeric: tabular-nums;
}

.futu-detail-bbo-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.futu-detail-bbo-label {
  font-size: 13px;
  color: #1a1a1a;
}
.futu-detail-bbo-label.right {
  margin-left: auto;
  margin-right: 8px;
}
.futu-detail-bbo-icon {
  background: transparent;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.futu-detail-bbo-bar {
  display: flex;
  width: 100%;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.futu-detail-bbo-bar-bid {
  background: #f04a44;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
  min-width: 32px;
}
.futu-detail-bbo-bar-ask {
  background: #13aa5c;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  min-width: 32px;
}
.futu-detail-bbo-bar-pct {
  font-size: 12px;
  color: #ffffff;
  font-weight: 500;
}

.futu-detail-bbo-row {
  display: flex;
  gap: 6px;
}
.futu-detail-bbo-cell {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
}
.futu-detail-bbo-cell.bid {
  background: #fff1f0;
  color: #f04a44;
}
.futu-detail-bbo-cell.ask {
  background: #ecfaf2;
  color: #13aa5c;
}
.futu-detail-bbo-cell.ask {
  flex-direction: row-reverse;
}
.futu-detail-bbo-tag {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 400;
}
.futu-detail-bbo-cell.bid .futu-detail-bbo-tag,
.futu-detail-bbo-cell.ask .futu-detail-bbo-tag {
  color: #1a1a1a;
}
.futu-detail-bbo-price {
  font-size: 17px;
  font-weight: 600;
  flex: 1;
}
.futu-detail-bbo-cell.ask .futu-detail-bbo-price {
  text-align: left;
}
.futu-detail-bbo-vol {
  font-size: 14px;
  color: #1a1a1a;
}

/* ===== Premium unlock marketing banner ===== */
.futu-detail-premium-banner {
  position: relative;
  display: flex;
  align-items: center;
  margin: 8px 14px 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff5e6 0%, #fff1d6 100%);
  border-radius: 8px;
  font-size: 14px;
  color: #1a1a1a;
}
.futu-detail-premium-text {
  flex: 1;
  font-size: 13px;
  color: #5a3d10;
}
.futu-detail-premium-cta {
  background: linear-gradient(135deg, #ffc56e, #f6a623);
  color: #5a3d10;
  border: none;
  padding: 6px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.futu-detail-premium-cta:active { opacity: 0.85; }

.futu-detail-premium-close {
  position: absolute;
  top: -6px;
  right: -6px;
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== 筹码分布 (chip distribution) ===== */
.futu-detail-chips {
  padding: 16px 14px 14px;
  border-top: 8px solid #f4f4f4;
}

.futu-detail-chips-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.futu-detail-chips-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.futu-detail-chips-info {
  font-size: 13px;
  color: #b0b0b0;
}
.futu-detail-chips-arrow {
  margin-left: auto;
  color: #9b9b9b;
  font-size: 18px;
}
.futu-detail-chips-date {
  font-size: 12px;
  color: #9b9b9b;
  margin-top: 4px;
  margin-bottom: 14px;
}

.futu-detail-chips-body {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.futu-detail-chips-hist {
  position: relative;
  flex: 1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0;
}
.futu-detail-chips-row {
  display: flex;
  align-items: center;
  height: 100%;
  flex: 1;
}
.futu-detail-chips-bar {
  height: 4px;
  border-radius: 2px;
}
.futu-detail-chips-bar.up {
  background: #f04a44;
}
.futu-detail-chips-bar.down {
  background: #f6b3b1;
}

.futu-detail-chips-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  pointer-events: none;
}
.futu-detail-chips-line.pressure { background: #f6a623; }
.futu-detail-chips-line.average  { background: #b0b0b0; }
.futu-detail-chips-line.support  { background: #4a7fff; }

.futu-detail-chips-stats {
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.futu-detail-chips-profit-label {
  font-size: 13px;
  color: #1a1a1a;
  margin-bottom: 4px;
}
.futu-detail-chips-profit-val {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 14px;
}

.futu-detail-chips-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #1a1a1a;
}
.futu-detail-chips-stat .dot {
  display: inline-block;
  width: 8px;
  height: 2px;
}
.futu-detail-chips-stat .dot.pressure { background: #f6a623; }
.futu-detail-chips-stat .dot.average  { background: #b0b0b0; }
.futu-detail-chips-stat .dot.support  { background: #4a7fff; }
.futu-detail-chips-stat .label {
  color: #5a5a5a;
  flex: 1;
}
.futu-detail-chips-stat .val {
  font-weight: 600;
  color: #1a1a1a;
}

/* ===== 资金分布 (capital distribution donut) ===== */
.futu-detail-funds {
  padding: 16px 14px 18px;
  border-top: 8px solid #f4f4f4;
}

.futu-detail-funds-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.futu-detail-funds-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.futu-detail-funds-info {
  font-size: 13px;
  color: #b0b0b0;
}
.futu-detail-funds-share {
  margin-left: 4px;
  color: #9b9b9b;
}
.futu-detail-funds-unit {
  font-size: 12px;
  color: #9b9b9b;
  margin-top: 4px;
  margin-bottom: 16px;
}

.futu-detail-funds-donut-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 12px;
}
.futu-detail-funds-donut {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.futu-detail-funds-donut-label {
  font-size: 12px;
  fill: #5a5a5a;
}
.futu-detail-funds-donut-net {
  font-size: 16px;
  font-weight: 700;
  fill: #1a1a1a;
}
.futu-detail-funds-pctlabel {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.futu-detail-funds-pctlabel.buy { color: #0e8e4e; }
.futu-detail-funds-pctlabel.sell { color: #c8302a; }

.futu-detail-funds-totals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  margin: 8px 0 18px;
  font-variant-numeric: tabular-nums;
}
.futu-detail-funds-totals-label {
  color: #5a5a5a;
}
.futu-detail-funds-totals-val {
  font-weight: 700;
  font-size: 17px;
}
.futu-detail-funds-totals-val.in  { color: #f04a44; }
.futu-detail-funds-totals-val.out { color: #13aa5c; }
.futu-detail-funds-totals-spacer { width: 36px; }

.futu-detail-funds-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.futu-detail-funds-tier-row {
  display: grid;
  grid-template-columns: 50px 1fr 44px 1fr 50px;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.futu-detail-funds-tier-val {
  color: #1a1a1a;
}
.futu-detail-funds-tier-val.left  { text-align: right; }
.futu-detail-funds-tier-val.right { text-align: left; }
.futu-detail-funds-tier-bar-wrap {
  display: flex;
  align-items: center;
  height: 8px;
}
.futu-detail-funds-tier-bar-wrap.left  { justify-content: flex-end; }
.futu-detail-funds-tier-bar-wrap.right { justify-content: flex-start; }
.futu-detail-funds-tier-bar {
  display: inline-block;
  height: 8px;
  border-radius: 1px;
}
.futu-detail-funds-tier-label {
  text-align: center;
  color: #5a5a5a;
  font-size: 12px;
}

/* ===== 资金流向 (capital flow line chart) ===== */
.futu-detail-flow {
  padding: 16px 14px 18px;
  border-top: 8px solid #f4f4f4;
}

.futu-detail-flow-header {
  margin-bottom: 14px;
}
.futu-detail-flow-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.futu-detail-flow-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.futu-detail-flow-tab {
  background: transparent;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
}
.futu-detail-flow-tab.active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
}

.futu-detail-flow-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 4px;
}

.futu-detail-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: #b0b0b0;
}
.futu-detail-flow-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.futu-detail-flow-legend-item.active {
  color: #1a1a1a;
}
.futu-detail-flow-legend-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* ===== 牛牛AI 日报/周报 ===== */
.futu-detail-ai-section {
  padding: 16px 14px 12px;
  border-top: 8px solid #f4f4f4;
}

.futu-detail-ai-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.futu-detail-ai-title {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
}
.futu-detail-ai-info {
  font-size: 13px;
  color: #b0b0b0;
}

.futu-detail-ai-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.futu-detail-ai-tab {
  background: transparent;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 5px 16px;
  font-family: inherit;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
}
.futu-detail-ai-tab.active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
}

.futu-detail-ai-card {
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  padding: 14px 14px 0;
}

.futu-detail-ai-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f3f3f3;
}
.futu-detail-ai-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.futu-detail-ai-card-title-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.futu-detail-ai-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}
.futu-detail-ai-card-time {
  font-size: 11px;
  color: #9b9b9b;
  margin-top: 4px;
}

.futu-detail-ai-card-section {
  padding: 12px 0;
  border-bottom: 1px solid #f3f3f3;
}
.futu-detail-ai-card-section-title {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 500;
  margin-bottom: 6px;
}
.futu-detail-ai-card-section-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #1a1a1a;
}
.futu-detail-ai-tag {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.futu-detail-ai-tag.bullish {
  background: #fff1f0;
  color: #f04a44;
}
.futu-detail-ai-tag.bearish {
  background: #ecfaf2;
  color: #13aa5c;
}
.futu-detail-ai-card-section-text {
  flex: 1;
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.futu-detail-ai-source {
  font-size: 11px;
  color: #9b9b9b;
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

.futu-detail-ai-card-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 12px;
}
.futu-detail-ai-card-cta-text {
  flex: 1;
  font-size: 12px;
  color: #5a3d10;
}
.futu-detail-ai-card-cta-btn {
  background: linear-gradient(135deg, #ffc56e, #f6a623);
  color: #5a3d10;
  border: none;
  padding: 5px 14px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* ===== Period tabs ===== */
.futu-detail-period-tabs {
  display: flex;
  align-items: center;
  padding: 8px 6px 4px;
  gap: 2px;
  border-bottom: 1px solid #f0f0f0;
}

.futu-detail-period-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: #666666;
  font-size: 13px;
  padding: 8px 0;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.futu-detail-period-tab.active {
  color: #1a1a1a;
  font-weight: 600;
  position: relative;
}

.futu-detail-period-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #1a1a1a;
  border-radius: 1px;
}

.futu-detail-period-caret {
  font-size: 9px;
  color: #999999;
}

.futu-detail-period-more {
  flex: 0 0 auto;
  width: 32px;
  padding: 8px 4px;
  color: #1a1a1a;
}

/* ===== Chart ===== */
.futu-detail-chart-wrap {
  position: relative;
  height: 300px;
  background: #ffffff;
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
}

.futu-detail-chart-canvas {
  width: 100%;
  height: calc(100% - 22px);
}

.futu-detail-chart-time-labels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 55px;
  height: 22px;
  line-height: 22px;
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 11px;
  color: #888;
  pointer-events: none;
  z-index: 2;
  font-variant-numeric: tabular-nums;
}

.futu-detail-chart-time-labels.five-day {
  justify-content: space-around;
}

.futu-detail-chart-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.8);
}

.futu-detail-chart-overlay.error {
  color: #f04a44;
}

/* ===== Index ticker (bottom of scroll) ===== */
.futu-detail-index-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  background: #fafafa;
  font-variant-numeric: tabular-nums;
}

.futu-detail-index-name {
  color: #1a1a1a;
  font-weight: 500;
}

.futu-detail-index-price {
  color: #1a1a1a;
  font-weight: 600;
}

.futu-detail-index-change,
.futu-detail-index-pct {
  font-weight: 500;
}

.futu-detail-index-change.high,
.futu-detail-index-pct.high {
  color: #f04a44;
}

.futu-detail-index-change.low,
.futu-detail-index-pct.low {
  color: #13aa5c;
}

.futu-detail-index-caret {
  margin-left: auto;
  color: #999;
  font-size: 11px;
}

/* ===== Bottom action bar ===== */
.futu-detail-bottom-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.futu-detail-btn {
  height: 40px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0 24px;
}

.futu-detail-btn-buy {
  background: #f04a44;
  color: #ffffff;
  flex: 1;
}

.futu-detail-btn-sell {
  background: #13aa5c;
  color: #ffffff;
  flex: 1;
}

.futu-detail-btn-icon {
  background: transparent;
  border: none;
  color: #1a1a1a;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.futu-detail-btn:active,
.futu-detail-btn-icon:active {
  opacity: 0.7;
}

/* ===== Stock switcher bottom sheet ===== */
.futu-switcher-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 900;
  animation: futu-fade-in 160ms ease-out;
}

.futu-switcher-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  z-index: 901;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  animation: futu-slide-up 220ms cubic-bezier(.25,.8,.25,1);
}

@keyframes futu-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes futu-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.futu-switcher-handle {
  width: 36px;
  height: 4px;
  background: #d0d0d0;
  border-radius: 2px;
  margin: 4px auto 12px;
}

.futu-switcher-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f3f3f3;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.futu-switcher-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  color: #1a1a1a;
}

.futu-switcher-search input::placeholder {
  color: #a0a0a0;
}

.futu-switcher-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 6px 4px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.futu-switcher-tab {
  background: transparent;
  border: none;
  color: #666;
  font-size: 15px;
  padding: 6px 0;
  cursor: pointer;
  font-family: inherit;
  position: relative;
}

.futu-switcher-tab.active {
  color: #1a1a1a;
  font-weight: 600;
  font-size: 16px;
}

.futu-switcher-tab.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #ff7a1a;
  border-radius: 1px;
}

.futu-switcher-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 6px;
}

.futu-switcher-empty {
  padding: 40px 0;
  text-align: center;
  color: #a0a0a0;
  font-size: 13px;
}

.futu-switcher-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.futu-switcher-row:active {
  background: #f8f8f8;
}

.futu-switcher-row.current {
  background: #fff6ef;
}

.futu-switcher-badge {
  width: 22px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #ffffff;
  border-radius: 3px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.futu-switcher-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.futu-switcher-name {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.futu-switcher-code {
  font-size: 12px;
  color: #9a9a9a;
  font-variant-numeric: tabular-nums;
}

/* ===== Alert sheet ===== */
.futu-alert-header {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  padding: 6px 0 4px;
}

.futu-alert-sub {
  font-size: 12px;
  color: #9a9a9a;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.futu-alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #f5f5f5;
}

.futu-alert-label {
  width: 48px;
  font-size: 14px;
  color: #1a1a1a;
}

.futu-alert-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

.futu-alert-unit {
  font-size: 12px;
  color: #9a9a9a;
}

.futu-alert-actions {
  display: flex;
  gap: 10px;
  padding-top: 16px;
}

.futu-alert-btn {
  flex: 1;
  height: 42px;
  border-radius: 21px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.futu-alert-btn.secondary {
  background: #f3f3f3;
  color: #1a1a1a;
}

.futu-alert-btn.primary {
  background: #ff7a1a;
  color: #ffffff;
}

.futu-alert-btn:active {
  opacity: 0.85;
}

/* ===== More-actions sheet (股票对比/笔记/添加到/特别关注/备注/页面设置) ===== */
.futu-action-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  background: #ffffff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  display: flex;
  flex-direction: column;
  padding: 8px 0 0;
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
  animation: futu-slide-up 220ms cubic-bezier(.25,.8,.25,1);
}

.futu-action-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 24px;
  padding: 16px 8px 8px;
}

.futu-action-cell {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.futu-action-cell:disabled {
  opacity: 0.5;
}

.futu-action-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-action-label {
  font-size: 13px;
  color: #1a1a1a;
}

.futu-action-cancel {
  margin-top: 8px;
  background: #ffffff;
  border: none;
  border-top: 1px solid #f0f0f0;
  font-family: inherit;
  font-size: 16px;
  color: #1a1a1a;
  height: 50px;
  cursor: pointer;
  font-weight: 400;
}
.futu-action-cancel:active {
  background: #f5f5f5;
}

/* ===== Share sheet (WhatsApp/微信/Line/牛牛圈/分享图片/复制链接) ===== */
.futu-share-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  background: #ffffff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  display: flex;
  flex-direction: column;
  padding: 8px 0 0;
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
  animation: futu-slide-up 220ms cubic-bezier(.25,.8,.25,1);
}

.futu-share-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #f3f3f3;
}
.futu-share-icon-tile {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.futu-share-header-text {
  display: flex;
  flex-direction: column;
}
.futu-share-header-title {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: 500;
}
.futu-share-header-sub {
  font-size: 12px;
  color: #9b9b9b;
  margin-top: 2px;
}

.futu-share-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 18px 8px 8px;
  row-gap: 18px;
}

.futu-share-channel {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 4px 0;
}

.futu-share-channel-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.futu-share-channel-icon-secondary {
  background: #f0f0f0;
}

.futu-share-channel-label {
  font-size: 12px;
  color: #1a1a1a;
  text-align: center;
}

/* ===== Toast ===== */
.futu-detail-toast {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: rgba(30, 30, 30, 0.88);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 950;
  pointer-events: none;
  animation: futu-fade-in 140ms ease-out;
}

/* ===== Bell dot indicator ===== */
.futu-detail-btn-icon {
  position: relative;
}

.futu-detail-btn-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  background: #f04a44;
  border-radius: 50%;
}

/* ===== Period tab: dropdown chip (1D / 年K) ===== */
/* 富途左上角的 1D 独立成小黑色方框样式：细黑边、近乎直角（圆角 3px）、
 * 紧凑 padding，黑字。年K 同样式。点击弹出 bottom sheet。
 * 覆盖 .futu-detail-period-tab 的 flex:1 平铺行为让 chip 贴合内容。 */
.futu-detail-period-tab.has-dropdown {
  flex: 0 0 auto;
  border: 1px solid #1a1a1a;
  border-radius: 3px;
  padding: 3px 7px;
  font-size: 11px;
  gap: 2px;
  background: #ffffff;
  color: #1a1a1a;
  margin-right: 2px;
  line-height: 1.2;
}

/* chip 的 active 状态用边框表达，不要下划线；保持白底黑字黑边的线框样式 */
.futu-detail-period-tab.has-dropdown.active::after {
  display: none;
}

.futu-detail-period-tab.has-dropdown.active {
  background: #ffffff;
  color: #1a1a1a;
  font-weight: normal;
  border-color: #1a1a1a;
}

/* ===== Bottom sheet (shared by 1D picker, extend for future pickers) ===== */
.futu-detail-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  animation: futuDetailSheetFade 0.2s ease-out;
}

@keyframes futuDetailSheetFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.futu-detail-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  z-index: 101;
  padding-bottom: env(safe-area-inset-bottom, 0);
  animation: futuDetailSheetSlide 0.25s ease-out;
}

@keyframes futuDetailSheetSlide {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.futu-detail-sheet-handle {
  width: 40px;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  margin: 8px auto 0;
}

.futu-detail-sheet-title {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  padding: 14px 16px;
}

.futu-detail-sheet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  border-top: 1px solid #f0f0f0;
  font-family: inherit;
  font-size: 15px;
  color: #1a1a1a;
  cursor: pointer;
  text-align: left;
}

.futu-detail-sheet-item:active {
  background: #f5f5f5;
}

.futu-detail-sheet-item.active {
  color: #FF6B1A;
  font-weight: 500;
}

.futu-detail-sheet-cancel {
  display: block;
  width: calc(100% - 24px);
  margin: 12px 12px;
  padding: 14px;
  background: #f5f5f5;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  color: #1a1a1a;
  cursor: pointer;
}

.futu-detail-sheet-cancel:active {
  background: #e8e8e8;
}
.futu-order-page {
  position: fixed;
  inset: 0;
  background: #ffffff;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

/* ===== Top bar ===== */
.futu-order-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  height: 44px;
  flex-shrink: 0;
  background: #ffffff;
}

.futu-order-back,
.futu-order-refresh {
  background: transparent;
  border: none;
  color: #1a1a1a;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-order-title {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: left;
  padding-left: 4px;
}

/* ===== Scroll container ===== */
.futu-order-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px;
  /* 隐掉默认滚动条——宽屏下右侧会露出深色轨道，变成"黑边"。
     iOS 富途本身就无可见滚动条。 */
  scrollbar-width: none;
}
.futu-order-scroll::-webkit-scrollbar { display: none; }

/* ===== Account row ===== */
.futu-order-account-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 2px;
}

.futu-order-account-flag {
  font-size: 16px;
}

.futu-order-account-name {
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
}

.futu-order-pnl-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0 10px;
  font-size: 12px;
}

.futu-order-pnl-label {
  color: #8a8a8a;
}

.futu-order-pnl-val {
  color: #1a1a1a;
  font-weight: 500;
}

.futu-order-view-link {
  margin-left: auto;
  color: #ff7a1a;
  font-weight: 500;
}

/* ===== Stock info row ===== */
.futu-order-stock-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.futu-order-stock-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.futu-order-stock-code {
  font-size: 16px;
  font-weight: 600;
}

.futu-order-stock-name {
  font-size: 12px;
  color: #555;
}

.futu-order-stock-kline {
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-order-stock-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.futu-order-price-val {
  font-size: 17px;
  font-weight: 600;
}

.futu-order-price-pct {
  font-size: 13px;
  font-weight: 500;
}

/* ===== Bid/Ask row ===== */
.futu-order-ba-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 6px 0 14px;
  border-radius: 6px;
  overflow: hidden;
}

.futu-order-ba-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.futu-order-ba-cell.ba-buy {
  background: #fdecec;
}

.futu-order-ba-cell.ba-sell {
  background: #e7f6ef;
}

.futu-order-ba-label {
  color: #8a8a8a;
  font-size: 12px;
}

.futu-order-ba-cell.ba-buy .futu-order-ba-price {
  color: #f04a44;
  font-weight: 600;
}

.futu-order-ba-cell.ba-sell .futu-order-ba-price {
  color: #13aa5c;
  font-weight: 600;
}

.futu-order-ba-qty {
  margin-left: auto;
  color: #1a1a1a;
}

/* ===== Form rows ===== */
.futu-order-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.futu-order-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 12px;
}

.futu-order-row-label {
  font-size: 14px;
  color: #1a1a1a;
}

.info-i {
  color: #b0b0b0;
  font-size: 11px;
}

.futu-order-side-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #f5f5f5;
  border-radius: 22px;
  padding: 3px;
  height: 36px;
}

.futu-order-side-btn {
  background: transparent;
  border: none;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  font-family: inherit;
}

.futu-order-side-btn.active.buy {
  background: #f04a44;
  color: #ffffff;
  font-weight: 600;
}

.futu-order-side-btn.active.sell {
  background: #13aa5c;
  color: #ffffff;
  font-weight: 600;
}

.futu-order-select {
  background: #f5f5f5;
  border: none;
  border-radius: 4px;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  color: #1a1a1a;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: inherit;
}

.futu-order-select .caret {
  font-size: 10px;
  color: #8a8a8a;
}

.futu-order-input-group {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.futu-order-input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

.futu-order-input-btn {
  background: #ffffff;
  border: none;
  border-left: 1px solid #eeeeee;
  color: #1a1a1a;
  padding: 0 14px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.futu-order-input-btn:active {
  background: #f5f5f5;
}

.futu-order-amount-val {
  font-size: 14px;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}

/* ===== Buying power row ===== */
.futu-order-power-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 8px;
  font-size: 12px;
}

.futu-order-power-cell {
  display: flex;
  gap: 6px;
}

.futu-order-power-cell .label {
  color: #8a8a8a;
}

.futu-order-power-cell .val {
  color: #1a1a1a;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ===== Submit button ===== */
.futu-order-submit-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0 12px;
}

.futu-order-submit-btn {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 22px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.futu-order-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.futu-order-submit-btn:active:not(:disabled) {
  opacity: 0.85;
}

.futu-order-submit-icon {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  color: #1a1a1a;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.futu-order-message {
  font-size: 13px;
  color: #1a1a1a;
  padding: 6px 0;
  text-align: center;
  background: #fffbe6;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* 卡住超过 15s 才显示的 "取消" 文字链，避免卡死时无处下手 */
.futu-order-cancel-link {
  display: block;
  width: 100%;
  margin: 4px 0 10px;
  padding: 8px 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: #888888;
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
}

.futu-order-cancel-link:active {
  color: #1a1a1a;
}

/* ===== Order type picker bottom sheet ===== */
.futu-order-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.4);
  animation: futu-fade-in 200ms ease;
}

.futu-order-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  background: #ffffff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  display: flex;
  flex-direction: column;
  padding: 8px 0 0;
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
  animation: futu-slide-up 220ms cubic-bezier(.25,.8,.25,1);
}

.futu-order-sheet-handle {
  width: 36px;
  height: 4px;
  background: #d8d8d8;
  border-radius: 2px;
  margin: 6px auto 8px;
}

.futu-order-sheet-title {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  padding: 8px 0 4px;
  border-bottom: 1px solid #f0f0f0;
}

.futu-order-sheet-item {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  font-family: inherit;
  font-size: 16px;
  color: #1a1a1a;
  cursor: pointer;
  border-bottom: 1px solid #f5f5f5;
}
.futu-order-sheet-item:last-of-type {
  border-bottom: none;
}
.futu-order-sheet-item.active {
  color: #FF6B1A;
  font-weight: 500;
}
.futu-order-sheet-item:active {
  background: #f5f5f5;
}

.futu-order-sheet-cancel {
  margin-top: 6px;
  background: #ffffff;
  border: none;
  border-top: 6px solid #f4f4f4;
  font-family: inherit;
  font-size: 16px;
  color: #1a1a1a;
  height: 52px;
  cursor: pointer;
}
.futu-order-sheet-cancel:active {
  background: #f5f5f5;
}

@keyframes futu-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes futu-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Disabled price input for market orders */
.futu-order-input:disabled {
  background: #f5f5f5;
  color: #888;
  cursor: not-allowed;
}

/* Persistent yellow login banner (clickable → opens Turnkey login) */
.futu-order-login-banner {
  display: block;
  width: 100%;
  background: #fffbe6;
  color: #1a1a1a;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 0;
  text-align: center;
  cursor: pointer;
  margin-top: 6px;
  margin-bottom: 6px;
}
.futu-order-login-banner:active {
  background: #fff5cc;
}

/* ===== Positions / Orders tabs ===== */
.futu-order-pos-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 0 6px;
  border-bottom: 1px solid #f0f0f0;
}

.futu-order-pos-tab {
  background: transparent;
  border: none;
  padding: 8px 0;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  position: relative;
  font-family: inherit;
}

.futu-order-pos-tab.active {
  color: #1a1a1a;
  font-weight: 600;
}

.futu-order-pos-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #1a1a1a;
}

.futu-order-real-badge {
  margin-left: auto;
  background: transparent;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

.futu-order-pos-table-header {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
  padding: 10px 0 8px;
  font-size: 12px;
  color: #8a8a8a;
}

.futu-order-pos-table-header span:nth-child(n+2) {
  text-align: right;
}

.futu-order-pos-empty {
  padding: 40px 0;
  text-align: center;
  color: #bbb;
  font-size: 13px;
}

/* 订单 tab — 富途风格卡片列表 */
.futu-orders-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0 12px;
}

.futu-orders-row {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.futu-orders-row:last-child {
  border-bottom: none;
}

.futu-orders-row-top,
.futu-orders-row-mid,
.futu-orders-row-bot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.futu-orders-row-mid {
  margin-top: 6px;
}

.futu-orders-row-bot {
  margin-top: 4px;
}

.futu-orders-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.futu-orders-symbol {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}

.futu-orders-cn {
  font-size: 12px;
  color: #8a8a8a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.futu-orders-status {
  font-size: 12px;
  font-weight: 500;
  color: #8a8a8a;
}

.futu-orders-status.status-filled { color: #13aa5c; }
.futu-orders-status.status-partial { color: #f4a836; }
.futu-orders-status.status-pending,
.futu-orders-status.status-submitted { color: #f4a836; }
.futu-orders-status.status-rejected { color: #f04a44; }
.futu-orders-status.status-cancelled { color: #b0b0b0; }

.futu-orders-side {
  font-size: 13px;
  font-weight: 600;
}

.futu-orders-type {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #8a8a8a;
}

.futu-orders-qpx {
  font-size: 13px;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}

.futu-orders-time,
.futu-orders-amount {
  font-size: 12px;
  color: #8a8a8a;
  font-variant-numeric: tabular-nums;
}
/* ===== Futu iOS — 自选页样式 (Watchlist Style Settings) =====
 * Pixel-mapped from Futu iOS screenshot. Light theme.
 * Built from scratch — no msdp-* / shared classes.
 */

.futu-style-page {
  position: fixed;
  inset: 0;
  background: #f4f4f4;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Top bar ── */
.futu-style-topbar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 6px;
  background: #f4f4f4;
  flex-shrink: 0;
}
.futu-style-back {
  background: transparent;
  border: none;
  padding: 8px;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.futu-style-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-left: 4px;
}

/* ── Scroll area ── */
.futu-style-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 14px 0;
}
.futu-style-bottom-pad {
  height: 32px;
}

/* ── Section header ── */
.futu-style-section-label {
  font-size: 13px;
  color: #9b9b9b;
  font-weight: 400;
  margin: 18px 4px 10px;
}

/* ── Grid ── */
.futu-style-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 0;
}
.futu-style-grid + .futu-style-grid {
  margin-top: 10px;
}
.futu-style-grid-2 { grid-template-columns: 1fr 1fr; }
.futu-style-grid-1 { grid-template-columns: 1fr; }

/* ── Base card ── */
.futu-style-card {
  background: #ffffff;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 16px 16px;
  font-family: inherit;
  font-size: 15px;
  color: #1a1a1a;
  text-align: left;
  cursor: pointer;
  display: flex;
  position: relative;
  transition: border-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.futu-style-card.selected {
  border-color: #1a1a1a;
}

/* ── 涨跌颜色 cards ── */
.futu-color-card {
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 16px 18px;
}
.futu-color-card-label {
  font-size: 17px;
  font-weight: 500;
  color: #1a1a1a;
}
.futu-color-card-trends {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

/* ── 列表模式 cards ── */
.futu-list-card {
  flex-direction: column;
  min-height: 76px;
  padding: 12px 14px;
  gap: 10px;
}
.futu-list-card-key {
  font-size: 15px;
  color: #1a1a1a;
  font-weight: 500;
}
.futu-list-card-preview {
  display: flex;
  align-items: center;
  gap: 6px;
}
.futu-list-card-preview-bidask { gap: 14px; }
.futu-list-card-preview-wide {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.futu-list-card-wide {
  position: relative;
  padding: 14px 16px;
}
.futu-list-card-action {
  position: absolute;
  right: 16px;
  top: 14px;
  font-size: 14px;
  color: #4a7fff;
  font-weight: 400;
  padding: 4px;
  cursor: pointer;
}

.futu-preview-price {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.futu-preview-amt {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.futu-preview-pill {
  font-size: 13px;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.futu-preview-bid,
.futu-preview-ask {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── 名称/代码顺序 cards ── */
.futu-order-card {
  flex-direction: column;
  align-items: flex-start;
  min-height: 70px;
  padding: 14px 18px;
  gap: 4px;
}
.futu-order-primary {
  font-size: 17px;
  font-weight: 500;
  color: #1a1a1a;
}
.futu-order-secondary {
  font-size: 13px;
  color: #9b9b9b;
}

/* ── 市场图标 cards ── */
.futu-market-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 14px 18px;
}
.futu-market-card-wide {
  /* full-width E-row equivalent for "无" option */
}
.futu-market-preview-name {
  font-size: 17px;
  font-weight: 500;
  color: #1a1a1a;
}
.futu-market-badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.futu-market-badge-icon {
  background: #4a7fff;
  color: #ffffff;
}
.futu-market-badge-text {
  font-size: 13px;
  color: #4a7fff;
  font-weight: 400;
}
.futu-market-empty {
  font-size: 13px;
  color: #9b9b9b;
}

/* Remove tap blue-flash on iOS */
.futu-style-card:focus { outline: none; }
.futu-style-card:active { background: #fafafa; }
/* ===== Futu iOS — 多股同列 (Multi-stock parallel grid) ===== */
.futu-mc-page {
  position: fixed;
  inset: 0;
  background: #ffffff;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Top bar ── */
.futu-mc-topbar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 6px;
  background: #ffffff;
  flex-shrink: 0;
}
.futu-mc-back {
  background: transparent;
  border: none;
  padding: 8px;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.futu-mc-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin-left: 4px;
}
.futu-mc-topbar-spacer {
  flex: 1;
}
.futu-mc-icon-btn {
  background: transparent;
  border: none;
  padding: 8px;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Filter bar ── */
.futu-mc-filterbar {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 8px;
  background: #ffffff;
  flex-shrink: 0;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}
.futu-mc-filter {
  background: transparent;
  border: none;
  padding: 6px 14px 6px 10px;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.futu-mc-filter.open {
  color: #1a1a1a;
}
.futu-mc-filter-caret {
  font-size: 9px;
  color: #888;
  transform: translateY(-1px);
}
.futu-mc-filter-spacer {
  flex: 1;
}

/* Dropdown menu */
.futu-mc-menu {
  position: absolute;
  top: 38px;
  z-index: 30;
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 4px 0;
  min-width: 90px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.futu-mc-menu-item {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 16px;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
}
.futu-mc-menu-item.active {
  color: #4a7fff;
  font-weight: 500;
}
.futu-mc-menu-item:active {
  background: #f5f5f5;
}

/* ── Grid scroll area ── */
.futu-mc-grid-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
}
.futu-mc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #ececec;
}

/* ── Cell ── */
.futu-mc-cell {
  background: #ffffff;
  border: none;
  text-align: left;
  padding: 10px 8px 8px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.futu-mc-cell:active {
  background: #fafafa;
}

.futu-mc-cell-title {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.futu-mc-cell-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.futu-mc-price {
  font-size: 15px;
  font-weight: 600;
}
.futu-mc-change,
.futu-mc-pct {
  font-size: 12px;
  font-weight: 400;
}

.futu-mc-chart-wrap {
  margin-top: 4px;
  width: 100%;
}
.futu-mc-chart {
  display: block;
}

.futu-mc-chart-skel {
  width: 100%;
  background: linear-gradient(90deg, #f4f4f4 0%, #ececec 50%, #f4f4f4 100%);
  background-size: 200% 100%;
  animation: futu-mc-skel 1.2s linear infinite;
  border-radius: 4px;
}
@keyframes futu-mc-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.futu-mc-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
}

.futu-mc-axis-tick {
  fill: #9b9b9b;
}

/* ── Empty state ── */
.futu-mc-empty {
  padding: 80px 24px;
  text-align: center;
  color: #888;
  font-size: 14px;
}
/* Confirm Send Popup - Dark Theme */
.confirm-send-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.confirm-send-popup {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.confirm-send-header {
  text-align: center;
  margin-bottom: 24px;
}

.confirm-send-header i {
  font-size: 32px;
  color: #7c3aed;
  margin-bottom: 12px;
  display: block;
}

.confirm-send-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  letter-spacing: 0.5px;
}

.confirm-send-details {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
}

.confirm-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
}

.confirm-detail-row:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

.detail-label {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.detail-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.detail-amount {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.detail-usd {
  font-size: 14px;
  color: #6b7280;
}

.detail-address {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  color: #1f2937;
  word-break: break-all;
  text-align: right;
  max-width: 220px;
}

.confirm-send-actions {
  display: flex;
  gap: 12px;
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cancel-btn {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  color: #1f2937;
}

.cancel-btn:hover:not(:disabled) {
  background-color: #e5e7eb;
}

.cancel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.confirm-btn {
  background-color: #7c3aed;
  color: white;
}

.confirm-btn:hover:not(:disabled) {
  background-color: #6d28d9;
}

.confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.confirm-btn .fa-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive design */
@media (max-width: 480px) {
  .confirm-send-popup {
    width: 95%;
    padding: 20px;
  }

  .confirm-send-actions {
    flex-direction: column;
  }

  .cancel-btn,
  .confirm-btn {
    width: 100%;
  }
}

/* Deposit/Withdraw Modal Styles - Dark theme by default */
.deposit-withdraw-modal,
.deposit-withdraw-modal * {
  box-sizing: border-box;
}

.deposit-withdraw-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1002;
  padding: 20px;
}

.deposit-withdraw-modal {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  animation: dwmSlideIn 0.2s ease-out;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

@keyframes dwmSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.deposit-withdraw-modal > .close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ffffff;
  border: none;
  font-size: 18px;
  color: #6b7280;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.2s;
  z-index: 10;
}

.deposit-withdraw-modal > .close-btn:hover {
  color: #1f2937;
  background: rgba(229, 231, 235, 0.3);
}

/* Account Selection */
.account-selection {
  margin-bottom: 20px;
}

.account-selection-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 8px;
}

.account-select {
  width: 100%;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #1f2937;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.account-select:hover {
  border-color: #d1d5db;
}

.account-select:focus {
  outline: none;
  border-color: #ff6b35;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

.account-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tab buttons */
.tab-buttons {
  display: flex;
  margin-top: 32px;
  margin-bottom: 24px;
  background-color: #ffffff;
  border-radius: 6px;
  padding: 4px;
  border: 1px solid #e5e7eb;
}

.tab-button {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  color: #6b7280;
}

.tab-button.active {
  background-color: #e5e7eb;
  color: #1f2937;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tab-button:hover:not(.active) {
  color: #1f2937;
}

.tab-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: #6b7280;
}

.tab-button.disabled:hover {
  color: #6b7280;
}

/* Receive content */
.receive-content {
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.receive-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}

.receive-subtitle {
  font-size: 14px;
  color: #ff6b35;
  margin: 0 0 24px 0;
  font-weight: 500;
}

/* QR Code */
.qr-code-container {
  margin: 24px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.qr-code-image {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid #e5e7eb;
}

.qr-code-loading,
.qr-code-placeholder {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #6b7280;
}

.qr-code-loading i,
.qr-code-placeholder i {
  font-size: 32px;
  margin-bottom: 8px;
  color: #ff6b35;
}

.qr-code-loading p,
.qr-code-placeholder p {
  font-size: 14px;
  margin: 0;
  color: #6b7280;
}

/* Address section */
.address-section {
  margin: 24px 0;
}

.address-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 8px;
  text-align: left;
}

.address-container {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}

.address-text {
  flex: 1;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  color: #1f2937;
  word-break: break-all;
  margin-right: 8px;
}

.copy-btn {
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.copy-btn:hover {
  background-color: rgba(229, 231, 235, 0.3);
  color: #1f2937;
}

.copy-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Warning message */
.warning-message {
  margin-top: 20px;
  text-align: center;
  padding: 0 8px;
}

.warning-message i {
  display: none;
}

.warning-message span {
  font-size: 12px;
  color: #ff6b35;
  line-height: 1.6;
}

/* Send content */
.send-content {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.send-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}

.send-subtitle {
  font-size: 14px;
  color: #ff6b35;
  margin: 0 0 24px 0;
  font-weight: 500;
}

.send-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  color: #6b7280;
}

.send-placeholder i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
  color: #ff6b35;
}

.send-placeholder p {
  font-size: 16px;
  margin: 0;
}

/* Send form styles */
.amount-section {
  margin: 24px 0;
}

.amount-input-section {
  margin: 20px 0;
}

.amount-input-section .dwm-amount-display {
  text-align: left;
  padding: 16px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-top: 12px;
}

.dwm-amount-display {
  text-align: left;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.amount-value {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.amount-usd {
  font-size: 14px;
  color: #6b7280;
}

.asset-balance-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.asset-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.asset-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  border-radius: 4px;
}

.asset-symbol {
  font-size: 12px;
  color: #1f2937;
  font-weight: 500;
}

.asset-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.asset-name {
  font-size: 18px;
  font-weight: 500;
  color: #1f2937;
}

.asset-network {
  font-size: 12px;
  color: #6b7280;
  padding-top: 8px;
}

.balance-info {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.balance-amount {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.balance-label {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.recipient-section {
  margin: 20px 0;
}

.recipient-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 8px;
}

.recipient-input {
  width: 100%;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #1f2937;
  font-size: 14px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  transition: all 0.2s;
}

.recipient-input:focus {
  outline: none;
  border-color: #ff6b35;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

.recipient-input::placeholder {
  color: #6b7280;
}

.amount-input-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 8px;
}

.amount-input {
  width: 100%;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #1f2937;
  font-size: 14px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  transition: all 0.2s;
}

.amount-input:focus {
  outline: none;
  border-color: #ff6b35;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

.amount-input::placeholder {
  color: #6b7280;
}

/* Asset Selection */
.asset-selection-section {
  margin: 20px 0;
}

.asset-selection-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 8px;
}

.asset-selector-buttons {
  display: flex;
  gap: 8px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px;
}

.asset-selector-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  color: #6b7280;
}

.asset-selector-btn:hover {
  color: #1f2937;
  background-color: rgba(229, 231, 235, 0.3);
}

.asset-selector-btn.active {
  background-color: #e5e7eb;
  color: #1f2937;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Insufficient Balance Warning */
.insufficient-balance-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid #ef4444;
  border-radius: 6px;
  padding: 12px;
  margin-top: 16px;
}

.insufficient-balance-warning i {
  color: #ef4444;
  font-size: 16px;
}

.insufficient-balance-warning span {
  color: #ef4444;
  font-size: 14px;
  font-weight: 500;
}

.preview-send-btn {
  width: 100%;
  padding: 16px;
  background-color: #F3BA2F;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.preview-send-btn:hover:not(:disabled) {
  background-color: #d4a017;
}

.preview-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.preview-send-btn i {
  font-size: 14px;
}

.preview-send-btn .fa-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* No accounts message */
.no-accounts-message {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.no-accounts-message i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #ff6b35;
  opacity: 0.7;
}

.no-accounts-message h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.no-accounts-message p {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* No selection message */
.no-selection-message {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.no-selection-message i {
  font-size: 48px;
  margin-bottom: 16px;
  color: #ff6b35;
  opacity: 0.7;
}

.no-selection-message h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.no-selection-message p {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* Responsive design */
@media (max-width: 480px) {
  .deposit-withdraw-modal {
    width: 95%;
    padding: 20px;
  }
  
  .qr-code-image,
  .qr-code-loading,
  .qr-code-placeholder {
    width: 180px;
    height: 180px;
  }
  
  .address-text {
    font-size: 12px;
  }
}
/* TransferModal — 富途风格白底 + 橙色主色 (#FF6B1A) + 深色正文 + 浅灰辅助文字。
   原配色用的是币安黄 #F3BA2F + 深色主题残留文字色 (#e2e8f0/#a0aec0)，
   叠到白底上要么不像富途要么直接看不见。 */

.transfer-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  backdrop-filter: blur(4px);
}

.transfer-modal {
  position: relative;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  box-sizing: border-box;
  animation: tmSlideUp 0.2s ease-out;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
  font-family: -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
  color: #1a1a1a;
}

@keyframes tmSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tm-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: #888888;
  font-size: 16px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 4px;
  z-index: 10;
  transition: color 0.2s;
}
.tm-close-btn:hover { color: #1a1a1a; }

.tm-title {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  padding-right: 24px;
}

.tm-subtitle {
  margin: 0 0 20px 0;
  font-size: 13px;
  color: #FF6B1A;
  text-align: center;
}

.tm-balance-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin-bottom: 20px;
}

.tm-balance-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tm-balance-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tm-balance-label {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.tm-balance-network {
  font-size: 12px;
  color: #FF6B1A;
}

.tm-balance-right { text-align: right; }

.tm-balance-amount {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.tm-balance-sublabel {
  font-size: 12px;
  color: #888888;
}

.tm-field-section { margin-bottom: 20px; }

.tm-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #888888;
  margin-bottom: 8px;
  text-align: center;
}

.tm-address-display {
  padding: 12px 16px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  text-align: center;
}

.tm-address {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 13px;
  color: #1a1a1a;
  word-break: break-all;
}

.tm-loading {
  color: #888888;
  font-size: 13px;
}
.tm-loading i { margin-right: 6px; }

.tm-no-wallet {
  color: #FF3B30;
  font-size: 13px;
}

.tm-amount-display {
  padding: 14px 16px;
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin-bottom: 8px;
}

.tm-amount-value {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.tm-amount-usd {
  font-size: 13px;
  color: #FF6B1A;
  margin-top: 2px;
}

.tm-amount-input {
  width: 100%;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  color: #1a1a1a;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.tm-amount-input:focus { border-color: #FF6B1A; }
.tm-amount-input::placeholder { color: #c0c0c0; }

.tm-summary {
  background: #fafafa;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.tm-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}

.tm-summary-row:not(:last-child) {
  border-bottom: 1px solid #ececec;
}

.tm-summary-row span:first-child { color: #888888; }
.tm-summary-row span:last-child  { color: #1a1a1a; font-weight: 500; }

.tm-summary-fee span:last-child {
  color: #00A368;
  font-size: 12px;
}

.tm-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.18);
  border-radius: 8px;
  color: #FF3B30;
  font-size: 13px;
  margin-bottom: 16px;
}
.tm-error i { font-size: 14px; flex-shrink: 0; }

.tm-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: #FF6B1A;
  border: none;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  margin-bottom: 16px;
}
.tm-action-btn:hover:not(:disabled) { background: #E55B0E; }
.tm-action-btn:disabled {
  background: #e0e0e0;
  color: #999999;
  cursor: not-allowed;
}
.tm-action-btn i { font-size: 13px; }

.tm-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 107, 26, 0.08);
  border: 1px solid rgba(255, 107, 26, 0.18);
  border-radius: 8px;
  font-size: 12px;
  color: #555555;
  line-height: 1.5;
}
.tm-info i {
  color: #FF6B1A;
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .transfer-modal {
    max-width: 95%;
    margin: 10px;
    padding: 20px;
  }
}
/* Mobile Fund History Modal - Light theme / 移动端资金历史弹窗 - 浅色主题 */

.mobile-fund-history-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 1002;
  display: flex;
  align-items: flex-end;
  animation: mfh-fadeIn 0.2s ease;
}

@keyframes mfh-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mfh-slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.mobile-fund-history-modal {
  width: 100%;
  max-height: 85vh;
  max-height: 85dvh;
  background-color: #ffffff;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: mfh-slideUp 0.3s ease;
  -webkit-overflow-scrolling: touch;
}

.mobile-fund-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 12px;
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 1;
  border-bottom: 1px solid #1f2937;
}

.mobile-fund-history-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.mobile-fund-history-close {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 18px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
}

.mobile-fund-history-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #1f2937;
}

.mobile-fund-history-tabs {
  display: flex;
  padding: 0 16px;
  gap: 0;
  border-bottom: 1px solid #1f2937;
  background-color: #ffffff;
}

.mobile-fund-history-tab {
  flex: 1;
  padding: 14px 12px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
  margin-bottom: -1px;
}

.mobile-fund-history-tab.active {
  color: #00d26a;
  border-bottom-color: #00d26a;
}

.mobile-fund-history-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 32px;
  min-height: 200px;
}

.mobile-fund-history-list-wrap {
  min-height: 160px;
}

.mobile-fund-history-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #6b7280;
  font-size: 14px;
  gap: 12px;
}

.mobile-fund-history-loading i {
  font-size: 28px;
  color: #3b82f6;
}

.mobile-fund-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
  gap: 8px;
}

.mobile-fund-history-empty i {
  font-size: 32px;
  margin-bottom: 8px;
  color: #d1d5db;
}

.mobile-fund-history-empty-hint {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

.mobile-fund-history-transfer-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
  background-color: rgba(59, 130, 246, 0.06);
  border-radius: 6px;
}

.mobile-fund-history-transfer-notice i {
  color: #3b82f6;
  margin-top: 2px;
  flex-shrink: 0;
}

.mobile-fund-history-list-header,
.mobile-fund-history-row {
  display: grid;
  grid-template-columns: minmax(60px, 0.8fr) 1fr minmax(100px, 0.9fr);
  gap: 8px;
  padding: 10px 12px;
  align-items: center;
}

.mobile-fund-history-list-header {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 1px solid #1f2937;
}

.mobile-fund-history-list-header .col-amount,
.mobile-fund-history-list-header .col-date {
  text-align: right;
}

.mobile-fund-history-row {
  padding: 14px 12px;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-fund-history-row:last-child {
  border-bottom: none;
}

.mobile-fund-history-row .col-type,
.mobile-fund-history-row .col-status {
  display: flex;
  align-items: center;
}

.type-badge,
.status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

.type-badge.type-receive {
  background-color: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.type-badge.type-withdraw {
  background-color: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.type-badge.type-send {
  background-color: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.type-badge.type-unknown {
  background-color: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}

.status-badge.status_confirmed,
.status-badge.status_completed {
  background-color: rgba(0, 210, 106, 0.12);
  color: #00d26a;
}

.status-badge.status_pending_approval,
.status-badge.status_pending {
  background-color: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.status-badge.status_failed {
  background-color: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.mobile-fund-history-row .col-amount {
  font-weight: 600;
  text-align: right;
}

.mobile-fund-history-row .col-amount.positive {
  color: #00d26a;
}

.mobile-fund-history-row .col-amount.negative {
  color: #ff5252;
}

.mobile-fund-history-row .col-date {
  font-size: 11px;
  color: #6b7280;
  text-align: right;
}

/* Dark theme / 深色主题 */
[data-theme="dark"] .mobile-fund-history-modal {
  background-color: #ffffff;
}

[data-theme="dark"] .mobile-fund-history-header {
  background-color: #ffffff;
  border-bottom-color: #e5e7eb;
}

[data-theme="dark"] .mobile-fund-history-title {
  color: #1f2937;
}

[data-theme="dark"] .mobile-fund-history-close {
  color: #6b7280;
}

[data-theme="dark"] .mobile-fund-history-close:hover {
  background-color: rgba(0, 0, 0, 0.04);
  color: #1f2937;
}

[data-theme="dark"] .mobile-fund-history-tabs {
  border-bottom-color: #e5e7eb;
  background-color: #ffffff;
}

[data-theme="dark"] .mobile-fund-history-tab {
  color: #6b7280;
}

[data-theme="dark"] .mobile-fund-history-tab.active {
  color: #4ade80;
  border-bottom-color: #4ade80;
}

[data-theme="dark"] .mobile-fund-history-body {
  background-color: #ffffff;
}

[data-theme="dark"] .mobile-fund-history-loading {
  color: #6b7280;
}

[data-theme="dark"] .mobile-fund-history-loading i {
  color: #60a5fa;
}

[data-theme="dark"] .mobile-fund-history-empty {
  color: #6b7280;
}

[data-theme="dark"] .mobile-fund-history-empty i {
  color: #6b7280;
}

[data-theme="dark"] .mobile-fund-history-empty-hint {
  color: #6b7280;
}

[data-theme="dark"] .mobile-fund-history-transfer-notice {
  color: #6b7280;
  background-color: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .mobile-fund-history-transfer-notice i {
  color: #60a5fa;
}

[data-theme="dark"] .mobile-fund-history-list-header {
  color: #6b7280;
  border-bottom-color: #e5e7eb;
}

[data-theme="dark"] .mobile-fund-history-row {
  border-bottom-color: #e5e7eb;
}

[data-theme="dark"] .type-badge.type-receive {
  background-color: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

[data-theme="dark"] .type-badge.type-withdraw {
  background-color: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

[data-theme="dark"] .type-badge.type-send {
  background-color: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

[data-theme="dark"] .type-badge.type-unknown {
  background-color: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

[data-theme="dark"] .status-badge.status_confirmed,
[data-theme="dark"] .status-badge.status_completed {
  background-color: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

[data-theme="dark"] .status-badge.status_pending_approval,
[data-theme="dark"] .status-badge.status_pending {
  background-color: rgba(255, 107, 53, 0.15);
  color: #ff6b35;
}

[data-theme="dark"] .status-badge.status_failed {
  background-color: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

[data-theme="dark"] .mobile-fund-history-row .col-amount.positive {
  color: #4ade80;
}

[data-theme="dark"] .mobile-fund-history-row .col-amount.negative {
  color: #f87171;
}

[data-theme="dark"] .mobile-fund-history-row .col-date {
  color: #6b7280;
}
/* VIP Page Overlay */
.vip-page-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vip-page {
  background: #ffffff;
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  animation: vipSlideUp 0.3s ease-out;
}

@keyframes vipSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header */
.vip-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #ffffff;
  flex-shrink: 0;
}

.vip-page-header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
}

.vip-back-btn {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
}

/* Body */
.vip-page-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 100px;
}

.vip-loading {
  text-align: center;
  color: #6b7280;
  padding: 60px 0;
  font-size: 14px;
}

.vip-section {
  padding: 0 16px;
  margin-top: 24px;
}

.vip-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px 0;
}

.vip-card {
  background: #ffffff;
  border: 1px solid #f5f5f5;
  border-radius: 16px;
  padding: 16px;
}

.vip-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 12px 0;
}

/* ===== Hero VIP Card ===== */
.vip-hero-card {
  margin: 12px 16px 0;
  background: linear-gradient(135deg, #1f2937 0%, #6b7280 100%);
  border-radius: 16px;
  padding: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.vip-hero-bg-icon {
  position: absolute;
  right: -10px;
  top: -10px;
  font-size: 100px;
  opacity: 0.06;
  color: #ff6b35;
}

.vip-hero-top {
  margin-bottom: 20px;
}

.vip-hero-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.vip-hero-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 20px;
  color: #fff;
  font-style: italic;
}

.vip-hero-subtitle {
  font-size: 13px;
  opacity: 0.7;
}

.vip-hero-title {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(to right, #fde68a, #ff8c42);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vip-hero-progress {
  margin-top: 4px;
}

.vip-hero-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
  opacity: 0.85;
}

.vip-hero-progress-bar {
  width: 100%;
  height: 6px;
  background: #6b7280;
  border-radius: 3px;
  overflow: hidden;
}

.vip-hero-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #ff6b35, #d97706);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.vip-hero-hint {
  margin: 8px 0 0;
  font-size: 11px;
  opacity: 0.6;
  line-height: 1.4;
}

.vip-hero-max {
  margin-top: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #ff6b35;
}

.vip-hero-max i {
  margin-right: 6px;
}

/* ===== Fee Savings ===== */
.vip-savings-card {
  margin: 20px 16px 0;
  background: #ffffff;
  border: 1px solid #f5f5f5;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.vip-savings-icon {
  width: 48px;
  height: 48px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 22px;
  color: #10b981;
}

.vip-savings-card h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.vip-savings-amount {
  font-size: 30px;
  font-weight: 700;
  color: #1f2937;
}

.vip-savings-unit {
  font-size: 14px;
  font-weight: 600;
  color: #f97316;
  margin-left: 6px;
}

.vip-savings-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: #6b7280;
}

/* ===== Fee Rate Table ===== */
.vip-rate-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}

.vip-rate-table thead th {
  font-weight: 500;
  color: #6b7280;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
  text-align: left;
}

.vip-rate-table thead th.text-right {
  text-align: right;
}

.vip-rate-table tbody td {
  padding: 10px 0;
  color: #6b7280;
  border-bottom: 1px solid #ffffff;
}

.vip-rate-table tbody td.text-right {
  text-align: right;
}

.vip-rate-table .tier-name {
  font-weight: 600;
  color: #d1d5db;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vip-rate-table .current-tier td {
  background: rgba(249, 115, 22, 0.06);
}

.vip-rate-table .current-tier .tier-name,
.vip-rate-table .current-tier .highlight {
  color: #f97316;
  font-weight: 700;
}

.vip-rate-table .current-tier .tier-name i {
  color: #f97316;
  font-size: 12px;
}

/* ===== Fee Rate Toggle ===== */
.vip-fee-toggle {
  cursor: pointer;
}

.vip-fee-toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vip-fee-chevron {
  color: #6b7280;
  font-size: 12px;
  transition: transform 0.2s;
}

.vip-fee-summary {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* ===== Upgrade Conditions ===== */
.vip-conditions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vip-condition-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #f5f5f5;
  border-radius: 12px;
}

.vip-condition-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.vip-condition-icon.blue { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.vip-condition-icon.green { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.vip-condition-icon.orange { background: rgba(249, 115, 22, 0.12); color: #f97316; }

.vip-condition-info {
  flex: 1;
  min-width: 0;
}

.vip-condition-name {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}

.vip-condition-detail {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}

.vip-condition-check {
  color: #10b981;
  font-size: 16px;
}

.vip-condition-arrow {
  color: #6b7280;
  font-size: 12px;
}

/* ===== Invite Banner ===== */
.vip-invite-banner {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.vip-invite-text {
  flex: 1;
}

.vip-invite-text h4 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
}

.vip-invite-text p {
  margin: 0 0 12px;
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.4;
}

.vip-invite-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vip-invite-copy-btn {
  background: #fff;
  color: #ea580c;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.vip-invite-icon {
  font-size: 48px;
  opacity: 0.3;
  margin-left: 12px;
}

/* ===== Apply Referral ===== */
.vip-apply-row {
  display: flex;
  gap: 10px;
}

.vip-apply-input {
  flex: 1;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #f5f5f5;
  border-radius: 10px;
  color: #1f2937;
  font-size: 14px;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  outline: none;
}

.vip-apply-input:focus {
  border-color: #f97316;
}

.vip-apply-input::placeholder {
  color: #6b7280;
  letter-spacing: 0;
  font-family: inherit;
}

.vip-apply-btn {
  padding: 10px 20px;
  background: #f97316;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.vip-apply-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Bound Info ===== */
.vip-bound-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  color: #10b981;
  font-size: 13px;
}

/* ===== Stats Row ===== */
.vip-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.vip-stat-box {
  background: #ffffff;
  border: 1px solid #f5f5f5;
  border-radius: 12px;
  padding: 16px 10px;
  text-align: center;
}

.vip-stat-num {
  font-size: 18px;
  font-weight: 700;
  color: #f97316;
  margin-bottom: 4px;
}

.vip-stat-label {
  font-size: 11px;
  color: #6b7280;
}

/* ===== Desktop ===== */
@media (min-width: 1024px) {
  .vip-page {
    max-width: 520px;
    max-height: 85vh;
    border-radius: 16px;
    overflow: hidden;
  }
}

/* ===== Mobile ===== */
@media (max-width: 1023px) {
  .vip-page-overlay {
    padding: 0;
  }

  .vip-page {
    max-width: 100%;
    border-radius: 0;
  }
}

/* ===== Light theme overrides ===== */
[data-theme="light"] .vip-page {
  background: #f8f9fa;
}

[data-theme="light"] .vip-page-header {
  border-bottom-color: #1f2937;
}

[data-theme="light"] .vip-page-header h1 {
  color: #1f2937;
}

[data-theme="light"] .vip-back-btn {
  color: #6b7280;
}

[data-theme="light"] .vip-savings-card,
[data-theme="light"] .vip-card,
[data-theme="light"] .vip-stat-box,
[data-theme="light"] .vip-condition-item {
  background: #fff;
  border-color: #1f2937;
}

[data-theme="light"] .vip-card-title,
[data-theme="light"] .vip-section-title {
  color: #1f2937;
}

[data-theme="light"] .vip-savings-card h3 {
  color: #6b7280;
}

[data-theme="light"] .vip-savings-amount {
  color: #1f2937;
}

[data-theme="light"] .vip-savings-hint {
  color: #6b7280;
}

[data-theme="light"] .vip-rate-table thead th {
  color: #6b7280;
  border-bottom-color: #1f2937;
}

[data-theme="light"] .vip-rate-table tbody td {
  color: #6b7280;
  border-bottom-color: #f3f4f6;
}

[data-theme="light"] .vip-rate-table .tier-name {
  color: #6b7280;
}

[data-theme="light"] .vip-condition-name {
  color: #1f2937;
}

[data-theme="light"] .vip-condition-detail {
  color: #6b7280;
}

[data-theme="light"] .vip-apply-input {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #1f2937;
}

[data-theme="light"] .vip-apply-input::placeholder {
  color: #6b7280;
}

[data-theme="light"] .vip-loading {
  color: #6b7280;
}
/* FutuAccount — 富途 iOS 账户页风格 (Futu HK style 1:1)
 *
 * 1:1 复刻富途证券（香港）App 的账户主页：
 *   - 白底 / 浅灰分组 (#f5f5f5)
 *   - 主色橙 #FF6B1A，告警/亏损绿 #13aa5c，盈利红 #f04a44
 *   - 卡片大圆角 12-14px，胶囊按钮 / pill tabs
 *   - 圆形快捷入口 (存入资金 / 货币兑换 / 新股申购 / 更多)
 *
 * 所有样式独立 .futu-account-* 命名空间，绝不复用其它页面 CSS。
 */

.futu-account {
  /* body 全局 overflow:hidden + #root 是固定高度 flex 容器，
     页面自身必须建立独立滚动容器，否则内容被截断。 */
  position: fixed;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', sans-serif;
  color: #1a1a1a;
  padding-bottom: 84px; /* 给固定的 FutuBottomNav 留位 */
}

/* 未登录态没有白色卡片盖在上面，#f5f5f5 灰底会大面积裸露——跟 topbar
   的白色断开看起来很丑。把背景拉到跟 topbar 同色，视觉上 unauthed
   占位区跟 topbar 是一整片，只在登录态显示灰底。 */
.futu-account.futu-account--unauthed {
  background: #ffffff;
}
[data-theme="dark"] .futu-account.futu-account--unauthed {
  background: #0e0e10;
}

/* ===== Topbar ===== */
.futu-account-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 5;
}
.futu-account-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.futu-account-logo {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.futu-account-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.5px;
}
.futu-account-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.futu-account-icon-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
}


/* ===== 总资产 card ===== */
.futu-account-total-card {
  margin: 8px 12px 0;
  padding: 14px 16px 18px;
  background: #f7f7f7;
  border-radius: 12px;
}
.futu-account-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.futu-account-currency-btn {
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #5a5a5a;
  font-family: inherit;
  cursor: pointer;
}
.futu-account-currency-btn .chevron {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #888;
}
.futu-account-eye-btn {
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: #888;
}
.futu-account-pnl-link {
  background: none;
  border: none;
  font-size: 13px;
  color: #5a5a5a;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.futu-account-total-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #1a1a1a;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.futu-account-total-value.masked {
  letter-spacing: 6px;
  font-size: 26px;
}
.futu-account-total-pnl-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
}
.futu-account-total-pnl-label {
  color: #8a8a8a;
}
.futu-account-total-pnl-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.futu-account-total-pnl-val.up { color: #f04a44; }
.futu-account-total-pnl-val.down { color: #13aa5c; }
.futu-account-total-pnl-val.masked { letter-spacing: 4px; }

/* ===== Quick actions (4 round buttons) ===== */
.futu-account-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 18px 8px 14px;
  background: #ffffff;
  margin: 0 0 0;
}
.futu-quick-action {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  cursor: pointer;
  font-family: inherit;
}
.futu-quick-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff5ee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF6B1A;
}
.futu-quick-label {
  font-size: 12px;
  color: #1a1a1a;
}

/* ===== Section header (全部账户) ===== */
.futu-account-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  background: #ffffff;
}
.futu-account-section-title-btn {
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  font-family: inherit;
  cursor: pointer;
}
.futu-account-section-toggle {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #888;
  display: inline-flex;
  align-items: center;
}

/* ===== Account card (子账户卡) ===== */
.futu-account-card {
  margin: 0 12px 12px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #f0f0f0;
}
.futu-account-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 6px;
}
.futu-account-card-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: #FF6B1A;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.futu-account-card-title {
  flex: 1;
  font-size: 14px;
  color: #1a1a1a;
  font-weight: 500;
}
.futu-account-card-arrow {
  color: #c0c0c0;
  font-size: 18px;
  line-height: 1;
}

.futu-account-card-totals {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 4px 14px 12px;
}
.futu-account-card-totals .left,
.futu-account-card-totals .right {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.futu-account-card-totals .right { align-items: flex-end; }
.futu-account-card-totals .label {
  font-size: 12px;
  color: #888;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.futu-account-card-totals .value {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}
.futu-account-card-totals .value.up { color: #f04a44; }
.futu-account-card-totals .value.down { color: #13aa5c; }
.futu-account-card-totals .value.masked { letter-spacing: 4px; }

/* ===== Asset tabs (证券/期货/基金/债券/结构性产品) ===== */
.futu-account-asset-tabs {
  display: flex;
  gap: 8px;
  padding: 6px 14px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.futu-account-asset-tabs::-webkit-scrollbar { display: none; }
.futu-account-asset-tab {
  background: #f5f5f5;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.futu-account-asset-tab.active {
  background: #fff5ee;
  color: #FF6B1A;
  font-weight: 600;
}

/* ===== Metrics row (3 columns) ===== */
.futu-account-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 8px 14px 16px;
  gap: 8px;
}
.futu-account-card-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.futu-account-card-metric:nth-child(2) { text-align: center; align-items: center; }
.futu-account-card-metric:nth-child(3) { text-align: right; align-items: flex-end; }
.futu-account-card-metric .label {
  font-size: 12px;
  color: #888;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.futu-account-card-metric .value {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}

/* ===== Sub tabs (持仓/订单/盈亏/历史) — Futu pill style ===== */
.futu-account-sub-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 16px 8px;
  background: #ffffff;
  overflow-x: auto;
  scrollbar-width: none;
}
.futu-account-sub-tabs::-webkit-scrollbar { display: none; }
.futu-account-sub-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.futu-account-sub-tab.active {
  background: #ffffff;
  border-color: #FF6B1A;
  color: #FF6B1A;
  font-weight: 600;
}

/* ===== Tab content list ===== */
.futu-account-list {
  background: #ffffff;
  margin: 0;
  padding: 0 16px;
}
.futu-account-empty {
  padding: 28px 0;
  text-align: center;
  color: #aaa;
  font-size: 13px;
}

/* Position row */
.futu-position-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f4f4f4;
  cursor: pointer;
}
.futu-position-row:last-child { border-bottom: none; }
.futu-position-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.futu-position-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.futu-position-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #888;
}
.futu-position-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.futu-position-value {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}
.futu-position-pl { font-size: 12px; font-variant-numeric: tabular-nums; }
.futu-position-pl.up { color: #f04a44; }
.futu-position-pl.down { color: #13aa5c; }

/* Order row */
.futu-order-row {
  padding: 12px 0;
  border-bottom: 1px solid #f4f4f4;
}
.futu-order-row:last-child { border-bottom: none; }
.futu-order-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.futu-order-side {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  color: #fff;
  font-weight: 600;
}
.futu-order-side.buy { background: #f04a44; }
.futu-order-side.sell { background: #13aa5c; }
.futu-order-symbol { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.futu-order-status { margin-left: auto; font-size: 12px; color: #888; }
.futu-order-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
}

/* P&L tab */
.futu-account-pnl { background: #ffffff; padding: 12px 16px; }
.futu-account-pnl-period {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.futu-account-pnl-period::-webkit-scrollbar { display: none; }
.futu-account-pnl-pill {
  background: #f5f5f5;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.futu-account-pnl-pill.active {
  background: #fff5ee;
  color: #FF6B1A;
  font-weight: 600;
}
.futu-account-pnl-summary { padding: 8px 0 12px; }
.futu-account-pnl-total-row { font-size: 12px; color: #888; margin-bottom: 4px; }
.futu-account-pnl-total {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.futu-account-pnl-total.up { color: #f04a44; }
.futu-account-pnl-total.down { color: #13aa5c; }
.futu-account-pnl-total-rate { font-size: 13px; margin-top: 2px; }
.futu-account-pnl-total-rate.up { color: #f04a44; }
.futu-account-pnl-total-rate.down { color: #13aa5c; }
.futu-account-pnl-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 12px;
}
.futu-account-pnl-stat { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.futu-account-pnl-stat-label { font-size: 11px; color: #888; }
.futu-account-pnl-stat-value { font-size: 14px; font-weight: 600; }
.futu-account-pnl-stat-value.up { color: #f04a44; }
.futu-account-pnl-stat-value.down { color: #13aa5c; }
.futu-pnl-trade-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f4f4f4;
}
.futu-pnl-trade-row:last-child { border-bottom: none; }
.futu-pnl-trade-left { display: flex; flex-direction: column; gap: 4px; }
.futu-pnl-trade-symbol { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.futu-pnl-trade-meta { display: flex; gap: 8px; font-size: 11px; color: #888; }
.futu-pnl-trade-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-variant-numeric: tabular-nums; }
.futu-pnl-trade-pl { font-size: 14px; font-weight: 600; }
.futu-pnl-trade-rate { font-size: 12px; }
.futu-pnl-trade-pl.up, .futu-pnl-trade-rate.up { color: #f04a44; }
.futu-pnl-trade-pl.down, .futu-pnl-trade-rate.down { color: #13aa5c; }

/* History tab */
.futu-account-history { background: #ffffff; padding: 0 16px; }
.futu-account-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
}
.futu-account-history-row:last-child { border-bottom: none; }
.futu-account-history-text { display: flex; flex-direction: column; gap: 4px; }
.futu-account-history-title { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.futu-account-history-sub { font-size: 12px; color: #888; }
.futu-account-history-arrow { color: #c0c0c0; font-size: 18px; }

/* ===== Settings pill button ===== */
.futu-account-settings-button-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 16px 8px;
  background: transparent;
}
.futu-account-settings-pill {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
}

/* ===== Settings sheet (slide-up) ===== */
.futu-account-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.futu-account-settings-sheet {
  width: 100%;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 16px 16px 24px;
  max-height: 78vh;
  overflow-y: auto;
}
.futu-account-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 12px;
}
.futu-account-settings-title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.futu-account-settings-close {
  background: none;
  border: none;
  font-size: 22px;
  color: #888;
  cursor: pointer;
  line-height: 1;
}
.futu-account-settings-section { padding: 8px 0 4px; border-top: 1px solid #f4f4f4; }
.futu-account-settings-section-label { font-size: 12px; color: #888; padding-bottom: 8px; }
.futu-account-settings-lang-grid,
.futu-account-settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.futu-account-settings-theme-grid {
  grid-template-columns: repeat(2, 1fr);
}
.futu-account-settings-opt {
  background: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  color: #1a1a1a;
  cursor: pointer;
  font-family: inherit;
}
.futu-account-settings-opt.active {
  background: #fff5ee;
  border-color: #FF6B1A;
  color: #FF6B1A;
  font-weight: 600;
}
.futu-account-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px;
  cursor: pointer;
  font-size: 14px;
  color: #1a1a1a;
  border-bottom: 1px solid #f4f4f4;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  font-family: inherit;
}
.futu-account-settings-row:last-child { border-bottom: none; }
.futu-account-settings-row .arrow { color: #c0c0c0; font-size: 18px; }

.futu-account-settings-logout {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  padding: 11px 0;
  font-size: 14px;
  color: #f04a44;
  cursor: pointer;
  font-family: inherit;
  margin-top: 12px;
}

/* ===== 未登录占位 ===== */
.futu-account-unauthed {
  margin: 60px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.futu-account-unauthed-text {
  font-size: 15px;
  color: #8a8a8a;
  line-height: 1.5;
}
.futu-account-login-btn {
  background: #FF6B1A;
  color: #ffffff;
  border: none;
  border-radius: 24px;
  padding: 12px 36px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  min-width: 200px;
  box-shadow: 0 2px 8px rgba(255, 107, 26, 0.25);
}
.futu-account-login-btn:active {
  background: #e85f12;
}
[data-theme="dark"] .futu-account-unauthed-text { color: #888; }

/* ===== Dark mode overrides (Futu iOS dark style) =====
 * 富途 iOS 深色风格：背景 #0e0e10 / 卡片 #1c1c1e / 文字 #f0f0f0
 * 仅覆盖颜色 / 边框 / 分割线，布局保持不变。
 */
[data-theme="dark"] .futu-account {
  background: #0e0e10;
  color: #f0f0f0;
}
[data-theme="dark"] .futu-account-topbar {
  background: #161618;
}
[data-theme="dark"] .futu-account-title,
[data-theme="dark"] .futu-account-icon-btn { color: #f0f0f0; }
[data-theme="dark"] .futu-account-icon-btn svg circle,
[data-theme="dark"] .futu-account-icon-btn svg rect,
[data-theme="dark"] .futu-account-icon-btn svg path { stroke: #f0f0f0; }


[data-theme="dark"] .futu-account-total-card { background: #1c1c1e; }
[data-theme="dark"] .futu-account-total-value { color: #f0f0f0; }
[data-theme="dark"] .futu-account-total-pnl-label { color: #aaa; }

[data-theme="dark"] .futu-account-quick-actions { background: #161618; }
[data-theme="dark"] .futu-quick-icon { background: #2a1f17; }
[data-theme="dark"] .futu-quick-label { color: #f0f0f0; }

[data-theme="dark"] .futu-account-section-header { background: #161618; }
[data-theme="dark"] .futu-account-section-title-btn { color: #f0f0f0; }

[data-theme="dark"] .futu-account-card {
  background: #1c1c1e;
  box-shadow: 0 0 0 1px #2a2a2c;
}
[data-theme="dark"] .futu-account-card-title { color: #f0f0f0; }
[data-theme="dark"] .futu-account-card-totals .value,
[data-theme="dark"] .futu-account-card-metric .value { color: #f0f0f0; }

[data-theme="dark"] .futu-account-asset-tab { background: #2a2a2c; color: #aaa; }
[data-theme="dark"] .futu-account-asset-tab.active {
  background: #2a1f17;
  color: #FF6B1A;
}

[data-theme="dark"] .futu-account-sub-tabs { background: #161618; }
[data-theme="dark"] .futu-account-sub-tab.active { background: #1c1c1e; }

[data-theme="dark"] .futu-account-list,
[data-theme="dark"] .futu-account-history,
[data-theme="dark"] .futu-account-pnl { background: #1c1c1e; }
[data-theme="dark"] .futu-position-row,
[data-theme="dark"] .futu-order-row,
[data-theme="dark"] .futu-pnl-trade-row,
[data-theme="dark"] .futu-account-history-row { border-bottom-color: #2a2a2c; }
[data-theme="dark"] .futu-position-name,
[data-theme="dark"] .futu-position-value,
[data-theme="dark"] .futu-order-symbol,
[data-theme="dark"] .futu-pnl-trade-symbol,
[data-theme="dark"] .futu-account-history-title { color: #f0f0f0; }

[data-theme="dark"] .futu-account-pnl-pill { background: #2a2a2c; color: #aaa; }
[data-theme="dark"] .futu-account-pnl-pill.active { background: #2a1f17; color: #FF6B1A; }
[data-theme="dark"] .futu-account-pnl-stats {
  border-top-color: #2a2a2c;
  border-bottom-color: #2a2a2c;
}
[data-theme="dark"] .futu-account-pnl-stat-value { color: #f0f0f0; }

[data-theme="dark"] .futu-account-settings-pill {
  background: #1c1c1e;
  border-color: #2a2a2c;
  color: #f0f0f0;
}
[data-theme="dark"] .futu-account-settings-pill svg circle,
[data-theme="dark"] .futu-account-settings-pill svg path { stroke: #f0f0f0; }

[data-theme="dark"] .futu-account-settings-sheet { background: #1c1c1e; }
[data-theme="dark"] .futu-account-settings-title { color: #f0f0f0; }
[data-theme="dark"] .futu-account-settings-section { border-top-color: #2a2a2c; }
[data-theme="dark"] .futu-account-settings-opt {
  background: #2a2a2c;
  color: #f0f0f0;
}
[data-theme="dark"] .futu-account-settings-opt.active {
  background: #2a1f17;
  border-color: #FF6B1A;
  color: #FF6B1A;
}
[data-theme="dark"] .futu-account-settings-row {
  color: #f0f0f0;
  border-bottom-color: #2a2a2c;
}
[data-theme="dark"] .futu-account-settings-logout {
  background: #1c1c1e;
  border-color: #2a2a2c;
}
/* FutuMarket page — scoped under .futu-mkt */

.futu-mkt {
  min-height: 100vh;
  background: #ffffff;
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', sans-serif;
  padding-bottom: 72px;
}

/* ===== Top bar ===== */
.futu-mkt-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 6px;
}
.futu-mkt-brand { display: inline-flex; align-items: center; gap: 10px; }
.futu-mkt-brand-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff9a33, #ff6b1a);
}
.futu-mkt-brand-title { font-size: 20px; font-weight: 700; }

.futu-mkt-topbar-right { display: inline-flex; align-items: center; gap: 10px; }

.futu-mkt-icon-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.futu-mkt-icon-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff4040;
}

/* ===== Category tabs ===== */
.futu-mkt-cats {
  display: flex;
  gap: 20px;
  padding: 6px 16px 10px;
  overflow-x: auto;
  border-bottom: 1px solid #f2f2f2;
}
.futu-mkt-cats::-webkit-scrollbar { display: none; }

.futu-mkt-cat {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: #8a8a8a;
  font-size: 15px;
  padding: 6px 0;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  white-space: nowrap;
}
.futu-mkt-cat.active {
  color: #1a1a1a;
  font-weight: 700;
}
.futu-mkt-cat.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  background: #ff8a1e;
  border-radius: 2px;
}

/* ===== Body ===== */
.futu-mkt-body {
  padding: 16px 0 24px;
}

/* ===== World map ===== */
.futu-mkt-map-wrap {
  position: relative;
  margin: 0 16px 12px;
  aspect-ratio: 2 / 1;
  max-height: 260px;
  overflow: hidden;
}
.futu-mkt-map { width: 100%; height: 100%; display: block; }

.futu-mkt-map-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.futu-mkt-map-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95);
}
.futu-mkt-map-name {
  font-size: 11px;
  font-weight: 600;
  color: #1a1a1a;
}
.futu-mkt-map-pct {
  font-size: 11px;
  font-weight: 600;
}
/* Futu/Asian convention: 涨红 跌绿 */
.futu-mkt-map-label.up   { color: #f04a44; }
.futu-mkt-map-label.down { color: #13aa5c; }
.futu-mkt-map-label.up  .futu-mkt-map-pct { color: #f04a44; }
.futu-mkt-map-label.down .futu-mkt-map-pct { color: #13aa5c; }

.futu-mkt-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
}

/* ===== 环球指数 section ===== */
.futu-mkt-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
}
.futu-mkt-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.futu-mkt-section-arrow {
  font-size: 16px;
  color: #b0b0b0;
}

.futu-mkt-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px;
}
@media (max-width: 380px) {
  .futu-mkt-card-grid { grid-template-columns: repeat(2, 1fr); }
}

.futu-mkt-card {
  background: #f7f8fa;
  border-radius: 10px;
  padding: 12px 10px 10px;
  text-align: left;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.futu-mkt-card:active { background: #eef0f3; }
.futu-mkt-card-name {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.futu-mkt-card-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.futu-mkt-card-change {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.futu-mkt-card-value.up, .futu-mkt-card-change.up     { color: #f04a44; }
.futu-mkt-card-value.down, .futu-mkt-card-change.down { color: #13aa5c; }

.futu-mkt-card-spark {
  width: 100%;
  height: 20px;
  margin-top: 2px;
}

/* ===== Placeholder (non-概况 tabs) ===== */
.futu-mkt-placeholder {
  margin: 32px 20px;
  border: 1px dashed #e5e5e5;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  color: #666;
}
.futu-mkt-placeholder-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.futu-mkt-placeholder-sub {
  margin-top: 8px;
  font-size: 13px;
  color: #888;
}
/* FutuAI — 富途"牛牛 AI"风格 1:1 复刻
 *
 * 浅色 / 白底，居中 welcome + 4 行推荐问题 + 底部输入。
 * 所有样式独立 .futu-ai-* 命名空间。
 */

.futu-ai {
  position: fixed;
  inset: 0;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', sans-serif;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== Topbar ===== */
.futu-ai-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 8px;
  flex-shrink: 0;
}
.futu-ai-icon-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.futu-ai-topbar-title {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.5px;
}

/* ===== Welcome ===== */
.futu-ai-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 16px 22px;
  flex-shrink: 0;
}
.futu-ai-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.futu-ai-greeting {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 15px;
  color: #1a1a1a;
  font-weight: 500;
}
.futu-ai-vip-badge {
  background: #fff1d6;
  color: #c9881e;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* ===== 推荐问题列表 ===== */
.futu-ai-prompts {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.futu-ai-prompt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 4px;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.futu-ai-prompt-row:last-of-type {
  border-bottom: 1px solid #f0f0f0;
}
.futu-ai-prompt-text {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.4;
  flex: 1;
}
.futu-ai-swap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 16px 4px;
  font-size: 13px;
  color: #9aa0a6;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
}

/* ===== 底部输入栏 ===== */
.futu-ai-input-wrap {
  flex-shrink: 0;
  padding: 8px 12px 12px;
  background: #ffffff;
  /* 给 FutuBottomNav 留位（共 60px 高度 + safe area） */
  margin-bottom: 84px;
}
.futu-ai-input-box {
  background: #f5f5f5;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.futu-ai-input {
  background: none;
  border: none;
  outline: none;
  font-size: 15px;
  color: #1a1a1a;
  font-family: inherit;
  padding: 4px 0;
  width: 100%;
}
.futu-ai-input::placeholder {
  color: #b8b8b8;
}
.futu-ai-input-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.futu-ai-deepthink-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: #5a5a5a;
  cursor: pointer;
  font-family: inherit;
}
.futu-ai-deepthink-chip.active {
  background: #fff5ee;
  border-color: #FF6B1A;
  color: #FF6B1A;
}
.futu-ai-mic-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== Chat list (when messages.length > 0) ===== */
.futu-ai-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.futu-ai-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 12px 24px;
}

.futu-ai-bubble-row {
  display: flex;
  width: 100%;
}
.futu-ai-bubble-row.user      { justify-content: flex-end; }
.futu-ai-bubble-row.assistant { justify-content: flex-start; }

.futu-ai-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.futu-ai-bubble.user {
  background: #3B6FE6;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}
.futu-ai-bubble.assistant {
  background: #f4f6fa;
  color: #1a1a1a;
  border-bottom-left-radius: 4px;
}
.futu-ai-bubble.error {
  background: #fdecea;
  color: #b91c1c;
}

/* Typing dots — 3 个跳动的小圆点 */
.futu-ai-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 14px;
}
.futu-ai-typing span {
  width: 6px;
  height: 6px;
  background: #9aa0a6;
  border-radius: 50%;
  animation: futu-ai-typing-bounce 1.2s infinite ease-in-out;
}
.futu-ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.futu-ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes futu-ai-typing-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Send 按钮 (输入框有内容时替换 mic) — 圆形蓝底 */
.futu-ai-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.futu-ai-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Disabled 状态视觉降级 (pending 时 input/prompts 都 disabled) */
.futu-ai-input:disabled,
.futu-ai-prompt-row:disabled,
.futu-ai-deepthink-chip:disabled,
.futu-ai-mic-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Main layout styles */
/* Design Tokens - Responsive Breakpoints / 设计令牌 - 响应式断点 */
:root {
  /* Breakpoints / 断点 */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 768px;
  --breakpoint-laptop: 1024px;
  --breakpoint-hd: 1440px;
  --breakpoint-2k: 2560px;
  --breakpoint-4k: 3840px;
  
  /* Dashboard Layout / 仪表板布局 */
  --left-menu-width: 200px;
  --left-menu-width-collapsed: 60px;
  --top-bar-height: 60px;
  
  /* Spacing / 间距 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
}

/* Mobile: < 768px */
@media (max-width: 767px) {
  :root {
    --left-menu-width: 0px;
    --top-bar-height: 60px;
    --spacing-md: 1rem;
  }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --left-menu-width: 0px;
    --top-bar-height: 60px;
  }
}

/* Laptop: 1024px - 1439px (default, no changes needed) */

/* HD: 1440px - 2559px */
@media (min-width: 1440px) and (max-width: 2559px) {
  :root {
    --left-menu-width: 220px;
    --spacing-md: 2rem;
  }
}

/* 2K: 2560px - 3839px */
@media (min-width: 2560px) and (max-width: 3839px) {
  :root {
    --left-menu-width: 240px;
    --spacing-md: 2.5rem;
  }
}

/* 4K: 3840px+ */
@media (min-width: 3840px) {
  :root {
    --left-menu-width: 280px;
    --spacing-md: 3rem;
  }
}

body {
  padding-bottom: 32px;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 28px;
  }
}

/* flex: 1 1 0% + min-width: 0 so center expands when left/right panels collapse / 使主内容区在左右侧栏收起时占满剩余宽度 */
.main-content-wrapper {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #111317;
  transition: margin-left 0.3s ease;
  position: relative;
}

/* Mobile/Tablet: Hide left menu, adjust margin / 移动端/平板：隐藏左侧菜单，调整边距 */
@media (max-width: 1023px) {
  .main-content-wrapper {
    margin-left: 0;
    width: 100%;
    overflow: hidden !important; /* Keep hidden to contain scrollable children / 保持隐藏以包含可滚动的子元素 */
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for mobile browsers / 移动浏览器动态视口高度 */
    position: relative;
    display: flex !important;
    flex-direction: column !important;
  }
}

.trading-content {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

/* Reserve space above BottomBar (Market Open/Close bar) so chart time controls (5m, 30m) stay visible / 为底部 Market Open/Close 横条预留空间，保证图表下方 5m/30m 区间可选 */
@media (min-width: 1024px) {
  .app-container.route-markets .main-content-wrapper {
    padding-bottom: 32px;
  }
}

.trading-layout {
  display: flex;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.chart-container {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background-color: #111317;
  position: relative;
  overflow: hidden;
}

/* Klines chart full width when watchlist and right market data are both collapsed / watchlist 与右侧 market data 均收起时 K 线图占满可用空间 */
.chart-container.chart-container-full {
  width: 100%;
  flex: 1;
  min-width: 0;
  max-width: none;
}

/* Mobile/Tablet: Conditional visibility based on stock selection / 移动端/平板：根据股票选择条件显示 */
@media (max-width: 1023px) {
  /* Stack trading-content vertically on mobile / 移动端垂直堆叠 trading-content */
  .trading-content {
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0; /* Enable flex shrinking / 启用flex收缩 */
    background-color: #ffffff; /* White background on mobile market page / 移动端市场页面白色背景 */
  }
  
  /* Hide Sidebar (RightMarketData) on mobile/tablet / 在移动端/平板上隐藏侧边栏（RightMarketData） */
  .sidebar-container {
    display: none !important;
  }
  
  /* Make trading-layout take remaining space and allow scrolling / 让trading-layout占据剩余空间并允许滚动 */
  .trading-layout {
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important; /* Enable flex shrinking / 启用flex收缩 */
    overflow: visible !important; /* Allow children to scroll / 允许子元素滚动 */
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Ensure Watchlist panel takes full height and scrolls / 确保观察列表面板占据全高并可滚动 */
  .watchlist-panel {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important; /* Enable flex shrinking / 启用flex收缩 */
    overflow: hidden !important; /* Contain scroll within panel / 将滚动包含在面板内 */
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    /* Account for fixed elements: BottomBar(32px) + MobileMenuBar(64px) / 为固定元素预留空间 */
    max-height: calc(100vh - var(--top-bar-height, 60px) - 96px) !important;
    max-height: calc(100dvh - var(--top-bar-height, 60px) - 96px) !important; /* Dynamic viewport height / 动态视口高度 */
  }
  
  /* Hide watchlist when stock is selected (show chart instead) / 选择股票时隐藏观察列表（显示图表） */
  .watchlist-panel.mobile-hidden {
    display: none !important;
  }
  
  /* Hide chart when no stock is selected (show watchlist instead) / 未选择股票时隐藏图表（显示观察列表） */
  .chart-container.mobile-hidden {
    display: none !important;
  }

  /* Hide market overview when stock is selected / 选择股票时隐藏市场概览 */
  .market-overview.mobile-hidden {
    display: none !important;
  }
  
  /* Show chart when stock is selected / 选择股票时显示图表 */
  .chart-container:not(.mobile-hidden) {
    display: flex !important;
    flex: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    /* Account for fixed elements: BottomBar(32px) + MobileMenuBar(64px) / 为固定元素预留空间 */
    max-height: calc(100vh - var(--top-bar-height, 60px) - 96px) !important;
    max-height: calc(100dvh - var(--top-bar-height, 60px) - 96px) !important; /* Dynamic viewport height / 动态视口高度 */
  }
}

/* Dark theme: mobile trading-content background / 深色主题：移动端交易内容背景 */
@media (max-width: 1023px) {
  [data-theme="dark"] .trading-content {
    background-color: #111317;
  }
}

/* Light theme: page background overrides / 浅色主题：页面背景覆盖 */
[data-theme="light"] .main-content-wrapper {
  background: #f3f4f6;
}

[data-theme="light"] .chart-container {
  background-color: #f3f4f6;
}

[data-theme="light"] .trading-content {
  background-color: #f3f4f6;
}/* Turnkey login sheet: only strip the backdrop blur (the blur made the
 * page behind look broken). Keep Turnkey's own translucent scrim so the
 * sheet's own UI doesn't get obscured by anything we inject. */
.tk-modal, .tk-modal * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Global styles and CSS variables */
:root {
  --bg-primary: #111317;
  --bg-secondary: #111317;
  --bg-tertiary: #111317;
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --text-muted: #666666;
  --border-color: #2d2d2d;
  --accent-green: #00ff00;
  --accent-red: #ff0000;
  --accent-blue: #00ccff;
  --hover-bg: #111317;
  --ai-blue: #00ccff;

  /* Trade buy/sell button colors - theme-aware / 交易买卖按钮颜色 - 跟随主题 */
  --trade-buy-color: #4caf50;
  --trade-buy-hover: #43a047;
  --trade-buy-active: #388e3c;
  --trade-buy-rgb: 76, 175, 80;
  --trade-sell-color: #e74c3c;
  --trade-sell-hover: #d63031;
  --trade-sell-active: #c0392b;
  --trade-sell-rgb: 231, 76, 60;
}

/* Dark theme trade button colors / 深色主题交易按钮颜色 */
[data-theme="dark"] {
  --trade-buy-color: #66bb6a;
  --trade-buy-hover: #4caf50;
  --trade-buy-active: #43a047;
  --trade-buy-rgb: 102, 187, 106;
  --trade-sell-color: #ef5350;
  --trade-sell-hover: #e53935;
  --trade-sell-active: #d32f2f;
  --trade-sell-rgb: 239, 83, 80;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
}

/* Futu screens run under data-theme=light; if a Futu page's content doesn't
   cover the full viewport width (sticky columns, flex shrink, scrollbar
   overflow), the body's dark default leaks through on the right as a
   black stripe. Force body white under the light theme so no dark edge
   peeks out. Dashboard dark screens keep their own .app-container bg. */
html[data-theme='light'] body {
  background-color: #ffffff;
}
html[data-theme='light'] #root {
  background-color: #ffffff;
}

#root {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers / 移动浏览器动态视口高度 */
  /* 用 100% 而非 100vw — Safari 在某些 layout 下 100vw 会包含 scrollbar 槽位
     或反过来比实际可视宽度多出 1-2px, 视觉上"不充满"或者出现横向滚动条.
     100% 取自 html/body (我们 body overflow:hidden), 是真正的可视宽度. */
  width: 100%;
  display: flex;
  flex-direction: column;
  /* iPhone 16 Pro/Plus/Max 在 viewport-fit=cover 下, 物理屏幕 = 100vw,
     但 home indicator / Dynamic Island 区域是 safe-area inset. 这里不主动加
     padding, 让 .futu-page 自己决定要不要 inset (它用 position:fixed inset:0
     已经覆盖整个屏幕). */
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

.app-container {
  display: flex;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers / 移动浏览器动态视口高度 */
  width: 100vw;
  background-color: var(--bg-primary);
  position: relative;
}

/* Scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Price change colors */
.positive {
  color: var(--accent-green);
}

.negative {
  color: var(--accent-red);
}

/* Turnkey SDK Modal z-index fix for mobile/tablet / Turnkey SDK 模态框 z-index 修复（移动端/平板） */
/* Ensure Turnkey login modal appears above mobile menu overlay / 确保 Turnkey 登录模态框显示在移动菜单遮罩之上 */
/* Only target Turnkey SDK specific elements with data attributes / 仅针对带数据属性的 Turnkey SDK 特定元素 */
[data-turnkey],
[data-turnkey] > * {
  z-index: 1003 !important; /* Above mobile menu (999), menu bar (1000), hamburger (1001), and modals (1002) / 高于移动菜单 (999)、菜单栏 (1000)、汉堡按钮 (1001) 和模态框 (1002) */
}

/* Target Turnkey SDK portal elements (direct children of body, excluding our own overlays) / 针对 Turnkey SDK 门户元素（body 的直接子元素，排除我们自己的遮罩） */
body > div[data-turnkey] {
  z-index: 1003 !important;
}

/* Mobile/Tablet specific: Ensure Turnkey modal is above everything and clickable / 移动端/平板特定：确保 Turnkey 模态框在所有内容之上且可点击 */
@media (max-width: 1023px) {
  /* Ensure Turnkey modal and all its children are above mobile menu / 确保 Turnkey 模态框及其所有子元素在移动菜单之上 */
  [data-turnkey],
  [data-turnkey] > *,
  [data-turnkey] > * > * {
    z-index: 1003 !important;
    pointer-events: auto !important;
  }
  
  /* Ensure mobile menu bar doesn't block when closed / 确保移动菜单栏在关闭时不阻挡 */
  .mobile-menu-bar:not(.open) {
    pointer-events: none !important;
  }
  
  /* Re-enable pointer events for mobile menu when open / 移动菜单打开时重新启用指针事件 */
  .mobile-menu-bar.open {
    pointer-events: auto !important;
  }

  /* Fix Turnkey OTP input on mobile: disable autocomplete/autocorrect that can
     interfere with manual character-by-character typing on virtual keyboards
     修复移动端 Turnkey OTP 输入：禁用自动补全/自动纠正，避免虚拟键盘逐字输入时出问题 */
  [data-turnkey] input[type="text"],
  [data-turnkey] input[type="number"],
  [data-turnkey] input[type="tel"],
  [data-turnkey] input:not([type]) {
    autocomplete: one-time-code;
    -webkit-text-security: none;
    ime-mode: disabled;
  }
}/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:oklch(70.4% 0.191 22.216);--color-red-500:oklch(63.7% 0.237 25.331);--color-gray-300:oklch(87.2% 0.01 258.338);--color-gray-700:oklch(37.3% 0.034 259.733);--color-black:#000;--spacing:0.25rem;--container-md:28rem;--text-xs:0.75rem;--text-xs--line-height:1.33333;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--font-weight-extralight:200;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-sm:0.25rem;--radius-md:0.375rem;--ease-in:cubic-bezier(0.4,0,1,1);--ease-out:cubic-bezier(0,0,0.2,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--animate-ping:ping 1s cubic-bezier(0,0,0.2,1) infinite;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--color-primary-light:oklch(0.547 0.2389 266.82);--color-primary-dark:oklch(0.547 0.2389 266.82);--color-primary-text-light:#fff;--color-primary-text-dark:#fff;--color-danger-light:oklch(0.65 0.1406 12.71);--color-danger-dark:oklch(0.6088 0.1801 30.71);--color-success-light:oklch(0.7231 0.1834 142.46);--color-success-dark:oklch(0.7679 0.1603 152.74);--color-button-light:#fff;--color-button-dark:oklch(0.2532 0.0056 285.99);--color-modal-background-light:oklch(0.9758 0.0057 264.53);--color-modal-background-dark:oklch(0.15 0 0);--color-modal-text-light:oklch(0 0.1 41);--color-modal-text-dark:#fff;--color-icon-background-light:oklch(0.928 0.006 264.531);--color-icon-background-dark:oklch(0.3222 0.0053 286.1);--color-icon-text-light:oklch(0.6066 0 0);--color-icon-text-dark:oklch(0.7174 0.0029 286.32);--animate-shake:shake 250ms ease-in-out}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-\[-2px\]{top:-2px}.-right-4{right:calc(var(--spacing)*-4)}.right-0{right:calc(var(--spacing)*0)}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%;@media (width >= 40rem){max-width:40rem}@media (width >= 48rem){max-width:48rem}@media (width >= 64rem){max-width:64rem}@media (width >= 80rem){max-width:80rem}@media (width >= 96rem){max-width:96rem}}.m-auto{margin:auto!important}.\!mx-4{margin-inline:calc(var(--spacing)*4)!important}.mx-2{margin-inline:calc(var(--spacing)*2)!important}.\!my-0{margin-block:calc(var(--spacing)*0)!important}.my-2{margin-block:calc(var(--spacing)*2)!important}.my-3{margin-block:calc(var(--spacing)*3)!important}.my-4{margin-block:calc(var(--spacing)*4)!important}.my-6{margin-block:calc(var(--spacing)*6)!important}.mt-0{margin-top:calc(var(--spacing)*0)!important}.mt-1{margin-top:calc(var(--spacing)*1)!important}.mt-2{margin-top:calc(var(--spacing)*2)!important}.mt-3{margin-top:calc(var(--spacing)*3)!important}.mt-4{margin-top:calc(var(--spacing)*4)!important}.mt-5{margin-top:calc(var(--spacing)*5)!important}.mt-6{margin-top:calc(var(--spacing)*6)!important}.mt-8{margin-top:calc(var(--spacing)*8)!important}.mt-10{margin-top:calc(var(--spacing)*10)!important}.mt-11{margin-top:calc(var(--spacing)*11)!important}.mt-12{margin-top:calc(var(--spacing)*12)!important}.mb-1{margin-bottom:calc(var(--spacing)*1)!important}.mb-3{margin-bottom:calc(var(--spacing)*3)!important}.mb-4{margin-bottom:calc(var(--spacing)*4)!important}.mb-5{margin-bottom:calc(var(--spacing)*5)!important}.ml-auto{margin-left:auto!important}.box-border{box-sizing:border-box}.line-clamp-2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.hidden{display:none}.size-1\/2{height:50%;width:50%}.size-3{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-5{height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}.size-6{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6)}.size-11{height:calc(var(--spacing)*11);width:calc(var(--spacing)*11)}.size-14{height:calc(var(--spacing)*14);width:calc(var(--spacing)*14)}.size-18{height:calc(var(--spacing)*18);width:calc(var(--spacing)*18)}.size-24{height:calc(var(--spacing)*24);width:calc(var(--spacing)*24)}.size-\[6px\]{height:6px;width:6px}.h-0{height:calc(var(--spacing)*0)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-6\.5{height:calc(var(--spacing)*6.5)}.h-7{height:calc(var(--spacing)*7)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-12{height:calc(var(--spacing)*12)}.h-40{height:calc(var(--spacing)*40)}.h-48{height:calc(var(--spacing)*48)}.h-\[1px\]{height:1px}.h-fit{height:fit-content}.h-full{height:100%}.\!max-h-72{max-height:calc(var(--spacing)*72)!important}.max-h-16{max-height:calc(var(--spacing)*16)}.max-h-64{max-height:calc(var(--spacing)*64)}.max-h-72{max-height:calc(var(--spacing)*72)}.min-h-12{min-height:calc(var(--spacing)*12)}.min-h-42{min-height:calc(var(--spacing)*42)}.\!w-fit{width:fit-content!important}.w-0{width:calc(var(--spacing)*0)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-6\.5{width:calc(var(--spacing)*6.5)}.w-7{width:calc(var(--spacing)*7)}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-48{width:calc(var(--spacing)*48)}.w-72{width:calc(var(--spacing)*72)}.w-80{width:calc(var(--spacing)*80)}.w-96{width:calc(var(--spacing)*96)}.w-\[21rem\]{width:21rem}.w-\[95\%\]{width:95%}.w-fit{width:fit-content}.w-full{width:100%}.max-w-32{max-width:calc(var(--spacing)*32)}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.min-w-20{min-width:calc(var(--spacing)*20)}.min-w-80{min-width:calc(var(--spacing)*80)}.min-w-96{min-width:calc(var(--spacing)*96)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-x-8{--tw-translate-x:calc(var(--spacing)*-8)}.-translate-x-8,.translate-x-0{translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0)}.translate-y-0{--tw-translate-y:calc(var(--spacing)*0)}.translate-y-0,.translate-y-full{translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-full{--tw-translate-y:100%}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-ping{animation:var(--animate-ping)}.animate-shake{animation:var(--animate-shake)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-0\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.space-y-2{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)))!important;margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))!important}}.space-y-3{:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*3*(1 - var(--tw-space-y-reverse)))!important;margin-block-start:calc(var(--spacing)*3*var(--tw-space-y-reverse))!important}}.gap-x-2{column-gap:calc(var(--spacing)*2)}.space-x-2{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)))!important;margin-inline-start:calc(var(--spacing)*2*var(--tw-space-x-reverse))!important}}.space-x-2\.5{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2.5*(1 - var(--tw-space-x-reverse)))!important;margin-inline-start:calc(var(--spacing)*2.5*var(--tw-space-x-reverse))!important}}.self-start{align-self:flex-start}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-x-clip{overflow-x:clip}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-icon-background-light{border-color:var(--color-icon-background-light)}.border-modal-background-dark\/10{border-color:color-mix(in srgb,oklch(.15 0 0) 10%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-modal-background-dark) 10%,transparent)}}.border-modal-background-dark\/15{border-color:color-mix(in srgb,oklch(.15 0 0) 15%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-modal-background-dark) 15%,transparent)}}.border-modal-background-dark\/20{border-color:color-mix(in srgb,oklch(.15 0 0) 20%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-modal-background-dark) 20%,transparent)}}.border-modal-background-light{border-color:var(--color-modal-background-light)}.border-primary-light\/50{border-color:color-mix(in srgb,oklch(.547 .2389 266.82) 50%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-primary-light) 50%,transparent)}}.bg-black\/20{background-color:color-mix(in srgb,#000 20%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 20%,transparent)}}.bg-black\/40{background-color:color-mix(in srgb,#000 40%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-black) 40%,transparent)}}.bg-button-light{background-color:var(--color-button-light)}.bg-danger-light{background-color:var(--color-danger-light)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-icon-background-light{background-color:var(--color-icon-background-light)}.bg-icon-text-light\/20{background-color:color-mix(in srgb,oklch(.6066 0 0) 20%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-icon-text-light) 20%,transparent)}}.bg-modal-background-light{background-color:var(--color-modal-background-light)}.bg-primary-light{background-color:var(--color-primary-light)}.bg-success-light{background-color:var(--color-success-light)}.bg-transparent{background-color:transparent}.object-contain{object-fit:contain}.\!p-0{padding:calc(var(--spacing)*0)!important}.p-0\.5{padding:calc(var(--spacing)*.5)!important}.p-2{padding:calc(var(--spacing)*2)!important}.p-3{padding:calc(var(--spacing)*3)!important}.p-4{padding:calc(var(--spacing)*4)!important}.px-2{padding-inline:calc(var(--spacing)*2)!important}.px-3{padding-inline:calc(var(--spacing)*3)!important}.px-4{padding-inline:calc(var(--spacing)*4)!important}.px-10{padding-inline:calc(var(--spacing)*10)!important}.py-1{padding-block:calc(var(--spacing)*1)!important}.py-2{padding-block:calc(var(--spacing)*2)!important}.py-3{padding-block:calc(var(--spacing)*3)!important}.py-4{padding-block:calc(var(--spacing)*4)!important}.py-5{padding-block:calc(var(--spacing)*5)!important}.py-6{padding-block:calc(var(--spacing)*6)!important}.py-10{padding-block:calc(var(--spacing)*10)!important}.pt-4{padding-top:calc(var(--spacing)*4)!important}.pt-8{padding-top:calc(var(--spacing)*8)!important}.text-center{text-align:center}.text-left{text-align:left}.font-mono\!{font-family:var(--font-mono)!important}.\!text-base{font-size:var(--text-base)!important;line-height:var(--tw-leading,var(--text-base--line-height))!important}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extralight{--tw-font-weight:var(--font-weight-extralight);font-weight:var(--font-weight-extralight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-danger-light{color:var(--color-danger-light)}.text-icon-text-light{color:var(--color-icon-text-light)}.text-icon-text-light\/50{color:color-mix(in srgb,oklch(.6066 0 0) 50%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-icon-text-light) 50%,transparent)}}.text-icon-text-light\/60{color:color-mix(in srgb,oklch(.6066 0 0) 60%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-icon-text-light) 60%,transparent)}}.text-icon-text-light\/70{color:color-mix(in srgb,oklch(.6066 0 0) 70%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-icon-text-light) 70%,transparent)}}.text-icon-text-light\/80{color:color-mix(in srgb,oklch(.6066 0 0) 80%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-icon-text-light) 80%,transparent)}}.text-inherit{color:inherit}.text-modal-background-light{color:var(--color-modal-background-light)}.text-modal-text-light{color:var(--color-modal-text-light)}.text-primary-light{color:var(--color-primary-light)}.text-primary-text-light{color:var(--color-primary-text-light)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-success-light{color:var(--color-success-light)}.italic{font-style:italic}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.placeholder-icon-text-light{&::placeholder{color:var(--color-icon-text-light)}}.opacity-0{opacity:0}.opacity-30{opacity:30%}.opacity-50{opacity:50%}.opacity-100{opacity:100%}.shadow-\[0_0_42px\]{--tw-shadow:0 0 42px var(--tw-shadow-color,currentcolor)}.shadow-\[0_0_42px\],.shadow-lg{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,rgba(0,0,0,.1)),0 4px 6px -4px var(--tw-shadow-color,rgba(0,0,0,.1))}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,rgba(0,0,0,.1)),0 8px 10px -6px var(--tw-shadow-color,rgba(0,0,0,.1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-primary-light\/50{--tw-shadow-color:color-mix(in srgb,oklch(0.547 0.2389 266.82) 50%,transparent);@supports (color:color-mix(in lab,red,red)){--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-primary-light) 50%,transparent) var(--tw-shadow-alpha),transparent)}}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-opacity{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.delay-75{transition-delay:75ms}.duration-50{--tw-duration:50ms;transition-duration:50ms}.duration-100{--tw-duration:100ms;transition-duration:.1s}.duration-150{--tw-duration:150ms;transition-duration:.15s}.duration-200{--tw-duration:200ms;transition-duration:.2s}.duration-300{--tw-duration:300ms;transition-duration:.3s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-icon-text-light{&::placeholder{color:var(--color-icon-text-light)}}.focus-within\:outline-\[1px\]{&:focus-within{outline-style:var(--tw-outline-style);outline-width:1px}}.focus-within\:outline-offset-0{&:focus-within{outline-offset:0}}.focus-within\:outline-primary-light{&:focus-within{outline-color:var(--color-primary-light)}}.hover\:bg-icon-background-light{&:hover{@media (hover:hover){background-color:var(--color-icon-background-light)}}}.hover\:bg-primary-light\/90{&:hover{@media (hover:hover){background-color:color-mix(in srgb,oklch(.547 .2389 266.82) 90%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-primary-light) 90%,transparent)}}}}.focus\:border-none{&:focus{--tw-border-style:none;border-style:none}}.focus\:ring-0{&:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:outline-\[1px\]{&:focus{outline-style:var(--tw-outline-style);outline-width:1px}}.focus\:outline-offset-0{&:focus{outline-offset:0}}.focus\:outline-primary-light{&:focus{outline-color:var(--color-primary-light)}}.focus\:outline-none{&:focus{--tw-outline-style:none;outline-style:none}}.active\:scale-95{&:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}}.active\:outline-2{&:active{outline-style:var(--tw-outline-style);outline-width:2px}}.active\:outline-primary-light{&:active{outline-color:var(--color-primary-light)}}.data-closed\:-translate-y-2{&[data-closed]{--tw-translate-y:calc(var(--spacing)*-2);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-closed\:opacity-0{&[data-closed]{opacity:0}}.dark\:border-icon-background-dark,.md\:max-w-md{&:where(.dark,.dark *){border-color:var(--color-icon-background-dark)}}.dark\:border-modal-background-dark{&:where(.dark,.dark *){border-color:var(--color-modal-background-dark)}}.dark\:border-modal-background-light\/10{&:where(.dark,.dark *){border-color:color-mix(in srgb,oklch(.9758 .0057 264.53) 10%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-modal-background-light) 10%,transparent)}}}.dark\:border-modal-background-light\/15{&:where(.dark,.dark *){border-color:color-mix(in srgb,oklch(.9758 .0057 264.53) 15%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-modal-background-light) 15%,transparent)}}}.dark\:border-modal-background-light\/20{&:where(.dark,.dark *){border-color:color-mix(in srgb,oklch(.9758 .0057 264.53) 20%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-modal-background-light) 20%,transparent)}}}.dark\:border-primary-dark\/50{&:where(.dark,.dark *){border-color:color-mix(in srgb,oklch(.547 .2389 266.82) 50%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-primary-dark) 50%,transparent)}}}.dark\:bg-button-dark{&:where(.dark,.dark *){background-color:var(--color-button-dark)}}.dark\:bg-danger-dark{&:where(.dark,.dark *){background-color:var(--color-danger-dark)}}.dark\:bg-gray-700{&:where(.dark,.dark *){background-color:var(--color-gray-700)}}.dark\:bg-icon-background-dark{&:where(.dark,.dark *){background-color:var(--color-icon-background-dark)}}.dark\:bg-icon-text-dark\/20{&:where(.dark,.dark *){background-color:color-mix(in srgb,oklch(.7174 .0029 286.32) 20%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-icon-text-dark) 20%,transparent)}}}.dark\:bg-modal-background-dark{&:where(.dark,.dark *){background-color:var(--color-modal-background-dark)}}.dark\:bg-primary-dark{&:where(.dark,.dark *){background-color:var(--color-primary-dark)}}.dark\:bg-success-dark{&:where(.dark,.dark *){background-color:var(--color-success-dark)}}.dark\:text-danger-dark{&:where(.dark,.dark *){color:var(--color-danger-dark)}}.dark\:text-icon-text-dark{&:where(.dark,.dark *){color:var(--color-icon-text-dark)}}.dark\:text-icon-text-dark\/50{&:where(.dark,.dark *){color:color-mix(in srgb,oklch(.7174 .0029 286.32) 50%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-icon-text-dark) 50%,transparent)}}}.dark\:text-icon-text-dark\/60{&:where(.dark,.dark *){color:color-mix(in srgb,oklch(.7174 .0029 286.32) 60%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-icon-text-dark) 60%,transparent)}}}.dark\:text-icon-text-dark\/70{&:where(.dark,.dark *){color:color-mix(in srgb,oklch(.7174 .0029 286.32) 70%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-icon-text-dark) 70%,transparent)}}}.dark\:text-icon-text-dark\/80{&:where(.dark,.dark *){color:color-mix(in srgb,oklch(.7174 .0029 286.32) 80%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-icon-text-dark) 80%,transparent)}}}.dark\:text-modal-background-dark{&:where(.dark,.dark *){color:var(--color-modal-background-dark)}}.dark\:text-modal-text-dark{&:where(.dark,.dark *){color:var(--color-modal-text-dark)}}.dark\:text-primary-dark{&:where(.dark,.dark *){color:var(--color-primary-dark)}}.dark\:text-primary-text-dark{&:where(.dark,.dark *){color:var(--color-primary-text-dark)}}.dark\:text-success-dark{&:where(.dark,.dark *){color:var(--color-success-dark)}}.dark\:placeholder-icon-text-dark{&:where(.dark,.dark *){&::placeholder{color:var(--color-icon-text-dark)}}}.dark\:shadow-\[0_0_42px\]{&:where(.dark,.dark *){--tw-shadow:0 0 42px var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.dark\:shadow-primary-dark\/50{&:where(.dark,.dark *){--tw-shadow-color:color-mix(in srgb,oklch(0.547 0.2389 266.82) 50%,transparent);@supports (color:color-mix(in lab,red,red)){--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-primary-dark) 50%,transparent) var(--tw-shadow-alpha),transparent)}}}.dark\:placeholder\:text-icon-text-dark{&:where(.dark,.dark *){&::placeholder{color:var(--color-icon-text-dark)}}}.focus-within\:dark\:outline-primary-dark{&:focus-within{&:where(.dark,.dark *){outline-color:var(--color-primary-dark)}}}.dark\:hover\:bg-icon-background-dark{&:where(.dark,.dark *){&:hover{@media (hover:hover){background-color:var(--color-icon-background-dark)}}}}.dark\:hover\:bg-primary-dark\/90{&:where(.dark,.dark *){&:hover{@media (hover:hover){background-color:color-mix(in srgb,oklch(.547 .2389 266.82) 90%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-primary-dark) 90%,transparent)}}}}}.focus\:dark\:outline-primary-dark{&:focus{&:where(.dark,.dark *){outline-color:var(--color-primary-dark)}}}.active\:dark\:outline-primary-dark{&:active{&:where(.dark,.dark *){outline-color:var(--color-primary-dark)}}}}@layer base{input:-webkit-autofill{-webkit-text-fill-color:var(--color-modal-text-light)!important;box-shadow:inset 0 0 0 1000px var(--color-button-light)!important;caret-color:var(--color-modal-text-light);transition:background-color 5000s ease-in-out 0s}.dark input:-webkit-autofill,html.dark input:-webkit-autofill{-webkit-text-fill-color:var(--color-modal-text-dark)!important;box-shadow:inset 0 0 0 1000px var(--color-button-dark)!important;caret-color:var(--color-modal-text-dark)}.tk-style-sentinel{height:0;pointer-events:none;position:absolute;visibility:hidden;width:1234px}.tk-modal{line-height:normal}.tk-modal *,.tk-modal :after,.tk-modal :before{border:revert-layer;box-sizing:revert-layer}.tk-modal button,.tk-modal input,.tk-modal select,.tk-modal textarea{font-feature-settings:inherit;color:revert-layer;font-family:inherit;font-size:revert-layer;font-variation-settings:inherit;font-weight:revert-layer;letter-spacing:inherit;line-height:inherit;margin:revert-layer;padding:revert-layer}@media (max-width:440px){.tk-modal button,.tk-modal input{font-size:medium}}}@layer components{.tk-scrollbar{scrollbar-color:var(--color-icon-text-light) var(--color-icon-background-light);scrollbar-width:thin}.tk-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tk-scrollbar::-webkit-scrollbar-track{background:var(--color-icon-background-light)}.tk-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-icon-text-light);border:2px solid var(--color-icon-background-light);border-radius:10px}.dark .tk-scrollbar{scrollbar-color:var(--color-icon-text-dark) var(--color-icon-background-dark)}.dark .tk-scrollbar::-webkit-scrollbar-track{background:var(--color-icon-background-dark)}.dark .tk-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-icon-text-dark);border:2px solid var(--color-icon-background-dark)}}.tk-modal *{box-sizing:revert-layer;margin:revert-layer;padding:revert-layer}.tk-modal *,.tk-modal :after,.tk-modal :before{border:revert-layer;box-sizing:revert-layer}.tk-modal blockquote,.tk-modal dd,.tk-modal dl,.tk-modal figure,.tk-modal h1,.tk-modal h2,.tk-modal h3,.tk-modal h4,.tk-modal h5,.tk-modal h6,.tk-modal hr,.tk-modal p,.tk-modal pre{margin:revert!important}.tk-modal button{-webkit-appearance:button;background-color:revert-layer!important;background-image:revert-layer!important}.tk-modal input:where([type=button]){-webkit-appearance:button;background-color:revert-layer!important;background-image:revert-layer!important}.tk-modal input:where([type=reset]){-webkit-appearance:button;background-color:revert-layer!important;background-image:revert-layer!important}.tk-modal input:where([type=submit]){-webkit-appearance:button;background-color:revert-layer!important;background-image:revert-layer!important}.tk-modal button,.tk-modal input,.tk-modal select,.tk-modal textarea{font-feature-settings:inherit;color:revert-layer!important;font-family:inherit;font-size:revert-layer;font-variation-settings:inherit;font-weight:revert-layer;letter-spacing:inherit;line-height:inherit;margin:revert-layer!important;padding:revert-layer!important}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-outline-style:solid;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 600px;
  padding: 16px 20px;
  background: rgba(30, 30, 35, 0.98);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease-out;
  pointer-events: all;
  border-left: 4px solid;
  backdrop-filter: blur(10px);
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-success {
  border-left-color: #00c853;
}

.toast-error {
  border-left-color: #f44336;
}

.toast-warning {
  border-left-color: #ff9800;
}

.toast-info {
  border-left-color: #2196f3;
}

.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 16px;
  flex-shrink: 0;
}

.toast-success .toast-icon {
  background: rgba(0, 200, 83, 0.2);
  color: #00c853;
}

.toast-error .toast-icon {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
}

.toast-warning .toast-icon {
  background: rgba(255, 152, 0, 0.2);
  color: #ff9800;
}

.toast-info .toast-icon {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
}

.toast-message {
  flex: 1;
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.4;
}

.toast-close {
  background: none;
  border: none;
  color: #999;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  flex-shrink: 0;
}

.toast-close:hover {
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .toast-container {
    left: 10px;
    right: 10px;
    top: 10px;
  }
  
  .toast {
    min-width: unset;
    width: 100%;
  }
}

.user-info-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.user-info-modal {
  background: #111317;
  border: 1px solid #2d3748;
  border-radius: 6px;
  padding: 32px;
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  max-height: 90dvh; /* Dynamic viewport height for mobile browsers / 移动浏览器动态视口高度 */
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  animation: modalSlideIn 0.3s ease-out;
  pointer-events: auto;
  position: relative;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-info-modal-header {
  text-align: center;
  margin-bottom: 24px;
}

.user-info-modal-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #ff6b35;
}

.user-info-modal-header p {
  margin: 0;
  color: #9ca3af;
  font-size: 14px;
}

.user-info-modal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 500;
  color: #e5e7eb;
}

.form-group input {
  padding: 12px 16px;
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 6px;
  font-size: 16px;
  color: #e5e7eb;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: #ff6b35;
  box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}

.form-group input:disabled {
  background-color: #0a0a0a;
  cursor: not-allowed;
  opacity: 0.6;
}

.form-group input::placeholder {
  color: #718096;
}

.form-actions {
  margin-top: 8px;
}

.btn-primary {
  width: 100%;
  padding: 12px 24px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 640px) {
  .user-info-modal {
    padding: 24px;
    width: 95%;
  }

  .user-info-modal-header h2 {
    font-size: 20px;
  }
}

.completed-sell-orders-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.completed-sell-orders-modal {
  background: #1a1a1a;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  max-height: 90dvh; /* Dynamic viewport height for mobile browsers / 移动浏览器动态视口高度 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.3s ease-out;
  position: relative;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.completed-sell-orders-modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: #888;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
  z-index: 1;
}

.completed-sell-orders-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.completed-sell-orders-modal-header {
  padding: 32px 32px 24px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.completed-sell-orders-modal-icon {
  font-size: 48px;
  color: #4caf50;
  margin-bottom: 16px;
}

.completed-sell-orders-modal-title {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px 0;
}

.completed-sell-orders-modal-subtitle {
  font-size: 14px;
  color: #aaa;
  margin: 0;
  line-height: 1.5;
}

.completed-sell-orders-modal-content {
  padding: 24px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Allows flex child to shrink below content size */
}

/* Balance Summary */
.completed-sell-orders-balance-summary {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  flex-shrink: 0; /* Keep balance summary fixed, don't shrink */
}

.balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.balance-row-total {
  border-top: 1px solid rgba(76, 175, 80, 0.3);
  margin-top: 12px;
  padding-top: 16px;
}

.balance-label {
  font-size: 14px;
  color: #aaa;
  font-weight: 500;
}

.balance-value {
  font-size: 16px;
  font-weight: 600;
}

.balance-value.previous {
  color: #fff;
}

.balance-value.added {
  color: #4caf50;
}

.balance-value.new {
  color: #4caf50;
  font-size: 20px;
}

/* Orders List */
.completed-sell-orders-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Allows flex child to shrink below content size */
}

.orders-list-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px 0;
  flex-shrink: 0; /* Keep title fixed, don't shrink */
}

.orders-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  max-height: 400px; /* Maximum height before scrolling */
  min-height: 0;
}

.completed-order-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 12px;
  transition: all 0.2s;
}

.completed-order-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.order-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.order-symbol {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.order-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.order-status-badge.completed {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

.order-item-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.order-detail-row-net {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
  margin-top: 4px;
}

.detail-label {
  color: #aaa;
}

.detail-value {
  color: #fff;
  font-weight: 500;
}

.detail-value.net-proceeds {
  color: #4caf50;
  font-weight: 600;
  font-size: 14px;
}

/* Footer */
.completed-sell-orders-modal-footer {
  padding: 20px 32px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
}

.completed-sell-orders-modal-ok-btn {
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
}

.completed-sell-orders-modal-ok-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.completed-sell-orders-modal-ok-btn:active {
  transform: translateY(0);
}

/* Scrollbar styling for orders list container */
.orders-list-container::-webkit-scrollbar {
  width: 8px;
}

.orders-list-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.orders-list-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.orders-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   RESPONSIVE DESIGN / 响应式设计
   ======================================== */

/* Tablet: 768px - 1023px / 平板：768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .completed-sell-orders-modal {
    max-width: 500px;
  }

  .completed-sell-orders-modal-header {
    padding: 24px 24px 20px;
  }

  .completed-sell-orders-modal-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }

  .completed-sell-orders-modal-title {
    font-size: 20px;
  }

  .completed-sell-orders-modal-content {
    padding: 20px 24px;
  }

  .completed-sell-orders-balance-summary {
    padding: 16px;
  }

  .orders-list-container {
    max-height: 300px;
  }

  .completed-sell-orders-modal-footer {
    padding: 16px 24px 24px;
  }
}

/* Mobile: up to 767px / 移动端：最大767px */
@media (max-width: 767px) {
  .completed-sell-orders-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .completed-sell-orders-modal {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    max-height: 85dvh; /* Dynamic viewport height for mobile browsers / 移动浏览器动态视口高度 */
    border-radius: 16px 16px 0 0;
    animation: slideUpMobileSell 0.3s ease-out;
  }

  @keyframes slideUpMobileSell {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .completed-sell-orders-modal-close-btn {
    top: 12px;
    right: 12px;
    font-size: 18px;
    padding: 10px;
  }

  .completed-sell-orders-modal-header {
    padding: 20px 16px 16px;
  }

  .completed-sell-orders-modal-icon {
    font-size: 36px;
    margin-bottom: 10px;
  }

  .completed-sell-orders-modal-title {
    font-size: 18px;
  }

  .completed-sell-orders-modal-subtitle {
    font-size: 13px;
  }

  .completed-sell-orders-modal-content {
    padding: 16px;
  }

  .completed-sell-orders-balance-summary {
    padding: 14px;
    margin-bottom: 16px;
  }

  .balance-row {
    padding: 6px 0;
  }

  .balance-label {
    font-size: 13px;
  }

  .balance-value {
    font-size: 14px;
  }

  .balance-value.new {
    font-size: 17px;
  }

  .balance-row-total {
    margin-top: 8px;
    padding-top: 12px;
  }

  .completed-sell-orders-list {
    margin-top: 16px;
  }

  .orders-list-title {
    font-size: 16px;
    margin: 0 0 12px 0;
  }

  .orders-list-container {
    max-height: 250px;
    gap: 6px;
  }

  .completed-order-item {
    padding: 10px;
  }

  .order-symbol {
    font-size: 15px;
  }

  .order-status-badge {
    font-size: 10px;
    padding: 2px 8px;
  }

  .order-detail-row {
    font-size: 12px;
  }

  .detail-value.net-proceeds {
    font-size: 13px;
  }

  .completed-sell-orders-modal-footer {
    padding: 16px 16px 24px;
    /* Add safe area padding for devices with home indicator / 为有底部安全区域的设备添加额外内边距 */
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .completed-sell-orders-modal-ok-btn {
    width: 100%;
    padding: 14px 32px;
    font-size: 16px;
    border-radius: 10px;
    /* Larger touch target for mobile / 移动端更大的触摸目标 */
    min-height: 48px;
  }

  .completed-sell-orders-modal-ok-btn:hover {
    transform: none;
    box-shadow: none;
  }

  .completed-sell-orders-modal-ok-btn:active {
    background: #388e3c;
    transform: scale(0.98);
  }
}

.completed-buy-orders-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.completed-buy-orders-modal {
  background: #1a1a1a;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  max-height: 90dvh; /* Dynamic viewport height for mobile browsers / 移动浏览器动态视口高度 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.3s ease-out;
  position: relative;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.completed-buy-orders-modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: #888;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
  z-index: 1;
}

.completed-buy-orders-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.completed-buy-orders-modal-header {
  padding: 32px 32px 24px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.completed-buy-orders-modal-icon {
  font-size: 48px;
  color: #2196f3;
  margin-bottom: 16px;
}

.completed-buy-orders-modal-title {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px 0;
}

.completed-buy-orders-modal-subtitle {
  font-size: 14px;
  color: #aaa;
  margin: 0;
  line-height: 1.5;
}

.completed-buy-orders-modal-content {
  padding: 24px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Summary */
.completed-buy-orders-summary {
  background: rgba(33, 150, 243, 0.1);
  border: 1px solid rgba(33, 150, 243, 0.3);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.summary-label {
  font-size: 14px;
  color: #aaa;
  font-weight: 500;
}

.summary-value {
  font-size: 18px;
  font-weight: 600;
  color: #2196f3;
}

/* Orders List */
.completed-buy-orders-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.orders-list-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px 0;
  flex-shrink: 0;
}

.orders-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  max-height: 400px;
  min-height: 0;
}

.completed-order-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 12px;
  transition: all 0.2s;
}

.completed-order-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.order-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.order-symbol {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.order-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.order-status-badge.completed {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
  border: 1px solid rgba(33, 150, 243, 0.4);
}

.order-item-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.order-detail-row-total {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
  margin-top: 4px;
}

.detail-label {
  color: #aaa;
}

.detail-value {
  color: #fff;
  font-weight: 500;
}

.detail-value.total-cost {
  color: #2196f3;
  font-weight: 600;
  font-size: 14px;
}

/* Footer */
.completed-buy-orders-modal-footer {
  padding: 20px 32px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
}

.completed-buy-orders-modal-ok-btn {
  background: #2196f3;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 120px;
}

.completed-buy-orders-modal-ok-btn:hover {
  background: #1976d2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.completed-buy-orders-modal-ok-btn:active {
  transform: translateY(0);
}

/* Scrollbar styling */
.orders-list-container::-webkit-scrollbar {
  width: 8px;
}

.orders-list-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.orders-list-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.orders-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   RESPONSIVE DESIGN / 响应式设计
   ======================================== */

/* Tablet: 768px - 1023px / 平板：768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .completed-buy-orders-modal {
    max-width: 500px;
  }

  .completed-buy-orders-modal-header {
    padding: 24px 24px 20px;
  }

  .completed-buy-orders-modal-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }

  .completed-buy-orders-modal-title {
    font-size: 20px;
  }

  .completed-buy-orders-modal-content {
    padding: 20px 24px;
  }

  .completed-buy-orders-summary {
    padding: 16px;
  }

  .orders-list-container {
    max-height: 300px;
  }

  .completed-buy-orders-modal-footer {
    padding: 16px 24px 24px;
  }
}

/* Mobile: up to 767px / 移动端：最大767px */
@media (max-width: 767px) {
  .completed-buy-orders-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .completed-buy-orders-modal {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    max-height: 85dvh; /* Dynamic viewport height for mobile browsers / 移动浏览器动态视口高度 */
    border-radius: 16px 16px 0 0;
    animation: slideUpMobile 0.3s ease-out;
  }

  @keyframes slideUpMobile {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .completed-buy-orders-modal-close-btn {
    top: 12px;
    right: 12px;
    font-size: 18px;
    padding: 10px;
  }

  .completed-buy-orders-modal-header {
    padding: 20px 16px 16px;
  }

  .completed-buy-orders-modal-icon {
    font-size: 36px;
    margin-bottom: 10px;
  }

  .completed-buy-orders-modal-title {
    font-size: 18px;
  }

  .completed-buy-orders-modal-subtitle {
    font-size: 13px;
  }

  .completed-buy-orders-modal-content {
    padding: 16px;
  }

  .completed-buy-orders-summary {
    padding: 14px;
    margin-bottom: 16px;
  }

  .summary-row {
    padding: 6px 0;
  }

  .summary-label {
    font-size: 13px;
  }

  .summary-value {
    font-size: 16px;
  }

  .completed-buy-orders-list {
    margin-top: 16px;
  }

  .orders-list-title {
    font-size: 16px;
    margin: 0 0 12px 0;
  }

  .orders-list-container {
    max-height: 250px;
    gap: 6px;
  }

  .completed-order-item {
    padding: 10px;
  }

  .order-symbol {
    font-size: 15px;
  }

  .order-status-badge {
    font-size: 10px;
    padding: 2px 8px;
  }

  .order-detail-row {
    font-size: 12px;
  }

  .detail-value.total-cost {
    font-size: 13px;
  }

  .completed-buy-orders-modal-footer {
    padding: 16px 16px 24px;
    /* Add safe area padding for devices with home indicator / 为有底部安全区域的设备添加额外内边距 */
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .completed-buy-orders-modal-ok-btn {
    width: 100%;
    padding: 14px 32px;
    font-size: 16px;
    border-radius: 10px;
    /* Larger touch target for mobile / 移动端更大的触摸目标 */
    min-height: 48px;
  }

  .completed-buy-orders-modal-ok-btn:hover {
    transform: none;
    box-shadow: none;
  }

  .completed-buy-orders-modal-ok-btn:active {
    background: #1565c0;
    transform: scale(0.98);
  }
}

:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}