* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg-base:      #111318;
  --bg-panel:     #181c24;
  --bg-card:      #1e2330;
  --bg-hover:     #252b3a;
  --bg-active:    #2a3145;
  --border:       #2e3448;
  --border-light: #3a4260;
  --text-primary: #d4d8e8;
  --text-sec:     #ffffff;
  --text-muted:   #cccdd2;
  --accent:       #7b8cde;
  --accent-soft:  #4a5480;
  --gold:         #c8a84b;
  --gold-soft:    rgba(200,168,75,0.15);
  --tag-bg:       #252b3a;

  /* buy palette  (green tones) */
  --b1:#6abf85; --b2:#5aad75; --b3:#4a9b65; --b4:#3a8955; --b5:#2a7745;
  /* sell palette (orange-red tones) */
  --s1:#e0825a; --s2:#cc6e48; --s3:#b85a38; --s4:#a44630; --s5:#903228;
}

/* ── BG image overlay ── */
body {
  font-family:'Segoe UI',-apple-system,sans-serif;
  background-color: var(--bg-base);
  color: var(--text-primary);
  min-height:100vh;
  display:flex; flex-direction:column;
  position:relative;
}
#bg-layer {
  display:none;
  position:fixed; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:0.12;
  pointer-events:none;
}
body > *:not(#bg-layer):not(#modal):not(#api-info-overlay):not(#drawer-overlay):not(#sidebar-overlay):not(#share-overlay):not(.strategy-select-popup):not(.conversion-picker):not(.share-toast):not(.app-body):not(footer) { position:relative; z-index:1; }

/* ── Header ── */
header {
  display:flex; flex-direction:column; gap:9px;
  padding:11px 24px 9px 24px;
  background:rgba(24,28,36,0.92);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
  flex-shrink:0;
}

/* ── Commercial-use notice bar (eye-catching) ── */
.header-notice {
  display:flex; align-items:center; gap:9px;
  width:100%;
  padding:7px 14px;
  background:linear-gradient(90deg, rgba(200,168,75,0.20), rgba(224,130,90,0.10));
  border:1px solid rgba(200,168,75,0.4);
  border-radius:7px;
  font-size:12px; font-weight:600;
  color:#ecd28e;
  letter-spacing:.2px;
}
.notice-icon { font-size:13px; flex-shrink:0; }
.notice-text { flex:1 1 auto; min-width:0; }
.notice-text strong { color:#fff; font-weight:700; }
.notice-wechat {
  display:inline-block;
  color:#fff; background:rgba(255,255,255,0.14);
  padding:1px 8px; border-radius:4px; margin-left:2px;
  font-weight:700; letter-spacing:.3px;
}
.notice-copy-btn {
  flex-shrink:0; padding:4px 11px; font-size:11px; font-weight:600;
  background:rgba(255,255,255,0.08); color:#ecd28e;
  border:1px solid rgba(200,168,75,0.45); border-radius:6px;
  cursor:pointer; transition:all .18s; white-space:nowrap;
}
.notice-copy-btn:hover { background:rgba(255,255,255,0.16); border-color:rgba(200,168,75,0.7); }
.notice-copy-btn.copied { background:rgba(106,191,133,0.22); color:#8fd6a8; border-color:rgba(106,191,133,0.45); }

/* ── Header main row (brand/toggle on left, status/nav on right) ── */
.header-main {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; width:100%; flex-wrap:wrap;
}
.header-left {
  display:flex; align-items:center; gap:12px;
  min-width:0; flex-wrap:wrap;
}
.header-brand { display:flex; flex-direction:row; align-items:center; gap:10px; min-width:0; }
.header-icon { width:40px; height:40px; border-radius:8px; flex-shrink:0; }
.header-brand-text { display:flex; flex-direction:column; gap:0; min-width:0; }
.header-right {
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap; margin-left:auto;
}
.header-nav-group {
  display:flex; align-items:center; gap:6px;
  padding:3px; border-radius:8px;
  background:rgba(255,255,255,0.02); border:1px solid var(--border);
}

/* ── Header bottom row (season + arbitrage info aligned) ── */
.header-bottom-row {
  display:flex; align-items:center; gap:8px;
  width:100%; flex-shrink:0; flex-wrap:wrap;
}
.season-row {
  display:flex; align-items:center; gap:8px;
  flex-shrink:0; flex-wrap:wrap;
}
.season-btn {
  padding:3px 12px; font-size:11px; font-weight:600;
  background:transparent; color:var(--text-sec);
  border:1px solid var(--border); border-radius:5px;
  cursor:pointer; transition:all .18s; white-space:nowrap;
  letter-spacing:.3px;
}
.season-btn:hover { border-color:var(--border-light); color:var(--text-primary); background:var(--bg-hover); }
.season-btn.active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.logo { width:30px;height:30px; background:linear-gradient(135deg,#8c6d2f,#c8a84b); border-radius:6px; display:flex;align-items:center;justify-content:center; font-size:15px; }
header h1 { font-size:16px; font-weight:600; color:var(--gold); letter-spacing:.5px; line-height:1.25; }
header .sub { font-size:11px; color:var(--text-muted); }
/* ── POE version toggle ── */
.poe-toggle {
  display:inline-flex; align-items:center;
  border:1px solid var(--border-light); border-radius:6px;
  overflow:hidden;
}
.poe-toggle-btn {
  padding:4px 12px; font-size:11px; font-weight:600;
  background:transparent; color:var(--text-sec);
  border:none; cursor:pointer; transition:all .18s;
  letter-spacing:.3px;
}
.poe-toggle-btn + .poe-toggle-btn { border-left:1px solid var(--border-light); }
.poe-toggle-btn.active {
  background:var(--accent-soft); color:var(--accent);
}

/* ── Header info buttons ── */
.header-info-btn {
  padding:4px 10px; font-size:11px; font-weight:500;
  background:transparent; color:var(--text-sec);
  border:1px solid var(--border); border-radius:6px;
  cursor:pointer; transition:all .18s; white-space:nowrap;
}
.header-info-btn:hover { border-color:var(--border-light); color:var(--text-primary); background:var(--bg-hover); }

/* ── Right drawer ── */
.drawer-overlay {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
}
.drawer-overlay.active { display:block; }
.drawer-panel {
  position:fixed; top:0; right:0; bottom:0; z-index:501;
  width:40%; min-width:320px; max-width:560px;
  background:var(--bg-panel); border-left:1px solid var(--border-light);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  box-shadow:-8px 0 30px rgba(0,0,0,.35);
}
.drawer-overlay.active .drawer-panel { transform:translateX(0); }
.drawer-header {
  display:flex; align-items:center; gap:10px;
  padding:15px 20px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.drawer-title { font-size:15px; font-weight:600; flex:1; }
.drawer-close {
  width:28px;height:28px; display:flex;align-items:center;justify-content:center;
  border-radius:6px; cursor:pointer; color:var(--text-sec); font-size:17px;
  transition:all .15s;
}
.drawer-close:hover { background:var(--bg-hover); color:var(--text-primary); }
.drawer-body {
  flex:1; overflow-y:auto; padding:20px;
  font-size:13px; line-height:1.7; color:var(--text-primary);
}
.drawer-body { padding:24px; }
.drawer-body h1,.drawer-body h2,.drawer-body h3 { color:var(--gold); margin:1.4em 0 .6em; }
.drawer-body h1 { font-size:20px; border-bottom:1px solid var(--border); padding-bottom:10px; }
.drawer-body h2 { font-size:16px; }
.drawer-body h3 { font-size:14px; }
.drawer-body p { margin:.6em 0; color:var(--text-primary); }
.drawer-body ul,.drawer-body ol { padding-left:1.6em; margin:.8em 0; }
.drawer-body li { margin:.5em 0; color:var(--text-primary); line-height:1.65; }
.drawer-body li::marker { color:var(--accent); }
.drawer-body ol li::marker { color:var(--gold); font-weight:600; }
.drawer-body code { background:var(--bg-card); padding:2px 8px; border-radius:4px; font-size:12px; color:var(--accent); border:1px solid var(--border); }
.drawer-body pre { background:var(--bg-card); padding:14px; border-radius:8px; overflow-x:auto; margin:1em 0; border:1px solid var(--border); }
.drawer-body pre code { background:transparent; padding:0; color:var(--text-primary); border:none; }
.drawer-body blockquote {
  background:linear-gradient(135deg, rgba(123,140,222,.1), rgba(200,168,75,.08));
  border-left:3px solid var(--accent);
  padding:12px 16px;
  margin:1em 0;
  border-radius:0 8px 8px 0;
  color:var(--text-sec);
}
.drawer-body blockquote p { margin:.3em 0; color:var(--text-sec); }
.drawer-body hr {
  border:none;
  border-top:1px solid var(--border);
  margin:1.5em 0;
}
.drawer-body table {
  width:100%; border-collapse:collapse; margin:1em 0;
  font-size:12px; line-height:1.6;
}
.drawer-body th {
  background:var(--bg-card); color:var(--gold);
  padding:8px 12px; text-align:left; font-weight:600;
  border-bottom:2px solid var(--border);
}
.drawer-body td {
  padding:8px 12px; color:var(--text-primary);
  border-bottom:1px solid var(--border);
}
.drawer-body tr:last-child td { border-bottom:none; }
.drawer-body tr:hover td { background:var(--bg-hover); }
.drawer-body .tips-section {
  background:linear-gradient(135deg, rgba(200,168,75,.08), rgba(123,140,222,.06));
  border:1px solid rgba(200,168,75,.15);
  border-radius:10px;
  padding:14px 16px;
  margin:1em 0;
}
.drawer-body .tips-section h3 {
  margin-top:0;
  color:var(--gold);
  font-size:14px;
}
.drawer-body .info-box {
  background:rgba(106,191,133,.08);
  border:1px solid rgba(106,191,133,.2);
  border-radius:10px;
  padding:12px 16px;
  margin:.8em 0;
}
.drawer-body .info-box p { margin:.3em 0; color:var(--b1); line-height:1.6; }
.drawer-body .info-box ul { margin-top:.5em; }
.drawer-body .contact-box {
  background:linear-gradient(135deg, rgba(200,168,75,.12), rgba(123,140,222,.08));
  border:1px solid rgba(200,168,75,.25);
  border-radius:12px;
  padding:20px;
  margin:1.2em 0;
  text-align:center;
  box-shadow:0 4px 20px rgba(200,168,75,.08);
}
.drawer-body .contact-box .qq-label { font-size:12px; color:var(--text-sec); margin-bottom:8px; }
.drawer-body .contact-box .qq-number { font-size:20px; font-weight:700; color:var(--gold); letter-spacing:2px; }
.drawer-body .footer-note { font-size:11px; color:var(--text-muted); text-align:center; margin-top:1.5em; padding-top:1em; border-top:1px solid var(--border); }
.drawer-body .drawer-img { display:block; max-width:220px; width:100%; margin:12px auto; border-radius:8px; border:1px solid var(--border); }

/* ── Hot tags row ── */
.hot-tags-row {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-top:8px; margin-bottom:14px;
}
.hot-tag {
  display:inline-flex; align-items:center; gap:3px;
  font-size:10px; font-weight:600; letter-spacing:.3px;
  padding:3px 8px; border-radius:4px;
  background:rgba(200,100,40,0.12); color:#e89060;
  border:1px solid rgba(200,100,40,0.22);
  white-space:nowrap; user-select:none;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.hot-tag:hover {
  background:rgba(200,100,40,0.22); border-color:rgba(200,100,40,0.4);
}
.hot-tag:active {
  background:rgba(200,100,40,0.30);
}

/* ── Copy buttons ── */
.copy-btn {
  padding:4px 10px; font-size:11px; font-weight:500;
  background:transparent; color:rgb(236, 172, 172);
  border:1px solid var(--border); border-radius:6px;
  cursor:pointer; transition:all .18s; white-space:nowrap;
}
.copy-btn:hover { border-color:var(--border-light); color:var(--text-primary); background:var(--bg-hover); }
.copy-btn.copied { border-color:var(--b3); color:var(--b1); background:rgba(106,191,133,.1); }

/* ── Share button (strategy screenshot) ── */
.share-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 12px; font-size:11px; font-weight:600;
  color:#5b8def; background:rgba(51,85,170,.18);
  border:1px solid rgba(51,85,170,.35); border-radius:6px;
  cursor:pointer; transition:all .18s; white-space:nowrap;
  margin-left:auto;
}
.share-btn:hover {
  background:rgba(51,85,170,.32); border-color:rgba(51,85,170,.55);
  color:#7aabff;
}
.share-btn:active { transform:scale(.96); }
.share-btn .share-icon {
  display:inline-block; width:14px; height:14px;
}
.share-btn .share-icon svg {
  width:14px; height:14px; display:block;
}
/* sharing toast */
.share-toast {
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  background:var(--accent-soft); color:#fff;
  padding:10px 24px; border-radius:8px; font-size:13px; font-weight:600;
  z-index:9999; pointer-events:none;
  animation:toastIn .3s ease, toastOut .3s ease 1.5s forwards;
}
@keyframes toastIn { from{opacity:0;transform:translateX(-50%) translateY(-12px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
@keyframes toastOut { from{opacity:1} to{opacity:0} }

/* ── Share overlay (full-screen spinner) ── */
#share-overlay {
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
#share-overlay.active {
  opacity:1; pointer-events:auto;
}
.share-spinner {
  width:48px; height:48px;
  border:4px solid rgba(255,255,255,.15);
  border-top-color:#5b8def;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
.share-overlay-text {
  color:rgba(255,255,255,.85);
  font-size:14px; font-weight:500;
  letter-spacing:.5px;
}

/* Sort buttons */
.sort-buttons { display:flex; gap:6px; margin-left:8px; }
.sort-btn { padding:4px 10px; color:#abd4ba; font-size:11px; font-weight:500; border-radius:6px; border:1px solid var(--border); background:transparent; cursor:pointer; transition:all .18s; white-space:nowrap; }
.sort-btn:hover { border-color:var(--border-light); color:var(--text-primary); background:var(--bg-hover); }
.sort-btn.active { border-color:var(--b3); color:var(--b1); background:rgba(106,191,133,.1); }

.live-badge { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-sec); white-space:nowrap; flex-shrink:0; }
.live-dot { width:7px;height:7px;border-radius:50%;background:#5b9e7a;animation:pulse 2s infinite; }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Stats badge ── */
.stats-badge { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-sec); padding-left:12px; border-left:1px solid var(--border); }
.stats-item { white-space:nowrap; }
.stats-item span { color:var(--accent); font-weight:600; }

/* ── Arbitrage info row ── */
.arbitrage-info-row {
  display:flex; align-items:center; gap:8px;
  margin-left:auto;
  flex-shrink:0; flex-wrap:wrap;
}
.arbitrage-info-tag {
  font-size:10px; font-weight:500; letter-spacing:.3px;
  padding:2px 8px; border-radius:4px;
  white-space:nowrap;
  background:rgba(200,180,40,0.1); color:#c8b040;
  border:1px solid rgba(200,180,40,0.2);
  transition: all 0.15s;
}
.arbitrage-info-tag:hover {
  background:rgba(200,180,40,0.18);
  border-color:rgba(200,180,40,0.35);
}

/* ── Layout ── */
.app-body { display:flex; flex:1; overflow:hidden; min-height:0; }

/* ── Sidebar ── */
.sidebar {
  width:240px; flex-shrink:0;
  background:rgba(24,28,36,0.88);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden;
  backdrop-filter:blur(6px);
}
.sidebar-top { flex-shrink:0; border-bottom:1px solid var(--border); padding:10px 12px 8px; position:relative; }
.sidebar-close-btn { display:none; }
.sidebar-title { font-size:10px; font-weight:600; letter-spacing:1.2px; color:var(--text-muted); text-transform:uppercase; margin-bottom:8px; }
.search-input {
  width:100%; padding:6px 10px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:6px; color:var(--text-primary); font-size:12px;
  outline:none; transition:border-color .2s;
}
.search-input:focus { border-color:var(--accent); }
.search-input::placeholder { color:var(--text-muted); }
.tab-list { flex:1; overflow-y:auto; padding:6px 0 10px; }
.tab-list.hidden { display:none; }
.tab-group.hidden { display:none; }
.tab-item {
  display:flex; align-items:center; gap:9px;
  padding:11px 14px; cursor:pointer;
  border-left:3px solid transparent;
  transition:all .18s; font-size:13px; color:var(--text-sec);
  min-width:0;
}
.tab-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.tab-item.active { background:var(--bg-active); border-left-color:var(--accent); color:var(--text-primary); }
.tab-icon {
  width:20px; height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.tab-label { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tab-count { font-size:10px; background:var(--tag-bg); color:var(--text-muted); padding:2px 6px; border-radius:10px; }
.tab-item.active .tab-count { background:var(--accent-soft); color:var(--accent); }
.tab-caret {
  width:14px; flex-shrink:0;
  color:var(--text-muted);
  font-size:10px;
  text-align:center;
  transition:transform .18s, color .18s;
}
.tab-group.expanded .tab-caret,
.tab-group.search-open .tab-caret {
  transform:rotate(90deg);
  color:var(--accent);
}
.tab-sublist {
  display:none;
  padding:3px 10px 8px 44px;
  max-height:calc(100vh - 320px);
  overflow-y:auto;
}
.tab-group.expanded .tab-sublist,
.tab-group.search-open .tab-sublist { display:block; }
.tab-subitem {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px 7px 0;
  color:var(--text-sec);
  font-size:12px;
  cursor:pointer;
  border-radius:8px 0 0 8px;
  transition:all .16s;
}
.tab-subitem:hover { background:rgba(255,255,255,.03); color:var(--text-primary); }
.tab-subitem.active {
  background:rgba(200,168,75,.09);
  color:var(--gold);
}
.tab-subitem.hidden { display:none; }
.tab-subitem-icon {
  width:16px; height:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.tab-subitem-icon img {
  max-width:16px;
  max-height:16px;
  width:auto;
  height:auto;
}
.tab-subitem-text {
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.icon-wrap {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.tab-icon img, .c-emoji img, #modal-icon img {
  width:100%; height:100%; object-fit:contain; display:block;
}
.icon-fallback {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
  border:1px solid rgba(200,168,75,.18);
  background:linear-gradient(135deg, rgba(200,168,75,.16), rgba(74,84,128,.18));
  color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.icon-fallback span {
  font-size:11px;
  font-weight:700;
  line-height:1;
  transform:translateY(-.5px);
}
#modal-icon .icon-fallback { border-radius:7px; }

/* ── Token input row ── */
.token-row {
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 5px;
}
.token-input-wrap {
  display: flex; align-items: center; gap: 6px;
}
.token-input {
  flex: 1; padding: 5px 8px; font-size: 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--text);
  outline: none; transition: border-color .18s;
}
.token-input:focus {
  border-color: var(--accent);
}
.token-badge {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  color: var(--text-muted); background: var(--bg);
  white-space: nowrap; transition: all .18s;
  align-self: flex-start;
}
.token-badge.active {
  color: #16a34a; background: #dcfce7; font-weight: 600;
}
.token-badge.expired {
  color: #dc2626; background: #fef2f2; font-weight: 600;
}
.token-badge.checking {
  color: #d97706; background: #fffbeb; font-weight: 600;
}
.token-badge.warning {
  color: #d97706; background: #fef3c7; font-weight: 600;
}

/* ── Token help button ── */
.token-help-btn {
  display: block;
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
  background: linear-gradient(135deg, rgba(212,168,83,0.08), rgba(212,168,83,0.04));
  border: 1px solid rgba(212,168,83,0.2);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: all .2s;
  line-height: 1.5;
}
.token-help-btn:hover {
  color: var(--text-primary);
  background: linear-gradient(135deg, rgba(212,168,83,0.15), rgba(212,168,83,0.08));
  border-color: rgba(212,168,83,0.4);
}
.token-help-btn .th-price {
  color: #d4a853;
  font-weight: 800;
}
.token-help-btn .th-keyword {
  color: var(--accent);
  font-weight: 700;
}

/* ── Sidebar quick category buttons ── */
.sidebar-quick-cats {
  display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:8px 12px 6px;
  border-bottom:1px solid var(--border);
}
.sidebar-quick-btn {
  flex:1; padding:6px 4px; font-size:10px; font-weight:600;
  letter-spacing:.3px; border-radius:6px; cursor:pointer;
  border:1px solid transparent; transition:all .18s;
  white-space:nowrap; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:3px;
  overflow:hidden; text-overflow:ellipsis;
  min-width:0;
}
.sidebar-quick-btn.hot {
  background:rgba(200,100,40,.12); color:#e89060;
  border-color:rgba(200,100,40,.22);
}
.sidebar-quick-btn.hot:hover { background:rgba(200,100,40,.22); border-color:rgba(200,100,40,.4); }
.sidebar-quick-btn.hot:active { background:rgba(200,100,40,.32); }
.sidebar-quick-btn.hot.active { background:rgba(200,100,40,.28); border-color:#e89060; }
.sidebar-quick-btn.warn {
  background:rgba(200,180,40,.12); color:#d4bc50;
  border-color:rgba(200,180,40,.2);
}
.sidebar-quick-btn.warn:hover { background:rgba(200,180,40,.22); border-color:rgba(200,180,40,.4); }
.sidebar-quick-btn.warn:active { background:rgba(200,180,40,.32); }
.sidebar-quick-btn.warn.active { background:rgba(200,180,40,.28); border-color:#d4bc50; }

/* 整体趋势按钮 */
.sidebar-quick-btn.trend {
  background:rgba(91,158,214,.12); color:#7bb8e8;
  border-color:rgba(91,158,214,.22);
}
.sidebar-quick-btn.trend:hover { background:rgba(91,158,214,.22); border-color:rgba(91,158,214,.4); }
.sidebar-quick-btn.trend:active { background:rgba(91,158,214,.32); }
.sidebar-quick-btn.trend.active { background:rgba(91,158,214,.28); border-color:#7bb8e8; }

/* 增值服务按钮 */
.sidebar-quick-btn.premium {
  background:rgba(139,92,246,.12); color:#a78bfa;
  border-color:rgba(139,92,246,.22);
}
.sidebar-quick-btn.premium:hover { background:rgba(139,92,246,.22); border-color:rgba(139,92,246,.4); }
.sidebar-quick-btn.premium:active { background:rgba(139,92,246,.32); }

/* ── Sidebar tabs ── */
.sidebar-tabs { display:flex; gap:0; margin-bottom:8px; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.sidebar-tab { flex:1; padding:6px 0; font-size:11px; font-weight:600; letter-spacing:.3px; background:transparent; color:var(--text-sec); border:none; cursor:pointer; transition:all .18s; }
.sidebar-tab + .sidebar-tab { border-left:1px solid var(--border); }
.sidebar-tab.active { background:var(--accent-soft); color:var(--accent); }
.sidebar-tab-content.hidden { display:none; }

/* ── Strategy list ── */
.strategy-add-btn { width:100%; padding:7px 10px; font-size:12px; font-weight:600; background:rgba(123,140,222,.12); color:var(--accent); border:1px dashed var(--accent-soft); border-radius:6px; cursor:pointer; transition:all .18s; }
.strategy-add-btn:hover { background:rgba(123,140,222,.2); border-color:var(--accent); }
#strategy-list { flex:1; overflow-y:auto; padding:6px 0 10px; }
#strategy-list.hidden { display:none; }
.strategy-group { border-bottom:1px solid rgba(255,255,255,.04); }
.strategy-group-header { display:flex; align-items:center; gap:6px; padding:10px 14px; cursor:pointer; transition:all .18s; font-size:13px; color:var(--text-sec); border-left:3px solid transparent; }
.strategy-group-header:hover { background:var(--bg-hover); color:var(--text-primary); }
.strategy-group.expanded .strategy-group-header { border-left-color:var(--accent); color:var(--text-primary); }
.strategy-group-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.strategy-group-count { font-size:10px; background:var(--tag-bg); color:var(--text-muted); padding:2px 6px; border-radius:10px; }
.strategy-group.expanded .strategy-group-count { background:var(--accent-soft); color:var(--accent); }
.strategy-caret { width:14px; flex-shrink:0; color:var(--text-muted); font-size:10px; text-align:center; transition:transform .18s, color .18s; }
.strategy-group.expanded .strategy-caret { transform:rotate(90deg); color:var(--accent); }
.strategy-actions { display:flex; gap:4px; align-items:center; }
.strategy-action-btn { width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:4px; cursor:pointer; color:var(--text-muted); font-size:11px; transition:all .15s; border:none; background:transparent; }
.strategy-action-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.strategy-action-btn.delete:hover { color:var(--s1); background:rgba(224,130,90,.1); }
.strategy-sublist { display:none; padding:3px 10px 8px 18px; }
.strategy-group.expanded .strategy-sublist { display:block; }
.strategy-subitem { display:flex; align-items:center; gap:6px; padding:7px 10px 7px 0; color:var(--text-sec); font-size:12px; cursor:pointer; border-radius:8px 0 0 8px; transition:all .16s; }
.strategy-subitem:hover { background:rgba(255,255,255,.03); color:var(--text-primary); }
.strategy-subitem-text { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.strategy-subitem-delete { width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:4px; cursor:pointer; color:var(--text-muted); font-size:12px; transition:all .15s; flex-shrink:0; }
.strategy-subitem-delete:hover { color:var(--s1); background:rgba(224,130,90,.15); }
.strategy-empty { padding:20px 14px; text-align:center; color:var(--text-muted); font-size:12px; }
.strategy-name-edit { width:100%; padding:2px 4px; background:var(--bg-card); border:1px solid var(--accent); border-radius:3px; color:var(--text-primary); font-size:13px; outline:none; }

/* ── Add to strategy button ── */
.add-strategy-btn { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; font-size:10px; font-weight:600; color:#5b9ed6; background:rgba(91,158,214,.1); border:1px solid rgba(91,158,214,.25); border-radius:4px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.add-strategy-btn:hover { background:rgba(91,158,214,.2); border-color:rgba(91,158,214,.4); color:#7bb8e8; }

/* ── Strategy selection popup ── */
.strategy-select-popup { position:fixed; z-index:10000; background:var(--bg-card); border:1px solid var(--border-light); border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.5); min-width:180px; max-width:280px; padding:6px; animation:popIn .15s ease; }
@keyframes popIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.strategy-select-popup-title { font-size:11px; color:var(--text-muted); padding:6px 10px 4px; letter-spacing:.5px; }
.strategy-select-item { display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:12px; color:var(--text-sec); border-radius:6px; cursor:pointer; transition:all .15s; }
.strategy-select-item:hover { background:var(--bg-hover); color:var(--text-primary); }

/* ── Main ── */
.main { flex:1; overflow-y:auto; padding:18px 22px; display:flex; flex-direction:column; gap:18px; }

.main-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.main-top + .currency-grid { margin-top: 18px; }
.main-top h2 { font-size:17px; font-weight:600; }
.section-badge { font-size:11px; padding:3px 8px; border-radius:10px; background:var(--tag-bg); color:var(--text-sec); }
.main-search { flex:1; min-width:180px; max-width:300px; }


/* ── Multiplier widget ── */
.strategy-multiplier-group { display:inline-flex; align-items:center; gap:6px; margin-left:4px; padding:4px 10px; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; }
.strategy-multiplier-label { font-size:11px; color:var(--text-muted); font-weight:600; white-space:nowrap; margin-right:2px; }
.strategy-multiplier-preset { font-size:11px; font-weight:600; color:var(--text-sec); cursor:pointer; padding:2px 8px; border:1px solid var(--border); border-radius:5px; background:transparent; transition:all .18s; white-space:nowrap; }
.strategy-multiplier-preset:hover { color:var(--accent); border-color:var(--accent); background:rgba(112,168,255,.08); }
.strategy-multiplier-preset.active { color:#fff; background:var(--accent); border-color:var(--accent); }
.strategy-multiplier-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:4px 0 2px 0; }
.strategy-multiplier-input { width:68px; padding:3px 6px; font-size:12px; font-weight:600; color:var(--text-primary); background:transparent; border:1px solid var(--border); border-radius:5px; outline:none; text-align:center; transition:border-color .15s; }
.strategy-multiplier-input:focus { border-color:var(--accent); }
.strategy-multiplier-input::-webkit-inner-spin-button { opacity:1; }
.strategy-multiplier-save { font-size:11px; font-weight:600; color:#fff; cursor:pointer; padding:3px 12px; border:none; border-radius:5px; background:var(--accent); transition:all .15s; white-space:nowrap; }
.strategy-multiplier-save:hover { filter:brightness(1.15); }
.strategy-multiplier-save:active { transform:scale(.96); }
.strategy-multiplier-current { font-size:10px; color:var(--text-muted); white-space:nowrap; }

/* ── Loading spinner ── */
.loading-overlay {
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:14px;
  padding:60px 20px;
}
.loading-spinner {
  width:42px; height:42px;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-size:13px; color:var(--text-muted); }

/* ── Pagination ── */
.page-wrapper {
  display:flex; flex-direction:column;
  flex:1; min-height:0; overflow:hidden;
}
.page-container {
  flex:1; min-height:0;
  display:flex; flex-wrap:wrap; align-content:flex-start;
  gap:15px; overflow:hidden;
}
.currency-page {
  display:contents;
}
.pagination-controls {
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding:8px 0 4px;
  flex-shrink:0;
}
.pagination-controls.hidden { display:none; }
.page-btn {
  padding:5px 14px; font-size:12px; font-weight:600;
  background:var(--bg-card); color:var(--text-sec);
  border:1px solid var(--border); border-radius:6px;
  cursor:pointer; transition:all .18s;
}
.page-btn:hover { border-color:var(--border-light); color:var(--text-primary); background:var(--bg-hover); }
.page-btn:disabled { opacity:.35; cursor:default; pointer-events:none; }
.page-info { font-size:12px; color:var(--text-muted); min-width:60px; text-align:center; }
.page-jump {
  width:48px; padding:5px 4px; font-size:12px; font-weight:600;
  background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border); border-radius:6px;
  text-align:center; outline:none; transition:border-color .18s;
}
.page-jump:focus { border-color:var(--accent); }

/* ── Page loading indicator (mobile infinite scroll) ── */
.page-loading-indicator {
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:20px 0; grid-column:1/-1;
}
.loading-spinner-sm {
  width:20px; height:20px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Card grid ── */
.currency-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:15px; }
.currency-grid.single-card-mode { grid-template-columns:minmax(0,1fr); }
.currency-card {
  background:rgba(30,35,48,0.90);
  border:1px solid var(--border); border-radius:10px;
  overflow:hidden; transition:border-color .2s,transform .15s;
  backdrop-filter:blur(4px);
  display:flex; flex-direction:column;
}
.currency-card:hover { border-color:var(--border-light); transform:translateY(-1px); }
.currency-card.hidden { visibility: hidden; position: absolute; pointer-events: none; }
.currency-card.featured {
  min-height:calc(100vh - 180px);
  border-color:rgba(200,168,75,.28);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}

.card-header {
  display:flex; align-items:center; gap:9px;
  padding:11px 13px; border-bottom:1px solid var(--border);
  background:rgba(24,28,36,0.6);
  flex-wrap:wrap;
}
.card-right-col { display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-left:auto; }
.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 160px;
}
.tag-status-row {
  display: flex; width: 100%; gap: 3px;
}
.tag-status-row .tag-cell { flex:1 1 auto; }
.tag-cell {
  font-size: 9px; font-weight: 700; letter-spacing:.5px;
  padding: 2px 6px; border-radius: 4px;
  text-align: center; white-space: nowrap;
  line-height: 1.2;
}
.tag-cell.tag-hot, .tag-cell.tag-warn { flex:1 1 auto; }
.tag-cell.tag-price, .tag-cell.tag-divine { flex:1 1 calc(50% - 1.5px); }
.tag-empty { visibility: hidden; }
.tag-hot { background:rgba(200,100,40,0.2); color:#e89060; border:1px solid rgba(200,100,40,0.3); }
.tag-warn { background:rgba(200,180,40,0.15); color:#d4bc50; border:1px solid rgba(200,180,40,0.25); }
.tag-price { color:var(--gold); background:var(--gold-soft); border:1px solid rgba(200,168,75,.2); }
.tag-divine { color:#e8a060; background:rgba(232,160,96,.12); border:1px solid rgba(232,160,96,.2); }
.currency-card.featured .card-header {
  padding:16px 18px;
  gap:12px;
}
.c-emoji {
  width:22px; height:22px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.currency-card.featured .c-emoji { width:28px; height:28px; }
.c-name { font-size:13px; font-weight:600; }
.currency-card.featured .c-name { font-size:18px; }
.c-name-wrap {
  display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;
}
.c-engname {
  font-size:11px; color:var(--text-muted);
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  cursor:pointer; border-radius:3px; padding:1px 4px; transition:background .15s, color .15s;
  display:inline-block;
}
.c-engname:hover { background:var(--bg-hover); color:var(--text-primary); }
.currency-card.featured .c-engname { font-size:12px; }
.c-engname-wrap { position:relative; display:inline-flex; align-items:center; }
.engname-tooltip {
  display:none; position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--bg-card); border:1px solid var(--border-light); border-radius:6px;
  padding:6px 10px; font-size:11px; color:var(--text-primary); white-space:nowrap;
  z-index:100; box-shadow:0 4px 12px rgba(0,0,0,.3); pointer-events:none;
}
.engname-tooltip::before {
  content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-bottom-color:var(--border-light);
}
.c-engname-wrap:hover .engname-tooltip { display:block; }
.engname-copy-hint { font-size:9px; color:var(--text-muted); margin-left:6px; opacity:0; transition:opacity .15s; }
.c-engname-wrap:hover .engname-copy-hint { opacity:1; }
.currency-card.featured .tag-cell { font-size:11px; padding:3px 8px; }
.csv-date-badge { font-size:9px; color:var(--text-muted); background:rgba(255,255,255,.05); border:1px solid var(--border); padding:2px 5px; border-radius:4px; white-space:nowrap; }
.currency-card.featured .csv-date-badge { font-size:10px; padding:4px 7px; }

/* Price table */
.price-section { display:grid; grid-template-columns:1fr 1fr; }
.price-col { padding:9px 11px; }
.price-col:first-child { border-right:1px solid var(--border); }
.price-col-title { font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:7px; }
.price-col-title.buy { color:var(--b1); }
.price-col-title.sell { color:var(--s1); }
.price-row { display:flex; justify-content:space-between; align-items:center; padding:3.5px 0; border-bottom:1px solid rgba(255,255,255,.03); font-size:12px; }
.price-row:last-child { border-bottom:none; }
.pr-rank { font-size:10px; color:var(--text-muted); }
.pr-rank span { display:inline-block; width:15px;height:15px; border-radius:3px; text-align:center;line-height:15px; font-size:9px;font-weight:700; }
.pr-rank.r1 span{background:rgba(200,168,75,.2);color:var(--gold);}
.pr-rank.r2 span{background:rgba(140,130,120,.2);color:#aaa;}
.pr-rank.r3 span{background:rgba(150,100,60,.2);color:#c88;}
.pr-rank.r4 span{background:rgba(80,90,120,.15);color:var(--text-muted);}
.pr-rank.r5 span{background:rgba(80,90,120,.15);color:var(--text-muted);}
.pr-val { font-weight:600; }
.pr-val.b1{color:var(--b1)}.pr-val.b2{color:var(--b2)}.pr-val.b3{color:var(--b3)}.pr-val.b4{color:var(--b4)}.pr-val.b5{color:var(--b5)}
.pr-val.s1{color:var(--s1)}.pr-val.s2{color:var(--s2)}.pr-val.s3{color:var(--s3)}.pr-val.s4{color:var(--s4)}.pr-val.s5{color:var(--s5)}
.pr-vol { font-size:10px; color:var(--text-muted); }
.no-data { font-size:11px; color:var(--text-muted); padding:4px 0; }

/* 货币单位标签：区分 c(混沌石) / e(崇高石) / d(神圣石) */
.currency-unit {
  font-size: 0.75em;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 2px;
  vertical-align: middle;
}
.currency-unit-c { color: #6abf85; background: rgba(106,191,133,0.12); }
.currency-unit-e { color: #e0825a; background: rgba(224,130,90,0.12); }
.currency-unit-d { color: #c8a84b; background: rgba(200,168,75,0.15); }
/* 换算通货单位：通用回退样式（紫色调，区别于系统单位） */
.currency-unit:not(.currency-unit-c):not(.currency-unit-e):not(.currency-unit-d) {
  color: #a78bfa;
  background: rgba(167,139,250,0.12);
}

/* OCR 异常警示 */
.pr-val[title] {
  position: relative;
  border-bottom:2px dotted #d97706;
}
.pr-val[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1d2e;
  color: #d97706;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.currency-card.featured .price-col { padding:13px 16px; }
.currency-card.featured .price-col-title { font-size:11px; margin-bottom:9px; }
.currency-card.featured .price-row { font-size:13px; padding:5px 0; }
.currency-card.featured .pr-rank span { width:17px; height:17px; line-height:17px; }

.card-detail-summary {
  display:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:14px 16px 2px;
  border-top:1px solid var(--border);
}
.currency-card.featured .card-detail-summary { display:grid; }
.detail-metric {
  min-width:0;
  padding:10px 12px;
  background:rgba(17,19,24,.42);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
}
.detail-metric-label {
  font-size:10px;
  color:var(--text-muted);
  letter-spacing:.8px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.detail-metric-value {
  font-size:15px;
  color:var(--text-primary);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-metric-value.buy { color:var(--b1); }
.detail-metric-value.sell { color:var(--s1); }

/* Chart area */
.chart-area { padding:9px 11px 11px; border-top:1px solid var(--border); margin-top:auto; }
.currency-card.featured .chart-area {
  padding:14px 16px 18px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.chart-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.chart-label { font-size:11px; color:var(--text-muted); }
.currency-card.featured .chart-label { font-size:12px; }
.chart-zoom-btn {
  font-size:11px; color:var(--accent); cursor:pointer;
  padding:3px 8px; border:1px solid var(--accent-soft); border-radius:5px;
  background:transparent; transition:all .18s;
}
.chart-zoom-btn:hover { background:var(--accent-soft); color:var(--text-primary); }
.chart-canvas-wrap { height:68px; cursor:pointer; }
.currency-card.featured .chart-canvas-wrap {
  min-height:320px;
  height:min(52vh,520px);
  cursor:default;
}

/* ── Loading / Error ── */
.state-msg { padding:60px 20px; text-align:center; color:var(--text-muted); font-size:14px; }
.state-msg .icon { font-size:36px; opacity:.4; margin-bottom:12px; }

/* ── Card skeleton (骨架屏) ── */
.currency-card.skeleton {
  pointer-events: none;
}
.currency-card.skeleton .skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border-radius: 4px;
}
.currency-card.skeleton .skeleton-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 60%, transparent 100%);
  animation: shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(50%); }
}
/* 骨架屏内各区域占位 */
.skel-bar-sm  { height: 12px; width: 60px;  border-radius: 3px; }
.skel-bar-md  { height: 14px; width: 120px; border-radius: 3px; }
.skel-bar-lg  { height: 16px; width: 180px; border-radius: 4px; }
.skel-bar-full { height: 14px; width: 100%; border-radius: 3px; margin-bottom: 6px; }
.skel-price-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.03);
}
.skel-price-row .skel-bar-sm { width: 50px; } /* rank */
.skel-price-row:last-child { border-bottom: none; }
.skel-chart-area {
  min-height: 86px;
}

/* ── Modal ── */
.modal-overlay {
  display:none; position:fixed !important; inset:0;
  background:rgba(0,0,0,.85); backdrop-filter:blur(6px);
  z-index:9999 !important; align-items:center; justify-content:center;
}
.modal-overlay.active { display:flex !important; }
.modal-box {
  background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:14px; width:min(94vw,900px); max-height:92vh;
  overflow-y:auto; box-shadow:0 24px 80px rgba(0,0,0,.65);
  animation:mIn .2s ease;
  position:relative;
}
@keyframes mIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header {
  display:flex; align-items:center; gap:10px;
  padding:15px 20px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg-card); z-index:2;
}
.modal-title { font-size:15px; font-weight:600; flex:1; }
.modal-close { width:28px;height:28px; display:flex;align-items:center;justify-content:center; border-radius:6px; cursor:pointer; color:var(--text-sec); font-size:17px; transition:all .15s; }
.modal-close:hover { background:var(--bg-hover); color:var(--text-primary); }

/* Line selector */
.line-selector { padding:12px 20px; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ls-label { font-size:11px; color:var(--text-muted); margin-right:4px; }
.ls-btn {
  padding:4px 10px; border-radius:5px; font-size:11px; cursor:pointer;
  border:1px solid var(--border); background:transparent;
  transition:all .15s; font-weight:600;
}
.ls-btn[data-side="buy"]  { color:var(--b1); border-color:rgba(106,191,133,.3); }
.ls-btn[data-side="sell"] { color:var(--s1); border-color:rgba(224,130,90,.3); }
.ls-btn.active[data-side="buy"]  { background:rgba(106,191,133,.15); border-color:var(--b1); }
.ls-btn.active[data-side="sell"] { background:rgba(224,130,90,.15);  border-color:var(--s1); }

/* Time filter */
.time-filter-bar { display:flex; gap:6px; padding:10px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; align-items:center; }
.tf-label { font-size:11px; color:var(--text-muted); margin-right:4px; }
.tf-btn { padding:4px 10px; border-radius:5px; font-size:11px; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-sec); transition:all .15s; }
.tf-btn:hover { border-color:var(--border-light); color:var(--text-primary); }
.tf-btn.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

.modal-body { padding:18px 20px; }
.modal-chart-wrap { height:340px; margin-bottom:18px; }

/* Modal price detail */
.modal-price-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.modal-price-panel { background:var(--bg-panel); border:1px solid var(--border); border-radius:8px; padding:13px; }
.modal-price-panel-title { font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:11px; display:flex;align-items:center;gap:5px; }
.modal-price-panel-title.buy { color:var(--b1); }
.modal-price-panel-title.sell { color:var(--s1); }
.mpr { display:grid; grid-template-columns:38px 1fr 90px 60px; align-items:center; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:12px; gap:6px; }
.mpr:last-child { border-bottom:none; }
.mpr .rank { color:var(--text-muted); font-size:10px; }
.mpr .price { font-weight:600; }
.mini-bar { height:4px; border-radius:2px; background:var(--border); position:relative; overflow:hidden; }
.mini-bar-fill { position:absolute;left:0;top:0;height:100%;border-radius:2px; }
.mini-bar-fill.buy { background:var(--b1); }
.mini-bar-fill.sell { background:var(--s1); }
.mpr .vol { color:var(--text-muted); font-size:10px; text-align:right; }

/* Time range slider */
.time-range-slider {
  padding:12px 20px 20px;
  border-bottom:1px solid var(--border);
}
.trs-label {
  font-size:11px; color:var(--text-muted);
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:8px;
}
.trs-range-info { font-size:10px; color:var(--accent); }
.trs-track {
  position:relative; height:24px; cursor:pointer;
  user-select:none;
}
.trs-full-track {
  position:absolute; top:10px; left:0; right:0; height:4px;
  background:var(--border); border-radius:2px;
}
.trs-selected-track {
  position:absolute; top:10px; height:4px;
  background:var(--accent); border-radius:2px;
  pointer-events:none;
}
.trs-handle {
  position:absolute; top:50%; width:12px; height:24px;
  margin-top:-12px; margin-left:-6px;
  background:var(--accent); border-radius:3px;
  cursor:grab; transition:background .15s;
  display:flex; align-items:center; justify-content:center;
}
.trs-handle::after {
  content:''; width:2px; height:10px;
  background:rgba(255,255,255,.4); border-radius:1px;
}
.trs-handle:hover { background:var(--accent-soft); }
.trs-handle:active, .trs-handle.dragging { cursor:grabbing; background:var(--accent); }
.trs-center-handle {
  position:absolute; top:50%; width:8px; height:24px;
  margin-top:-12px; margin-left:-4px;
  background:rgba(123,140,222,.5); border-radius:2px;
  cursor:move; transition:background .15s;
}
.trs-center-handle::after {
  content:''; width:2px; height:10px;
  background:rgba(255,255,255,.3); border-radius:1px;
}
.trs-center-handle:hover { background:rgba(123,140,222,.7); }
.trs-center-handle.dragging { cursor:move; background:var(--accent); }

/* scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-light)}

/* ── Mobile hamburger button ── */
.hamburger-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer;
  color: var(--text-sec); font-size: 16px;
  flex-shrink: 0;
  transition: all .18s;
}
.hamburger-btn:active { background: var(--bg-active); }

/* ── Sidebar drawer overlay ── */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(3px);
}
.sidebar-overlay.active { display: block; }

/* ── Mobile responsive ── */
@media (max-width: 680px) {
  /* Prevent horizontal overflow at all levels */
  html, body { overflow-x: hidden; width: 100%; }
  header { max-width: 100vw; }

  /* Header */
  header { padding: 9px 12px; gap: 7px; }
  header h1 { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header .sub { display: none; }
  .hamburger-btn { display: flex; }
  .header-left { gap: 8px; flex: 1 1 auto; min-width: 0; }
  .header-brand { min-width: 0; overflow: hidden; }
  .header-right { gap: 8px; width: 100%; }
  .live-badge { font-size: 10px; gap: 4px; white-space: nowrap; }
  .live-dot { width: 6px; height: 6px; }
  /* Secondary visit/request stats hidden on mobile to reduce clutter */
  .stats-badge { display: none; }

  /* Commercial-use notice: stack text + button on mobile */
  .header-notice { flex-wrap: wrap; padding: 7px 10px; font-size: 11px; }
  .notice-text { flex: 1 1 100%; }
  .notice-copy-btn { margin-left: auto; }

  /* Header info buttons: compact */
  .header-nav-group { width: 100%; justify-content: space-between; padding: 2px; }
  .header-info-btn {
    padding: 3px 6px; font-size: 10px; flex-shrink: 0;
  }

  /* POE toggle: compact */
  .poe-toggle-btn { padding: 3px 8px; font-size: 10px; }

  /* Header bottom row: full width, children can shrink */
  .header-bottom-row {
    width: 100%; padding: 0;
    flex-wrap: wrap; gap: 6px;
  }
  .season-row {
    flex-wrap: wrap; gap: 4px;
    flex-shrink: 1; min-width: 0;
  }
  .season-btn {
    padding: 2px 6px; font-size: 10px;
    flex-shrink: 0;
  }
  .arbitrage-info-row {
    margin-left: 0; flex: 1 1 auto; min-width: 0;
    flex-wrap: wrap; gap: 4px;
  }
  .arbitrage-info-tag {
    font-size: 9px; padding: 2px 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Hide the extremely long explanation tag on mobile */
  #arbitrage-explain-tag { display: none; }

  /* App body: sidebar becomes a drawer */
  .app-body { overflow: visible; }

  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    z-index: 201;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    width: 260px;
  }
  .sidebar.drawer-open { transform: translateX(0); }

  /* Mobile sidebar close button */
  .sidebar-close-btn {
    display: flex;
    align-items: center; justify-content: center;
    width: 28px; height: 28px;
    position: absolute; top: 8px; right: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer;
    color: var(--text-sec); font-size: 14px;
    transition: all .15s;
    z-index: 5;
  }
  .sidebar-close-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
  .sidebar-close-btn:active { background: var(--bg-active); }
  .sidebar-top { padding-right: 38px; }

  /* Main takes full width */
  .main { padding: 12px 12px; gap: 14px; overflow: hidden; overflow-y: auto; height: auto; min-height: calc(100vh - 80px); }

  /* Main top bar: stack search below title */
  .main-top { gap: 8px; }
  .main-top h2 { font-size: 15px; }
  .main-search { min-width: 0; max-width: none; flex: 1 1 100%; order: 3; }
  .section-badge { font-size: 10px; }

  /* Card grid: single column on mobile */
  .currency-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Card */
  .currency-card { border-radius: 9px; }
  .card-header { padding: 10px 11px; gap: 8px; flex-wrap: wrap; }
  .c-name { font-size: 13px; }
  .tag-cell { font-size: 8px; padding: 1px 4px; }
  .csv-date-badge { font-size: 9px; }

  /* Price rows: slightly tighter */
  .price-col { padding: 8px 9px; }
  .price-row { font-size: 11px; padding: 3px 0; }
  .price-col-title { font-size: 9px; margin-bottom: 5px; }

  /* Chart area */
  .chart-area { padding: 8px 10px 10px; }
  .chart-canvas-wrap { height: 60px; }
  .chart-zoom-btn { font-size: 10px; padding: 2px 6px; }

  /* Detail summary: 2 columns on mobile */
  .card-detail-summary { grid-template-columns: repeat(2,1fr); padding: 10px 11px 2px; gap: 8px; }
  .detail-metric { padding: 8px 10px; }
  .detail-metric-value { font-size: 13px; }

  /* Modal: bottom sheet, leaves visible backdrop to tap-close */
  .modal-overlay { align-items: flex-end; }
  .modal-box {
    width: 100vw;
    max-height: 78vh;
    border-radius: 16px 16px 0 0;
    animation: mInMobile .25s ease;
  }
  .modal-box::before {
    content: '';
    display: block;
    width: 36px; height: 5px;
    margin: 10px auto 0;
    background: var(--border-light);
    border-radius: 3px;
  }
  @keyframes mInMobile {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .modal-header { padding: 6px 14px 12px; }
  .modal-title { font-size: 14px; }
  .modal-close {
    width: 44px; height: 44px;
    font-size: 22px;
    margin-right: -6px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
  }
  .modal-close:active { background: var(--bg-active); color: #fff; }

  /* Line selector: horizontal scroll */
  .line-selector { padding: 10px 14px; gap: 5px; overflow-x: auto; flex-wrap: nowrap; }
  .ls-label { flex-shrink: 0; }
  .ls-btn { padding: 5px 10px; font-size: 11px; flex-shrink: 0; min-height: 34px; }

  /* Time filter: horizontal scroll */
  .time-filter-bar { padding: 8px 14px; gap: 5px; overflow-x: auto; flex-wrap: nowrap; }
  .tf-label { flex-shrink: 0; }
  .tf-btn { flex-shrink: 0; padding: 5px 10px; min-height: 34px; }

  /* Modal body */
  .modal-body { padding: 12px 14px; }
  .modal-chart-wrap { height: 260px; margin-bottom: 14px; }
  .modal-price-grid { grid-template-columns: 1fr; gap: 10px; }
  .mpr { grid-template-columns: 44px 1fr 60px 48px; font-size: 11px; gap: 4px; }

  /* Time slider: bigger touch handles */
  .trs-handle { width: 18px; height: 34px; margin-left: -9px; margin-top: -17px; border-radius: 5px; }
  .trs-track { height: 34px; }
  .time-range-slider { padding: 10px 14px 16px; }
}

@media (max-width: 400px) {
  .card-header { padding: 9px 10px; }
  .c-name { font-size: 12px; }
  .price-col { padding: 7px 8px; }
  /* Header: ultra-compact on tiny screens */
  header { padding: 8px 10px; gap: 6px; }
  header h1 { font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header-info-btn { padding: 3px 5px; font-size: 9px; }
  .poe-toggle-btn { padding: 3px 8px; font-size: 10px; }
  .live-badge { font-size: 9px; }
  .hamburger-btn { width: 30px; height: 30px; }
  .header-notice { font-size: 10px; padding: 6px 8px; gap: 6px; }
  .notice-copy-btn { padding: 3px 8px; font-size: 10px; }
}

/* ── Desktop / Tablet layout ── */
@media (min-width: 681px) {
  .app-body { overflow:hidden; }
  .main {
    overflow-y:auto;
    padding:18px 22px 12px;
    gap:0;
  }
  .main .main-top { margin-bottom:12px; }
}

/* On wider screens, 3 columns */
@media (min-width: 1400px) {
  .currency-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
}

/* On narrower tablet, fewer cols via grid auto-fill */

/* ═══════════════════════════════════════════════════════
   Strategy: multiplier table & holding table
   ═══════════════════════════════════════════════════════ */

.strategy-tables {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.strategy-table-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
}

.strategy-table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}

.help-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.7;
}

.strategy-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.strategy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.strategy-table th {
  text-align: left;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.strategy-table td {
  padding: 9px 14px;
  color: var(--text-sec);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}

.strategy-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.strategy-table tfoot td {
  font-weight: 600;
  color: var(--text-primary);
  border-top: 2px solid var(--border);
  padding: 10px 14px;
}

/* Multiplier cell */
.multiplier-cell-input {
  width: 72px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: rgba(123, 140, 222, 0.06);
  border: 1px solid rgba(123, 140, 222, 0.2);
  border-radius: 5px;
  outline: none;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  -moz-appearance: textfield;
}

.multiplier-cell-input:focus {
  border-color: var(--accent);
  background: rgba(123, 140, 222, 0.12);
}

.multiplier-cell-input::-webkit-outer-spin-button,
.multiplier-cell-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Cost summary */
.mt-time, .ht-time {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.8;
}

.cost-buy {
  color: var(--accent);
  margin-right: 10px;
}

.cost-sell {
  color: #e8a060;
  margin-right: 10px;
}

.cost-divine {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}

.cost-sep {
  color: var(--border);
  margin: 0 8px;
}

/* Holding table specific */
.ht-currency {
  font-weight: 500;
  color: var(--text-primary);
}

.ht-price, .ht-qty {
  font-variant-numeric: tabular-nums;
}

.ht-profit {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.profit-positive {
  color: #d32f2f;
}

.profit-negative {
  color: #2e7d32;
}

.holding-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

.holding-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #d32f2f;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.holding-delete-btn:hover {
  filter: brightness(1.2);
}

.holding-delete-btn:active {
  transform: scale(0.95);
}

/* 平仓按钮 */
.holding-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #5c8fe5;
  background: rgba(92, 143, 229, 0.1);
  border: 1px solid rgba(92, 143, 229, 0.25);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.holding-close-btn:hover {
  color: #fff;
  background: rgba(92, 143, 229, 0.3);
  border-color: rgba(92, 143, 229, 0.5);
}

.holding-close-btn:active {
  transform: scale(0.95);
}

/* 编辑按钮 */
.holding-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #7b8cde;
  background: rgba(123, 140, 222, 0.1);
  border: 1px solid rgba(123, 140, 222, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.holding-edit-btn:hover {
  color: #fff;
  background: rgba(123, 140, 222, 0.3);
  border-color: rgba(123, 140, 222, 0.5);
}

/* 保存按钮 */
.holding-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #4caf50;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.holding-save-btn:hover {
  filter: brightness(1.15);
}

.holding-save-btn:active {
  transform: scale(0.95);
}

/* 取消按钮 */
.holding-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  margin-left: 4px;
}

.holding-cancel-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
}

/* 行内编辑输入框 */
.ht-edit-input {
  width: 70px;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--accent);
  border-radius: 4px;
  outline: none;
  text-align: right;
}

.ht-edit-input:focus {
  border-color: var(--accent);
  background: rgba(123, 140, 222, 0.08);
}

.ht-edit-input::-webkit-outer-spin-button,
.ht-edit-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ht-edit-input {
  -moz-appearance: textfield;
}

.ht-edit-qty-input {
  width: 56px;
}

.ht-edit-unit {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 2px;
}

/* 持仓表格操作列 */
.ht-action {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  white-space: nowrap;
}

/* 已平仓标签 */
.holding-closed-tag {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.5;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

/* 已平仓行样式 */
.holding-closed td {
  opacity: 0.55;
  color: var(--text-muted);
}

.holding-closed .ht-profit .profit-positive,
.holding-closed .ht-profit .profit-negative {
  opacity: 0.7;
}

/* 累计统计行 */
#holding-footer td {
  font-weight: 600;
  color: var(--text-primary);
  border-top: 2px solid var(--border);
  padding: 10px 14px;
}

.ht-foot-profit {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Save button */
.strategy-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  margin-left: auto;
}

.strategy-save-btn:hover {
  filter: brightness(1.15);
}

.strategy-save-btn:active {
  transform: scale(0.96);
}

.strategy-save-btn.saved {
  background: #4caf50;
}

/* "持仓记录" button on cards */
.add-holding-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #e8a060;
  background: rgba(232, 160, 96, 0.1);
  border: 1px solid rgba(232, 160, 96, 0.25);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.add-holding-btn:hover {
  background: rgba(232, 160, 96, 0.2);
  border-color: rgba(232, 160, 96, 0.4);
  color: #f0b870;
}

.add-holding-btn.recorded {
  color: #6abf85;
  border-color: rgba(106, 191, 133, 0.3);
  background: rgba(106, 191, 133, 0.1);
}

/* ═══════════════════════════════════════════════════════
   Mobile responsive for strategy tables
   ═══════════════════════════════════════════════════════ */

@media (max-width: 680px) {
  .strategy-table-title {
    font-size: 12px;
    padding: 8px 10px;
    flex-wrap: wrap;
  }

  .help-hint {
    display: none;
  }

  .strategy-table th,
  .strategy-table td {
    padding: 7px 8px;
    font-size: 11px;
  }

  .multiplier-cell-input {
    width: 56px;
    padding: 3px 6px;
    font-size: 11px;
  }

  /* Make tables scrollable horizontally on small screens */
  #holding-table {
    min-width: 520px;
  }

  /* 操作按钮 mobile */
  .holding-close-btn,
  .holding-save-btn,
  .holding-cancel-btn {
    padding: 2px 6px;
    font-size: 10px;
  }

  .holding-edit-btn {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .ht-edit-input {
    width: 56px;
    font-size: 11px;
    padding: 2px 4px;
  }

  .ht-edit-qty-input {
    width: 44px;
  }

  .ht-action {
    gap: 2px;
  }

  /* Strategy save button on mobile */
  .strategy-save-btn {
    font-size: 11px;
    padding: 5px 10px;
  }

  #main-content .main-top .strategy-save-btn {
    margin-left: 0;
    order: 99;
  }
}

/* ═══════════════════════════════════════════════════════
   整体趋势面板
   ═══════════════════════════════════════════════════════ */

/* 分类选项卡 */
.trend-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0;
}

.trend-tab-btn {
  padding: 5px 12px; font-size: 11px; font-weight: 600;
  border-radius: 16px; border: 1px solid var(--border);
  background: transparent; color: var(--text-sec);
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.trend-tab-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.trend-tab-btn.active {
  background: rgba(123,140,222,.18); border-color: var(--accent);
  color: var(--accent);
}
/* "所有"标签按钮：金色高亮 */
.trend-tab-all {
  border-color: rgba(212,168,83,.3);
}
.trend-tab-all:hover {
  border-color: rgba(212,168,83,.5);
  background: rgba(212,168,83,.08);
  color: #d4a853;
}
.trend-tab-all.active {
  background: rgba(212,168,83,.15);
  border-color: rgba(212,168,83,.5);
  color: #d4a853;
}
.trend-tab-all.active .trend-tab-cnt {
  background: rgba(212,168,83,.18);
  color: #d4a853;
}
.trend-tab-cnt {
  font-size: 9px; color: var(--text-muted);
  background: var(--tag-bg); padding: 1px 6px;
  border-radius: 8px; margin-left: 5px;
}
.trend-tab-btn.active .trend-tab-cnt {
  background: rgba(123,140,222,.18); color: var(--accent);
}

/* 趋势面板 Tab 图标（类别图标） */
.trend-tab-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  margin-right: 3px;
}
.trend-tab-icon .icon-wrap,
.trend-tab-icon .icon-fallback {
  width: 100%; height: 100%;
  font-size: 11px;
}
.trend-tab-icon img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* 趋势面板通货名称图标 */
.trend-item-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.trend-item-icon .icon-wrap,
.trend-item-icon .icon-fallback {
  width: 100%; height: 100%;
  font-size: 12px;
}
.trend-item-icon img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* 卡片内容 */
.trend-category-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
}

.trend-cat-body {
  border-top: 1px solid var(--border);
  opacity: 1; overflow: hidden;
}

.trend-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.trend-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.trend-table th {
  text-align: left; padding: 9px 12px;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .3px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap; cursor: pointer;
  user-select: none; transition: color .15s;
}
.trend-table th:hover { color: var(--text-primary); }
.trend-table th.sorted { color: var(--accent); }
.trend-table td {
  padding: 8px 12px; color: var(--text-sec);
  border-bottom: 1px solid rgba(255,255,255,.03);
  white-space: nowrap;
}
.trend-table tbody tr:hover td {
  background: rgba(255,255,255,.02);
}
.trend-table .col-item_name { min-width: 100px; }
.trend-table .col-category { width: 100px; min-width: 80px; }
.trend-table .td-category { color: var(--text-muted); font-size: 11px; }

/* 趋势表格"所有"模式下的分类单元格 */
.trend-cat-cell {
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.trend-table .col-latest_buy1, .trend-table .col-latest_sell1  { width: 125px; text-align: right; }
.trend-table .col-buy_avg, .trend-table .col-sell_avg  { width: 95px; text-align: right; }
.trend-table .col-buy_avg_yesterday, .trend-table .col-sell_avg_yesterday { width: 95px; text-align: right; }
.trend-table .col-buy_avg_ratio, .trend-table .col-sell_avg_ratio { width: 80px; text-align: right; }
.trend-table .td-name { font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.trend-table .td-avg  { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.trend-table .td-yest { font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; }
.trend-table .td-ratio { text-align: right; font-weight: 600; }
.trend-table .td-latest { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; color: var(--accent); }
.trend-table .td-latest small { font-weight: 400; color: var(--text-muted); font-size: 10px; }

/* 数据异常感叹号标记 */
.error-warn {
  font-size: 13px;
  cursor: help;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
}
.error-warn::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 5px 10px;
  background: #1a1d28;
  color: #e0e0e0;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid #3a4260;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 100;
  line-height: 1.4;
}
.error-warn::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #3a4260;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 100;
}
.error-warn:hover::after,
.error-warn:hover::before {
  opacity: 1;
}

/* ── 趋势说明标签 ── */
.trend-note {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--tag-bg);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* ── 趋势表格操作按钮 ── */
.trend-item-name {
  flex-shrink: 0;
}

.trend-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.trend-action-btn {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
  transition: all 0.15s;
  font-family: inherit;
}

.trend-action-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-light);
  background: var(--bg-hover);
}

.trend-btn-poe2db:hover {
  color: var(--accent);
  border-color: var(--accent-soft);
}

.trend-btn-detail:hover {
  color: var(--b1);
  border-color: rgba(106,191,133,.3);
}

.trend-btn-strategy:hover {
  color: var(--gold);
  border-color: var(--gold-soft);
}

/* 涨跌颜色（A股习惯：涨红跌绿） */
.ratio-up   { color: #d32f2f; }
.ratio-down { color: #2e7d32; }
.ratio-zero { color: var(--text-muted); }

@media (max-width: 680px) {
  .trend-tab-btn { padding: 4px 10px; font-size: 10px; }
  .trend-table th, .trend-table td { padding: 6px 8px; font-size: 11px; }
  .trend-table .col-latest_buy1, .trend-table .col-latest_sell1  { width: 100px; }
  .trend-table .col-buy_avg, .trend-table .col-sell_avg  { width: 70px; }
  .trend-table .col-buy_avg_yesterday, .trend-table .col-sell_avg_yesterday { width: 70px; }
  .trend-table .col-buy_avg_ratio, .trend-table .col-sell_avg_ratio { width: 62px; }
  .trend-table .col-category { width: 60px; min-width: 50px; }
  .trend-action-btn { font-size: 9px; padding: 1px 4px; }
  .trend-actions { gap: 2px; }
}

/* ═══════════════════════════════════════════════════════
   API Token 说明弹窗
   ═══════════════════════════════════════════════════════ */
.api-info-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.api-info-overlay.active { display: flex; }

.api-info-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  width: min(92vw, 440px);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  animation: apiInfoIn .25s ease;
}
@keyframes apiInfoIn {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.api-info-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 600;
  color: var(--text-primary);
}
.api-info-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; cursor: pointer;
  color: var(--text-sec); font-size: 17px;
  transition: all .15s;
  margin-left: auto;
}
.api-info-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.api-info-body {
  padding: 20px;
  font-size: 13px; line-height: 1.7;
  color: var(--text-primary);
}
.api-info-body code {
  background: var(--bg-hover);
  padding: 1px 5px; border-radius: 4px;
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12px; color: var(--accent);
}
.api-info-body ul {
  list-style: none; padding: 0; margin: 0;
}
.api-info-body ul li {
  padding: 3px 0; font-size: 12px;
}

.api-info-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.api-info-card h4 {
  font-size: 13px; font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.api-info-card p {
  font-size: 12px; color: var(--text-sec);
  margin: 4px 0;
}
.api-info-card-muted {
  background: transparent;
  border-color: var(--border);
  opacity: .75;
}
.api-info-card-muted h4 {
  color: var(--text-sec);
}
.api-price {
  color: var(--gold);
  font-size: 16px;
}

@media (max-width: 680px) {
  .api-info-box {
    width: 90vw;
    max-height: 78vh;
    border-radius: 14px 14px 0 0;
    align-self: flex-end;
  }
  .api-info-header { padding: 14px 16px; font-size: 14px; }
  .api-info-body { padding: 14px 16px; }
}

/* ═══════════════════════════════════════════════════════
   换算通货选择器
   ═══════════════════════════════════════════════════════ */
.conversion-picker {
  position: fixed;
  z-index: 99990;
  width: 300px;
  max-height: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.conversion-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.conversion-picker-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.conversion-picker-hint {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.conversion-picker-search {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.conversion-search-input {
  width: 100%;
  padding: 7px 10px;
  font-size: 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  outline: none;
}
.conversion-search-input:focus {
  border-color: var(--accent);
}
.conversion-search-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}
.conversion-options {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.conversion-options::-webkit-scrollbar {
  width: 4px;
}
.conversion-options::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 2px;
}
.conversion-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s;
  gap: 8px;
}
.conversion-option:hover {
  background: var(--bg-hover);
}
.conversion-option.selected {
  background: rgba(123, 140, 222, 0.12);
  color: var(--accent);
}
.conversion-engname {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
}
.conversion-check {
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  margin-left: 6px;
}
.conversion-picker-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.conversion-reset-btn {
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(224, 130, 90, 0.12);
  color: var(--s1);
  border: 1px solid rgba(224, 130, 90, 0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.conversion-reset-btn:hover {
  background: rgba(224, 130, 90, 0.2);
  border-color: rgba(224, 130, 90, 0.4);
}

@media (max-width: 680px) {
  .conversion-picker {
    width: 280px;
    max-height: 340px;
    left: 50% !important;
    transform: translateX(-50%);
  }
}