@media (max-width: 576px) {
  .dropdown-menu-mobile-full {
    left: 0 !important;
    right: 0 !important;
    min-width: 100vw !important;
    border-radius: 0 0 10px 10px;
    margin-top: 0.5rem;
  }
}
/* Basic custom styles for 知识星球 */
.body { font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft Yahei", sans-serif; }
.header-hero { background: linear-gradient(90deg,#f8f9fa,#eef3ff); }
.card { border-radius: 12px; overflow: hidden; }
.navbar-brand { font-weight:700; }

/* Make navbar text larger and more legible */
.navbar-brand{ font-size:1.45rem; letter-spacing:0.2px; }
.navbar-nav .nav-link{ font-size:1.05rem; padding-top:0.35rem; padding-bottom:0.35rem; }
.nav-link.btn{ font-size:0.95rem; }

/* Increase height of primary navbar to make top bar more prominent */
.navbar-dark.bg-primary{
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
.navbar.navbar-dark.bg-primary{
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  background-color: #04152a !important; /* 深墨蓝，强制覆盖 Bootstrap */
  background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03)) !important;
  box-shadow: 0 6px 24px rgba(4,21,42,0.16);
}
.card.h-100{
  box-shadow: 0 6px 18px rgba(18,38,63,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card.h-100:hover{
  box-shadow: 0 10px 30px rgba(18,38,63,0.10);
}
.header-hero{
  box-shadow: inset 0 -20px 40px rgba(14,30,60,0.03);
}
.footer-elevated{
  box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
}
/* Make cards look nicer on hover */
.card:hover { transform: translateY(-4px); transition: transform .18s ease; }

/* Admin strategy management: increase visible area so the list can show more items
  Assumption: the `.list` container used on `pages/admin.html` is the '策略管理看框' the user refers to.
  We set a larger max-height and enable vertical scrolling. */
.list{ max-height: 80vh; overflow-y: auto; }

@media (max-width: 576px) {
  .display-5 { font-size: 1.6rem; }
  /* Slightly reduce navbar text on very small screens to avoid wrapping */
  .navbar-brand{ font-size:1.05rem; }
  .navbar-nav .nav-link{ font-size:0.92rem; }
}

/* Small utility for muted footer */
footer { font-size: 0.9rem; }

/* Total return style on cards */
.total-return{
  font-size:1.5rem;
  color:#d63333; /* bootstrap danger red */
  font-weight:700;
}
.metric-vertical{
  display: inline-block;
  text-align: center;
  margin-right: 1.5rem; /* increased gap between metrics */
}
.metric-vertical .value{
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #c92a2a;
}
.metric-vertical .label{
  display: block;
  font-size: 0.875rem; /* increased by one size step for better readability */
  color: #6c757d;
}
.badge-drawdown-green{
  background-color: #0b6b2e; /* 深绿色 */
  color: #ffffff;
}

/* Chart canvas stabilization: put canvas inside a fixed-height container
   and let Chart.js be responsive. This avoids layout-resize loops where
   canvas height keeps changing. */
.chart-container{ position: relative; width: 100%; }
.chart-container canvas{ width:100% !important; height:100% !important; max-height:600px; }

/* Make the user's strategy list scrollable to avoid very long pages.
   For the profile right-hand panel we keep the outer card fixed to viewport
   and let the inner lists handle scrolling (so the scrollbar is attached to
   the strategy cards list itself, not the entire management card). */
#myStrategiesWrap {
  /* Scroll wrapper for the '我的策略' list. This dedicated container
     holds the scrollbar and receives the flexed height from the tab-pane. */
  flex: 1 1 auto;
  overflow-y: auto;
  position: relative;
  padding-right: 1rem; /* ensure space for custom scrollbar */
  scroll-behavior: smooth;
}

/* Slightly reduce card spacing inside the scrollable area to fit more items */
#myStrategies .col-12 { margin-bottom: 0.5rem; }

#redemptionStrategiesWrap, #favoriteStrategiesWrap {
  /* Scroll wrappers for redemption and favorite lists */
  flex: 1 1 auto;
  overflow-y: auto;
  position: relative;
  padding-right: 1rem;
}

/* Ensure scrollable children can shrink within their flex parents */
#myStrategies, #redemptionStrategies, #favoriteStrategies { min-height: 0; }

/* Always show a visible scrollbar/thumb styling so it's obvious these areas are scrollable.
   - scrollbar-gutter reserves space for the scrollbar in supporting browsers
   - Firefox uses scrollbar-width / scrollbar-color
   - WebKit browsers use ::-webkit-scrollbar rules */
#myStrategiesWrap, #redemptionStrategiesWrap, #favoriteStrategiesWrap {
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: rgba(60,60,60,0.6) rgba(0,0,0,0.04);
  -ms-overflow-style: auto; /* ensure legacy Edge/IE behavior doesn't hide the scrollbar */
}

/* WebKit scrollbar styling */
#myStrategiesWrap::-webkit-scrollbar, #redemptionStrategiesWrap::-webkit-scrollbar, #favoriteStrategiesWrap::-webkit-scrollbar {
  width: 10px;
}
#myStrategiesWrap::-webkit-scrollbar-track, #redemptionStrategiesWrap::-webkit-scrollbar-track, #favoriteStrategiesWrap::-webkit-scrollbar-track {
  /* visible track so users can see/drag the thumb even when not hovered */
  background: rgba(0,0,0,0.04);
}
#myStrategiesWrap::-webkit-scrollbar-thumb, #redemptionStrategiesWrap::-webkit-scrollbar-thumb, #favoriteStrategiesWrap::-webkit-scrollbar-thumb {
  background-color: rgba(60,60,60,0.45);
  border-radius: 8px;
  border: 2px solid rgba(0,0,0,0.06);
}
#myStrategiesWrap::-webkit-scrollbar-thumb:hover, #redemptionStrategiesWrap::-webkit-scrollbar-thumb:hover, #favoriteStrategiesWrap::-webkit-scrollbar-thumb:hover {
  background-color: rgba(60,60,60,0.7);
}

#redemptionStrategies .col-12, #favoriteStrategies .col-12 { margin-bottom: 0.45rem; }

/* custom DOM-injected scrollbar removed; using native scrollbars on wrapper elements */

/* Profile strategy panel: make the right-hand strategy management card fill the viewport
   while keeping space for the top navbar. The actual header height is measured in JS
   and written to the CSS variable --site-header-height. We provide a sensible
   fallback (88px) if JS hasn't run yet. Overflow is auto so inner lists can scroll. */
.profile-strategy-card {
  /* Use an explicit height so flex children compute correctly.
     This makes the card exactly fill the remaining viewport (nav + margins
     are measured and stored in --site-header-height by JS). */
  height: calc(100vh - var(--site-header-height, 88px));
  overflow: hidden; /* Prevent the outer card from scrolling; inner panes will scroll */
  padding: 0; /* let the card-body manage inner padding */
}

/* On narrow viewports (stacked layout) let the card size naturally */
@media (max-width: 991px) {
  .profile-strategy-card { min-height: auto; max-height: none; }
}

/* Make the card body a column flex container so tabs and their content can
   grow; the inner lists will take the available space and scroll. */
/* Scope the flex behavior to the profile card's immediate .card-body only.
   Using the child selector prevents nested .card-body elements (the small
   strategy cards) from inheriting column layout which would push action
   buttons below the content. */
.profile-strategy-card > .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box; /* include padding in height calculations */
  padding: 1rem; /* ensure consistent inner spacing */
}
.profile-strategy-card > .card-body .tab-content {
  flex: 1 1 auto;
  min-height: 0; /* allow children to shrink in flex layout */
  overflow: hidden; /* hide overflow from tab container; lists inside will scroll */
  display: flex;
  flex-direction: column;
}
.profile-strategy-card > .card-body .tab-pane {
  /* Default: keep tab-panes non-flex so Bootstrap's hide/show behavior works
     normally for inactive panes. Active panes (.show) will become flex
     containers below. */
  height: 100%;
  overflow: hidden;
}
/* Activate flex layout only for the visible (shown) pane to avoid layout issues
   with Bootstrap's fade/hide semantics. */
.profile-strategy-card > .card-body .tab-pane.show {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow inner scrollable list to determine height */
}

@media (max-width: 991px) {
  /* 保持卡片和列表高度，保证小屏下依然可滚动 */
  .profile-strategy-card { min-height: 320px; max-height: 100vh; }
  .profile-strategy-card > .card-body { height: 100%; }
  #myStrategiesWrap, #redemptionStrategiesWrap, #favoriteStrategiesWrap {
    max-height: 60vh;
    min-height: 180px;
    overflow-y: auto;
  }
  #myStrategies, #redemptionStrategies, #favoriteStrategies { min-height: 0; }
}

/* Favorite (star) button styling used on detail page */
.fav-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:6px;border:1px solid rgba(0,0,0,0.06);
  background:#ffffff;color:#6c757d;padding:0;cursor:pointer;transition:all .12s ease;font-size:16px;
}
.fav-btn svg{ width:20px;height:20px;display:block; }
.fav-btn:hover{ transform:translateY(-1px); box-shadow: 0 6px 12px rgba(4,21,42,0.06); }
.fav-btn.active{ background: #ffd54f; color: #9a6b00; border-color: rgba(0,0,0,0.08); }
.fav-btn.active svg{ fill: currentColor; stroke: none; }
.fav-btn:focus{ outline: 3px solid rgba(0,123,255,0.15); }

/* Clickable card style: show pointer cursor and slight hover feedback */
.clickable-card, .card.clickable {
  cursor: pointer;
}
.clickable-card, .card.clickable{
  cursor: pointer;
}

.clickable-card:hover, .card.clickable:hover{
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(18,38,63,0.12);
}

/* VIP badge styling */
.vip-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8B4513;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
  z-index: 10;
  letter-spacing: 0.5px;
}

.card {
  position: relative;
}

/* Compact learning articles list - tighter spacing, no hover elevation */
.learning-list.compact { padding: 0; margin: 0; background: transparent; }
/* make the list narrower on wide viewports for better readability */
.learning-list.compact { width: 100%; margin-left: 0; margin-right: 0; }
@media (min-width: 992px) {
  /* ensure the list fills available space in the right column */
  .learning-list.compact { width: 100%; max-width: none; }
}
/* use subtle top separators (single line between items) instead of full boxes */
.learning-list.compact .learning-item { padding: 10px 8px; display: block; }
.learning-list.compact .learning-item + .learning-item { border-top: 1px solid rgba(0,0,0,0.04); }
.learning-item .learning-item-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.learning-item .learning-title{ margin: 0; font-size: 1.08rem; font-weight: 600; }
.learning-item .learning-title a{ color: #0d3b66; text-decoration: none; }
.learning-item .learning-title a:hover{ text-decoration: underline; }
/* Remove underline on hover for learning article titles (visual only) */
.learning-list.compact .learning-item .learning-title a:hover{ text-decoration: none; }
.learning-item .meta{ margin: 0; color: #6c757d; font-size:0.92rem; white-space:nowrap; }

/* larger page title for learning page and left align */
.learning-page-title { font-size: 1.05rem; font-weight:700; margin-bottom:0.75rem; text-align:left; }

/* subtle hover highlight without elevation */
.learning-list.compact .learning-item{ transition: background-color .18s ease; }
.learning-list.compact .learning-item:hover{ background-color: rgba(0,0,0,0.045); }

.card .card-body .card-title{ margin-bottom:0.5rem; }

/* Responsive QR code helper
   - Use on <img> elements showing QR codes to make them scale to their container
   - Preserve sharpness by using width/height auto scaling. Set a sensible
     max-width so they don't become excessively large on very wide layouts. */
.qr-responsive{ display:block; width:100%; height:auto; max-width:380px; margin-left:auto; margin-right:auto; }

/* When showing two QR codes side-by-side (compact pair), limit each so they fit
  inside narrow containers like `.qr-box` (which is 420px wide). Use flexbox
  to center and wrap on small screens. */
.qr-pair{ display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:nowrap; }
.qr-pair .qr-responsive{
  /* Make each QR take half of available width minus gap, but clamp to reasonable sizes */
  width: calc((100% - 12px) / 2);
  max-width: 220px; /* don't grow excessively on wide screens */
  min-width: 120px; /* keep scannable on narrow screens */
}

/* Constrain QR images specifically inside .qr-box so two can fit comfortably */
.qr-box .qr-responsive{
  width: calc((100% - 12px) / 2);
  max-width: 200px;
  min-width: 110px;
}

/* Learning page category sidebar styles */
#learning-categories a{ display:inline-block; padding:6px 10px; border-radius:6px; color:#0d3b66; text-decoration:none; }
#learning-categories a:hover{ background: rgba(13,59,102,0.06); }
#learning-categories a.active{ background:#0d3b66; color:#fff; }
#learning-categories .mb-2{ margin-bottom:8px; }

/* Narrow the sidebar and add gap between left sidebar and right articles list */
@media (min-width: 992px) {
  /* make the left column narrower so the article list is wider */
  #learning-sidebar { max-width: 220px; }
  /* slightly smaller left margin for the articles list */
  #learning-articles-list { margin-left: 12px; }
  /* adjust column flex basis to match the narrower sidebar */
  .row > .col-lg-4 { flex: 0 0 220px; max-width: 220px; }
  .row > .col-lg-8 { flex: 1 1 auto; }
}

/* Override: keep profile/paged main layouts using standard proportions
   The global `.row > .col-lg-4` rule above was intended for the learning
   page only but affected other pages (like profile). Make columns inside
   a main.container use a more natural width so the personal center
   left sidebar is not excessively narrow. Placed after the learning rule
   so it wins by cascade specificity. */
@media (min-width: 992px) {
  body main.container .row > .col-lg-4 { flex: 0 0 32%; max-width: 32%; }
  body main.container .row > .col-lg-8 { flex: 1 1 auto; }
}

/* empty state styling */
.learning-list.compact .learning-item:empty, .learning-list.compact .learning-item:contains('暂无文章') { padding: 12px 8px; color: #6c757d; }

/* Remove global card hover transforms for learning items specifically */
.learning-list.compact .card, .learning-list.compact .card:hover, .learning-list.compact .card.h-100, .learning-list.compact .card.h-100:hover { box-shadow: none !important; transform: none !important; }

/* Message delete button: square outline with gray border */
.btn-delete-msg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border-radius:8px;
  background-color: #f8f9fa;
  color: #dc3545;
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  transition: all 0.15s ease-in-out;
  cursor: pointer;
}
.btn-delete-msg:hover{ 
  background-color: #dc3545; 
  color: #fff; 
  border-color: #dc3545;
  transform: translateY(-1px); 
  box-shadow: 0 2px 6px rgba(220,53,69,0.25);
}
.btn-delete-msg:active{ 
  transform: translateY(0); 
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.btn-delete-msg:focus{ 
  outline: none;
  box-shadow: 0 0 0 3px rgba(220,53,69,0.15);
}

/* Ensure backtest/net-value chart areas render using the same background
   color as 回测参数 cards. We copy the color value directly (#eef4f7) so
   no variable is used per request. */
.lab-page #step3 .card .card-body > #labChart,
#labChart,
#netValueChart,
.chart-container > #netValueChart {
  background-color: #eef4f7;
  border-radius: 6px;
}

/* Keep canvases transparent so chart grid/axes draw over the container's background
   (we set the container #labChart / #netValueChart to white; canvases must remain transparent
   so grid lines and axes rendered by the chart library stay visible). */
#labChart canvas,
#netValueChart canvas,
.chart-container canvas {
  background-color: transparent !important;
}

/* Small caption placed under the net-value chart's time slider */
.backtest-time-caption{
  font-size:0.85rem; /* small text */
  color: #6c757d; /* muted */
  text-align: right; /* right-align as requested */
  margin-top: 0.5rem;
}

/* Make the whole card-body behind the chart use the same background as 回测参数 */
.card.backtest-chart-card .card-body {
  background-color: #eef4f7;
}
.lab-page #step3 .card.backtest-chart-card .card-body {
  background-color: #eef4f7;
}

/* Detail page: keep net value chart background transparent (detail page uses different visual style) */
#detailContainer .card.backtest-chart-card .card-body,
#detailContainer #netValueChart,
#detailContainer .chart-container > #netValueChart {
  background-color: transparent !important;
}

/* Detail page: reorder blocks on small/medium screens to follow the requested sequence */
@media (max-width: 991.98px) {
  .detail-layout { display: flex; flex-direction: column; gap: 12px; }
  .detail-layout > [class*="col-"] { 
    width: 100%; 
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 15px; 
    padding-right: 15px;
    display: flex;
    flex-direction: column;
  }
  .detail-layout .detail-block { 
    order: 0;
    width: 100%;
    max-width: 100%;
  }
  .detail-layout .detail-hero { order: 1; }
  .detail-layout .detail-info { order: 2; }
  .detail-layout .detail-metrics { order: 3; }
  .detail-layout .detail-nav { order: 4; }
  .detail-layout .detail-latest { order: 5; }
  .detail-layout .detail-history { order: 6; }
  .detail-layout .detail-extra { order: 7; }
}

/* Narrow article content for better readability */
.article-content { max-width: 960px; margin-left: auto; margin-right: auto; }
/* Left-align article meta and content inside the narrowed container */
.article-content #article-meta, .article-content #article-content { text-align: left; }

/* Responsive: on small screens, use full width with comfortable padding */
@media (max-width: 767px) {
  .article-content { max-width: 100%; padding-left: 16px; padding-right: 16px; }
}

/* Historical rebalance table: align all columns to left for readability */
#rebalanceTable thead th, #rebalanceTable tbody td { text-align: left !important; }

/* Increase text size in the '策略信息' card on detail page by ~1 size */
.strategy-info-card .card-body {
  font-size: 1.02rem; /* slightly larger than default small text */
}
.strategy-info-card .card-body .small,
.strategy-info-card .card-body small {
  font-size: 0.92rem; /* increase small text for better readability */
}
.strategy-info-card .card-body .list-unstyled li { margin-bottom: 0.35rem; }

/* Match 回测参数 card background (#eef4f7) for 回测绩效 and 调仓记录 */
.card.backtest-metrics-card .card-body,
.card.rebalance-records-card .card-body {
  background-color: #eef4f7;
}

/* Center the first column (row labels) in the backtest metrics table */
#labResults .table tbody th:first-child,
#labResults .table tbody td:first-child {
  text-align: left;
  vertical-align: middle;
}

/* Ensure key metric numbers on detail page share the same font size/weight
   so Total / Annual / MaxDD match Sharpe's typography; colors are kept via
   their utility classes (text-danger / text-success). */
#perfSharpe, #perfTotal, #perfAnnual, #perfMaxDD, #perfCalmar, #perfTodayChange {
  font-size: 1.25rem; /* match .metric-vertical .value */
  font-weight: 400; /* normal weight per request */
  line-height: 1;
}

/* Top-3 highlight removed per request: homepage/rank cards use default styling */

/* Highlight for holdings percentage when non-zero */
.holding-nonzero{
  background-color: rgba(0,123,255,0.06); /* light blue */
  border-radius: 6px;
}

/* Emphasize non-zero weight percentages in orders/planned position */
.weight-highlight{
  display: inline-block;
  padding: 0.08rem 0.28rem;
  background: rgba(0,123,255,0.08);
  color: #0056b3;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 0.28rem;
}

/* Latest rebalance: red rounded badge for non-zero weights */
.weight-highlight-latest{
  display: inline-block;
  padding: 0.12rem 0.36rem;
  background: rgba(220,53,69,0.12); /* light red */
  color: #b02a37; /* dark red text */
  border-radius: 8px;
  font-weight: 700;
  margin-left: 0.28rem;
}

/* Messages list: make the messages area scrollable with a visible thumb */
#myMessages{
  max-height: calc(40vh); /* reasonable default height relative to viewport */
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: rgba(60,60,60,0.45) rgba(0,0,0,0.04);
}
#myMessages::-webkit-scrollbar { width: 10px; }
#myMessages::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
#myMessages::-webkit-scrollbar-thumb { background-color: rgba(60,60,60,0.45); border-radius: 8px; border: 2px solid rgba(0,0,0,0.06); }
#myMessages::-webkit-scrollbar-thumb:hover { background-color: rgba(60,60,60,0.7); }

/* Increase spacing and visual separation between individual messages (reduced per request) */
#myMessages .list-group-item{
  margin-bottom: 0.75rem; /* reduced spacing between messages */
  padding: 0.9rem;
  border-radius: 8px;
  background-color: #ffffff; /* keep messages on a white card for contrast */
  box-shadow: none !important;
  transform: none !important;
  position: relative;
  overflow: visible;
  border: 1px solid rgba(0,0,0,0.06); /* subtle default border */
}
#myMessages .list-group-item:last-child{ margin-bottom: 0; }

#myMessages .list-group-item:hover{
  border-color: rgba(0,0,0,0.12); /* slightly darker border on hover */
}

/* Prevent global .card:hover rules from affecting message list items */
#myMessages .list-group-item:hover{
  box-shadow: none !important;
  transform: none !important;
}