/* =========================================================================== 察盘 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);} .app-nav .brand em{font-style:normal; color:var(--accent);} /* 汉堡按钮——桌面隐藏，手机断点内显示，只收纳 .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);} .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;} } @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;}