/* ========================================================================== VarsCoin · varscoin.com · 共享样式表 所有页面共用。修改此文件即可全站生效。 ========================================================================== */ :root{ --navy-900:#0B1220; --navy-800:#101D30; --navy-700:#16283F; --navy-600:#0F2A47; --navy-500:#1B4A7A; /* NOTE: --gold-600 / --up / --down were darkened from #C99A06 / #0FA36B / #E5484D to meet WCAG AA (4.5:1) for small text on light surfaces. Do not lighten them without re-checking contrast against #fff, #F5F7FA and #FAFBFC. */ --gold-500:#F0B90B; --gold-600:#8A6508; --gold-050:#FFFBEB; --gold-100:#FEF3C7; --bg:#F5F7FA; --surface:#FFFFFF; --surface-2:#FAFBFC; --line:#E4E8EE; --line-2:#D3D9E2; --text:#101828; --text-2:#3C4756; --muted:#667085; --up:#0B7A4F; --up-bg:#ECFDF3; --down:#C4292E; --warn:#B45309; --warn-bg:#FFFAEB; --up-bright:#34D399; /* decorative only: indicators on dark navy */ --r:14px; --r-sm:10px; --sh:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.15); --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; } *{box-sizing:border-box} html{scroll-behavior:smooth} /* 粘性页眉约 70px：锚点跳转时给标题留出空间，别被压住 */ [id]{scroll-margin-top:84px} body{margin:0;background:var(--bg);color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif; font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased} .wrap{max-width:1160px;margin:0 auto;padding:0 24px} h1,h2,h3,h4{line-height:1.3;margin:0 0 12px;letter-spacing:-.01em} h2{font-size:28px;font-weight:780} h3{font-size:19px;font-weight:730} /* 关于页的页面主标题用的是 sec-head 版式，h1 需与 h2 同尺寸，避免比同页其他小节标题大一圈 */ .sec-head h1{font-size:28px;font-weight:780} p{margin:0 0 12px} a{color:var(--navy-500);text-decoration:none} a:hover{text-decoration:underline} ul{margin:0 0 12px;padding-left:20px} img{max-width:100%} /* ---------- 顶部注册通栏（全站最显眼） ---------- */ /* background-color is set explicitly so contrast audits can measure the text: a gradient alone reports as transparent and yields a false 1.0 ratio. */ .notice{background-color:#F0B90B;background-image:linear-gradient(90deg,#F0B90B 0%,#FFD75E 55%,#F0B90B 100%);color:#3D2C00} .notice .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px} .notice .tag{background:#3D2C00;color:#FFD75E;font-size:11.5px;font-weight:800;letter-spacing:.1em; padding:3px 9px;border-radius:6px;flex:none} .notice .txt{font-size:14.5px;font-weight:700} .notice .txt b{font-family:var(--mono);font-size:16px;letter-spacing:.08em; background:#3D2C00;color:#FFD75E;padding:2px 9px;border-radius:6px;margin:0 3px} .notice .sub{font-size:12.5px;opacity:.78;font-weight:600} .notice .btn{margin-left:auto;background:#0B1220;color:#FFD75E;border-color:#0B1220;padding:8px 18px;font-size:13.5px} .notice .btn:hover{background:#16283F;color:#fff} @media(max-width:720px){.notice .btn{margin-left:0;width:100%}.notice .sub{display:none}} /* ---------- 顶部信息条 ---------- */ .topbar{background:var(--navy-900);color:#B9CCE4;font-size:13px;padding:9px 0} .topbar .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center} .topbar b{color:#F0B90B;font-weight:700} .topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--up-bright);display:inline-block;margin-right:7px} /* ---------- 导航 ---------- */ header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;gap:20px;height:64px} .logo{display:flex;align-items:center;gap:10px;font-weight:820;font-size:17px;color:var(--navy-700);letter-spacing:-.02em} .logo:hover{text-decoration:none} .logo .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--navy-700),var(--navy-500)); display:grid;place-items:center;color:var(--gold-500);font-family:var(--mono);font-weight:800;font-size:15px;flex:none} .logo small{display:block;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.06em;margin-top:-3px} /* 品牌锁：域名图标 + 站名在上，「独立学习社区 · 域名」在其正下方（页眉与页脚共用） */ .logo{flex-direction:column;align-items:flex-start;gap:3px;min-width:0;flex-shrink:1} .logo .lg-top{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:820;line-height:1.15} .logo .lg-name{display:block} .logo .lg-tag{display:block;font-size:10.5px;font-weight:650;color:var(--muted);letter-spacing:.05em; white-space:nowrap;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis} @media(max-width:430px){.logo .lg-tag{font-size:9.5px;letter-spacing:.02em}} nav.main{display:flex;gap:2px;margin-left:10px} nav.main a{padding:8px 11px;border-radius:8px;font-size:14.5px;color:var(--text-2);font-weight:600;white-space:nowrap} nav.main a:hover{background:var(--surface-2);text-decoration:none;color:var(--navy-600)} nav.main a.on{color:var(--navy-700);background:var(--gold-050)} .nav .cta{display:flex;gap:8px;margin-left:auto;align-items:center;flex:none} .navcode{font-family:var(--mono);font-weight:800;background:var(--gold-100);color:#7A5200;padding:6px 11px;border-radius:8px;font-size:13.5px} .nav .cta .btn-gold{white-space:nowrap} /* 1300px 左右的桌面（以及英语/西语这类长文案）页头容易顶到边， 这里收一收内边距；再窄就交给 ellipsis + 汉堡菜单兜底 */ @media(max-width:1460px){ .nav .wrap{gap:14px} .logo .lg-tag{font-size:10px;letter-spacing:.04em} nav.main{margin-left:4px} nav.main a,nav.main .ni > a{padding:8px 9px;font-size:14px} nav.main .ni > a .chev{width:10px;height:10px} .navcode{padding:6px 9px;font-size:13px} .nav .cta{gap:6px} .nav .cta .btn-gold{padding:10px 14px;font-size:13.5px} .navtools{padding-left:8px;gap:5px} .navtools .tbtn{padding:0 8px;height:32px;font-size:12.5px} /* 英语/西语的界面文案明显更长，收成「图标 + 语言码」； 中文、日文、韩文标签短，保持完整文案不跟着一起缩水 */ html[lang="en"] .navtools .tbtn .lb, html[lang="es"] .navtools .tbtn .lb{display:none} } @media(max-width:1060px){nav.main{display:none}} @media(max-width:520px){.navcode{display:none}} /* ---------- 按钮 ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:var(--r-sm); font-size:14.5px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:.16s;white-space:nowrap;text-decoration:none} .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn-gold{background:var(--gold-500);color:#3D2C00;box-shadow:0 2px 8px rgba(240,185,11,.35)} .btn-gold:hover{background:#FFC61E} .btn-line{background:transparent;border-color:var(--line-2);color:var(--navy-700)} .btn-line:hover{border-color:var(--navy-500);background:var(--surface-2)} .btn-dark{background:var(--navy-800);color:#fff} .btn-dark:hover{background:var(--navy-700)} .btn-lg{padding:13px 26px;font-size:16px} .btn-block{width:100%} .btn-sm{padding:7px 13px;font-size:13px} /* 整行按钮与卡片/邀请码行里的按钮允许折行：英、西等语言的按钮文案比中文长得多， 继续 nowrap 会把卡片撑破、在窄屏上撑出横向滚动条 */ .btn-block,.hero-codeline .btn,.refcard .btn,.regband .btn,.calc .btn{white-space:normal;line-height:1.35} /* ---------- Hero ---------- */ .hero{padding:52px 0 44px;background-color:var(--surface);background-image:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%);border-bottom:1px solid var(--line)} .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:44px;align-items:start} /* 网格项默认 min-width:auto，长文案（英/西）会把轨道顶出视口，这里放开 */ .hero-grid>*{min-width:0} @media(max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}} .badge-line{display:inline-flex;align-items:center;gap:8px;background:var(--gold-050);border:1px solid #F5E3A8; color:var(--warn);padding:5px 13px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:18px} .hero h1{font-size:40px;font-weight:820;letter-spacing:-.025em;line-height:1.22} .hero h1 em{font-style:normal;color:var(--navy-500);position:relative;white-space:nowrap} .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:8px;background:rgba(240,185,11,.4);z-index:-1;border-radius:3px} /* 窄屏上强调整句放不进一行（英文/西文更长），改为可折行 + 背景高亮 */ @media(max-width:620px){ .hero h1 em{white-space:normal;background:linear-gradient(transparent 64%,rgba(240,185,11,.42) 64%)} .hero h1 em::after{display:none} } .hero .lead{font-size:17px;color:var(--text-2);max-width:560px;margin:14px 0 22px} .hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px} .trust{display:flex;gap:20px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)} .trust div{font-size:13.5px;color:var(--text-2);display:flex;align-items:center;gap:7px;font-weight:600} .trust .ic{width:18px;height:18px;border-radius:5px;background:var(--up-bg);color:var(--up);display:grid;place-items:center;font-size:11px;font-weight:800;flex:none} .pillrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px} .pillrow span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:12.5px;color:var(--text-2);font-weight:600} @media(max-width:520px){.hero h1{font-size:31px}} /* ---------- 注册卡片 ---------- */ .refcard{background:var(--navy-900);border-radius:18px;padding:26px;color:#fff;position:relative;overflow:hidden; box-shadow:0 18px 40px -18px rgba(11,18,32,.55)} .refcard::before{content:"";position:absolute;top:-70px;right:-70px;width:190px;height:190px;border-radius:50%;background:rgba(240,185,11,.14)} .refcard .lbl{font-size:12.5px;letter-spacing:.1em;color:#8FB4DE;font-weight:800;margin-bottom:6px} .refcard .who{font-size:20px;font-weight:800;margin-bottom:18px} .refcard .who span{color:var(--gold-500)} .codebox{background:rgba(255,255,255,.07);border:1.5px dashed rgba(240,185,11,.6);border-radius:12px;padding:16px 18px;text-align:center;position:relative;z-index:1} .codebox .k{font-size:12px;color:#9BB5D4;letter-spacing:.06em} .codebox .v{font-family:var(--mono);font-size:36px;font-weight:800;letter-spacing:.08em;color:var(--gold-500);line-height:1.2;margin:2px 0 4px} .codebox .n{font-size:12px;color:#9BB5D4} .refcard .perks{list-style:none;padding:0;margin:16px 0 18px;font-size:13.5px;color:#C8D8EA;position:relative;z-index:1} .refcard .perks li{padding-left:22px;position:relative;margin:6px 0} .refcard .perks li::before{content:"✓";position:absolute;left:0;color:var(--gold-500);font-weight:800} .refcard .disc{font-size:11.5px;color:#7A90AE;margin-top:12px;line-height:1.6;position:relative;z-index:1} .refcard .disc b{color:#C8D8EA} /* ---------- 全宽注册横幅 ---------- */ .regband{background:var(--navy-900);color:#fff;border-radius:var(--r);padding:34px 38px;position:relative;overflow:hidden; display:flex;gap:30px;align-items:center;flex-wrap:wrap;box-shadow:0 18px 40px -20px rgba(11,18,32,.5)} .regband::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(240,185,11,.12)} .regband .l{flex:1;min-width:280px;position:relative;z-index:1} .regband .eyebrow{color:var(--gold-500);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px} .regband h2{color:#fff;font-size:26px;margin-bottom:8px} .regband p{color:#A9C0DA;font-size:14.5px;margin:0} .regband .r{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:290px} .regband .code{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.07); border:1.5px dashed rgba(240,185,11,.55);border-radius:12px;padding:12px 16px} .regband .code .v{font-family:var(--mono);font-size:28px;font-weight:800;letter-spacing:.1em;color:var(--gold-500);line-height:1.1} .regband .code .k{font-size:11.5px;color:#9BB5D4} .regband .note{font-size:11.5px;color:#7A90AE;text-align:center} @media(max-width:720px){.regband{padding:26px 22px}.regband h2{font-size:22px}} /* ---------- 计算器 ---------- */ .calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden} .calc .hd{background:var(--navy-800);color:#fff;padding:16px 22px} .calc .hd h3{margin:0;font-size:16.5px;color:#fff} .calc .hd p{margin:3px 0 0;font-size:12.5px;color:#9BB5D4} .calc .bd{padding:22px} .field{margin-bottom:16px} .field label{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:7px} .seg{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px;gap:3px} .seg button{flex:1;padding:8px;border:none;background:transparent;border-radius:7px;font-size:13.5px;font-weight:650; color:var(--muted);cursor:pointer;font-family:inherit;transition:.14s} .seg button.on{background:var(--surface);color:var(--navy-700);box-shadow:0 1px 3px rgba(16,24,40,.1)} input[type=range]{width:100%;accent-color:var(--navy-600);margin:6px 0} .ipt{width:100%;padding:10px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-size:16px; font-family:var(--mono);font-variant-numeric:tabular-nums;background:var(--surface)} .ipt:focus{outline:none;border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(27,74,122,.1)} .result{background:var(--navy-900);color:#fff;border-radius:var(--r-sm);padding:18px;margin-top:6px} .result .lb{font-size:12.5px;color:#9BB5D4;margin-bottom:4px} .result .big{font-size:32px;font-weight:820;font-family:var(--mono);letter-spacing:-.02em;color:var(--gold-500);line-height:1.1} .result .sub{font-size:12.5px;color:#9BB5D4;margin-top:6px} .result .rows{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.13);font-size:12.5px;color:#C8D8EA} .result .rows div{display:flex;justify-content:space-between;font-family:var(--mono);padding:2px 0} details.chain{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)} details.chain summary{padding:11px 15px;font-size:13px;font-weight:700;color:var(--navy-600);cursor:pointer;list-style:none} details.chain summary::-webkit-details-marker{display:none} details.chain summary::before{content:"▸ ";color:var(--gold-600)} details.chain[open] summary::before{content:"▾ "} details.chain .in{padding:0 15px 14px;font-size:13px;color:var(--text-2);font-family:var(--mono);line-height:1.9} .src{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center} /* ---------- 区块与标题 ---------- */ section{padding:60px 0} .sec-head{margin-bottom:26px;max-width:760px} .sec-head .eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--gold-600);text-transform:uppercase;margin-bottom:8px} .sec-head p{color:var(--text-2);font-size:16.5px;margin:0} .more{margin-top:18px;font-weight:700} /* ---------- 学习路径 ---------- */ .path{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.path{grid-template-columns:1fr}} .lv{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh)} .lv .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:6px;margin-bottom:12px} .lv.l1 .tag{background:var(--up-bg);color:#05603A} .lv.l2 .tag{background:#E6F1FB;color:#0C447C} .lv.l3 .tag{background:var(--gold-050);color:var(--warn)} .lv h3{font-size:19px;margin:0 0 4px} .lv .meta{font-size:12.5px;color:var(--muted);margin-bottom:14px} .lv ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--text-2)} .lv ul li{margin:6px 0} .lv .go{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-weight:700;font-size:14px} /* ---------- 知识导航卡 ---------- */ .kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:940px){.kgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.kgrid{grid-template-columns:1fr}} .kgrid .k{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:.16s;display:block;color:inherit} .kgrid .k:hover{text-decoration:none;border-color:var(--navy-500);transform:translateY(-2px);box-shadow:var(--sh)} .kgrid .k .ic{width:34px;height:34px;border-radius:10px;background:var(--navy-800);color:var(--gold-500);display:grid;place-items:center; font-family:var(--mono);font-weight:800;font-size:13px;margin-bottom:12px} .kgrid .k h4{margin:0 0 6px;font-size:16.5px} .kgrid .k p{font-size:13.5px;color:var(--muted);margin:0} .kgrid .k .cnt{font-size:12px;color:var(--navy-500);font-weight:700;margin-top:10px;display:block} /* ---------- 视频卡 ---------- */ .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:940px){.vgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.vgrid{grid-template-columns:1fr}} .vid{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh); display:flex;flex-direction:column;transition:.18s} .vid:hover{transform:translateY(-2px)} .vid .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy-800),var(--navy-500));display:grid;place-items:center;position:relative} .vid .play{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center; color:var(--navy-800);font-size:18px;padding-left:4px} .vid .dur{position:absolute;right:10px;bottom:10px;background:rgba(11,18,32,.82);color:#fff;font-size:11.5px; padding:2px 7px;border-radius:5px;font-family:var(--mono)} .vid .b{padding:16px 18px;display:flex;flex-direction:column;flex:1} .vid h4{font-size:15.5px;margin:0 0 6px;line-height:1.5} .vid .m{font-size:12.5px;color:var(--muted);margin-top:auto;padding-top:8px} /* ---------- 两栏 / 对比 ---------- */ .two{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} @media(max-width:900px){.two{grid-template-columns:1fr}} .vs{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:860px){.vs{grid-template-columns:1fr}} .ex{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column} .ex .top{padding:20px 22px;border-bottom:1px solid var(--line)} .ex .top .nm{font-size:20px;font-weight:800} .ex .top .en{font-size:12.5px;color:var(--muted);font-family:var(--mono)} .ex .top .pill{display:inline-block;margin-top:10px;background:var(--gold-050);color:var(--warn); border:1px solid #F5E3A8;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:750} .ex table{width:100%;border-collapse:collapse;font-size:14px} .ex td{padding:9px 22px;border-bottom:1px solid var(--line)} .ex td:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:650} .ex td:first-child{color:var(--muted);font-size:13.5px} .ex .verdict{padding:16px 22px;font-size:13.5px;color:var(--text-2);background:var(--surface-2);border-top:1px solid var(--line);margin-top:auto} .ex .go{padding:16px 22px;border-top:1px solid var(--line)} .ex .go small{display:block;text-align:center;color:var(--muted);font-size:11.5px;margin-top:8px} /* ---------- 步骤 ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:860px){.steps{grid-template-columns:1fr}} .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh)} .step .n{width:38px;height:38px;border-radius:11px;background:var(--navy-700);color:var(--gold-500); display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:16px;margin-bottom:14px} .step h4{margin:0 0 8px;font-size:17px} .step p{font-size:14.5px;color:var(--text-2);margin:0 0 10px} .step .tip{font-size:12.5px;color:var(--warn);background:var(--warn-bg);padding:8px 11px;border-radius:8px} /* ---------- 行情表 ---------- */ .mk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)} .mk table{width:100%;border-collapse:collapse;font-size:14.5px} .mk th,.mk td{padding:12px 18px;border-bottom:1px solid var(--line);text-align:left} .mk th{background:var(--surface-2);font-size:12.5px;color:var(--text-2)} .mk td.n,.mk th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums} .mk tr:last-child td{border-bottom:none} .up{color:var(--up);font-weight:700} .dn{color:var(--down);font-weight:700} /* ---------- 文章卡 ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:940px){.cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.cards{grid-template-columns:1fr}} .post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh); display:flex;flex-direction:column;transition:.18s} .post:hover{transform:translateY(-2px)} .post .tag{font-size:11.5px;font-weight:800;color:var(--navy-500);letter-spacing:.05em;margin-bottom:10px} .post h4{font-size:16.5px;margin:0 0 8px;line-height:1.45} .post h4 a{color:var(--text)} .post p{font-size:14px;color:var(--muted);margin:0 0 16px} .post .by{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)} .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--navy-500),var(--navy-700)); color:#fff;display:grid;place-items:center;font-size:12px;font-weight:750;flex:none} /* ---------- E-E-A-T ---------- */ .eeat{background:var(--navy-900);color:#C8D8EA;border-radius:var(--r);padding:40px} .eeat h2{color:#fff} .eeat .sec-head p{color:#9BB5D4} .eeat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px} @media(max-width:900px){.eeat-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.eeat-grid{grid-template-columns:1fr}} .eeat-grid h4{color:var(--gold-500);font-size:15px;margin:0 0 8px} .eeat-grid p{font-size:13.5px;color:#A9C0DA;margin:0} .eeat-grid a{color:#8FB4DE;font-size:13px;font-weight:650} .eeat-sign{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:14px;align-items:center;flex-wrap:wrap} /* ---------- FAQ ---------- */ .faq{max-width:820px} .faq details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);margin-bottom:10px} .faq summary{padding:16px 20px;font-weight:680;cursor:pointer;list-style:none;font-size:15.5px;display:flex;justify-content:space-between;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold-600);font-weight:800;font-size:19px;line-height:1;flex:none} .faq details[open] summary::after{content:"–"} .faq .a{padding:0 20px 18px;color:var(--text-2);font-size:14.5px} .faq .a p:last-child{margin-bottom:0} /* ---------- 风险提示 ---------- */ .risk{background:var(--warn-bg);border:1px solid #F3DFAE;border-radius:var(--r);padding:28px} .risk h3{color:#7A3E05;font-size:18px;display:flex;align-items:center;gap:9px;margin-bottom:12px} .risk h3 .ic{width:22px;height:22px;border-radius:6px;background:var(--warn);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none} .risk ul{color:#7A3E05;font-size:14px;margin-bottom:0} .risk li{margin:6px 0} /* ---------- 页脚 ---------- */ footer{background:var(--navy-900);color:#93A8C4;padding:52px 0 30px;font-size:13.5px} .f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px} @media(max-width:900px){.f-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.f-grid{grid-template-columns:1fr}} footer h5{color:#fff;font-size:13.5px;margin:0 0 12px;font-weight:750} footer ul{list-style:none;padding:0;margin:0} footer li{margin:7px 0} footer a{color:#A9C6E8} footer a:hover{color:#fff} .f-brand .logo{color:#fff;margin-bottom:12px} .f-brand p{color:#8AA3C0;font-size:13px;line-height:1.7} .f-bottom{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#7A90AE;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between} .disclose{background:rgba(240,185,11,.1);border:1px solid rgba(240,185,11,.28);border-radius:var(--r-sm);padding:14px 16px;color:#E8D5A3;font-size:12.5px;margin-top:18px} .disclose b{color:#FFD75E} /* ---------- 移动端底部条 ---------- */ .mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);border-top:1px solid var(--line); padding:10px 16px;gap:10px;align-items:center;box-shadow:0 -4px 16px rgba(16,24,40,.08)} @media(max-width:720px){.mbar{display:flex}body{padding-bottom:74px}} .mbar .code{font-family:var(--mono);font-weight:800;background:var(--gold-100);color:#7A5200;padding:7px 10px;border-radius:8px;font-size:13px;flex:none} /* 移动端底栏的 QQ 咨询入口（点击弹出 QQ 号与咨询说明） */ .mbar .mqq{flex:none;display:inline-flex;align-items:center;gap:5px;font-family:inherit;font-size:12.5px;font-weight:750; padding:9px 11px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--navy-700);cursor:pointer} .mbar .mqq:hover{border-color:var(--navy-500)} .mbar .mqq .ic{font-style:normal;font-size:10.5px;font-weight:850;color:var(--gold-600)} @media(max-width:400px){.mbar .mqq{padding:9px 10px}.mbar .mqq span{display:none}} .mbar .btn{flex:1;min-width:0;white-space:normal;line-height:1.3;padding:11px;font-size:14px} /* ========================================================================== 内页通用 ========================================================================== */ .pagehead{padding:44px 0 36px;background-color:var(--surface);background-image:linear-gradient(180deg,var(--surface),var(--bg));border-bottom:1px solid var(--line)} .pagehead h1{font-size:34px;font-weight:820;letter-spacing:-.025em;margin-bottom:10px} .pagehead p{color:var(--text-2);font-size:16.5px;max-width:720px;margin:0} .crumb{font-size:13px;color:var(--muted);margin-bottom:14px;font-weight:600} .crumb a{color:var(--navy-500)} @media(max-width:520px){.pagehead h1{font-size:27px}} /* ---------- 侧栏 + 正文布局 ---------- */ .shell{display:grid;grid-template-columns:256px 1fr;gap:40px;align-items:start;padding:44px 0 70px} @media(max-width:980px){.shell{grid-template-columns:1fr;gap:24px}} .side{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--sh);padding:18px;max-height:calc(100vh - 110px);overflow:auto} @media(max-width:980px){.side{position:static;max-height:none}} .side .t{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--gold-600);text-transform:uppercase;margin-bottom:12px} .side ol{list-style:none;counter-reset:m;padding:0;margin:0} .side ol li{counter-increment:m;margin:0} .side ol a{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;font-size:13.8px; color:var(--text-2);font-weight:600;line-height:1.5} .side ol a::before{content:counter(m,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--muted); font-weight:700;padding-top:3px;flex:none} .side ol a:hover{background:var(--surface-2);text-decoration:none;color:var(--navy-600)} .side ol a.on{background:var(--gold-050);color:var(--warn)} .side ol a.on::before{color:var(--gold-600)} .side .div{height:1px;background:var(--line);margin:14px 0} .side .side-cta{background:var(--navy-900);border-radius:var(--r-sm);padding:14px;color:#fff;text-align:center} .side .side-cta .k{font-size:11px;color:#9BB5D4;letter-spacing:.06em} .side .side-cta .v{font-family:var(--mono);font-size:22px;font-weight:800;color:var(--gold-500);letter-spacing:.08em;margin:2px 0 8px} .side .side-cta .btn{padding:8px 12px;font-size:13px} /* ---------- 模块 ---------- */ .mod{padding:34px 0 40px;border-bottom:1px solid var(--line);scroll-margin-top:84px} .mod:last-of-type{border-bottom:none} .mod-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px} .mod-head .num{width:46px;height:46px;border-radius:13px;background:var(--navy-800);color:var(--gold-500); display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:17px;flex:none} .mod-head .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.13em;color:var(--gold-600);text-transform:uppercase;margin-bottom:4px} .mod-head h2{font-size:25px;margin:0 0 6px} .mod-head .lvl{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:6px;background:var(--up-bg);color:#05603A} .mod-head .lvl.l2{background:#E6F1FB;color:#0C447C} .mod-head .lvl.l3{background:var(--gold-050);color:var(--warn)} .mod > .intro{font-size:16.5px;color:var(--text-2);margin-bottom:22px;max-width:820px} .cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px} @media(max-width:760px){.cgrid{grid-template-columns:1fr}} .cpt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh)} .cpt h4{font-size:15.5px;margin:0 0 7px;display:flex;align-items:center;gap:8px} .cpt h4 .d{width:7px;height:7px;border-radius:50%;background:var(--gold-500);flex:none} .cpt p{font-size:14px;color:var(--text-2);margin:0} .cpt p:last-child{margin-bottom:0} .cpt ul{padding-left:18px;font-size:14px;color:var(--text-2);margin:8px 0 0} .cpt li{margin:5px 0} .keybox{background:var(--navy-900);color:#DDE9F6;border-radius:var(--r);padding:20px 24px;margin:20px 0; display:flex;gap:14px;align-items:flex-start} .keybox .ic{width:28px;height:28px;border-radius:8px;background:rgba(240,185,11,.16);color:var(--gold-500); display:grid;place-items:center;font-size:14px;font-weight:800;flex:none} .keybox .k{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--gold-500);text-transform:uppercase;margin-bottom:4px} .keybox p{margin:0;font-size:15px;line-height:1.7} .keybox b{color:#fff} .warnbox{background:var(--warn-bg);border:1px solid #F3DFAE;border-left:4px solid var(--warn);border-radius:var(--r-sm); padding:16px 20px;margin:18px 0} .warnbox .k{font-size:12px;font-weight:800;color:#7A3E05;letter-spacing:.06em;margin-bottom:6px} .warnbox p{font-size:14px;color:#7A3E05;margin:0} .warnbox ul{margin:6px 0 0;padding-left:18px;font-size:14px;color:#7A3E05} .modvid{margin-top:22px} .modvid .lbl{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:12px} .modvid .vgrid{grid-template-columns:repeat(2,1fr)} @media(max-width:620px){.modvid .vgrid{grid-template-columns:1fr}} .nextlink{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line);font-size:14px;font-weight:700;display:flex;gap:8px;flex-wrap:wrap} /* ---------- 表格通用 ---------- */ .tbl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);margin:18px 0;overflow-x:auto} .tbl table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px} .tbl th,.tbl td{padding:11px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .tbl th{background:var(--surface-2);font-size:12.5px;color:var(--text-2);font-weight:700;white-space:nowrap} .tbl tr:last-child td{border-bottom:none} .tbl td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right} .tbl code{font-family:var(--mono);font-size:13px;background:var(--surface-2);padding:1px 5px;border-radius:4px} /* ---------- 新闻 ---------- */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px} .filters button{border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);padding:7px 15px;border-radius:999px; font-size:13.5px;font-weight:650;cursor:pointer;font-family:inherit;transition:.14s} .filters button:hover{border-color:var(--navy-500)} .filters button.on{background:var(--navy-800);border-color:var(--navy-800);color:#fff} .newslist{display:flex;flex-direction:column;gap:0} .nitem{display:grid;grid-template-columns:104px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--line)} .nitem:first-child{padding-top:0} @media(max-width:640px){.nitem{grid-template-columns:1fr;gap:8px}} .nitem .when{font-size:12.5px;color:var(--muted);font-family:var(--mono);padding-top:4px} .nitem .when b{display:block;color:var(--navy-600);font-size:13px} .nitem h4{font-size:17.5px;margin:0 0 7px;line-height:1.45} .nitem h4 a{color:var(--text)} .nitem h4 a:hover{color:var(--navy-500)} .nitem p{font-size:14.5px;color:var(--text-2);margin:0 0 10px} .nitem .mt{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted)} .chip{font-size:11.5px;font-weight:750;padding:3px 9px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2)} .chip.hot{background:#FEF2F2;border-color:#FBD5D5;color:#B42318} .chip.pol{background:#EFF8FF;border-color:#CFE1F5;color:#0C447C} .chip.deep{background:var(--gold-050);border-color:#F5E3A8;color:var(--warn)} .chip.chain{background:#F0FDF4;border-color:#C9EBD6;color:#05603A} /* ---------- 正文排版 ---------- */ .prose{max-width:820px} .prose h2{font-size:24px;margin:34px 0 12px} .prose h3{font-size:18px;margin:26px 0 10px} .prose p{font-size:16px;color:var(--text-2)} .prose ul,.prose ol{font-size:16px;color:var(--text-2)} .prose li{margin:7px 0} .prose blockquote{margin:20px 0;padding:14px 20px;border-left:3px solid var(--gold-500);background:var(--gold-050); border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--text-2);font-size:15px} .prose blockquote p:last-child{margin-bottom:0} .prose code{font-family:var(--mono);font-size:14px;background:var(--surface-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px} /* ---------- 步骤条（纵向） ---------- */ .vsteps{counter-reset:s;list-style:none;padding:0;margin:20px 0} .vsteps li{counter-increment:s;position:relative;padding:0 0 22px 46px;border-left:2px solid var(--line);margin-left:15px} .vsteps li:last-child{border-left-color:transparent;padding-bottom:0} .vsteps li::before{content:counter(s);position:absolute;left:-16px;top:-2px;width:30px;height:30px;border-radius:50%; background:var(--navy-800);color:var(--gold-500);display:grid;place-items:center;font-family:var(--mono); font-weight:800;font-size:13px} .vsteps h4{margin:0 0 5px;font-size:16.5px} .vsteps p{font-size:14.5px;color:var(--text-2);margin:0} /* ---------- 行情仪表盘 ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px} @media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.stats{grid-template-columns:1fr}} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh)} .stat .k{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px} .stat .v{font-size:24px;font-weight:800;font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .stat .d{font-size:12.5px;font-weight:700;margin-top:4px} .stat .d.up{color:var(--up)} .stat .d.dn{color:var(--down)} /* ---------- 框架分层 ---------- */ .layer{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--navy-700);border-radius:var(--r); padding:20px 24px;box-shadow:var(--sh);margin-bottom:16px} .layer .n{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--gold-600);letter-spacing:.1em;margin-bottom:6px} .layer h4{font-size:18px;margin:0 0 8px} .layer p{font-size:14.5px;color:var(--text-2);margin:0 0 10px} .layer ul{padding-left:18px;font-size:14.5px;color:var(--text-2);margin:0} .layer li{margin:5px 0} .layer.l-a{border-left-color:#0C447C} .layer.l-b{border-left-color:#0FA36B} .layer.l-c{border-left-color:#F0B90B} .layer.l-d{border-left-color:#B45309} /* ---------- 模板框 ---------- */ .tpl{background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r);padding:22px 24px;margin:18px 0} .tpl .h{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--gold-600);text-transform:uppercase;margin-bottom:10px} .tpl pre{margin:0;font-family:var(--mono);font-size:13px;line-height:1.85;color:var(--text-2);white-space:pre-wrap;word-break:break-word} .tpl pre b{color:var(--navy-600)} /* ---------- 清单 ---------- */ .check{list-style:none;padding:0;margin:16px 0} .check li{position:relative;padding-left:30px;margin:9px 0;font-size:14.5px;color:var(--text-2)} .check li::before{content:"□";position:absolute;left:4px;color:var(--gold-600);font-size:16px;font-weight:800} .check li b{color:var(--text)} /* ---------- 提示条 ---------- */ .note{background:#EFF8FF;border:1px solid #CFE1F5;border-radius:var(--r-sm);padding:14px 18px;font-size:13.5px;color:#0C447C;margin:16px 0} .note b{color:#0C447C} /* ========================================================================== 涨跌配色：默认「红涨绿跌」（中国习惯），可一键切换为「绿涨红跌」（国际） ========================================================================== */ /* 色值与全站其他文字色保持同一套可访问标准（WCAG AA 4.5:1 @ 浅底色） */ :root{--px-up:#C4292E;--px-down:#0B7A4F;--px-up-bg:#FEF3F2;--px-down-bg:#ECFDF3} html.px-us{--px-up:#0B7A4F;--px-down:#C4292E;--px-up-bg:#ECFDF3;--px-down-bg:#FEF3F2} .up,.stat .d.up,.mk .up{color:var(--px-up)} .dn,.stat .d.dn,.mk .dn{color:var(--px-down)} .chg{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:750} .chg.up{color:var(--px-up)} .chg.dn{color:var(--px-down)} html.noscroll{overflow:hidden} .pxbtn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line-2); color:var(--text-2);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer; font-family:inherit;transition:.14s} .pxbtn:hover{border-color:var(--navy-500);color:var(--navy-600)} .pxbtn::before{content:"◐";color:var(--gold-600);font-size:14px} .toolrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px} .toolrow .sp{flex:1} /* ---------- 移动端菜单按钮 ---------- */ .nav-toggle{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2); background:var(--surface);cursor:pointer;padding:9px 8px;flex-direction:column;justify-content:space-between;flex:none} .nav-toggle span{display:block;height:2px;background:var(--navy-700);border-radius:2px;transition:.18s} .nav-toggle.on span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.on span:nth-child(2){opacity:0} .nav-toggle.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:1060px){ .nav-toggle{display:flex} nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line); padding:10px 24px 16px;flex-direction:column;gap:2px;box-shadow:0 16px 28px -18px rgba(16,24,40,.28);margin-left:0} nav.main.open{display:flex} nav.main a{padding:11px 12px;font-size:15px} header.nav .wrap{position:relative} } /* ---------- 视频弹窗 ---------- */ .vmodal{position:fixed;inset:0;z-index:120;display:none} .vmodal.on{display:block} .vmask{position:absolute;inset:0;background:rgba(11,18,32,.62);backdrop-filter:blur(3px)} .vpanel{position:relative;max-width:720px;margin:7vh auto;background:var(--surface);border-radius:16px; overflow:hidden;box-shadow:0 30px 60px -24px rgba(11,18,32,.6);animation:vin .2s ease-out} @keyframes vin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .vstage{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy-800),var(--navy-500));display:grid; place-items:center;color:#9BB5D4;font-size:13.5px;text-align:center;padding:20px} .vstage::after{content:"▶";width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.92); color:var(--navy-800);display:grid;place-items:center;font-size:20px;padding-left:5px;position:absolute} .vmeta{padding:20px 24px 24px} .vmeta .vt{margin:0 0 6px;font-size:18px} .vmeta .vd{font-size:13.5px;color:var(--muted);margin:0 0 16px} .vrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .vcode{font-family:var(--mono);font-weight:800;background:var(--gold-100);color:#7A5200;padding:6px 11px; border-radius:8px;font-size:13px} .vclose{position:absolute;right:12px;top:12px;z-index:2;width:34px;height:34px;border-radius:50%;border:none; background:rgba(255,255,255,.16);color:#fff;font-size:20px;line-height:1;cursor:pointer} .vclose:hover{background:rgba(255,255,255,.3)} /* ---------- QQ 咨询弹窗（页尾 QQ 入口点击后弹出） ---------- */ .qqmodal{position:fixed;inset:0;z-index:130;display:none} .qqmodal.on{display:block} .qqmask{position:absolute;inset:0;background:rgba(11,18,32,.62);backdrop-filter:blur(3px)} .qqpanel{position:relative;max-width:520px;margin:9vh auto;background:var(--surface);border-radius:16px; padding:24px 24px 22px;box-shadow:0 30px 60px -24px rgba(11,18,32,.6);animation:vin .2s ease-out} .qqpanel .qqx{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:none; background:var(--surface-2);color:var(--muted);font-size:20px;line-height:1;cursor:pointer} .qqpanel .qqx:hover{background:var(--line);color:var(--text)} .qqhead{display:flex;align-items:center;gap:13px;margin:0 34px 18px 0} .qqhead .qqic{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,#F0B90B,#D9A400);color:#1B2430;font-family:var(--mono); font-weight:850;font-size:13px} .qqhead h4{margin:0 0 2px;font-size:18px} .qqhead p{margin:0;font-size:12.5px;color:var(--muted)} .qqnumrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--gold-050); border:1px solid #F5E3A8;border-radius:var(--r-sm);padding:14px 16px;margin-bottom:16px} .qqnumrow .lb{flex:none;font-size:12px;font-weight:700;color:#7A5200;letter-spacing:.06em} .qqnumrow .n{font-family:var(--mono);font-size:26px;font-weight:850;letter-spacing:.06em;color:#7A5200;line-height:1.2} .qqsteps{list-style:none;counter-reset:q;padding:0;margin:0 0 14px} .qqsteps li{position:relative;padding:0 0 0 30px;margin:0 0 9px;font-size:13.5px;color:var(--text-2);line-height:1.7} .qqsteps li::before{counter-increment:q;content:counter(q);position:absolute;left:0;top:3px;width:20px;height:20px; border-radius:50%;background:var(--navy-900);color:var(--gold-500);display:grid;place-items:center; font-family:var(--mono);font-size:11px;font-weight:800} .qqsteps li b{color:var(--text)} .qqtip{margin:0 0 16px;font-size:12.5px;color:var(--muted);background:var(--surface-2); border-left:3px solid var(--line-2);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px 14px} .qqtip b{font-family:var(--mono);color:var(--navy-700)} .qqrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center} @media(max-width:560px){ .qqpanel{margin:6vh 14px;padding:20px 18px 18px} .qqnumrow .n{font-size:22px} .qqrow .btn{flex:1} } /* ---------- 回到顶部 ---------- */ .totop{position:fixed;right:22px;bottom:22px;z-index:70;width:42px;height:42px;border-radius:50%; border:1px solid var(--line);background:var(--surface);color:var(--navy-700);font-size:17px;font-weight:800;cursor:pointer; box-shadow:var(--sh);opacity:0;pointer-events:none;transition:.2s} .totop.on{opacity:1;pointer-events:auto} .totop:hover{border-color:var(--navy-500)} @media(max-width:720px){.totop{bottom:84px}} /* ---------- 补丁：视频卡可点击 + 占位标记 ---------- */ .vid[data-video-title]{cursor:pointer} .vid .thumb .vph{position:absolute;left:10px;top:10px;background:rgba(240,185,11,.94);color:#3D2C00; font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:5px;letter-spacing:.04em} .vgrid.four{grid-template-columns:repeat(4,1fr)} @media(max-width:1060px){.vgrid.four{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.vgrid.four{grid-template-columns:1fr}} .vid .vtags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px} .vid .vtag{font-size:11px;font-weight:750;padding:2px 8px;border-radius:5px;background:var(--surface-2); border:1px solid var(--line);color:var(--text-2)} .vid .vtag.lv1{background:var(--up-bg);border-color:#C9EBD6;color:#05603A} .vid .vtag.lv2{background:#EFF8FF;border-color:#CFE1F5;color:#0C447C} .vid .vtag.lv3{background:var(--gold-050);border-color:#F5E3A8;color:var(--warn)} /* ---------- 补丁：目录速览 / 小卡 / 键值表 ---------- */ .tocgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 8px} @media(max-width:900px){.tocgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.tocgrid{grid-template-columns:1fr}} .tocgrid a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px; font-size:13.5px;font-weight:700;color:var(--navy-700);display:block;transition:.15s} .tocgrid a:hover{border-color:var(--navy-500);text-decoration:none;transform:translateY(-2px);box-shadow:var(--sh)} .tocgrid a small{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:3px} .kv{list-style:none;padding:0;margin:14px 0} .kv li{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px} .kv li:last-child{border-bottom:none} .kv li b{flex:none;width:150px;color:var(--text);font-weight:750} .kv li span{color:var(--text-2)} @media(max-width:560px){.kv li{flex-direction:column;gap:2px}.kv li b{width:auto}} .minis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0} @media(max-width:860px){.minis{grid-template-columns:1fr}} .mini{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px} .mini .t{font-size:13.5px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:7px} .mini .t i{width:6px;height:6px;border-radius:50%;background:var(--gold-500);flex:none} .mini p{font-size:13.5px;color:var(--text-2);margin:0} .steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:980px){.steps4{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.steps4{grid-template-columns:1fr}} .tagline{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 14px} .tagline span{font-size:11.5px;font-weight:750;padding:3px 9px;border-radius:6px;background:var(--surface-2); border:1px solid var(--line);color:var(--text-2)} .empty{display:none;padding:30px;text-align:center;color:var(--muted);font-size:14.5px} .anchor-note{font-size:12.5px;color:var(--muted);margin-top:8px} .split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start} @media(max-width:900px){.split{grid-template-columns:1fr}} .callout{background:#EFF8FF;border:1px solid #CFE1F5;border-left:4px solid var(--navy-500);border-radius:var(--r-sm); padding:16px 20px;margin:18px 0} .callout .k{font-size:12px;font-weight:800;color:#0C447C;letter-spacing:.06em;margin-bottom:6px} .callout p,.callout ul{font-size:14px;color:#0C447C;margin:0} .callout ul{padding-left:18px;margin-top:6px} .danger{background:#FEF3F2;border:1px solid #FBD5D5;border-left:4px solid var(--down);border-radius:var(--r-sm); padding:16px 20px;margin:18px 0} .danger .k{font-size:12px;font-weight:800;color:#B42318;letter-spacing:.06em;margin-bottom:6px} .danger p,.danger ul{font-size:14px;color:#912018;margin:0} .danger ul{padding-left:18px;margin-top:6px} .danger b,.callout b{color:inherit} .quote-src{font-size:12.5px;color:var(--muted);margin-top:-6px} .pill-lvl{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:5px;letter-spacing:.04em; background:var(--navy-800);color:var(--gold-500);vertical-align:middle} .formula{background:var(--navy-900);color:#DDE9F6;border-radius:var(--r-sm);padding:14px 18px;font-family:var(--mono); font-size:13.5px;line-height:1.9;overflow-x:auto;margin:14px 0} .formula b{color:var(--gold-500)} .progress{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin:10px 0 0} .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-500),var(--gold-600))} /* ========================================================================== 移动端：宽表格折叠为带标签的卡片 每个 需带 data-label（由 /tmp/add_datalabels.py 批量注入）。 不折叠的话，overflow-x 会把最右侧（通常最有用）的列推出屏幕。 ========================================================================== */ @media(max-width:700px){ .tbl,.mk{overflow:visible} .tbl table,.mk table{min-width:0} .tbl thead,.mk thead{display:none} .tbl tbody,.tbl tbody tr,.tbl tbody td, .mk tbody,.mk tbody tr,.mk tbody td{display:block;width:100%} .tbl tbody tr,.mk tbody tr{background:var(--surface);border:1px solid var(--line); border-radius:var(--r);margin-bottom:14px;padding:4px 0 0;box-shadow:var(--sh)} .tbl tbody td,.mk tbody td{border-bottom:0;padding:9px 16px;text-align:left} .tbl tbody td::before,.mk tbody td::before{content:attr(data-label);display:block; font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--muted);margin-bottom:3px} .tbl tbody td:first-child,.mk tbody td:first-child{padding-top:14px;font-size:16.5px} .tbl tbody td:first-child::before,.mk tbody td:first-child::before{display:none} .tbl tbody td:last-child,.mk tbody td:last-child{border-top:1px solid var(--line);padding-bottom:14px} .tbl td.n,.mk td.n,.mk th.n{text-align:left} .tbl tbody td:last-child{font-family:inherit;font-weight:inherit} .mk tbody td.n{font-family:var(--mono)} } /* ---------- 首页 Hero：注册入口强化 ---------- */ .hero-reg{margin-bottom:16px} .hero-codeline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--gold-050); border:1px solid #F5E3A8;border-radius:var(--r-sm);padding:10px 14px;margin:0 0 22px;max-width:560px} .hero-codeline .k{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--warn)} .hero-codeline .v{font-family:var(--mono);font-size:20px;font-weight:800;letter-spacing:.1em;color:#7A5200; background:var(--surface);border:1px dashed #E5C878;border-radius:8px;padding:2px 12px;line-height:1.4} .hero-codeline .hero-copy{margin-left:auto;background:var(--navy-800);color:#FFD75E;border-color:var(--navy-800)} .hero-codeline .hero-copy:hover{background:var(--navy-700);color:#fff} @media(max-width:520px){.hero-codeline .hero-copy{margin-left:0;width:100%}} .src-inline{font-size:12.5px;color:var(--muted)} .filters{margin-bottom:20px} /* ---------- 币安实时行情：状态条与工具 ---------- */ .pxbtn-act::before{content:"↻";font-weight:800} .pxbtn-act:hover{border-color:var(--gold-600);color:#7A5200} .mk-auto{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2); font-weight:600;cursor:pointer;user-select:none} .mk-auto input{accent-color:var(--gold-500);width:14px;height:14px;cursor:pointer;margin:0} .mk-live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;color:var(--text-2)} .mk-live i{display:block;width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none} .mk-live.is-ok i{background:#12A150;box-shadow:0 0 0 3px rgba(18,161,80,.16)} .mk-live.is-ok{color:#0B7A4F} .mk-live.is-loading i{background:var(--gold-600);animation:mkPulse 1s ease-in-out infinite} .mk-live.is-warn i{background:var(--warn);box-shadow:0 0 0 3px rgba(180,83,9,.14)} .mk-live.is-warn{color:var(--warn)} .mk-live.is-err i{background:#C4292E;box-shadow:0 0 0 3px rgba(196,41,46,.14)} .mk-live.is-err{color:#C4292E} @keyframes mkPulse{0%,100%{opacity:1}50%{opacity:.3}} .mk td[data-k="price"]{font-weight:700} .mk tbody tr:hover td{background:var(--surface-2)} .mk-foot{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.75} .mk-foot code{font-family:var(--mono);font-size:12px;background:var(--surface-2); border:1px solid var(--line);border-radius:5px;padding:1px 5px} .mk-foot b{color:var(--text-2);font-family:var(--mono);font-variant-numeric:tabular-nums} /* ---------- 币安官方学习与行情入口 ---------- */ .offblock{margin-top:36px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:26px 26px 24px;box-shadow:var(--sh)} .offhead{display:flex;gap:16px;align-items:flex-start;justify-content:space-between; margin-bottom:18px;flex-wrap:wrap} .offhead h3{margin-bottom:6px} .offhead p{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.75;max-width:740px} .offtag{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:#7A5200;background:var(--gold-050); border:1px solid #F5E3A8;border-radius:999px;padding:4px 11px;flex:none;white-space:nowrap} .offgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(242px,1fr));gap:14px} .offcard{display:flex;flex-direction:column;gap:7px;background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-sm);padding:16px 17px;text-decoration:none;color:inherit;transition:.16s} .offcard:hover{border-color:var(--navy-500);background:var(--surface);transform:translateY(-2px); box-shadow:var(--sh);text-decoration:none} .offcard .oic{width:28px;height:28px;border-radius:9px;background:var(--navy-800);color:#FFD75E; font-weight:800;font-size:13px;display:grid;place-items:center;flex:none} .offcard b{font-size:14.5px;color:var(--text);line-height:1.45;font-weight:730} .offcard .odesc{font-size:12.5px;color:var(--text-2);line-height:1.7} .offcard .ogo{font-family:var(--mono);font-size:11.5px;color:var(--navy-500);margin-top:2px; word-break:break-all} @media(max-width:520px){.offblock{padding:20px 18px}.offgrid{grid-template-columns:1fr}} /* ---------- 页脚「关注与联系」：QQ 咨询 + X，后续加平台照抄一行 ---------- */ .f-social{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 12px} .f-social .fct{flex:none;width:100%;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#7A90AE;margin:0 0 2px} .f-social button,.f-social a{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:12px; font-weight:700;line-height:1;padding:7px 11px;border-radius:999px;cursor:pointer;text-decoration:none; border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#DCE8F5;transition:.16s} /* 固定宽度：复制反馈文案「已复制 ✓」比原文短，不锁宽会让整块跳一下 */ .f-social button{min-width:127px} .f-social button:hover,.f-social a:hover{border-color:var(--gold-500);color:var(--gold-500); background:rgba(240,185,11,.12);text-decoration:none} .f-social .ic{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.04em;opacity:.75} .f-social button.copied{border-color:var(--up-bright);color:var(--up-bright); background:rgba(52,211,153,.14)} /* ---------- 页尾显眼位：QQ 咨询（整块独立、金色描边，点按钮弹窗） ---------- */ .f-qq{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px;padding:18px 20px; border-radius:var(--r);border:1px solid rgba(240,185,11,.45); background:linear-gradient(135deg,rgba(240,185,11,.15),rgba(240,185,11,.04))} .f-qq .fq-badge{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,#F0B90B,#D9A400);color:#1B2430;font-family:var(--mono); font-weight:850;font-size:14px;letter-spacing:.02em} .f-qq .fq-t{flex:1;min-width:230px;display:flex;flex-direction:column;gap:2px} .f-qq .fq-t b{color:#fff;font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.4} .f-qq .fq-t span{color:#C9D8EA;font-size:12.5px;line-height:1.6} .f-qq .fq-btn{flex:none;font-family:var(--mono);font-size:14px;font-weight:800;letter-spacing:.02em; padding:13px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer; background:linear-gradient(135deg,#F0B90B,#E0A800);color:#1B2430;transition:.16s} .f-qq .fq-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(240,185,11,.28);color:#1B2430} @media(max-width:620px){.f-qq{padding:16px;gap:12px}.f-qq .fq-btn{width:100%;text-align:center;padding:12px}} /* 正文内可点击复制的小按钮（关于页联系方式） */ .kv>div{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px;align-items:baseline} .kv>div:last-child{border-bottom:none} .kv>div>span{flex:none;width:150px;color:var(--text-2)} .kv>div>b{font-weight:750;color:var(--text)} .lbtn{font:inherit;font-weight:800;background:none;border:0;padding:0;cursor:pointer;color:var(--navy-500); border-bottom:1px dashed currentColor;line-height:1.45} .lbtn:hover{color:var(--gold-600)} .lbtn.copied{color:var(--up);border-bottom-color:var(--up)} @media(max-width:560px){.kv>div{flex-direction:column;gap:2px}.kv>div>span{width:auto}} /* ---------- 视频卡：可点击 · 来源币安官方频道 ---------- */ a.vid{text-decoration:none;color:inherit;cursor:pointer} a.vid:hover{text-decoration:none;border-color:var(--navy-500)} .vid .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .vid .thumb::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(11,18,32,.18),rgba(11,18,32,.42))} .vid .thumb .play{position:relative;z-index:2;box-shadow:0 6px 18px rgba(11,18,32,.4);transition:.18s} .vid:hover .thumb .play{transform:scale(1.09);background:#fff} .vid .thumb .vph{z-index:3} .vid .vlang{position:absolute;right:10px;top:10px;z-index:3;font-size:10.5px;font-weight:800; padding:2px 7px;border-radius:5px;letter-spacing:.04em} .vid .vlang.cn{background:rgba(11,122,79,.94);color:#fff} .vid .vlang.en{background:rgba(11,18,32,.8);color:#DCE8F5} .vid .vo{display:block;font-size:11.5px;color:var(--muted);line-height:1.55;margin:0 0 4px; font-style:normal;word-break:break-word} .vid .b .m{color:var(--navy-500);font-weight:700} .morevids{margin-top:20px;text-align:center} /* ---------- 视频弹窗：内嵌官方播放器 ---------- */ .vstage.playing{padding:0;display:block} .vstage.playing::after{display:none} .vframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#0B1220} .vmeta .vofficial{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.55;word-break:break-word} .vmeta .vsrc{font-size:12px;color:var(--text-2);background:var(--gold-050);border:1px solid #F5E3A8; border-radius:8px;padding:9px 13px;margin:0 0 16px;line-height:1.7} .vmeta .vsrc b{color:#7A5200} @media(max-width:620px){ .vpanel{margin:4vh 12px;max-width:none} .vrow .btn{flex:1 1 auto} } /* -------------------------------------------------------------------------- v4 · 受限环境提示层 / 加载失败提示层 / 大屏帮助层 .vfile 与 .vcover 是同一个视觉（深底浅字，压在封面之上，z-index 低于 .vctl） -------------------------------------------------------------------------- */ .vid .thumb .vfile, .vid .thumb .vcover, .vstage .vcover{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:7px;text-align:center;padding:16px 18px; background:#0B1220;color:#fff} .vid .thumb .vfile > b, .vid .thumb .vcover > b, .vstage .vcover > b{font-size:13.5px;font-weight:850;color:var(--gold-500);line-height:1.4} .vid .thumb .vfx, .vstage .vcover .vfx{font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.8);max-width:36ch} .vid .thumb .vfr, .vstage .vcover .vfr{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:3px} .vid .thumb .vfb, .vstage .vcover .vfb{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800; line-height:1;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff; border:1px solid rgba(255,255,255,.38);cursor:pointer;transition:.15s} .vid .thumb .vfb:hover, .vstage .vcover .vfb:hover{background:rgba(255,255,255,.22);border-color:var(--gold-500)} .vid .thumb .vfb.gold, .vstage .vcover .vfb.gold{background:var(--gold-500);border-color:var(--gold-500);color:#3D2C00} /* 大屏弹窗里的「本地/预览环境」说明正文。 注意必须同时重置 justify-items：.vstage 上的 place-items:center 带着 justify-items:center，而按 CSS Box Alignment 规范它会作用到块级子元素上， 把 h5/p/ul 统统收缩居中（只改 display/text-align 是治不好的）。 */ .vstage.help{padding:22px 24px;display:block;text-align:left;justify-items:stretch; align-items:stretch;background:var(--surface);overflow:auto} .vstage.help::after{display:none} .vstage.help h5{margin:0 0 7px;font-size:13.5px;font-weight:850;color:var(--gold-600)} .vstage.help h5:not(:first-child){margin-top:16px} .vstage.help p,.vstage.help li{font-size:12.5px;line-height:1.75;color:var(--text-2);margin:0 0 7px} .vstage.help ul,.vstage.help ol{margin:0 0 7px;padding-left:22px} .vstage.help li{padding-left:2px} .vstage.help code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px; background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--gold-600)} /* 大屏弹窗：内嵌 B 站/YouTube 时的容器 */ .vstage.playing.help{padding:0} /* ========================================================================== v3 · 图标体系 / 统一下拉导航 / 明暗双主题 / 语言切换 全部样式集中在此段，改这一个文件全站生效。 ========================================================================== */ /* ---------- 1. 统一色标（色块同源：同一饱和度家族，浅底 10~14% 透明） ---------- */ .ichip{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;flex:none; background:var(--tone-bg);color:var(--tone);border:1px solid var(--tone-bd);transition:.16s} .ichip .i{width:18px;height:18px} .ichip.sm{width:28px;height:28px;border-radius:9px} .ichip.sm .i{width:14px;height:14px} .ichip.lg{width:44px;height:44px;border-radius:13px} .ichip.lg .i{width:22px;height:22px} .ichip.tone-1{--tone:#1B4A7A;--tone-bg:rgba(27,74,122,.10);--tone-bd:rgba(27,74,122,.24)} .ichip.tone-2{--tone:#0B7A4F;--tone-bg:rgba(11,122,79,.10);--tone-bd:rgba(11,122,79,.24)} .ichip.tone-3{--tone:#8A6508;--tone-bg:rgba(240,185,11,.14);--tone-bd:rgba(240,185,11,.30)} .ichip.tone-4{--tone:#B45309;--tone-bg:rgba(180,83,9,.10);--tone-bd:rgba(180,83,9,.24)} .ichip.tone-5{--tone:#6D28D9;--tone-bg:rgba(109,40,217,.10);--tone-bd:rgba(109,40,217,.24)} .ichip.tone-6{--tone:#0E7490;--tone-bg:rgba(14,116,144,.10);--tone-bd:rgba(14,116,144,.24)} html[data-theme="dark"] .ichip.tone-1{--tone:#7FB2E8;--tone-bg:rgba(127,178,232,.14);--tone-bd:rgba(127,178,232,.30)} html[data-theme="dark"] .ichip.tone-2{--tone:#6EE7B7;--tone-bg:rgba(52,211,153,.14);--tone-bd:rgba(52,211,153,.30)} html[data-theme="dark"] .ichip.tone-3{--tone:#F5C542;--tone-bg:rgba(240,185,11,.16);--tone-bd:rgba(240,185,11,.34)} html[data-theme="dark"] .ichip.tone-4{--tone:#FBBF24;--tone-bg:rgba(245,158,11,.14);--tone-bd:rgba(245,158,11,.30)} html[data-theme="dark"] .ichip.tone-5{--tone:#C4B5FD;--tone-bg:rgba(139,92,246,.16);--tone-bd:rgba(139,92,246,.32)} html[data-theme="dark"] .ichip.tone-6{--tone:#67E8F9;--tone-bg:rgba(34,211,238,.14);--tone-bd:rgba(34,211,238,.30)} /* ---------- 2. 图标基线 ---------- */ .i{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.16em;flex:none} .i svg{display:block;width:100%;height:100%;overflow:visible} .svgdefs{position:absolute;width:0;height:0;overflow:hidden} /* 知识板块卡：九个方塊走同一套色标（同一饱和度家族），编号做成角标不抢视线 */ .kgrid .k .ic{position:relative;background:var(--tone-bg);color:var(--tone);border:1px solid var(--tone-bd)} .kgrid .k .ic .i{width:18px;height:18px} .kgrid .k .ic .no{position:absolute;right:-6px;top:-6px;font-family:var(--mono);font-size:9.5px; font-weight:800;line-height:1;padding:2px 4px;border-radius:6px;background:var(--gold-500); color:#1B2430;letter-spacing:.02em} .kgrid .k:hover .ic{transform:translateY(-1px)} .eyebrow .i{width:14px;height:14px;margin-right:5px;color:var(--gold-500);vertical-align:-.18em} .sec-head .eyebrow .i,.mod-head .eyebrow .i{color:var(--gold-500)} .btn .i{width:15px;height:15px} footer h5 .i{width:14px;height:14px;margin-right:6px;color:var(--gold-500);vertical-align:-.18em} .f-social .ic .i,footer .ic .i{width:13px;height:13px;margin:0} .trust .ic{background:transparent;color:var(--up)} .trust .ic .i{width:16px;height:16px} .kgrid .k .kh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .kgrid .k .kh .ic{margin-bottom:0;background:var(--tone-bg);color:var(--tone);border:1px solid var(--tone-bd)} .kgrid .k .kh .no{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.06em} .kgrid .k .kh .ic .i{width:17px;height:17px} .mod-head .num{color:var(--gold-500)} .mod-head .num .i{width:20px;height:20px} .step .n .i{width:19px;height:19px} .pill-lvl .i{width:12px;height:12px;margin-right:3px;vertical-align:-.12em} .layer .n{display:flex;align-items:center;gap:7px} .layer .n .i{width:15px;height:15px} .offcard .oic{color:#FFD75E} .offcard .oic .i{width:15px;height:15px} .toolrow .pxbtn .i,.mk-auto .i{width:14px;height:14px} .pxbtn::before{content:none} .pxbtn .i:first-child{color:var(--gold-600)} .src-inline .i,.mk-foot .i{width:13px;height:13px;vertical-align:-.16em;color:var(--muted)} .f-qq .fq-t b .i{width:16px;height:16px;color:var(--gold-500);margin-right:5px;vertical-align:-.16em} .crumb .i{width:12px;height:12px;margin:0 2px;color:var(--muted);vertical-align:-.12em} .side .t .i{width:13px;height:13px;margin-right:5px;color:var(--gold-500)} .modvid .lbl .i{width:13px;height:13px;margin-right:5px;color:var(--gold-500)} .tocgrid a .i{width:14px;height:14px;margin-right:5px;color:var(--gold-600);vertical-align:-.16em} /* ---------- 3. 页眉控制：主题切换 + 语言切换（多实例同步） ---------- */ .navtools{display:flex;align-items:center;gap:6px;margin-left:4px;padding-left:10px;border-left:1px solid var(--line)} .tbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:9px; border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);cursor:pointer; font:inherit;font-size:12.5px;font-weight:750;transition:.15s} .tbtn:hover{border-color:var(--navy-500);color:var(--navy-600)} .tbtn:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px} .tbtn .i{width:16px;height:16px} .tbtn .lc{font-family:var(--mono);font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--gold-600)} .t-btn .t-sun{display:none} .t-btn .t-moon{display:inline-flex} html[data-theme="dark"] .t-btn .t-sun{display:inline-flex} html[data-theme="dark"] .t-btn .t-moon{display:none} .langwrap{position:relative} .langmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:196px;background:var(--surface); border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 36px -18px rgba(11,18,32,.42); padding:6px;display:none;z-index:95} .langmenu.open{display:block} .lmitem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border:0; background:none;border-radius:8px;font:inherit;font-size:13.5px;font-weight:650;color:var(--text-2);cursor:pointer} .lmitem:hover{background:var(--surface-2);color:var(--navy-600)} .lmitem .lc{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--gold-600);flex:none;width:30px} .lmitem.on{background:var(--gold-050);color:var(--warn)} .lmitem.on .lc{color:var(--warn)} .lmitem.on::after{content:"✓";margin-left:auto;font-weight:800} /* ---------- 4. 导航下拉分类菜单 ---------- */ nav.main .ni{position:relative;display:flex} nav.main .ni > a{padding:8px 11px;border-radius:8px;font-size:14.5px;color:var(--text-2);font-weight:600; white-space:nowrap;display:inline-flex;align-items:center;gap:5px} nav.main .ni > a:hover{background:var(--surface-2);text-decoration:none;color:var(--navy-600)} nav.main .ni > a.on{color:var(--navy-700);background:var(--gold-050)} nav.main .ni > a .chev{width:11px;height:11px;opacity:.6;transition:.18s} nav.main .ni:hover > a .chev,nav.main .ni.open > a .chev{transform:rotate(180deg)} .dd{position:absolute;left:0;top:calc(100% + 8px);min-width:298px;background:var(--surface); border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 44px -22px rgba(11,18,32,.45); padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:95} nav.main .ni:hover > .dd,nav.main .ni.open > .dd,nav.main .ni:focus-within > .dd{opacity:1;visibility:visible;transform:none} .dd a{display:flex;align-items:flex-start;gap:11px;padding:9px 11px;border-radius:10px;text-decoration:none;transition:.14s} .dd a:hover{background:var(--surface-2);text-decoration:none} .dd a > span{display:flex;flex-direction:column;min-width:0} .dd a b{font-size:13.8px;color:var(--text);font-weight:730;line-height:1.4} .dd a small{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5} .dd a:hover b{color:var(--navy-600)} .dd .ddsep{height:1px;background:var(--line);margin:6px 8px} .dd .ddhead{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--gold-600); text-transform:uppercase;padding:8px 12px 4px} .dd.wide{min-width:460px} .dd.wide .ddgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px} .navside{display:none} /* 移动端底栏 / 页脚里的语言与主题按钮也走同一套 */ .tbtn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#DCE8F5} .tbtn.ghost:hover{border-color:var(--gold-500);color:var(--gold-500)} .tbtn.ghost .lc{color:var(--gold-500)} /* ========================================================================== 5. 暗色主题 ========================================================================== */ html[data-theme="dark"]{ color-scheme:dark; --bg:#0A111C; --surface:#101B2B; --surface-2:#16233A; --line:#243349; --line-2:#334663; --text:#E9EFF8; --text-2:#B9C8DC; --muted:#8FA3BC; /* 链接/次要文字用的深蓝在暗底上必须提亮，否则不可读 */ --navy-500:#7FB2E8; --navy-600:#A9C6EA; --gold-500:#F0B90B; --gold-600:#E8B930; --gold-050:#2A2413; --gold-100:#3A3116; --up:#34D399; --up-bg:#12291F; --down:#F87171; --warn:#F5C542; --warn-bg:#2A2412; --px-up:#F87171; --px-down:#34D399; --px-up-bg:#2C1517; --px-down-bg:#12291F; --sh:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6); } html.px-us[data-theme="dark"]{--px-up:#34D399;--px-down:#F87171;--px-up-bg:#12291F;--px-down-bg:#2C1517} html[data-theme="dark"] body{background:var(--bg)} html[data-theme="dark"] header.nav{background:rgba(16,27,43,.92)} html[data-theme="dark"] .nav-toggle span{background:var(--text)} html[data-theme="dark"] .nav-toggle{border-color:var(--line-2);background:var(--surface)} html[data-theme="dark"] a{color:var(--navy-500)} /* 按钮若继承上面的链接色，金底/深底上的文字对比度会崩掉，这里按按钮语义覆盖回来 */ html[data-theme="dark"] a.btn,html[data-theme="dark"] .btn{color:var(--navy-600)} html[data-theme="dark"] a.btn-gold,html[data-theme="dark"] .btn-gold{color:#3D2C00} html[data-theme="dark"] a.btn-gold:hover,html[data-theme="dark"] .btn-gold:hover{color:#3D2C00} html[data-theme="dark"] a.btn-dark,html[data-theme="dark"] .btn-dark{color:#fff} html[data-theme="dark"] a.btn-line,html[data-theme="dark"] .btn-line{color:var(--navy-600)} html[data-theme="dark"] .hero h1 em{color:var(--navy-500)} /* 深蓝底块在暗色下需要一道内描边才有层次 */ html[data-theme="dark"] .refcard,html[data-theme="dark"] .regband,html[data-theme="dark"] .eeat, html[data-theme="dark"] .keybox,html[data-theme="dark"] .result,html[data-theme="dark"] .formula, html[data-theme="dark"] .calc .hd,html[data-theme="dark"] .side .side-cta,html[data-theme="dark"] footer{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} html[data-theme="dark"] .kgrid .k .ic,html[data-theme="dark"] .step .n,html[data-theme="dark"] .mod-head .num, html[data-theme="dark"] .vsteps li::before,html[data-theme="dark"] .offcard .oic, html[data-theme="dark"] .pill-lvl,html[data-theme="dark"] .avatar,html[data-theme="dark"] .qqsteps li::before{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)} html[data-theme="dark"] .notice .txt b{background:#2A2413;color:#FFD75E} html[data-theme="dark"] .notice .tag{background:#2A2413;color:#FFD75E} html[data-theme="dark"] .notice .btn{background:#0B1220;color:#FFD75E;border-color:#0B1220} html[data-theme="dark"] .badge-line{background:rgba(240,185,11,.10);border-color:rgba(240,185,11,.30);color:#F5C542} html[data-theme="dark"] .navcode,html[data-theme="dark"] .mbar .code,html[data-theme="dark"] .vcode{ background:rgba(240,185,11,.16);color:#F5C542} html[data-theme="dark"] .hero-codeline{background:rgba(240,185,11,.08);border-color:rgba(240,185,11,.26)} html[data-theme="dark"] .hero-codeline .k{color:#F5C542} html[data-theme="dark"] .hero-codeline .v{color:#F5C542;background:var(--surface);border-color:rgba(240,185,11,.36)} html[data-theme="dark"] .side ol a.on{background:rgba(240,185,11,.12);color:#F5C542} html[data-theme="dark"] .side ol a.on::before{color:#F5C542} html[data-theme="dark"] .dd a.on b{color:#F5C542} html[data-theme="dark"] .prose blockquote{background:rgba(240,185,11,.08)} html[data-theme="dark"] .ex .top .pill{background:rgba(240,185,11,.12);color:#F5C542;border-color:rgba(240,185,11,.28)} html[data-theme="dark"] .offtag{background:rgba(240,185,11,.12);color:#F5C542;border-color:rgba(240,185,11,.30)} html[data-theme="dark"] .vmeta .vsrc{background:rgba(240,185,11,.08);border-color:rgba(240,185,11,.26)} html[data-theme="dark"] .vmeta .vsrc b{color:#F5C542} html[data-theme="dark"] .qqnumrow{background:rgba(240,185,11,.10);border-color:rgba(240,185,11,.28)} html[data-theme="dark"] .qqnumrow .lb,html[data-theme="dark"] .qqnumrow .n{color:#F5C542} html[data-theme="dark"] .step .tip{background:rgba(240,185,11,.10);color:#F5C542} html[data-theme="dark"] .chip{background:var(--surface-2);border-color:var(--line);color:var(--text-2)} html[data-theme="dark"] .chip.deep{background:rgba(240,185,11,.14);border-color:rgba(240,185,11,.30);color:#F5C542} html[data-theme="dark"] .chip.hot{background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.30);color:#FCA5A5} html[data-theme="dark"] .chip.pol{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.30);color:#93C5FD} html[data-theme="dark"] .chip.chain{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.30);color:#6EE7B7} html[data-theme="dark"] .note{background:rgba(96,165,250,.10);border-color:rgba(96,165,250,.26);color:#BFDBFE} html[data-theme="dark"] .note b{color:#DBEAFE} html[data-theme="dark"] .callout{background:rgba(96,165,250,.10);border-color:rgba(96,165,250,.26)} html[data-theme="dark"] .callout .k,html[data-theme="dark"] .callout p,html[data-theme="dark"] .callout ul{color:#BFDBFE} html[data-theme="dark"] .danger{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.26)} html[data-theme="dark"] .danger .k,html[data-theme="dark"] .danger p,html[data-theme="dark"] .danger ul{color:#FCA5A5} html[data-theme="dark"] .warnbox{background:rgba(240,185,11,.09);border-color:rgba(240,185,11,.26)} html[data-theme="dark"] .warnbox .k,html[data-theme="dark"] .warnbox p,html[data-theme="dark"] .warnbox ul{color:#F5C542} html[data-theme="dark"] .risk{background:rgba(240,185,11,.07);border-color:rgba(240,185,11,.24)} html[data-theme="dark"] .risk h3,html[data-theme="dark"] .risk ul{color:#F5C542} html[data-theme="dark"] .risk h3 .ic{color:#1B2430} html[data-theme="dark"] .lv.l1 .tag,html[data-theme="dark"] .mod-head .lvl{background:var(--up-bg);color:#6EE7B7} html[data-theme="dark"] .lv.l2 .tag,html[data-theme="dark"] .mod-head .lvl.l2{background:rgba(96,165,250,.14);color:#93C5FD} html[data-theme="dark"] .lv.l3 .tag,html[data-theme="dark"] .mod-head .lvl.l3{background:rgba(240,185,11,.14);color:#F5C542} html[data-theme="dark"] .vid .vtag.l1{background:var(--up-bg);border-color:rgba(52,211,153,.30);color:#6EE7B7} html[data-theme="dark"] .vid .vtag.l2{background:rgba(96,165,250,.14);border-color:rgba(96,165,250,.30);color:#93C5FD} html[data-theme="dark"] .vid .vtag.l3{background:rgba(240,185,11,.14);border-color:rgba(240,185,11,.30);color:#F5C542} html[data-theme="dark"] .layer.l-a{border-left-color:#3B82F6} html[data-theme="dark"] .layer.l-b{border-left-color:#34D399} html[data-theme="dark"] .layer.l-c{border-left-color:#F0B90B} html[data-theme="dark"] .layer.l-d{border-left-color:#F59E0B} html[data-theme="dark"] .mk-live.is-ok{color:#34D399} html[data-theme="dark"] .mk-live.is-err{color:#F87171} html[data-theme="dark"] .mk-live.is-warn{color:#F5C542} html[data-theme="dark"] .pxbtn-act:hover{color:#F5C542} html[data-theme="dark"] .disclose{background:rgba(240,185,11,.10);border-color:rgba(240,185,11,.26);color:#F2DFAE} html[data-theme="dark"] .tbl code,html[data-theme="dark"] .prose code{color:#C9D7E8} html[data-theme="dark"] .vpanel,html[data-theme="dark"] .qqpanel{border:1px solid var(--line)} html[data-theme="dark"] .vmask,html[data-theme="dark"] .qqmask{background:rgba(3,7,14,.72)} html[data-theme="dark"] .ex,html[data-theme="dark"] .mk,html[data-theme="dark"] .tbl{box-shadow:0 1px 2px rgba(0,0,0,.4)} html[data-theme="dark"] .offblock{background:var(--surface)} html[data-theme="dark"] .f-social button,html[data-theme="dark"] .f-social a{background:rgba(255,255,255,.05)} html[data-theme="dark"] .vid .thumb::before{background:linear-gradient(180deg,rgba(3,7,14,.22),rgba(3,7,14,.5))} /* ---------- 6. 工具类 ---------- */ .band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .band-plain{background:var(--surface)} .vid .vtag.l1{background:var(--up-bg);border-color:#C9EBD6;color:#05603A} .vid .vtag.l2{background:#EFF8FF;border-color:#CFE1F5;color:#0C447C} .vid .vtag.l3{background:var(--gold-050);border-color:#F5E3A8;color:var(--warn)} /* ---------- 7. 播放按钮语义化 ---------- */ .vid .thumb .play{background:rgba(255,255,255,.94);border:0;cursor:pointer} /* ========================================================================== v3.1 · 卡片内嵌入式播放（点击即播，不跳转） 点卡片 → 缩略图上直接换来币安官方播放器；再点一次或点「停止」卸载 iframe。 ========================================================================== */ .vid .thumb .frm{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5; background:#0B1220;display:block} /* 播放中：把封面层全部让位给播放器（用 opacity 而非 display，避免网格跳动） */ .vid.playing .thumb img, .vid.playing .thumb::before, .vid.playing .thumb .play, .vid.playing .thumb .vph, .vid.playing .thumb .vlang, .vid.playing .thumb .dur{opacity:0;pointer-events:none} .vid.playing{border-color:var(--gold-500);box-shadow:0 0 0 2px rgba(240,185,11,.55),var(--sh)} /* 播放中的浮层控件。用 而不是