/* =========================================================================== 察盘 ChaPan · 设计系统 --------------------------------------------------------------------------- 一处定义，全站共用。以前每个模板各写一份 :root/.box/.section-title， 字号散落 13.5/12.5/11.5px，导致页面间间距颜色微妙对不齐——这个文件解决它。 两套密度（Colin 定：工具密、阅读阳）： - 默认 = 阅读态（落地页、六层报告等长文）：大留白、大字，apple.com 美学 - .dense = 工具态（看盘表格、盯盘）：紧凑高密度，一屏看得完 27 只持仓 桌面为主，手机可看（断点 900/600）。 =========================================================================== */ :root{ /* ---- 表面与层次（越往上越亮）---- */ --bg-base:#0F131A; /* 页面底 */ --bg-surface:#171D26; /* 卡片 */ --bg-raised:#1F2733; /* 卡片内嵌/输入框 */ --bg-overlay:#232C39; /* 浮层/抽屉 */ --bg-hover:rgba(255,255,255,.04); /* ---- 描边 ---- */ --border-subtle:#28313D; --border-strong:#3A4553; /* ---- 文字 ---- */ --text-primary:#ECEAE3; --text-secondary:#9AA3B0; --text-tertiary:#6B7482; /* ---- 品牌与语义 ---- */ --accent:#4FA88F; /* 玉色，主强调 */ --accent-dim:#2F5C50; --accent-fg:#7FC9B2; --gold:#C9A227; /* AI 标记专用 */ --gold-dim:rgba(201,162,39,.14); /* ---- 涨跌（中国习惯：红涨绿跌）---- */ --up:#E45A3C; --up-dim:rgba(228,90,60,.14); --down:#4FA88F; --down-dim:rgba(79,168,143,.14); --flat:var(--text-tertiary); /* ---- 状态 ---- */ --warn:#C9A227; --danger:#E45A3C; --ok:#4FA88F; /* ---- 字阶（Apple 式层级）---- */ --fs-display:40px; --fs-title1:28px; --fs-title2:21px; --fs-title3:17px; --fs-body:15px; --fs-callout:13.5px; --fs-caption:12px; --fs-micro:11px; /* ---- 间距（8pt 栅格）---- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; /* ---- 圆角 ---- */ --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px; /* ---- 阴影与动效（Apple 的缓动曲线）---- */ --shadow-md:0 4px 16px rgba(0,0,0,.3); --shadow-lg:0 16px 48px rgba(0,0,0,.45); --ease:cubic-bezier(.32,.72,0,1); --dur-fast:.15s; --dur:.28s; --dur-slow:.44s; /* ---- 布局 ---- */ --nav-h:52px; --page-max:1120px; --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Noto Sans SC",system-ui,sans-serif; --font-mono:"SF Mono","JetBrains Mono","Roboto Mono",ui-monospace,monospace; /* ---- 旧配色令牌（独立页面用的 --bg-0/--ink/--jade… 方案）---- 14 个独立页面（index/login/real_stock/real_monitor…）历史上各自内联了一份 :root{--bg-0…}，命名和上面的设计系统不一样。为了「一处控制全站黑白切换」， 这里把这套旧令牌也收进中央：暗色值作为兜底，浅色由下面 [data-theme=light] 统一覆盖。 各页面自己内联的 :root 仍会赢暗色（同权重、在后），所以暗色渲染零改动； 浅色时 :root[data-theme=light]（权重更高）统一接管，无需逐页重写调色板。 */ --bg-0:#12161D; --bg-1:#1A2029; --bg-2:#212836; --line:#333B49; --ink:#E8E6DF; --ink-dim:#8B93A1; --jade:#4FA88F; --jade-dim:#325C51; --seal:#A8412F; --red:#D8593F; } /* =========================================================================== 浅色（白）主题 —— 全站黑白切换的唯一开关 --------------------------------------------------------------------------- 在 上加 data-theme="light" 即整站转白；去掉即回到默认暗色。 同时覆盖两套令牌（设计系统 + 旧独立页方案），所以无论页面用哪套变量都能变白。 选择器 :root[data-theme=light] 权重(0,2,0) 高于各页内联的 :root(0,1,0)， 因此即便独立页把 --bg-0 内联成暗色，浅色态这里也能稳定覆盖。 =========================================================================== */ :root[data-theme="light"]{ /* —— 设计系统令牌 —— */ --bg-base:#F4F2EC; /* 暖白纸面，呼应暖色墨 */ --bg-surface:#FFFFFF; --bg-raised:#EEECE4; --bg-overlay:#FFFFFF; --bg-hover:rgba(0,0,0,.045); --border-subtle:#E4E1D7; --border-strong:#CCC7B9; --text-primary:#20242C; --text-secondary:#535B68; --text-tertiary:#8A929E; --accent:#2F7D68; /* 玉色在白底压深，保证小字对比 */ --accent-dim:#D6E8E1; --accent-fg:#2F7D68; --gold:#977818; /* 金在白底压深才读得清 */ --gold-dim:rgba(151,120,24,.14); --up:#D8452A; /* 中国习惯不变：红涨绿跌 */ --up-dim:rgba(216,69,42,.12); --down:#2E8B73; --down-dim:rgba(46,139,115,.14); --warn:#977818; --danger:#D8452A; --ok:#2E8B73; --shadow-md:0 4px 16px rgba(23,30,40,.10); --shadow-lg:0 16px 48px rgba(23,30,40,.16); /* —— 旧独立页令牌 —— */ --bg-0:#F4F2EC; --bg-1:#FFFFFF; --bg-2:#EEECE4; --line:#E4E1D7; --ink:#20242C; --ink-dim:#535B68; --jade:#2F7D68; --jade-dim:#D6E8E1; --seal:#A8412F; --red:#D8452A; } /* 顶栏毛玻璃底色写死了暗色，浅色态要换成白玻璃 */ :root[data-theme="light"] .app-nav{background:rgba(255,255,255,.72);} /* btn-primary 暗色靠「浅字压深底」，浅色态 accent-dim 变成浅底会读不清——改成实心玉底白字 */ :root[data-theme="light"] .btn-primary{background:var(--accent); color:#fff;} :root[data-theme="light"] .btn-primary:hover{background:#266b58;} /* =========================================================================== 主题切换按钮 —— 全站统一在右上角 --------------------------------------------------------------------------- 有导航条的页面：按钮放进导航右侧（.theme-btn），跟其他顶栏元素一排。 没有导航条的页面（登录/注册/等待/出错/纪要）：_theme.html 的脚本注入一个 固定在视口右上角的 .theme-toggle 作为兜底，位置和有导航时保持一致。 =========================================================================== */ .theme-btn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r-sm); font-size:15px; line-height:1; background:transparent; color:var(--text-tertiary); border:1px solid transparent; cursor:pointer; transition:color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); } .theme-btn:hover{color:var(--text-primary); background:var(--bg-hover); border-color:var(--border-subtle);} /* 无导航页面的兜底：固定右上角 */ .theme-toggle{ position:fixed; top:16px; right:16px; z-index:400; width:38px; height:38px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--border-strong); box-shadow:var(--shadow-md); cursor:pointer; opacity:.8; transition:opacity var(--dur-fast), transform var(--dur-fast), background var(--dur-fast); } .theme-toggle:hover{opacity:1;} .theme-toggle:active{transform:scale(.94);} /* ===== 重置 ===== */ *{box-sizing:border-box;margin:0;padding:0;} html{-webkit-text-size-adjust:100%;} body{ background:var(--bg-base); color:var(--text-primary); font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:inherit; text-decoration:none;} button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit;} button{cursor:pointer; border:none; background:none;} :focus-visible{outline:2px solid var(--accent); outline-offset:2px;} /* 数字一律等宽+表格数字对齐——金融界面对齐是专业感的关键 */ .mono,.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;} /* ===== App 外壳 ===== */ .app-nav{ position:sticky; top:0; z-index:100; height:var(--nav-h); display:flex; align-items:center; gap:var(--sp-5); padding:0 var(--sp-5); background:rgba(15,19,26,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--border-subtle); } .app-nav .brand{font-size:var(--fs-callout); font-weight:700; letter-spacing:.06em; color:var(--text-primary); display:inline-flex; align-items:center; gap:8px; text-decoration:none;} .app-nav .brand em{font-style:normal; color:var(--accent);} /* 「察」印：字形轮廓 SVG，不是图片——内联才能吃 currentColor，深浅主题各自的朱色跟着换。 导航条高度有限，22px 是让印框边线在 1px 设备上不糊掉的最小尺寸。 */ .app-nav .brand .seal{width:22px; height:22px; flex:none; line-height:0; color:var(--seal);} .app-nav .brand .seal svg{display:block; width:100%; height:100%;} .app-nav .brand .brand-word{white-space:nowrap;} /* x-pan 品牌头（xp_brand=true 时用，见 _nav.html）——logo 是定稿位图，跟「察」印 同样卡在 22px，视觉高度对齐，不因为一个是 SVG 一个是 PNG 就长得不一样高。 */ .app-nav .brand .xp-logo{width:22px; height:22px; flex:none; display:block; object-fit:contain;} /* 汉堡按钮——桌面隐藏，手机断点内显示，只收纳 .nav-links（看盘/分析/…这些页面入口）。 黑白切换、告警铃铛、账号切换器、用户/退出（.nav-right）常驻标题栏，不进汉堡—— 这几个是「随时要用」的控件，藏进菜单反而不顺手。 */ .hamburger{ display:none; flex-direction:column; justify-content:center; align-items:stretch; gap:4px; width:32px; height:32px; padding:7px; margin:0; border-radius:var(--r-sm); background:transparent; border:1px solid transparent; flex-shrink:0; } .hamburger:hover{background:var(--bg-hover);} .hamburger span{display:block; height:2px; width:100%; background:var(--text-primary); border-radius:1px; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);} .hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);} .hamburger.open span:nth-child(2){opacity:0;} .hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} .nav-links{display:flex; gap:var(--sp-1); flex:1;} .nav-link{ padding:var(--sp-1) var(--sp-3); border-radius:var(--r-sm); font-size:var(--fs-callout); color:var(--text-secondary); transition:background var(--dur-fast), color var(--dur-fast); } .nav-link:hover{background:var(--bg-hover); color:var(--text-primary);} .nav-link.active{background:var(--bg-raised); color:var(--text-primary); font-weight:600;} .nav-link .dot{ display:inline-block; min-width:16px; padding:0 4px; margin-left:6px; background:var(--danger); color:#fff; border-radius:var(--r-full); font-size:var(--fs-micro); font-weight:700; text-align:center; line-height:16px; } .nav-right{display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-caption); color:var(--text-tertiary);} .nav-right a:hover{color:var(--text-primary);} /* 一级导航悬浮二级菜单——2026-07-24 把"看盘/总览/分析/选股/盯盘/数据/设置"最多7个 一级入口收进"看盘/分析/盯盘/设置"4个，其余折进对应一级项下面鼠标停留展开的 二级菜单。.nav-drop 包住"一级链接 + 二级菜单"，hover/focus-within 展开。 */ .nav-drop{position:relative; display:flex;} .nav-drop-menu{ display:none; flex-direction:column; gap:2px; position:absolute; top:100%; left:0; margin-top:2px; min-width:168px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:6px; box-shadow:var(--shadow-lg); z-index:220; } .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{display:flex;} .nav-drop-menu a{ padding:7px 10px; border-radius:var(--r-sm); font-size:var(--fs-caption); color:var(--text-secondary); white-space:nowrap; transition:background var(--dur-fast), color var(--dur-fast); } .nav-drop-menu a:hover{background:var(--bg-hover); color:var(--text-primary);} .nav-drop-menu a.active{color:var(--accent); font-weight:600;} .page{max-width:var(--page-max); margin:0 auto; padding:var(--sp-6) var(--sp-5) var(--sp-9);} .page-wide{max-width:none; padding-left:var(--sp-6); padding-right:var(--sp-6);} /* ===== 版式 ===== */ .page-head{margin-bottom:var(--sp-5);} .page-title{font-size:var(--fs-title1); font-weight:700; letter-spacing:-.01em;} .page-title .sub{font-size:var(--fs-caption); font-weight:400; color:var(--text-tertiary); margin-left:var(--sp-3);} .page-meta{font-size:var(--fs-caption); color:var(--text-tertiary);} .eyebrow{font-size:var(--fs-micro); color:var(--accent); letter-spacing:.16em; text-transform:uppercase; margin-bottom:var(--sp-2);} .section{margin-top:var(--sp-6);} .section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-3); gap:var(--sp-3);} .section-title{font-size:var(--fs-callout); font-weight:600; color:var(--accent); letter-spacing:.06em;} .hint{font-size:var(--fs-caption); color:var(--text-tertiary);} /* ===== 卡片 ===== */ .card{background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:var(--sp-5);} .card-tight{padding:var(--sp-4);} /* overflow:clip 而非 hidden——hidden 会让卡片变成滚动容器， 里面的 sticky 表头就会相对卡片自身定位（被 top 偏移量推到首行下面），而不是吸在视口顶部 */ .card-flush{padding:0; overflow:clip;} /* ===== 按钮 ===== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 14px; border-radius:var(--r-sm); font-size:var(--fs-callout); font-weight:500; background:var(--bg-raised); color:var(--text-primary); border:1px solid var(--border-subtle); transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); } .btn:hover{background:var(--bg-overlay); border-color:var(--border-strong);} .btn:active{transform:scale(.97);} .btn-primary{background:var(--accent-dim); border-color:transparent; color:var(--text-primary); font-weight:600;} .btn-primary:hover{background:#3a6f60;} .btn-ghost{background:transparent; border-color:transparent; color:var(--text-secondary);} .btn-ghost:hover{background:var(--bg-hover); color:var(--text-primary);} .btn-lg{padding:11px 26px; font-size:var(--fs-body); border-radius:var(--r-md);} .btn:disabled{opacity:.45; cursor:default; transform:none;} /* ===== 徽章 ===== */ .badge{display:inline-block; padding:2px 9px; border-radius:var(--r-full); font-size:var(--fs-micro); font-weight:600; white-space:nowrap;} .badge-up{background:var(--up-dim); color:var(--up);} .badge-down{background:var(--down-dim); color:var(--down);} .badge-neutral{background:var(--bg-raised); color:var(--text-secondary);} .badge-ai{background:var(--gold-dim); color:var(--gold);} .chip-ai{display:inline-block; font-size:var(--fs-micro); font-weight:700; color:var(--gold); border:1px solid var(--gold); border-radius:4px; padding:0 5px; margin-right:6px;} /* ===== 涨跌色 ===== */ .up{color:var(--up);} .down{color:var(--down);} .flat{color:var(--flat);} /* ===== 统计数值 ===== */ .stat-label{font-size:var(--fs-caption); color:var(--text-tertiary);} .stat-value{font-size:var(--fs-title2); font-weight:700; font-family:var(--font-mono); font-variant-numeric:tabular-nums;} .stat-grid{display:grid; gap:var(--sp-4);} /* ===== 表格（工具态，密）===== */ .table{width:100%; font-size:var(--fs-callout);} .thead{ display:grid; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-micro); color:var(--text-tertiary); font-weight:500; border-bottom:1px solid var(--border-subtle); position:sticky; top:var(--nav-h); z-index:10; background:var(--bg-surface); } .trow{ display:grid; gap:var(--sp-3); padding:var(--sp-3); border-bottom:1px solid var(--border-subtle); align-items:center; transition:background var(--dur-fast); } .trow:last-child{border-bottom:none;} .trow.clickable{cursor:pointer;} .trow.clickable:hover{background:var(--bg-hover);} .thead > *:not(:first-child),.trow > *:not(:first-child){text-align:right;} .thead > *{text-align:center;} .thead > *:first-child{text-align:left;} .sortable{cursor:pointer; user-select:none;} .sortable:hover{color:var(--text-primary);} .sort-arrow{display:inline-block; width:10px; font-size:9px; margin-left:2px;} /* 单元格内叠两行（主值+副值），右对齐 */ .cell-stack{display:flex; flex-direction:column; align-items:flex-end; line-height:1.22;} .cell-stack .sub{font-size:var(--fs-micro); color:var(--text-tertiary);} .cell-lead{display:flex; flex-direction:column; line-height:1.22;} .cell-lead .sub{font-size:var(--fs-micro); color:var(--text-tertiary);} /* ===== 表单 ===== */ .field{margin-bottom:var(--sp-4);} .field label{display:block; font-size:var(--fs-caption); color:var(--text-tertiary); margin-bottom:var(--sp-1);} .input,input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{ width:100%; background:var(--bg-raised); border:1px solid var(--border-subtle); color:var(--text-primary); padding:9px 12px; border-radius:var(--r-sm); transition:border-color var(--dur-fast); } .input:focus,input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent-dim);} textarea{resize:vertical; min-height:110px; line-height:1.6;} /* ===== 分段控件（Apple segmented control）===== */ .segmented{display:inline-flex; background:var(--bg-raised); border-radius:var(--r-sm); padding:2px; gap:2px;} .segmented a,.segmented button{ padding:5px 14px; border-radius:calc(var(--r-sm) - 1px); font-size:var(--fs-caption); color:var(--text-secondary); transition:background var(--dur-fast), color var(--dur-fast); } .segmented a.active,.segmented button.active{background:var(--bg-overlay); color:var(--text-primary); font-weight:600;} /* ===== 右侧抽屉（Colin 选的交互模型：点股票不离开当前页）===== */ .drawer-scrim{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease); backdrop-filter:blur(2px); } .drawer-scrim.open{opacity:1; pointer-events:auto;} .drawer{ position:fixed; top:0; right:0; bottom:0; z-index:201; width:min(460px,92vw); background:var(--bg-overlay); border-left:1px solid var(--border-strong); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform var(--dur) var(--ease); display:flex; flex-direction:column; } .drawer.open{transform:translateX(0);} .drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border-subtle); } .drawer-body{flex:1; overflow-y:auto; padding:var(--sp-5); -webkit-overflow-scrolling:touch;} .drawer-close{font-size:20px; color:var(--text-tertiary); line-height:1; padding:4px 8px; border-radius:var(--r-sm);} .drawer-close:hover{background:var(--bg-hover); color:var(--text-primary);} /* 手机上抽屉改为底部上滑（iOS sheet 手感） */ @media(max-width:600px){ .drawer{top:auto; left:0; width:100%; max-height:88vh; border-left:none; border-top:1px solid var(--border-strong); border-radius:var(--r-xl) var(--r-xl) 0 0; transform:translateY(100%);} .drawer.open{transform:translateY(0);} } /* ===== Toast 提示 ===== */ .toast-host{position:fixed; bottom:var(--sp-5); left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:var(--sp-2); align-items:center; pointer-events:none;} .toast{ background:var(--bg-overlay); border:1px solid var(--border-strong); color:var(--text-primary); padding:9px 18px; border-radius:var(--r-full); font-size:var(--fs-callout); box-shadow:var(--shadow-md); opacity:0; transform:translateY(8px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .toast.show{opacity:1; transform:translateY(0);} .toast.ok{border-color:var(--accent-dim);} .toast.err{border-color:var(--danger); color:var(--up);} /* ===== 空状态 / 加载骨架 ===== */ .empty-state{text-align:center; padding:var(--sp-8) var(--sp-5); color:var(--text-tertiary);} .empty-state .icon{font-size:34px; margin-bottom:var(--sp-3); opacity:.7;} .empty-state .title{font-size:var(--fs-title3); color:var(--text-secondary); margin-bottom:var(--sp-2);} .empty-state .desc{font-size:var(--fs-callout); max-width:420px; margin:0 auto var(--sp-4);} @keyframes shimmer{0%{background-position:-400px 0;}100%{background-position:400px 0;}} .skeleton{ background:linear-gradient(90deg,var(--bg-raised) 25%,var(--bg-overlay) 50%,var(--bg-raised) 75%); background-size:800px 100%; animation:shimmer 1.4s infinite linear; border-radius:var(--r-sm); height:1em; } /* ===== 提示条 ===== */ .banner{padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); font-size:var(--fs-callout); margin-bottom:var(--sp-4);} .banner-ok{background:var(--down-dim); color:var(--accent-fg);} .banner-warn{background:var(--gold-dim); color:var(--gold);} .banner-err{background:var(--up-dim); color:var(--up);} /* ===== 阅读态（长文/落地页，apple.com 美学）===== */ .prose{max-width:720px;} .prose h2{font-size:var(--fs-title1); font-weight:700; margin:var(--sp-7) 0 var(--sp-3); letter-spacing:-.01em;} .prose h3{font-size:var(--fs-title3); font-weight:600; margin:var(--sp-5) 0 var(--sp-2);} .prose p{font-size:var(--fs-body); color:var(--text-secondary); margin-bottom:var(--sp-3); line-height:1.75;} /* ===== 工具态：更密 ===== */ .dense{--fs-body:13.5px; --fs-callout:12.5px;} .dense .trow{padding:5px var(--sp-3);} .dense .card{padding:var(--sp-4);} .dense .section{margin-top:var(--sp-5);} /* ===== 滚动渐显（落地页用，Apple 式）===== */ .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease);} .reveal.in{opacity:1; transform:none;} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} *{animation-duration:.01ms !important; transition-duration:.01ms !important;} } /* ===== 响应式：桌面为主，手机可看 ===== */ @media(max-width:900px){ :root{--fs-display:30px; --fs-title1:23px;} .page{padding:var(--sp-5) var(--sp-4) var(--sp-8);} } /* ---- 手机导航：只把「看盘/分析/…」这排页面入口收进汉堡 ---- 黑白切换/告警/账号切换/用户退出（.nav-right）常驻标题栏，跟桌面一样一直可点； 标题栏放不下时允许换行（.app-nav 本身 flex-wrap），而不是把这些常用控件也藏起来。 .nav-links 收起时是绝对定位的下拉面板，展开位置以 .app-nav 实际渲染高度为准， 所以标题栏换不换行都不影响下拉面板的贴合位置。 */ @media(max-width:820px){ .app-nav{flex-wrap:wrap; height:auto; min-height:var(--nav-h); padding:var(--sp-2) var(--sp-4); row-gap:var(--sp-2); position:relative; overflow:visible;} .hamburger{display:flex;} .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex:none; flex-direction:column; gap:2px; max-height:calc(100vh - var(--nav-h)); overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--bg-surface); border-bottom:1px solid var(--border-subtle); box-shadow:var(--shadow-lg); padding:var(--sp-2) var(--sp-4) var(--sp-4); } .nav-links.open{display:flex;} .nav-link{padding:12px var(--sp-2); font-size:var(--fs-body);} .nav-right{margin-left:auto; gap:var(--sp-2); font-size:var(--fs-caption);} .nav-right .hide-sm{display:none;} /* 标题栏空间紧张，用户名照旧收起，只留退出 */ .acct-btn{padding:5px 8px; gap:4px;} /* 二级菜单在手机上没有 hover 这回事——降级成常显的缩进列表，跟一级链接一起 堆在收起面板里，不依赖鼠标停留。 */ .nav-drop{flex-direction:column;} .nav-drop-menu{ display:flex; position:static; margin-top:0; padding:0 0 4px var(--sp-4); background:none; border:none; box-shadow:none; } .nav-drop-menu a{padding:8px var(--sp-2); font-size:var(--fs-callout); color:var(--text-tertiary);} } @media(max-width:600px){ .thead{display:none;} /* 手机上表头隐藏，行改为堆叠 */ .trow{grid-template-columns:1fr auto !important; row-gap:2px; padding:var(--sp-3);} .trow > *:not(:first-child){text-align:right;} } /* ---- 券商账户切换器（顶栏，仅多账户时出现）---- */ .acct-switch{position:relative} .acct-btn{ display:flex; align-items:center; gap:6px; background:var(--bg-raised); border:1px solid var(--border-subtle); color:var(--text-primary); padding:5px 10px; border-radius:var(--r-sm); font-size:13px; cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast); } .acct-btn:hover{border-color:var(--border-strong); background:var(--bg-overlay)} .acct-btn .caret{font-size:10px; color:var(--text-tertiary)} .acct-menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:210px; z-index:60; background:var(--bg-raised); border:1px solid var(--border-subtle); border-radius:var(--r-md); box-shadow:var(--shadow-lg); overflow:hidden; } .acct-menu a{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 12px; font-size:13px; color:var(--text-primary); text-decoration:none; } .acct-menu a:hover{background:var(--bg-overlay)} .acct-menu a.on{color:var(--gold)} .acct-menu a.on::after{content:"✓"; font-size:11px} .acct-menu .muted{font-size:11px; font-family:var(--font-mono)} .acct-menu a.acct-add{justify-content:flex-start; gap:0; color:var(--text-secondary); border-top:1px solid var(--border-subtle); font-weight:600;} .acct-menu a.acct-add:hover{color:var(--text-primary)} /* ---- 导入：文件/截图上传区 ---- */ .upload-row{display:flex; gap:var(--sp-3); align-items:stretch; flex-wrap:wrap;} .drop{ flex:1 1 300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:22px 18px; cursor:pointer; text-align:center; background:var(--bg-raised); border:1.5px dashed var(--border-strong); border-radius:var(--r-md); transition:border-color var(--dur-fast), background var(--dur-fast); } .drop:hover, .drop.dragover{border-color:var(--accent); background:var(--bg-overlay);} .drop-icon{font-size:22px; line-height:1;} .drop-main{font-size:14px; font-weight:600; color:var(--text-primary);} .drop-sub{font-size:11px; color:var(--text-tertiary);} .drop-file{font-size:12px; color:var(--accent); font-family:var(--font-mono); margin-top:4px;} .drop-note{ flex:1 1 300px; font-size:12px; line-height:1.65; color:var(--text-secondary); background:var(--bg-raised); border:1px solid var(--border-subtle); border-left:3px solid var(--gold); border-radius:var(--r-sm); padding:14px 16px; } .or-line{ display:flex; align-items:center; gap:12px; margin:var(--sp-3) 0 var(--sp-2); color:var(--text-tertiary); font-size:11px; } .or-line::before, .or-line::after{content:""; flex:1; height:1px; background:var(--border-subtle);} /* ---- 补齐模板在用、此前没有定义的类 ---- 这些类散落在 onboarding / settings / settings_google_merge / real_account 里， 一直没样式。其中合并账号页几乎整页裸奔，而它恰恰是处理「没勾的账户会被归档」 这种不可逆决策的地方——最需要视觉层级清晰的页面最没样式。 */ .page-hd{margin-bottom:var(--sp-5);} .page-hd h1{font-size:var(--fs-title1); font-weight:700; letter-spacing:-.01em;} .page-hd .muted{margin-top:var(--sp-2); line-height:1.7;} .card-hd{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-3); padding:var(--sp-4) var(--sp-4) 0; } .card-hd h3{font-size:var(--fs-title3); font-weight:600;} .card-bd{padding:var(--sp-3) var(--sp-4) var(--sp-4);} /* 单选/多选项：整块可点，勾选框和说明文字左右分栏 */ .opt{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3); margin:var(--sp-2) 0; cursor:pointer; border:1px solid var(--border-subtle); border-radius:var(--r-sm); transition:border-color var(--dur-fast), background var(--dur-fast); } .opt:hover{border-color:var(--border-strong); background:var(--bg-hover);} .opt input{margin-top:3px; flex:none;} .opt p{margin-top:3px; line-height:1.6;} .btn-row{display:flex; gap:var(--sp-2); flex-wrap:wrap;} .btn-sm{padding:4px 10px; font-size:var(--fs-caption);} /* 紧凑表格：导入拒收明细、合并对比这类"读一眼就走"的场景 */ .tbl{width:100%; border-collapse:collapse;} .tbl th, .tbl td{ text-align:left; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border-subtle); vertical-align:top; } .tbl th{ font-size:var(--fs-micro); font-weight:600; color:var(--text-tertiary); letter-spacing:.04em; white-space:nowrap; } .tbl td{font-size:var(--fs-callout);} .tbl tr:last-child td{border-bottom:none;} .tbl .r, .tbl th.r{text-align:right;} .tbl-sm th, .tbl-sm td{padding:5px var(--sp-2); font-size:var(--fs-caption);} .c-up{color:var(--up);} .c-down{color:var(--down);} /* 表格数据行：可点击进详情，hover 有反馈 */ .datarow{cursor:pointer;} .datarow:hover{background:var(--bg-hover);} /* ---- 顶栏预警铃铛 ---- */ .bell{ position:relative; background:none; border:none; cursor:pointer; font-size:15px; line-height:1; padding:4px 6px; opacity:.55; transition:opacity var(--dur-fast); } .bell:hover{opacity:1;} .bell.has-alert{opacity:1; animation:bell-pulse 2.4s ease-in-out infinite;} @keyframes bell-pulse{0%,100%{transform:none}8%{transform:rotate(-11deg)}18%{transform:rotate(9deg)}28%{transform:none}} .bell-dot{ position:absolute; top:-1px; right:-1px; min-width:15px; height:15px; padding:0 3px; border-radius:var(--r-full); background:var(--up); color:#fff; font-size:10px; font-weight:700; line-height:15px; text-align:center; } .alert-item{padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border-subtle);} .alert-item:last-child{border-bottom:none;} .alert-item p{margin-top:3px; font-size:var(--fs-caption); line-height:1.6;} /* .muted 是全站用得最多的辅助文字类（30+ 处），却一直没有独立定义—— 只在 .acct-menu .muted / .page-hd .muted 这两个后代选择器里出现过， 其余地方全部继承主文字色，"弱化"的意图完全没实现。 */ .muted{color:var(--text-tertiary);} /* ---- 核对页：证券代码补录 ---- */ .fill-row{padding:var(--sp-3) 0; border-bottom:1px solid var(--border-subtle);} .fill-row:last-child{border-bottom:none;} .fill-head{display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-2);} .fill-ctl{display:flex; gap:var(--sp-2);} .fill-ctl input{ flex:1; padding:6px 10px; font-size:var(--fs-callout); background:var(--bg-raised); border:1px solid var(--border-subtle); border-radius:var(--r-sm); color:var(--text-primary); } .fill-ctl input:focus{outline:none; border-color:var(--accent);} .fill-results{margin-top:var(--sp-2);} .cand{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:6px 10px; margin-bottom:4px; font-size:var(--fs-caption); background:var(--bg-raised); border:1px solid var(--border-subtle); border-radius:var(--r-sm); } .cand:hover{border-color:var(--border-strong);} .cand .mono{font-family:var(--font-mono); color:var(--accent-fg);} .cand button{margin-left:auto;} /* ===== 察盘智能体：全局对话面板（2026-07-24，dock 改为真并排见下方修订）===== 两态：float（右下悬浮小窗，轻量伴随，浮层不挤压页面）／dock（靠右铺开，真正的并排—— Colin 2026-07-24 改口：不再是盖住页面的浮层+遮罩，而是页面让出对应宽度、两边同时可见可操作， 拖到 2/3 时对话就是主界面、数据退居一角。仅桌面生效——窄屏面板本就全屏，没有"并排"的空间）。 */ :root{ --copilot-width: 420px; /* dock/并排模式宽度，JS 拖拽后写回这个变量并存 localStorage */ } /* 并排让位：dock 模式打开时，导航条和页面主体往左让出面板的宽度，不是被盖住。 仅桌面生效——.page 的 max-width 居中布局只在宽屏才有 auto 边距可"挤"，窄屏本来就顶满， 而且窄屏面板已经是全屏覆盖（见本文件后面 @media(max-width:820px)），没有并排的意义。 */ @media(min-width:821px){ body.copilot-split-active .app-nav, body.copilot-split-active .page{ margin-right:var(--copilot-width); transition:margin var(--dur) var(--ease); } } .copilot-fab{ position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:262; width:52px; height:52px; border-radius:var(--r-full); background:var(--accent-dim); border:1px solid var(--border-strong); box-shadow:var(--shadow-lg); font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .copilot-fab:hover{transform:scale(1.06);} /* 面板已经打开时悬浮球完全没用了——面板自己有右上角×可以关，留着悬浮球只会跟 输入框/发送按钮重叠遮挡（实测截图正好盖住"发送"）。三态（悬浮/浮层覆盖/并排dock） 打开时 JS 都会给 fab 加同一个 is-open，所以这条规则天然覆盖全部打开态。 */ .copilot-fab.is-open{display:none;} .copilot-scrim{ position:fixed; inset:0; z-index:259; background:rgba(0,0,0,.42); opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease); backdrop-filter:blur(1px); } .copilot-scrim.open{opacity:1; pointer-events:auto;} /* dock 现在有两种布局可切换（Colin 2026-07-24 定，都要留着）：覆盖(cover)＝老的浮层+遮罩， 盖住页面；并排(split)＝页面让出空间，不遮罩。scrim 只在"覆盖"布局下才会被打开； float 模式和"并排"布局都不需要它。 */ .copilot-panel{ position:fixed; z-index:260; background:var(--bg-overlay); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); --copilot-msg-fs-scale:1; } .copilot-font-btn{font-size:13px; font-weight:700;} /* dock：贴右侧铺开，占据 top-to-bottom；宽度由 --copilot-width 控制，左边缘可拖拽 */ .copilot-panel.mode-dock{ top:0; right:0; bottom:0; width:var(--copilot-width); min-width:320px; max-width:82vw; border-left:1px solid var(--border-strong); transform:translateX(100%); opacity:1; } .copilot-panel.mode-dock.open{transform:translateX(0);} /* float：右下角悬浮卡片，固定尺寸，不可拖拽宽度 */ .copilot-panel.mode-float{ right:var(--sp-5); bottom:88px; top:auto; width:min(400px,92vw); height:min(600px,72vh); border-radius:var(--r-xl); border:1px solid var(--border-strong); transform:translateY(16px) scale(.97); opacity:0; pointer-events:none; } .copilot-panel.mode-float.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;} /* full：铺满整个视口，仿 ChatGPT/DeepSeek 的"整页对话"感——跟随当前主题的浅色底 （--bg-1，浅色主题下就是纯白），居中定宽阅读列，字号整体调大，AI 消息去掉气泡 变成纯文本块，讲究"看得清楚"而不是"面板感"（Colin 2026-07-31 要求）。 */ .copilot-panel.mode-full{ top:0; left:0; right:0; bottom:0; width:100%; height:100%; max-width:none; border-radius:0; border:none; background:var(--bg-1); transform:none; opacity:1; } .copilot-panel.mode-full.open{transform:none;} .copilot-panel.mode-full .copilot-resize, .copilot-panel.mode-full #copilotSplitBtn{display:none !important;} .copilot-panel.mode-full .copilot-head, .copilot-panel.mode-full .copilot-body, .copilot-panel.mode-full .copilot-input-row{ width:100%; max-width:840px; margin:0 auto; box-sizing:border-box; padding-left:28px; padding-right:28px; } .copilot-panel.mode-full .copilot-head{padding-top:var(--sp-4); padding-bottom:var(--sp-4);} .copilot-panel.mode-full .copilot-body{padding-top:var(--sp-6); padding-bottom:var(--sp-8); gap:var(--sp-5);} .copilot-panel.mode-full .copilot-empty{font-size:17px; line-height:1.8;} .copilot-panel.mode-full .copilot-msg{ max-width:100%; font-size:calc(17px * var(--copilot-msg-fs-scale, 1)); line-height:1.75; padding:0; border-radius:0; background:none; } .copilot-panel.mode-full .copilot-msg-user{ align-self:flex-end; max-width:78%; background:var(--bg-2); color:var(--text-primary); padding:11px 18px; border-radius:var(--r-lg); } .copilot-panel.mode-full .copilot-msg-ai{background:none; color:var(--text-primary);} .copilot-panel.mode-full .copilot-input-row{ padding-top:var(--sp-4); padding-bottom:var(--sp-6); border-top:none; } .copilot-panel.mode-full .copilot-input-wrap textarea{ font-size:16px; min-height:54px; padding:15px 46px 15px 18px; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); } .copilot-panel.mode-full #copilotSend{font-size:15px; padding:0 20px;} @media(max-width:860px){ .copilot-panel.mode-full .copilot-head, .copilot-panel.mode-full .copilot-body, .copilot-panel.mode-full .copilot-input-row{padding-left:16px; padding-right:16px;} } .copilot-resize{ display:none; position:absolute; left:-4px; top:0; bottom:0; width:8px; cursor:col-resize; z-index:1; } .copilot-panel.mode-dock .copilot-resize{display:block;} .copilot-resize:hover, .copilot-resize.dragging{background:var(--accent-dim); opacity:.5;} .copilot-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border-subtle); flex-shrink:0; } .copilot-head-actions{display:flex; align-items:center; gap:var(--sp-2);} .copilot-icon-btn{ font-size:15px; color:var(--text-tertiary); padding:4px 8px; border-radius:var(--r-sm); line-height:1; display:inline-flex; align-items:center; } .copilot-icon-btn:hover{background:var(--bg-hover); color:var(--text-primary);} .copilot-icon-btn.is-active{color:var(--accent); background:var(--bg-hover);} @keyframes copilot-mic-pulse{0%,100%{opacity:1;} 50%{opacity:.5;}} .copilot-title-wrap{display:flex; align-items:center; gap:4px; min-width:0;} .copilot-title-wrap strong{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; display:inline-block;} .copilot-title-edit{font-size:12px; opacity:.6;} .copilot-title-edit:hover{opacity:1;} /* 改名彩蛋（2026-07-24，Colin 要求"慢一点高一点大一点"调过一版）：标题跳一下＋短暂变金色 */ @keyframes copilotTitlePop{ 0%{transform:scale(1); color:var(--text-primary);} 35%{transform:scale(1.22); color:var(--gold);} 100%{transform:scale(1); color:var(--text-primary);} } .copilot-title-wrap strong.pop{animation:copilotTitlePop .7s var(--ease);} /* 一簇烟花从输入框上方冒出来，纯 CSS 粒子，用完即删，不引入任何库。 尺寸/时长/最大高度全部由 JS 按粒子随机生成（inline style 覆盖这里的默认值）， 这里的数值只是没被 JS 设到时的兜底。 */ .copilot-firework{ position:absolute; left:50%; bottom:100%; width:0; height:0; pointer-events:none; z-index:5; } .copilot-firework span{ position:absolute; left:0; top:0; width:10px; height:10px; border-radius:50%; opacity:1; animation:copilotFireworkBurst 1.6s var(--ease) forwards; } @keyframes copilotFireworkBurst{ 0%{transform:translate(0,0) scale(1); opacity:1;} 55%{opacity:1;} 100%{transform:translate(var(--fx), var(--fy)) scale(.35); opacity:0;} } /* 系统提示（改名通知、以后的彩蛋等）：混在对话流里，跟消息气泡同样的位置/尺寸/左对齐—— 但没有底色/边框，用强调色而不是正文色，一眼就能看出"这不是智能体的回答，是个系统提示"， 不会跟真的对话内容混淆（2026-07-24 由居中+纯金色改为左对齐+强调色，风格更贴近对话本身）*/ .copilot-msg-system{ align-self:flex-start; background:none; border:none; color:var(--accent); font-weight:600; } .copilot-title-input{ font-size:inherit; font-weight:700; color:var(--text-primary); background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:2px 8px; width:120px; } .copilot-title-input:focus{outline:none; border-color:var(--accent-dim);} .copilot-body{flex:1; overflow-y:auto; padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); -webkit-overflow-scrolling:touch;} .copilot-empty{color:var(--text-tertiary); font-size:var(--fs-caption); line-height:1.7; padding:var(--sp-2) 0;} .copilot-empty code{background:var(--bg-raised); padding:1px 6px; border-radius:4px;} .copilot-msg{max-width:88%; padding:8px 14px; border-radius:var(--r-md); font-size:calc(var(--fs-callout) * var(--copilot-msg-fs-scale, 1)); line-height:1.45; white-space:pre-wrap; word-break:break-word;} .copilot-msg-user{align-self:flex-end; background:var(--accent-dim); color:var(--text-primary);} .copilot-msg-ai{align-self:flex-start; background:var(--bg-raised); color:var(--text-primary);} .copilot-msg-ai.copilot-thinking{color:var(--text-tertiary); font-style:italic;} .copilot-tag{color:var(--accent); font-size:.92em; font-weight:600;} /* 气泡内的 markdown 结构：以前只转义+
，###/**加粗**/列表符号原样露出来 （Colin 反馈"###标题、**加粗**原样漏了出来"）。copilot.js 的 renderText 现在 把它们转成下面这些真实元素，这里给排版——气泡很窄，标题不做成大号，只做 "比正文粗一点、上方留白"的弱化层级，跟气泡本身的密度匹配。 */ .copilot-msg strong{font-weight:700;} .copilot-msg em{font-style:italic;} .copilot-msg code{background:var(--bg-hover); padding:1px 5px; border-radius:4px; font-family:var(--font-mono); font-size:.92em;} .copilot-msg-user code{background:rgba(0,0,0,.18);} .copilot-h{font-weight:700; margin:8px 0 3px;} .copilot-h:first-child{margin-top:0;} .copilot-h1{font-size:1.08em;} .copilot-h2{font-size:1.04em;} .copilot-h3,.copilot-h4{font-size:1em; color:var(--accent-fg);} .copilot-list{margin:2px 0 6px; padding-left:1.3em;} .copilot-list li{margin:2px 0;} .copilot-list li:last-child{margin-bottom:0;} .copilot-quote{margin:4px 0; padding:2px 10px; border-left:3px solid var(--border-subtle); color:var(--text-tertiary);} .copilot-code-block{margin:6px 0; padding:8px 10px; border-radius:var(--r-sm); background:var(--bg-hover); overflow-x:auto;} .copilot-code-block code{background:none; padding:0; font-size:.88em; white-space:pre;} /* 涨红跌绿是机械规则（copilot.js colorizePnl），不依赖模型自己描述颜色 */ .copilot-pnl-up{color:#c94f3d;} .copilot-pnl-down{color:#1a9c5a;} .copilot-msg-ts{margin-top:1px; font-size:var(--fs-micro); color:var(--text-tertiary); opacity:.75; line-height:1.3;} .copilot-msg-user .copilot-msg-ts{text-align:right;} .copilot-input-row{position:relative; display:flex; gap:var(--sp-2); align-items:flex-end; padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border-subtle); flex-shrink:0;} .copilot-input-row button{flex-shrink:0;} /* 发送按钮：默认 .btn 偏小（7px 14px/13.5px），跟 38px 高的输入框/30px 的麦克风切换 图标站在一起显得不成比例，加大到跟输入框同一个视觉重量级 */ #copilotSend{padding:10px 20px; font-size:var(--fs-body);} /* 输入框和"按住说话"大按钮共用同一个位置容器，同一时刻只显示其中一个（JS 用 hidden 属性互斥切换）；麦克风/键盘切换图标常驻在容器右侧、贴着输入框内边，参考微信"输入框 里右下角一个图标"的放法，不占外面那一整格的宽度。 */ .copilot-input-wrap{position:relative; flex:1; min-width:0;} .copilot-input-wrap textarea{ width:100%; box-sizing:border-box; resize:none; min-height:38px; max-height:160px; padding:8px 34px 8px 12px; background:var(--bg-raised); border:1px solid var(--border-subtle); border-radius:var(--r-sm); font-family:inherit; font-size:var(--fs-callout); line-height:1.5; } .copilot-input-wrap textarea:focus{outline:none; border-color:var(--accent-dim);} .copilot-input-mic-toggle{ position:absolute; right:5px; bottom:5px; z-index:3; width:30px; height:30px; padding:0; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1; color:var(--text-tertiary); background:none; border:none; } .copilot-input-mic-toggle:hover{background:var(--bg-hover); color:var(--text-primary);} /* 语音消息：气泡里是一个可点播放的"语音条"，宽度按时长走（JS 算好内联到 style.width）， 点一下播放/暂停，跟微信一个手感。转文字是弱化色的补充信息，不跟正文语气抢。 */ .copilot-voice-bubble{ display:flex; align-items:center; gap:8px; padding:2px 4px; background:none; border:none; color:inherit; font-size:inherit; cursor:pointer; } .copilot-voice-icon{flex-shrink:0; font-size:13px; line-height:1;} .copilot-voice-waves{flex:1; height:2px; border-radius:1px; background:repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px); opacity:.55;} .copilot-voice-bubble.playing .copilot-voice-waves{opacity:.9;} .copilot-voice-dur{flex-shrink:0; font-size:var(--fs-micro); opacity:.75;} .copilot-voice-toggle{ margin-top:2px; background:none; border:none; padding:0; cursor:pointer; font-size:var(--fs-micro); color:var(--text-tertiary); } .copilot-voice-toggle:hover{color:var(--text-secondary);} .copilot-voice-text{ margin-top:2px; font-size:calc(var(--fs-callout) * var(--copilot-msg-fs-scale, 1)); line-height:1.4; color:var(--text-tertiary); white-space:pre-wrap; word-break:break-word; } /* 图片气泡：微信留档的原图，最大宽度贴着气泡本身的宽度上限走，不铺满整个面板 */ .copilot-msg-image{padding:2px;} .copilot-image-bubble{display:block; max-width:100%; max-height:260px; border-radius:var(--r-sm);} .copilot-image-missing{ padding:8px 12px; border-radius:var(--r-sm); background:var(--bg-hover); color:var(--text-tertiary); font-size:var(--fs-micro); } /* 按住说话：语音模式下这个按钮占满输入框原来的位置（大热区，比小图标好按住）， 长按触发录音（mousedown/touchstart），一个居中浮层给实时反馈（计时+上滑取消提示）。 右侧留白让切换图标（键盘/麦克风）继续叠在上面，跟微信"输入框右下角小图标常驻"一致。 */ .copilot-input-wrap .copilot-mic-btn{ width:100%; box-sizing:border-box; min-height:48px; padding:12px 34px 12px 12px; border-radius:var(--r-sm); background:var(--bg-raised); border:1px solid var(--border-subtle); color:var(--text-secondary); font-size:var(--fs-body); font-weight:500; text-align:center; touch-action:none; user-select:none; } .copilot-mic-btn:active, .copilot-mic-btn.recording{ color:#c94f3d; background:rgba(201,79,61,.14); border-color:rgba(201,79,61,.35); } .copilot-record-overlay{ position:absolute; left:50%; bottom:64px; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; } .copilot-record-badge{ display:flex; align-items:center; gap:7px; padding:10px 20px; border-radius:var(--r-sm); background:rgba(20,20,20,.86); color:#fff; font-size:15px; font-variant-numeric:tabular-nums; box-shadow:var(--shadow-lg); } .copilot-record-overlay.canceling .copilot-record-badge{background:#c94f3d;} .copilot-record-dot{width:8px; height:8px; border-radius:50%; background:#e5484d; animation:copilot-mic-pulse 1.1s ease-in-out infinite;} .copilot-record-hint{font-size:var(--fs-caption); color:var(--text-tertiary); background:var(--bg-overlay); padding:3px 10px; border-radius:var(--r-sm); box-shadow:var(--shadow-sm);} .copilot-record-overlay.canceling .copilot-record-hint{color:#c94f3d;} .copilot-suggest{ position:absolute; left:var(--sp-4); right:var(--sp-4); bottom:calc(100% + 4px); background:var(--bg-overlay); border:1px solid var(--border-strong); border-radius:var(--r-sm); box-shadow:var(--shadow-lg); overflow:hidden; } .copilot-suggest-item{padding:8px 12px; font-size:var(--fs-caption); cursor:pointer; display:flex; gap:var(--sp-2); align-items:baseline;} .copilot-suggest-item:hover{background:var(--bg-hover);} .copilot-suggest-item span{color:var(--text-tertiary);} /* 手机：不管哪种模式一律全屏，右栏和数据没法在小屏并存 */ @media(max-width:820px){ .copilot-panel.mode-dock, .copilot-panel.mode-float{ top:0; left:0; right:0; bottom:0; width:100%; height:100%; max-width:none; border-radius:0; border:none; transform:translateY(100%); opacity:1; } .copilot-panel.mode-dock.open, .copilot-panel.mode-float.open{transform:translateY(0);} .copilot-resize{display:none !important;} } /* ===== 大盘/板块分析（/market/*）通用样式 =============================== 五个模块各自独立成页（不是一页塞卡片），风格取参考截图那种"正式报告"感： 横向tab切页 + 大号头条数字 + 徽章化的状态标注。配色不新建调色板，全部复用 已有的 --up/--down/--accent 等语义色。 */ .mkt-subnav{display:flex; gap:2px; border-bottom:1px solid var(--border-subtle); margin-bottom:var(--sp-5); flex-wrap:wrap;} .mkt-subnav a{padding:10px 16px; font-size:var(--fs-callout); color:var(--text-secondary); border-bottom:2px solid transparent; margin-bottom:-1px;} .mkt-subnav a:hover{color:var(--text-primary);} .mkt-subnav a.on{color:var(--text-primary); font-weight:600; border-bottom-color:var(--accent-fg);} .mkt-hd{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-4);} .mkt-hd h1{font-size:var(--fs-title1); margin:0 0 4px;} .mkt-hd .lede{color:var(--text-secondary); max-width:640px; line-height:1.6;} .mkt-hd-meta{display:flex; flex-direction:column; align-items:flex-end; gap:6px; font-size:var(--fs-caption); color:var(--text-tertiary); text-align:right;} .mkt-kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-4); margin:var(--sp-2) 0 var(--sp-5);} .mkt-kpi{display:flex; flex-direction:column; gap:4px;} .mkt-kpi .lbl{font-size:var(--fs-caption); color:var(--text-tertiary);} .mkt-kpi .val{font-size:var(--fs-title2); font-weight:700; font-variant-numeric:tabular-nums;} .mkt-kpi .sub{font-size:var(--fs-micro); color:var(--text-tertiary);} .mkt-kpi .val.up{color:var(--up);} .mkt-kpi .val.down{color:var(--down);} .mkt-badge{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:var(--r-full); font-size:var(--fs-micro); font-weight:600;} .mkt-badge-ok{background:var(--down-dim); color:var(--down);} .mkt-badge-warn{background:var(--gold-dim); color:var(--gold);} .mkt-badge-neutral{background:var(--bg-raised); color:var(--text-secondary);} .mkt-section{margin-bottom:var(--sp-6);} .mkt-section-hd{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-3); flex-wrap:wrap; gap:var(--sp-2);} .mkt-section-hd h2{font-size:var(--fs-title3); font-weight:600; margin:0;} .mkt-section-hd .note{font-size:var(--fs-caption); color:var(--text-tertiary);} .mkt-gap-note{font-size:var(--fs-caption); color:var(--text-tertiary); background:var(--bg-raised); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); margin-top:var(--sp-3); line-height:1.6;} .mkt-table{width:100%; border-collapse:collapse; font-size:var(--fs-caption);} .mkt-table th{text-align:left; color:var(--text-tertiary); font-weight:500; padding:5px 8px; border-bottom:1px solid var(--border-subtle);} .mkt-table td{padding:5px 8px; border-bottom:1px solid var(--border-subtle);} .mkt-table tr:last-child td{border-bottom:none;} .mkt-pct-up{color:var(--up);} .mkt-pct-down{color:var(--down);} .mkt-badge-zone{display:inline-block; padding:1px 7px; border-radius:var(--r-full); font-size:var(--fs-micro); font-weight:600;} .mkt-badge-zone.高位区{background:var(--up-dim); color:var(--up);} .mkt-badge-zone.中间区{background:var(--bg-raised); color:var(--text-secondary);} .mkt-badge-zone.低位区{background:var(--down-dim); color:var(--down);} .mkt-movers{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);} @media(max-width:760px){.mkt-movers{grid-template-columns:1fr;}} .mkt-mover-row{display:flex; justify-content:space-between; padding:4px 0; font-size:var(--fs-caption); border-bottom:1px dashed var(--border-subtle);} .mkt-mover-row:last-child{border-bottom:none;} .qbadge{display:inline-block; padding:1px 8px; border-radius:var(--r-full); font-size:var(--fs-micro); font-weight:700;} .qb-领涨{background:var(--up-dim); color:var(--up);} .qb-走弱{background:var(--gold-dim); color:var(--gold);} .qb-企稳{background:var(--down-dim); color:var(--accent-fg);} .qb-深跌{background:var(--down-dim); color:var(--down);}