/* Global product shell. Injected by shell.js; pages only provide .app wrapper. */
:root {
  --shell-sidebar-w: 232px;
  --shell-topbar-h: 52px;
  --shell-crumb-h: 32px;
  --shell-bg: #0f1419;
  --shell-panel: #161d24;
  --shell-panel-2: #1c252e;
  --shell-line: #263340;
  --shell-text: #e6edf3;
  --shell-muted: #8b9bab;
  --shell-accent: #3d8bfd;
  --shell-up: #f0483e;
  --shell-down: #12a06b;
  --shell-shadow: 0 10px 30px rgba(0,0,0,.35);
}

body.shell-ready { margin:0; }

body.shell-ready .app {
  box-sizing: border-box;
  min-height: 100vh;
  padding-left: var(--shell-sidebar-w);
  padding-top: calc(var(--shell-topbar-h) + var(--shell-crumb-h));
}
body.shell-ready .app > header:not(.shell-topbar) {
  top: calc(var(--shell-topbar-h) + var(--shell-crumb-h)) !important;
}
body.shell-ready .app main { min-width: 0; }

.shell-topbar {
  position: fixed; top: 0; left: var(--shell-sidebar-w); right: 0; z-index: 1000;
  height: var(--shell-topbar-h); display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: rgba(15,20,25,.96);
  border-bottom: 1px solid var(--shell-line); backdrop-filter: blur(8px);
}
.shell-brand { display:flex; align-items:center; gap:9px; color:var(--shell-text);
  text-decoration:none; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.shell-brand-mark { width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--shell-up),var(--shell-accent)); color:#fff; font-size:11px; }
.shell-top-spacer { flex:1; }
.shell-search-trigger { display:flex; align-items:center; gap:8px; min-width:220px; max-width:420px;
  flex:0 1 420px; height:32px; padding:0 10px; border:1px solid var(--shell-line);
  border-radius:8px; background:var(--shell-panel); color:var(--shell-muted); cursor:pointer; }
.shell-search-trigger:hover { border-color:#3b5368; color:var(--shell-text); }
.shell-search-icon { font-size:16px; line-height:1; }
.shell-kbd { margin-left:auto; font-size:11px; border:1px solid var(--shell-line); padding:1px 5px; border-radius:4px; }
.shell-hamburger { display:none; width:34px; height:34px; border:1px solid var(--shell-line);
  border-radius:7px; background:var(--shell-panel); color:var(--shell-text); cursor:pointer; }

.shell-crumb-bar { position:fixed; top:var(--shell-topbar-h); left:var(--shell-sidebar-w); right:0;
  height:var(--shell-crumb-h); z-index:990; display:flex; align-items:center;
  padding:0 16px; background:var(--shell-panel); border-bottom:1px solid var(--shell-line); overflow:hidden; }
.shell-breadcrumb { display:flex; align-items:center; gap:7px; min-width:0; font-size:12px; color:var(--shell-muted); white-space:nowrap; }
.shell-breadcrumb a { color:#8fc7ff; text-decoration:none; }
.shell-breadcrumb a:hover { text-decoration:underline; }
.shell-breadcrumb .sep { opacity:.45; }
.shell-breadcrumb .cur { color:var(--shell-text); overflow:hidden; text-overflow:ellipsis; }

.shell-sidebar { position:fixed; inset:0 auto 0 0; width:var(--shell-sidebar-w); z-index:1100;
  display:flex; flex-direction:column; background:#0c1217; border-right:1px solid var(--shell-line); }
.shell-sidebar-head { height:var(--shell-topbar-h); display:flex; align-items:center; padding:0 14px;
  border-bottom:1px solid var(--shell-line); flex:0 0 auto; }
.shell-sidebar .shell-brand { font-size:14px; }
.shell-nav { overflow-y:auto; padding:10px 8px 20px; flex:1 1 auto; scrollbar-width:thin; }
.shell-nav-group { margin:0 0 10px; }
.shell-nav-title { padding:5px 8px 4px; color:#6f8797; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.shell-nav-subtitle { padding:8px 9px 3px; color:#5f7688; font-size:10px; letter-spacing:.06em; }
.shell-nav-link { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px;
  margin:1px 0; border-radius:7px; color:#b7c7d3; text-decoration:none; font-size:12.5px; }
.shell-nav-link:hover { background:#15232d; color:#fff; }
.shell-nav-link.is-active { background:#17334a; color:#d9ecff; box-shadow:inset 2px 0 0 var(--shell-accent); }
.shell-nav-link.is-quick { color:#8fa4b3; }
.shell-nav-link.is-quick span:first-child::before { content:"↳ "; color:#5f7688; }
.shell-nav-link .shell-nav-badge { font-size:10px; color:var(--shell-muted); }
.shell-side-foot { padding:10px 12px; border-top:1px solid var(--shell-line); color:var(--shell-muted); font-size:11px; }
.shell-side-foot a { color:#8fc7ff; }
.shell-overlay { display:none; position:fixed; inset:0; z-index:1050; background:rgba(0,0,0,.52); }
body.shell-nav-open .shell-overlay { display:block; }

.shell-search-backdrop { position:fixed; inset:0; z-index:1200; display:none; align-items:flex-start;
  justify-content:center; padding:12vh 14px 30px; background:rgba(0,0,0,.62); }
.shell-search-backdrop.is-open { display:flex; }
.shell-search-panel { width:min(680px,100%); max-height:68vh; overflow:hidden; display:flex; flex-direction:column;
  background:var(--shell-panel); border:1px solid #33485b; border-radius:12px; box-shadow:var(--shell-shadow); }
.shell-search-panel input { width:100%; box-sizing:border-box; border:0; border-bottom:1px solid var(--shell-line);
  padding:15px 18px; background:transparent; color:var(--shell-text); font:inherit; font-size:16px; outline:none; }
.shell-search-results { overflow:auto; padding:8px; }
.shell-result-group { padding:9px 10px 4px; color:#6f8797; font-size:10px; letter-spacing:.12em; }
.shell-result { display:block; padding:9px 10px; border-radius:7px; color:var(--shell-text); text-decoration:none; }
.shell-result:hover, .shell-result.is-active { background:#1a2d3a; }
.shell-result b { font-weight:600; }
.shell-result span { color:var(--shell-muted); margin-left:7px; font-size:12px; }
.shell-result-empty { padding:18px 12px; color:var(--shell-muted); font-size:13px; }

@media (max-width: 960px) {
  body.shell-ready { margin:0; }

body.shell-ready .app { padding-left: 0; }
  .shell-topbar { left: 0; }
  .shell-crumb-bar { left: 0; }
  .shell-hamburger { display:inline-flex; align-items:center; justify-content:center; }
  .shell-sidebar { transform:translateX(-100%); transition:transform .18s ease; }
  body.shell-nav-open .shell-sidebar { transform:none; }
  .shell-search-trigger { min-width:0; }
  .shell-search-trigger .shell-search-label { display:none; }
  .shell-search-trigger { flex:0 0 40px; width:40px; justify-content:center; }
  .shell-search-trigger .shell-search-icon { font-size:16px; line-height:1; }
.shell-kbd { display:none; }
}

@media (max-width: 640px) {
  .shell-topbar { padding:0 9px; gap:8px; }
  .shell-brand span:last-child { display:none; }
  .shell-crumb-bar { padding:0 10px; }
  .shell-breadcrumb { font-size:11px; }
}

@media (prefers-reduced-motion: reduce) { .shell-sidebar { transition:none; } }

/* K-line modal: click a stock code and stay on the current page. */
body.shell-modal-open { overflow: hidden; }
.shell-kline-backdrop { position:fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.68); padding:18px; }
.shell-kline-backdrop.is-open { display:flex; }
.shell-kline-dialog { width:min(1480px,100%); height:min(920px,94vh); display:flex; flex-direction:column;
  background:var(--shell-bg); border:1px solid #33485b; border-radius:12px; box-shadow:var(--shell-shadow); overflow:hidden; }
.shell-kline-head { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--shell-panel);
  border-bottom:1px solid var(--shell-line); flex:0 0 auto; }
.shell-kline-title { font-weight:600; white-space:nowrap; color:var(--shell-text); }
.shell-kline-search-wrap { position:relative; flex:1 1 auto; min-width:120px; max-width:520px; }
.shell-kline-search-wrap input { width:100%; box-sizing:border-box; height:32px; padding:0 10px; border-radius:7px;
  border:1px solid var(--shell-line); background:var(--shell-panel-2); color:var(--shell-text); outline:none; }
.shell-kline-search-wrap input:focus { border-color:var(--shell-accent); }
.shell-kline-new { margin-left:auto; color:#8fc7ff; text-decoration:none; font-size:12px; white-space:nowrap; }
.shell-kline-new:hover { text-decoration:underline; }
.shell-kline-close { width:32px; height:32px; border:1px solid var(--shell-line); border-radius:7px;
  background:var(--shell-panel-2); color:var(--shell-text); cursor:pointer; font-size:18px; line-height:1; }
.shell-kline-frame { width:100%; flex:1 1 auto; border:0; background:var(--shell-bg); }
body.shell-embed .app { padding:0 !important; }
body.shell-embed .app > header { display:none !important; }
body.shell-embed main { padding-top:8px; }
.shell-kline-suggest { position:absolute; left:0; right:0; top:37px; z-index:5; display:none; max-height:300px; overflow:auto;
  background:var(--shell-panel); border:1px solid #33485b; border-radius:8px; box-shadow:var(--shell-shadow); padding:5px; }
.shell-kline-suggest.is-open { display:block; }
.shell-kline-item { display:flex; align-items:baseline; gap:8px; width:100%; padding:8px 9px; border:0; border-radius:6px;
  background:transparent; color:var(--shell-text); text-align:left; cursor:pointer; }
.shell-kline-item:hover { background:#1a2d3a; }
.shell-kline-item b { font-weight:600; }
.shell-kline-item span { color:var(--shell-muted); font-size:12px; }
.shell-kline-empty { padding:10px; color:var(--shell-muted); font-size:12px; }

/* 通用 iframe 弹窗（AshareIframeModal）：任意页面原地弹出一个内嵌页，避免来回跳转 */
.shell-iframe-backdrop { position:fixed; inset:0; z-index:1250; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.68); padding:18px; }
.shell-iframe-backdrop.is-open { display:flex; }
.shell-iframe-dialog { width:min(1280px,100%); height:min(900px,94vh); display:flex; flex-direction:column;
  background:var(--shell-bg); border:1px solid #33485b; border-radius:12px; box-shadow:var(--shell-shadow); overflow:hidden; }
.shell-iframe-head { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--shell-panel);
  border-bottom:1px solid var(--shell-line); flex:0 0 auto; }
.shell-iframe-title { font-weight:600; color:var(--shell-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shell-iframe-new { margin-left:auto; color:#8fc7ff; text-decoration:none; font-size:12px; white-space:nowrap; }
.shell-iframe-new:hover { text-decoration:underline; }
.shell-iframe-close { width:32px; height:32px; border:1px solid var(--shell-line); border-radius:7px;
  background:var(--shell-panel-2); color:var(--shell-text); cursor:pointer; font-size:18px; line-height:1; }
.shell-iframe-frame { width:100%; flex:1 1 auto; border:0; background:var(--shell-bg); }
@media (max-width: 640px) {
  .shell-iframe-backdrop { padding:0; }
  .shell-iframe-dialog { width:100%; height:100vh; border-radius:0; border:0; }
}

@media (max-width: 640px) {
  .shell-kline-backdrop { padding:0; }
  .shell-kline-dialog { width:100%; height:100vh; border-radius:0; border:0; }
  .shell-kline-head { flex-wrap:wrap; gap:7px; }
  .shell-kline-search-wrap { order:3; flex-basis:100%; max-width:none; }
  .shell-kline-title { flex:1; }
}

/* ── 「?」说明浮层（详见 src/explain.js）───────────────────────────── */
.explain-btn {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-left: 6px; padding: 0;
  border: 1px solid var(--shell-line); border-radius: 50%;
  background: var(--shell-panel); color: var(--shell-muted);
  font: 600 12px/1 system-ui, sans-serif; cursor: help;
  vertical-align: middle; user-select: none;
}
.explain-btn:hover { border-color: var(--shell-accent); color: var(--shell-text); }
.explain-btn[aria-expanded="true"] { border-color: var(--shell-accent); color: var(--shell-text); background: #1c2a3a; }
.explain-source { display: none !important; }
.explain-pop {
  position: absolute; z-index: 2000;
  background: var(--shell-panel); color: var(--shell-text);
  border: 1px solid #33485b; border-radius: 10px;
  box-shadow: var(--shell-shadow); padding: 0;
  font-size: 13px; line-height: 1.6;
  max-height: min(70vh, 620px); display: flex; flex-direction: column;
}
.explain-pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--shell-line);
  font-weight: 700; font-size: 13px; position: sticky; top: 0;
  background: var(--shell-panel); border-radius: 10px 10px 0 0;
}
.explain-pop-close {
  border: 0; background: transparent; color: var(--shell-muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.explain-pop-close:hover { color: var(--shell-text); }
.explain-pop-body { padding: 12px; overflow: auto; }
.explain-pop-body :is(h2, h3, h4) { font-size: 13px; margin: 8px 0 4px; }
.explain-pop-body p { margin: 6px 0; }
.explain-pop-body br { line-height: 1.8; }
.explain-pop-body code { background: #0e161d; padding: 1px 4px; border-radius: 4px; font-size: 12px; }
.explain-pop-body b { color: #fff; }
.explain-pop-body .muted { color: var(--shell-muted); }
.explain-pop-body table { border-collapse: collapse; margin: 6px 0; }
.explain-pop-body th, .explain-pop-body td { border: 1px solid var(--shell-line); padding: 4px 8px; text-align: left; font-size: 12px; }

/* ── 通用子 tab（多块内容竖向堆叠的页面，用一层 tab 分组显示）─────────
   一份样式全站复用，行为见 src/shell.js 的 AshareSubtabs。
   用法：
     <div class="subtabs" data-subtabs>
       <button type="button" class="subtab on" data-subtab="a">A</button>
       <button type="button" class="subtab" data-subtab="b">B</button>
     </div>
     <div class="subview" data-subview="a">…</div>
     <div class="subview hidden" data-subview="b">…</div> */
.subtabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px;
           border-bottom:1px solid var(--shell-line); padding-bottom:8px; }
.subtab { background:var(--shell-panel-2); color:var(--shell-text);
          border:1px solid var(--shell-line); border-radius:6px 6px 0 0;
          padding:6px 14px; font-size:13px; cursor:pointer; line-height:1.2; }
.subtab:hover { border-color:#3f7d5f; }
.subtab.on { background:#1d3a2c; border-color:#3f7d5f; color:#c8f5d9; font-weight:600; }
.subview { min-height:40px; }
.subview.hidden { display:none !important; }