/* ======================================================================
   老郭骑牛 - 样式 (v2 - 优化版)
   ====================================================================== */
:root {
  --red: #e53935;
  --green: #43a047;
  --bg: #f5f6fa;
  --card-bg: #fff;
  --border: #e0e3eb;
  --text: #1a1a2e;
  --text-secondary: #666;
  --accent: #1565c0;
  --accent-light: #e3f2fd;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden;
}

/* ---- Fixed Top Bar ---- */
.top-bar {
  position:sticky; top:0; z-index:100;
}

/* ---- Header ---- */
.header {
  background:linear-gradient(135deg,#1565c0,#1e88e5); color:#fff;
  padding:10px 16px;
  box-shadow:0 2px 8px rgba(21,101,192,0.3);
}
.header-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.header h1 { font-size:1.2rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.header h1 small { font-size:0.72rem; opacity:0.8; font-weight:400; }
.header-actions { display:flex; gap:6px; align-items:center; }
.header-actions button {
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25);
  color:#fff; padding:5px 12px; border-radius:6px; cursor:pointer;
  font-size:0.85rem; transition:background 0.2s; white-space:nowrap;
}
.header-actions button:hover { background:rgba(255,255,255,0.3); }
.header-actions button:active { transform:scale(0.95); }
.header-actions .badge {
  background:rgba(255,255,255,0.2); padding:3px 10px; border-radius:12px; font-size:0.78rem;
}

/* ---- Stats Bar ---- */
.stats-bar {
  background:var(--card-bg); border-bottom:1px solid var(--border);
  padding:8px 16px; display:flex; flex-wrap:wrap; gap:8px 16px;
  font-size:0.82rem; align-items:center;
}
.stats-bar .stat { white-space:nowrap; }
.stats-bar .stat strong { font-weight:600; }
.stats-bar .up { color:var(--red); }
.stats-bar .down { color:var(--green); }
.stats-bar .vr-high { color:var(--accent); }

/* ---- Market Tabs ---- */
.market-tabs { display:flex; gap:3px; margin-right:8px; flex-shrink:0; }
.market-tab {
  padding:3px 8px; border:1px solid var(--border); background:#f5f6fa;
  color:var(--text-secondary); border-radius:6px; cursor:pointer;
  font-size:0.78rem; white-space:nowrap; transition:all 0.2s; line-height:1.5;
}
.market-tab:hover { background:var(--accent-light); color:var(--accent); border-color:var(--accent); }
.market-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }

/* ---- Filter Panel ---- */
.filter-panel {
  background:var(--card-bg); border-bottom:1px solid var(--border);
  padding:10px 16px; display:none; flex-wrap:wrap; gap:8px 14px; align-items:center;
}
.filter-panel.open { display:flex; }
.filter-group { display:flex; align-items:center; gap:4px; }
.filter-group label { font-size:0.78rem; color:var(--text-secondary); white-space:nowrap; }
.filter-group input[type="number"], .filter-group select {
  width:64px; padding:4px 6px; border:1px solid var(--border);
  border-radius:4px; font-size:0.82rem; background:#fff;
}
.filter-group select { width:auto; min-width:80px; }
.filter-presets { display:flex; gap:4px; flex-wrap:wrap; }
.filter-presets button {
  padding:3px 8px; border:1px solid var(--accent); background:var(--accent-light);
  color:var(--accent); border-radius:12px; cursor:pointer;
  font-size:0.75rem; white-space:nowrap; transition:all 0.2s;
}
.filter-presets button:hover { background:var(--accent); color:#fff; }
.filter-presets button:active { transform:scale(0.95); }
.filter-apply {
  padding:4px 14px; background:var(--accent); color:#fff; border:none;
  border-radius:6px; cursor:pointer; font-size:0.82rem; transition:opacity 0.15s;
}
.filter-apply:hover { opacity:0.9; }
.filter-apply:active { transform:scale(0.95); }

/* ---- Main Table ---- */
main { max-width:1200px; margin:0 auto; padding:6px 10px; }
.table-wrap { background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }

/* 可滚动表格容器 — 表头固定，列宽可调 */
.table-scroll-wrap {
  overflow-y:auto;
  max-height:calc(100vh - 145px);
}
@media (max-width:768px) {
  .table-scroll-wrap { max-height:calc(100vh - 120px); }
}

.table-scroll { overflow-x:auto; }

table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:0.85rem; }
thead { background:#f8f9fc; position:sticky; top:0; z-index:10; }
th {
  padding:9px 5px; text-align:right; font-weight:600; color:var(--text-secondary);
  border-bottom:2px solid var(--border); cursor:pointer; user-select:none; white-space:nowrap;
  position:relative; /* 给 resize-handle 定位用 */
}
/* 列宽拖动手柄 */
.resize-handle {
  position:absolute; right:0; top:0; bottom:0; width:5px;
  cursor:col-resize; z-index:11; background:transparent;
  transition:background 0.15s;
}
.resize-handle:hover, .resize-handle:active { background:rgba(21,101,192,0.3); }
th:first-child { text-align:center; }
th .sort-icon { margin-left:2px; opacity:0.4; font-size:0.7rem; }
th.active .sort-icon { opacity:1; color:var(--accent); }
th:hover { color:var(--text); }
td {
  padding:7px 5px; text-align:right; border-bottom:1px solid var(--border);
  transition:background 0.15s; white-space:nowrap;
}
td:first-child { text-align:center; font-family:"SF Mono","Consolas",monospace; font-size:0.78rem; color:var(--text-secondary); }
td.name-cell { text-align:left; font-weight:500; }
.col-code { width:8%; } .col-name { width:13%; overflow:hidden; text-overflow:ellipsis; }
.col-price { width:11%; } .col-pct { width:11%; } .col-vr { width:10%; }
.col-tvr { width:10%; } .col-pe { width:9%; } .col-pb { width:9%; }
.col-perc { width:19%; white-space:nowrap; }
.col-wl { width:40px; text-align:center; cursor:pointer; }
.col-wl .wl-toggle { cursor:pointer; font-size:1.1rem; }
.stock-link { color:var(--accent); text-decoration:none; cursor:pointer; transition:color 0.15s; }
.stock-link:hover { color:#e53935; text-decoration:underline; }
tr:hover td { background:#f0f4ff; }
.price-up { color:var(--red); }
.price-down { color:var(--green); }

/* Percentile bar */
.percentile-cell { display:flex; align-items:center; gap:5px; justify-content:flex-end; }
.percentile-bar { width:50px; height:6px; background:#e8e8e8; border-radius:3px; overflow:hidden; flex-shrink:0; }
.percentile-bar .fill { height:100%; border-radius:3px; transition:width 0.4s ease; }
.percentile-bar .fill.low { background:var(--green); }
.percentile-bar .fill.mid { background:#ffa726; }
.percentile-bar .fill.high { background:var(--red); }

/* Loading */
.loading { text-align:center; padding:40px 20px; color:var(--text-secondary); }
.loading .spinner {
  display:inline-block; width:28px; height:28px; border:3px solid var(--border);
  border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; margin-bottom:10px;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading .hint { font-size:0.8rem; color:#999; margin-top:4px; }

/* 骨架屏 */
.skeleton-table { padding:16px; }
.skeleton-row { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); align-items:center; }
.skeleton-cell { height:14px; background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:4px; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* Error / Empty */
.error-box { text-align:center; padding:40px 20px; color:#c62828; }
.empty-box { text-align:center; padding:40px 20px; color:var(--text-secondary); }

/* ---- Watchlist Panel ---- */
.watchlist-panel {
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:999;
  background:rgba(0,0,0,0.45); display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; padding-top:40px;
  overflow-y:auto; animation:fadeIn 0.2s ease;
}
.wl-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:#fff; border-bottom:1px solid var(--border);
  width:100%; max-width:1100px; border-radius:var(--radius) var(--radius) 0 0;
}
.wl-header h2 { font-size:1rem; font-weight:600; }
.wl-close { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--text-secondary); padding:4px 8px; border-radius:4px; transition:background 0.15s; }
.wl-close:hover { background:#f0f0f0; color:var(--text); }
.wl-toolbar { display:flex; align-items:center; gap:12px; padding:8px 14px; background:#f8f9fc; width:100%; max-width:1100px; border-bottom:1px solid var(--border); }
.wl-count { font-size:0.82rem; color:var(--text-secondary); }
.wl-clear-btn { padding:3px 10px; border:1px solid #c62828; background:#fff; color:#c62828; border-radius:4px; cursor:pointer; font-size:0.75rem; transition:all 0.15s; }
.wl-clear-btn:hover { background:#fff5f5; }
.wl-table-wrap { width:100%; max-width:1100px; background:#fff; overflow-x:auto; border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow); }
.wl-table-wrap table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:0.78rem; }
.wl-table-wrap thead { background:#f8f9fc; }
.wl-table-wrap th { padding:6px 4px; text-align:right; font-weight:600; color:var(--text-secondary); border-bottom:2px solid var(--border); white-space:nowrap; }
.wl-table-wrap th:first-child { text-align:center; }
.wl-table-wrap td { padding:5px 4px; text-align:right; border-bottom:1px solid var(--border); white-space:nowrap; }
.wl-table-wrap td:first-child { text-align:center; }
.wl-table-wrap td.name-cell { text-align:left; }
.wl-table-wrap tr:hover td { background:#f0f4ff; }
.wl-remove-btn { padding:2px 6px; border:1px solid var(--border); background:#fff; color:var(--text-secondary); border-radius:3px; cursor:pointer; font-size:0.72rem; transition:all 0.15s; }
.wl-remove-btn:hover { border-color:#c62828; color:#c62828; }
.wl-col-code { width:6%; } .wl-col-name { width:9%; } .wl-col-market { width:5%; }
.wl-col-price { width:7%; } .wl-col-open { width:7%; } .wl-col-pre { width:7%; }
.wl-col-avg30 { width:7%; } .wl-col-vol { width:7%; } .wl-col-avgv30 { width:7%; }
.wl-col-pe { width:5%; } .wl-col-pb { width:5%; } .wl-col-eps { width:6%; }
.wl-col-bvps { width:6%; } .wl-col-biz { width:13%; } .wl-col-action { width:5%; }
.wl-loading, .wl-empty { text-align:center; padding:20px; color:var(--text-secondary); background:#fff; width:100%; max-width:1100px; border-radius:0 0 var(--radius) var(--radius); }

/* 主表星标 */
.wl-toggle { cursor:pointer; user-select:none; margin-right:4px; font-size:0.9rem; transition:transform 0.15s; }
.wl-toggle:hover { transform:scale(1.2); }
.wl-toggle:active { transform:scale(0.9); }
.header-actions .badge+button#btnWatchlist { position:relative; }
#wlBadge { position:absolute; top:-4px; right:-4px; background:#c62828; color:#fff; font-size:0.65rem; padding:1px 5px; border-radius:8px; min-width:16px; text-align:center; line-height:1.3; }

/* ---- Toast ---- */
.toast-container { position:fixed; top:60px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { padding:8px 18px; border-radius:8px; font-size:0.85rem; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.15); animation:toastIn 0.3s ease,toastOut 0.3s ease 2.5s forwards; pointer-events:auto; text-align:center; white-space:nowrap; }
.toast.success { background:var(--green); }
.toast.error { background:var(--red); }
.toast.info { background:var(--accent); }
@keyframes toastIn { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(-8px); } }

/* ---- Footer ---- */
.footer { text-align:center; padding:14px; color:var(--text-secondary); font-size:0.78rem; }

/* ---- Mobile Responsive ---- */
@media (max-width:768px) {
  html { font-size:12px; }
  .header h1 { font-size:1rem; }
  .header-actions button { padding:4px 8px; font-size:0.78rem; }
  .stats-bar { font-size:0.75rem; gap:5px 10px; padding:6px 10px; }
  .market-tab { font-size:0.72rem; padding:2px 6px; }
  .filter-panel { padding:6px 10px; gap:5px 8px; }
  .filter-group input[type="number"] { width:50px; }
  .filter-group select { min-width:60px; }
  th, td { padding:5px 3px; font-size:0.78rem; }
  .percentile-bar { width:30px; }
  .col-name { width:11%; }
  .col-code { width:7%; }
  .col-perc { width:16%; }
  .watchlist-panel { padding-top:10px; }
  .wl-table-wrap table { font-size:0.72rem; }
  .wl-col-biz { display:none; }
  .wl-col-bvps { display:none; }
  .wl-col-eps { display:none; }
  .wl-col-open { display:none; }
  .wl-col-pre { display:none; }
  .wl-col-avg30 { display:none; }
  .wl-col-avgv30 { display:none; }
}

/* 超小屏 */
@media (max-width:480px) {
  .col-pe { display:none; }
  .col-pb { display:none; }
  .col-tvr { display:none; }
  .col-price { width:10%; }
  .col-pct { width:10%; }
}

/* ---- Animations ---- */
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
tr { animation:fadeIn 0.2s ease; }