@import url('design-tokens.css');
/* trade_guide 前端公共样式 —— Nova Terminal 设计系统（红涨绿跌 / 暗浅主题，变量统一来自 design-tokens.css） */
* { box-sizing:border-box; }
/* 固定垂直滚动条占位：多页切换时主体靠 JS 异步加载，首屏矮(无滚动条、视口满宽)→数据回来变高(出现滚动条、
   可用宽减 15px)，会让 margin:auto 居中的 .wrap 左右晃动(先右后左)。scrollbar-gutter:stable 让滚动条
   gutter 常驻、可用宽度恒定即根治；overflow-y 须非 visible 该属性才生效。 */
html { overflow-y:auto; scrollbar-gutter:stable; }
body { margin:0; font-family:-apple-system,"Segoe UI",Roboto,"Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.6; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

/* 顶栏（品牌标 + 分段式导航 + 图标按钮簇；admin 端由 admin.css 覆写为壳内顶栏） */
.topbar { display:flex; align-items:center; gap:14px; padding:10px 20px; min-height:48px;
  background:var(--panel); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
  box-shadow:0 1px 2px rgba(16,24,40,.04); }
.topbar .brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:15.5px;
  letter-spacing:.2px; white-space:nowrap; }
/* 品牌标为链接时（顶栏 logo 点击回看盘页）去掉下划线并继承文字色 */
.topbar a.brand { color:inherit; text-decoration:none; }
/* 品牌标：与登录/注册页 .logo 同语言（primary 渐变圆角方块） */
.topbar .brand .mark { width:24px; height:24px; border-radius:8px; background:var(--primary-grad);
  color:var(--primary-text); font-size:13px; line-height:1; flex:none;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.topbar .spacer { flex:0 0 auto; }
/* 用户页顶栏三列定宽（左右各 1fr / 中间 auto）：导航药丸恒定居中于视口，跨页面位置完全一致。
   原先靠 flex + margin:auto 在「剩余空间」里居中，会随右侧按钮簇宽度、以及顶栏所处容器宽度漂移
   （历史坑：个别用户页把 #topbar 放进了限宽 .wrap，且其加载的 admin.css 里 .topbar .spacer{flex:1} 会再挤一次）。 */
.topbar-user { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.topbar-user .brand { justify-self:start; min-width:0; }
.topbar-user .nav { justify-self:center; }
.topbar-user .tb-actions { justify-self:end; display:inline-flex; align-items:center; gap:10px; }
/* 顶栏占位容器（用户端导航页）：顶栏内容在「解析期」同步注入（common.js 在 <head>，占位 div 后紧跟内联脚本），
   首屏即成型；此处再兜底一层样式，让占位与真实顶栏同底色，即使注入极端延迟也不会出现「空白带→菜单条」的跳变。
   注意：min-height 必须加在 #topbar 外层占位上；加在内层 .topbar 无效——内层首屏并不存在。
   底边框不搬到占位上：内层 .topbar 是 position:sticky，滚动吸顶时靠自身 border-bottom 保分割线，搬走会丢线。 */
#topbar.topbar-host { min-height: 58px; background: var(--panel); }
/* 分段式导航：浅色轨道 + 当前页浮起药丸（替代原纯文字仅变色的呆板观感） */
.topbar .nav { display:inline-flex; align-items:center; gap:2px; padding:3px; min-width:0;
  margin:0 auto;
  border:1px solid var(--border); border-radius:11px;
  background:color-mix(in srgb, var(--bg) 65%, transparent);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.topbar .nav::-webkit-scrollbar { display:none; }
.topbar .nav a { margin:0; padding:6px 13px; border-radius:8px; font-size:13.5px; line-height:1.35;
  color:var(--muted); white-space:nowrap; transition:background .15s ease, color .15s ease; }
.topbar .nav a:hover { background:color-mix(in srgb, var(--primary) 10%, transparent);
  color:var(--primary); text-decoration:none; }
.topbar .nav a.active { background:var(--panel); color:var(--primary); font-weight:600;
  box-shadow:0 1px 2px rgba(16,24,40,.10); }
[data-theme="dark"] .topbar .nav a.active { background:color-mix(in srgb, var(--primary) 20%, transparent);
  box-shadow:none; }
/* 移动端导航下拉触发按钮（2026-10-12）：桌面端隐藏（药丸导航承担），仅 ≤760px 显示 */
.topbar .nav-toggle { display:none; }
/* 窄屏回退：三列定宽在手机上会把导航压扁，改回流式布局 + 导航收为「当前页名 ▾」下拉菜单 */
@media (max-width:760px) {
  .topbar-user { display:flex; gap:10px; padding:10px 12px; }
  .topbar-user .brand [data-sys-name] { display:none; }
  /* 移动端：导航由横向滑动药丸改为下拉面板（去除左右滑动切换） */
  .topbar-user .nav-toggle { display:inline-flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0;
    margin-left:4px; padding:7px 12px; border:1px solid var(--border); border-radius:10px;
    background:color-mix(in srgb, var(--bg) 65%, transparent); color:var(--text);
    font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; }
  .topbar-user .nav-toggle svg { flex:none; }
  .topbar-user .nav-toggle .nav-toggle-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-user .nav-toggle .caret { margin-left:auto; font-size:10px; color:var(--muted); }
  .topbar-user .nav-toggle[aria-expanded="true"] { border-color:var(--primary); color:var(--primary); }
  /* 下拉面板：绝对定位于顶栏下方、满宽卡片，纵向铺开全部导航项 */
  .topbar-user .nav { display:none; position:absolute; top:calc(100% + 6px); left:10px; right:10px; z-index:50;
    flex-direction:column; align-items:stretch; gap:2px; padding:6px; margin:0; border:1px solid var(--border);
    border-radius:12px; box-shadow:var(--shadow-md); background:var(--panel); overflow:visible; }
  .topbar-user .nav.open { display:flex; }
  .topbar-user .nav a { text-align:left; padding:10px 12px; border-radius:8px; font-size:14px; white-space:nowrap; }
  .topbar-user .nav a.active { background:color-mix(in srgb, var(--primary) 12%, transparent);
    color:var(--primary); box-shadow:none; }
}

/* 全局滚动条主题化（红涨绿跌设计系统，明暗自动反色）：避免暗色下刺眼的白条与整体风格割裂 */
* { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--border); border-radius:999px; border:2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* 容器 */
.wrap { max-width:1000px; margin:20px auto; padding:0 20px; } /* 与看板(board.css .wrap)宽度保持一致：1000px */
/* 风险回报比 R 角标：看盘/持仓买入区同行显示（与报表「风险回报比 R」同源，无量纲倍数） */
.r-tag { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:12px; font-weight:700; color:var(--c-warn); background:color-mix(in srgb, var(--c-warn) 14%, transparent); vertical-align:middle; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; margin-bottom:18px; }
.panel h2 { margin:0 0 14px; font-size:16px; }

/* 表单 */
label { display:block; margin:8px 0 4px; color:var(--muted); font-size:13px; }
input, select, textarea { width:100%; padding:8px 10px; border:1px solid var(--border);
  border-radius:8px; background:var(--bg); color:var(--text); font-size:14px; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.row > div { flex:1; min-width:160px; }

/* 按钮 */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:none;
  border-radius:8px; background:var(--primary); color:var(--primary-text); cursor:pointer;
  font-size:14px; }
.btn:hover { opacity:.9; }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn.danger { background:var(--danger); }
.btn.sm { padding:4px 10px; font-size:13px; }

/* 表格 */
table { width:100%; border-collapse:collapse; margin-top:8px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
th { color:var(--muted); font-weight:600; font-size:13px; }
tbody tr:hover { background:color-mix(in srgb, var(--primary) 6%, transparent); }

/* 涨跌着色（红涨绿跌，恒定跨主题） */
.up { color:var(--up); font-weight:600; }
.down { color:var(--down); font-weight:600; }
.flat { color:var(--flat); }

.badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px;
  background:color-mix(in srgb, var(--primary) 15%, transparent); color:var(--primary); }
/* 状态徽标变体（红涨绿跌铁律：up=涨/利空? 此处 up=建仓类动作，down=减仓/清仓类动作；颜色仅做语义区分） */
.badge.up { background:color-mix(in srgb, var(--up) 14%, transparent); color:var(--up); }
.badge.down { background:color-mix(in srgb, var(--down) 14%, transparent); color:var(--down); }
.badge.off { background:color-mix(in srgb, var(--text-3) 14%, transparent); color:var(--text-3); }
/* 顶栏「消息中心」导航未读徽标：红色胶囊，内联于标签右侧，与导航药丸同线；
   0 时由 JS 置 hidden 隐藏。红=未读提示（消息/通知语义，非涨跌），danger 令牌恒跨主题。 */
.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px;
  margin-left:5px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff;
  font-size:11px; font-weight:700; line-height:1; vertical-align:middle; }
/* 关键：作者样式 .nav-badge{display:inline-flex} 会覆盖 UA 的 [hidden]{display:none}，
   导致 count=0 时仍显示「0」；显式提权让 hidden 重新生效（无未读即不显示徽标）。 */
.nav-badge[hidden] { display:none; }
.msg { padding:8px 12px; border-radius:8px; margin:10px 0; font-size:13px; }
.msg.err { background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); }
.msg.ok { background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok); }
.muted { color:var(--muted); font-size:13px; }
.theme-toggle { cursor:pointer; border:1px solid var(--border); background:transparent;
  color:var(--text); border-radius:9px; width:34px; height:34px; padding:0; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease, background .15s ease; }
.theme-toggle:hover { border-color:var(--primary); color:var(--primary);
  background:color-mix(in srgb, var(--primary) 8%, transparent); }
.theme-toggle .ic-sun { display:none; }
[data-theme="dark"] .theme-toggle .ic-sun { display:block; }
[data-theme="dark"] .theme-toggle .ic-moon { display:none; }
/* 用户设置齿轮 + 下拉菜单（替换原「退出」按钮） */
.icon-btn { cursor:pointer; border:1px solid var(--border); background:transparent;
  color:var(--text); border-radius:9px; width:34px; height:34px; padding:0; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease, background .15s ease; }
.icon-btn:hover { border-color:var(--primary); color:var(--primary);
  background:color-mix(in srgb, var(--primary) 8%, transparent); }
.user-menu-wrap { position:relative; display:inline-flex; }
.user-menu { position:absolute; top:calc(100% + 8px); right:0; min-width:140px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18); padding:6px; z-index:20; }
.user-menu[hidden] { display:none; }
.user-menu-item { display:block; width:100%; text-align:left; padding:9px 12px; border:none;
  background:transparent; color:var(--text); font-size:14px; border-radius:8px; cursor:pointer; }
.user-menu-item:hover { background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary); }
/* 齿轮菜单内的「通知设置」是页面跳转链接（<a>），复用 .user-menu-item 外观但须去下划线 */
.user-menu a.user-menu-item { text-decoration:none; cursor:pointer; }
.user-menu a.user-menu-item:hover { text-decoration:none; color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, transparent); }

/* 修改密码弹窗（令牌化，随主题） */
.pwd-mask { position:fixed; inset:0; background:rgba(16,24,40,.5); display:none;
  align-items:center; justify-content:center; z-index:9000; padding:16px;
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
.pwd-mask.open { display:flex; }
.pwd-modal { width:100%; max-width:420px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 16px 48px rgba(0,0,0,.28); overflow:hidden; animation:pwdIn .16s ease; }
@keyframes pwdIn { from { opacity:0; transform:translateY(-8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.pwd-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.pwd-title { font-size:16px; font-weight:700; color:var(--text); }
.pwd-close { border:none; background:transparent; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; padding:0 4px; }
.pwd-close:hover { color:var(--text); }
.pwd-body { padding:16px 18px 18px; }
.pwd-field { display:block; margin:12px 0 0; }
.pwd-field > span { display:block; margin-bottom:4px; color:var(--muted); font-size:13px; }
.pwd-msg { min-height:18px; margin-top:10px; font-size:13px; }
.pwd-msg.err { color:var(--danger); }
.pwd-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.pwd-ok { color:var(--ok); font-size:14px; line-height:1.7; margin:8px 0; }

/* 交易费率弹窗（齿轮菜单全局可调用，令牌化随主题） */
.fee-mask { position:fixed; inset:0; background:rgba(16,24,40,.5); display:none;
  align-items:center; justify-content:center; z-index:9000; padding:16px;
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
.fee-mask.open { display:flex; }
.fee-modal { width:100%; max-width:560px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 16px 48px rgba(0,0,0,.28); overflow:hidden; animation:pwdIn .16s ease; }
.fee-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.fee-title { font-size:16px; font-weight:700; color:var(--text); }
.fee-close { border:none; background:transparent; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; padding:0 4px; }
.fee-close:hover { color:var(--text); }
.fee-body { padding:16px 18px 18px; }
.fee-field { display:block; margin:12px 0 0; }
.fee-field > span { display:block; margin-bottom:4px; color:var(--muted); font-size:13px; }
.fee-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.fee-preview { font-size:12.5px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:9px 11px; margin-top:12px; color:var(--text); line-height:1.6; }

/* 交易录入「税费计入成本」开关（每笔自选是否计税费，默认计入）
   注：选择器带 .form-row 提特异性——页面内 <style> 的 .form-row{flex-direction:column}
   与单类同为特异性 10，靠页面后置生效会把本行掰回竖排，故此处用 (0,2,0) 压过它。 */
.form-row.fee-opt {
  flex-direction: row; justify-content: space-between; align-items: center; gap: 12px;
  margin: 14px 0 0; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.form-row.fee-opt .fee-opt-label {
  display: flex; flex-direction: column; gap: 1px; margin: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.form-row.fee-opt .fee-opt-desc { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.fee-switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0; flex: 0 0 auto; cursor: pointer; }
.fee-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.fee-switch-track { position: absolute; inset: 0; border-radius: 12px; background: var(--border); transition: background .2s ease; }
.fee-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.fee-switch input:checked + .fee-switch-track { background: var(--primary); }
.fee-switch input:checked + .fee-switch-track::after { transform: translateX(20px); }

/* 持仓排序 · 批量编辑弹窗（参考通达信 App 批量编辑：拖动 + ↑↓；令牌化随主题，复用 pwd/fee 弹窗骨架） */
.sort-mask { position:fixed; inset:0; background:rgba(16,24,40,.5); display:none;
  align-items:center; justify-content:center; z-index:9000; padding:16px;
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
.sort-mask.open { display:flex; }
.sort-modal { width:100%; max-width:440px; max-height:82vh; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 16px 48px rgba(0,0,0,.28); overflow:hidden; animation:pwdIn .16s ease; }
.sort-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.sort-title { font-size:16px; font-weight:700; color:var(--text); }
.sort-close { border:none; background:transparent; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; padding:0 4px; }
.sort-close:hover { color:var(--text); }
.sort-sub { padding:8px 18px 0; font-size:12.5px; color:var(--muted); }
.sort-body { flex:1; overflow-y:auto; padding:8px 12px; margin:6px 0; }
.sort-loading { padding:24px 0; text-align:center; color:var(--muted); font-size:13px; }
.sort-item { display:flex; align-items:center; gap:10px; padding:9px 10px; margin:4px 4px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px; cursor:grab; user-select:none; }
.sort-item.dragging { display:none; }
.sort-item.drag-over { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 25%,transparent); }
.sort-item.top { border-color:color-mix(in srgb,var(--primary) 40%,var(--border)); }
.sort-grip { color:var(--muted); font-size:16px; cursor:grab; flex:none; touch-action:none; }
.sort-placeholder { border:1px dashed var(--primary); border-radius:10px; background:color-mix(in srgb,var(--primary) 8%,transparent); }
.sort-ghost { position:fixed; z-index:9999; pointer-events:none; opacity:.92; box-shadow:0 8px 24px rgba(16,24,40,.22); border-radius:10px; background:var(--bg); }
.sort-idx { width:20px; text-align:center; color:var(--muted); font-size:12px; flex:none; }
.sort-name { font-weight:600; color:var(--text); font-size:14px; }
.sort-code { color:var(--muted); font-size:12px; }
.sort-badge { margin-left:6px; font-size:11px; padding:1px 7px; border-radius:999px; flex:none; }
.sort-badge.hold { color:var(--up); border:1px solid var(--up); background:transparent; }
.sort-badge.watch { color:var(--c-text-2); background:var(--surface-2); border:1px solid var(--c-border); }
.sort-move { margin-left:auto; display:inline-flex; gap:4px; flex:none; }
.sort-move button { width:26px; height:26px; border:1px solid var(--border); background:var(--panel);
  color:var(--text); border-radius:7px; cursor:pointer; font-size:14px; line-height:1; }
.sort-move button:hover:not(:disabled) { border-color:var(--primary); color:var(--primary); }
.sort-move button:disabled { opacity:.35; cursor:not-allowed; }
.sort-foot { display:flex; justify-content:flex-end; gap:10px; padding:12px 18px; border-top:1px solid var(--border); }
/* 轻量 toast（全局即时反馈，与 pwd/fee 弹窗配套） */
.tg-toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(8px);
  background:var(--text); color:var(--panel); padding:9px 16px; border-radius:10px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:9500; }
.tg-toast.show { opacity:.95; transform:translateX(-50%) translateY(0); }

.hidden { display:none; }