/* ============================================================ 晨幻通达信指标专家 · 公式定制 — 深色极光玻璃拟态科技风 设计系统 v2（对齐 Ardot 高保真稿：极光+栅格背景 / 品牌色 / 红涨绿跌状态色 / 玻璃面板 / 辉光 / 状态流步进器 / KPI 火花线） 所有既有类名保留，仅升级质感与 token；新增组件用于详情/看板/支付。 ============================================================ */ :root{ /* —— 画布与面板（对齐 Ardot canvas #030014 / panel #0A0A18） —— */ --bg:#030014; --bg2:#0A0A18; --panel:rgba(10,10,24,0.72); /* 玻璃面板（aurora 下同款） */ --panel-solid:#0A0A18; --panel2:rgba(14,14,31,0.85); --panel3:rgba(14,14,31,0.55); --line:rgba(110,168,255,0.12); /* 极细描边 */ --line-strong:rgba(110,168,255,0.34); /* —— 文本（Ardot ink） —— */ --txt:#F4F5FA; --ink-secondary:#A9B0C0; --muted:#6B7186; /* —— 品牌色（Ardot brand） —— */ --brand:#6EA8FF; --brand2:#A878FF; --brand3:#4BE0C8; /* —— 状态色（红涨绿跌：up 红 / down 绿，符合中国习惯） —— */ --up:#FF4D4F; --down:#00C88E; --ok:#38E0A6; --warn:#FFB454; --err:#FF6B81; --chip:rgba(40,50,86,0.55); /* —— 辉光（Ardot shadow） —— */ --glow-blue:0 0 24px rgba(110,168,255,0.35); --glow-cyan:0 0 28px rgba(75,224,200,0.40); --glow-purple:0 0 24px rgba(168,120,255,0.35); --card:0 8px 40px rgba(0,0,0,0.45); --radius:16px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--txt); font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; line-height:1.65; font-size:15px; -webkit-font-smoothing:antialiased; min-height:100vh; } /* —— 极光 + 微光栅格背景（固定氛围层，对齐 Ardot aurora-bg::before/::after） —— */ body::before{ content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(60% 50% at 30% 18%, rgba(168,120,255,0.16) 0%, rgba(168,120,255,0) 70%), radial-gradient(50% 40% at 85% 8%, rgba(75,224,200,0.08) 0%, rgba(75,224,200,0) 70%); } body::after{ content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; background-image: linear-gradient(rgba(110,168,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(110,168,255,0.04) 1px, transparent 1px); background-size:40px 40px; } /* —— 自定义滚动条（Ardot 风格） —— */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(110,168,255,0.25);border-radius:999px} ::-webkit-scrollbar-thumb:hover{background:rgba(110,168,255,0.4)} a{color:var(--brand);text-decoration:none;transition:color .2s} a:hover{text-decoration:underline;color:var(--brand2)} /* ---------- 顶部导航：玻璃化 + 搜索（对齐 Ardot Nav） ---------- */ .topbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 26px; height:72px; background:rgba(10,10,24,0.72); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--line); box-shadow:0 4px 24px rgba(0,0,0,0.35); } .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.6px; font-size:17px; white-space:nowrap; } .brand .mark{ width:30px;height:30px;border-radius:9px;display:grid;place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:var(--glow-blue); color:#fff; font-size:16px; } .brand .name{ background:linear-gradient(90deg,var(--brand),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 18px rgba(110,168,255,0.30); } .brand .tag{color:var(--muted);font-size:12px;font-weight:500;letter-spacing:0} .topbar nav{display:flex;align-items:center;gap:18px} .topbar nav a{color:var(--ink-secondary);font-size:14px;font-weight:500} .topbar nav a:hover{color:var(--brand);text-decoration:none} .topbar .uname{color:var(--muted);font-size:13px} .nav-search{ display:none; align-items:center; gap:8px; flex:1; max-width:420px; margin:0 8px; padding:0 14px; height:40px; border:1px solid var(--line); border-radius:10px; background:rgba(110,168,255,0.05); color:var(--muted); } .nav-search input{width:100%;border:0;background:transparent;outline:none;color:var(--txt);font-size:14px} .nav-search input::placeholder{color:var(--muted)} .nav-bell{position:relative;color:var(--ink-secondary);background:none;border:0;cursor:pointer;font-size:18px;line-height:1} .nav-bell::after{content:'';position:absolute;top:2px;right:2px;width:7px;height:7px;border-radius:50%; background:var(--brand3);box-shadow:var(--glow-cyan)} @media (min-width:860px){ .nav-search{display:flex} } .btn-login{ padding:8px 20px;border-radius:999px;font-size:14px;font-weight:600;color:#06122e; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:var(--glow-blue);border:0;cursor:pointer;text-decoration:none; transition:transform .18s ease, filter .18s ease; } .btn-login:hover{transform:scale(1.05);color:#06122e;filter:brightness(1.05);text-decoration:none} .container{max-width:1200px;margin:0 auto;padding:34px 24px 80px} /* ---------- 玻璃卡片（对齐 Ardot glass） ---------- */ .card{ position:relative; background:var(--panel); backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:18px; box-shadow:var(--card), inset 0 1px 0 rgba(255,255,255,0.05); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 16px 44px rgba(0,0,0,0.5), 0 0 0 1px rgba(110,168,255,0.10), inset 0 1px 0 rgba(255,255,255,0.07); } .card::before{ /* 顶部悬浮辉光描边 */ content:'';position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--brand),transparent); opacity:0;transition:opacity .25s; } .card:hover::before{opacity:1} h1,h2,h3{margin:0 0 12px;color:#f2f5ff;letter-spacing:.3px;font-weight:750} h1{font-size:26px} h2{font-size:19px} h3{font-size:16px} .muted{color:var(--muted)} .inline{display:inline} form.inline{display:inline} /* ---------- 按钮（对齐 Ardot 渐变按钮） ---------- */ button,.btn{ background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff;border:0;border-radius:12px;padding:11px 20px;cursor:pointer; font-size:14px;font-weight:650;letter-spacing:.3px; box-shadow:0 8px 22px rgba(110,120,255,0.30), inset 0 1px 0 rgba(255,255,255,0.25); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } button:hover,.btn:hover{transform:translateY(-2px);text-decoration:none; box-shadow:0 12px 30px rgba(110,120,255,0.46), inset 0 1px 0 rgba(255,255,255,0.30); filter:brightness(1.06);color:#fff} button:active{transform:translateY(0)} button:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none} button.link{background:none;color:var(--brand);padding:0 6px;font-weight:500;box-shadow:none} button.link:hover{text-decoration:underline;filter:none;transform:none} button.ghost{background:rgba(255,255,255,0.04);color:var(--txt); border:1px solid var(--line-strong);box-shadow:none} button.ghost:hover{background:rgba(255,255,255,0.09);transform:translateY(-1px);filter:none} .btn-cyan{background:linear-gradient(135deg,var(--brand3),#2fd8c0);color:#04201b;box-shadow:var(--glow-cyan)} .btn-cyan:hover{color:#04201b;box-shadow:0 12px 30px rgba(75,224,200,0.46)} /* ---------- 表单控件 ---------- */ input[type=text],input[type=password],input[type=email],input[type=number], textarea,select{ width:100%; background:rgba(6,6,15,0.6); border:1px solid var(--line); color:var(--txt); border-radius:11px; padding:11px 13px; margin:4px 0 14px; font-size:14px; transition:border-color .2s, box-shadow .2s, background .2s; font-family:inherit; } input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(110,168,255,0.18), 0 0 18px rgba(110,168,255,0.15); background:rgba(10,12,26,0.85); } textarea{resize:vertical;line-height:1.6} input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:auto;height:auto; transform:scale(1.15);margin:0;cursor:pointer} label{display:block;color:var(--muted);font-size:13px;margin-top:6px;font-weight:500} /* ---------- 条件分组 / 复选（对齐 Ardot 目录卡片） ---------- */ .group{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px; background:rgba(14,14,31,0.5); backdrop-filter:blur(8px); } .group h3{font-size:15px;color:var(--brand);margin:0 0 10px;letter-spacing:.3px} .cond{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)} .cond:last-child{border-bottom:0} .cond input[type=checkbox],.cond input[type=radio]{margin-top:4px;flex:0 0 auto} .cond label{margin:0;color:var(--txt);font-weight:500;cursor:pointer} .params{display:flex;flex-wrap:wrap;gap:10px;margin-left:26px} .params input{width:120px;margin:0;display:inline-block;padding:7px 10px} /* ---------- 标签 / 状态徽章（对齐 Ardot StatusPill） ---------- */ .pill{ display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px; background:rgba(110,168,255,0.10);color:#bcd0ff;border:1px solid rgba(110,168,255,0.22); margin-right:6px;margin-bottom:4px; } .status{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:12px; font-weight:700;border:1px solid transparent;letter-spacing:.3px} .status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9} .s-DRAFT{background:rgba(160,170,210,0.14);color:#aab4d6;border-color:rgba(160,170,210,0.30)} .s-QUOTED{background:rgba(255,180,84,0.14);color:var(--warn);border-color:rgba(255,180,84,0.32)} .s-DEPOSIT_PAID{background:rgba(56,224,166,0.14);color:var(--ok);border-color:rgba(56,224,166,0.32)} .s-GENERATING{background:rgba(160,170,210,0.14);color:#aab4d6;border-color:rgba(160,170,210,0.30)} .s-REVIEWING{background:rgba(110,168,255,0.14);color:var(--brand);border-color:rgba(110,168,255,0.32)} .s-AWAIT_DELIVERY{background:rgba(75,224,200,0.14);color:var(--brand3);border-color:rgba(75,224,200,0.32)} .s-DELIVERED{background:rgba(56,224,166,0.16);color:var(--ok);border-color:rgba(56,224,166,0.36)} .s-COMPLETED{background:rgba(56,224,166,0.20);color:var(--ok);border-color:rgba(56,224,166,0.40)} .s-CANCELLED,.s-REJECTED{background:rgba(255,107,129,0.14);color:var(--err);border-color:rgba(255,107,129,0.32)} /* ---------- 代码块（对齐 Ardot 源码框） ---------- */ pre{ background:linear-gradient(180deg, rgba(6,6,15,0.95), rgba(10,12,26,0.92)); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:12px; padding:16px; overflow:auto; color:#cfe0ff; font-size:13px; white-space:pre-wrap; word-break:break-all; font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; box-shadow:inset 0 0 30px rgba(0,0,0,0.30); } /* ---------- 消息 / 错误 / 警示（对齐 Ardot） ---------- */ .msg{background:rgba(14,14,31,0.55);border:1px solid var(--line);border-radius:10px; padding:10px 13px;margin:6px 0;font-size:13.5px} .msg .who{color:var(--brand);font-weight:600;margin-right:6px} .err{color:var(--err);background:rgba(255,107,129,0.10);border:1px solid rgba(255,107,129,0.32); border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13.5px;display:flex;gap:8px;align-items:center} .ok{color:#4be0c8;background:rgba(75,224,200,0.10);border:1px solid rgba(75,224,200,0.32); border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13.5px;display:flex;gap:8px;align-items:center} .banner-warn{background:rgba(255,180,84,0.10);border:1px solid rgba(255,180,84,0.40); color:#ffd98a;padding:10px 14px;border-radius:10px;margin:8px 0;font-size:13.5px; box-shadow:0 0 18px rgba(255,180,84,0.12);display:flex;gap:8px;align-items:center} /* ---------- 流程时间轴（兼容旧 .timeline，保留） ---------- */ .timeline{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0} .timeline .step{position:relative;font-size:11.5px;padding:6px 12px 6px 26px;border-radius:999px; background:var(--chip);color:var(--muted);border:1px solid var(--line)} .timeline .step::before{content:'';position:absolute;left:11px;top:50%;transform:translateY(-50%); width:7px;height:7px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 3px rgba(255,255,255,0.04)} .timeline .step[style*="--brand"]{box-shadow:0 0 16px rgba(110,168,255,0.45);border-color:rgba(110,168,255,0.5)} /* ---------- 状态流步进器（对齐 Ardot StateMachine，7 节点） ---------- */ .stepper{display:flex;align-items:flex-start;flex-wrap:wrap;margin:18px 0} .stepper .node{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:88px} .stepper .dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center; font-size:13px;font-weight:700;border:1px solid var(--line); background:rgba(255,255,255,0.05);color:var(--muted);transition:all .25s} .stepper .lbl{font-size:11px;color:var(--muted);white-space:nowrap} .stepper .bar{flex:1;height:2px;min-width:18px;margin-top:17px;border-radius:2px;background:var(--line)} .stepper .node.done .dot{background:rgba(75,224,200,0.15);border-color:rgba(75,224,200,0.5);color:var(--brand3)} .stepper .node.done .lbl{color:var(--brand3)} .stepper .node.active .dot{background:rgba(110,168,255,0.20);border-color:var(--brand);color:var(--brand); box-shadow:var(--glow-blue)} .stepper .node.active .lbl{color:var(--brand);font-weight:600} .stepper .bar.done{background:rgba(75,224,200,0.5)} .stepper .terminated{display:flex;align-items:center;gap:8px;width:100%;margin-top:6px; padding:10px 14px;border-radius:var(--radius);border:1px solid rgba(255,107,129,0.30); background:rgba(255,107,129,0.06);color:var(--err);font-size:13.5px} /* ---------- 布局小工具 ---------- */ .row{display:flex;gap:14px;flex-wrap:wrap} .row>*{flex:1;min-width:160px} table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13.5px} th{color:var(--muted);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px} tr:last-child td{border-bottom:0} tbody tr{transition:background .2s} tbody tr:hover{background:rgba(255,255,255,0.03)} /* ============================================================ 组件：首屏 / 流程 / 特性 / 统计 / 空态 / 认证 / 支付 / KPI ============================================================ */ .hero{text-align:center;padding:54px 20px 26px;position:relative} .hero .eyebrow{display:inline-block;font-size:12px;letter-spacing:2px;color:var(--brand3); text-transform:uppercase;background:rgba(75,224,200,0.08);border:1px solid rgba(75,224,200,0.25); padding:5px 15px;border-radius:999px;margin-bottom:18px} .hero h1{font-size:clamp(28px,5vw,46px);line-height:1.15;margin:0 0 14px;font-weight:800;letter-spacing:.5px; background:linear-gradient(120deg,#ffffff 8%,var(--brand) 52%,var(--brand2) 90%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 0 50px rgba(110,168,255,0.25)} .hero p.lead{color:var(--ink-secondary);max-width:660px;margin:0 auto 26px;font-size:16px} .hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .hero .cta .btn{font-size:15px;padding:13px 26px} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 4px;position:relative} .step-card{position:relative;background:var(--panel);backdrop-filter:blur(14px); border:1px solid var(--line);border-radius:14px;padding:20px 16px;text-align:center; box-shadow:0 8px 24px rgba(0,0,0,0.30)} .step-card .num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px; font-weight:800;color:#fff;font-size:16px; background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 18px rgba(110,168,255,0.45)} .step-card h4{margin:0 0 5px;font-size:14.5px;color:var(--txt)} .step-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55} .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .feat{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line); border-radius:14px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start; transition:transform .25s ease,border-color .25s ease} .feat:hover{transform:translateY(-2px);border-color:var(--line-strong)} .feat .ico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,rgba(110,168,255,0.18),rgba(168,120,255,0.18)); border:1px solid var(--line-strong);color:var(--brand);font-size:21px} .feat h4{margin:2px 0 6px;font-size:15px;color:var(--txt)} .feat p{margin:0;font-size:13px;color:var(--muted);line-height:1.6} /* 作者背书横幅（对齐 Ardot 顶部背书条） */ .author-banner{display:flex;flex-wrap:wrap;align-items:center;gap:16px;border-radius:var(--radius); border:1px solid rgba(168,120,255,0.20); background:linear-gradient(90deg, rgba(168,120,255,0.10), rgba(168,120,255,0.0)); padding:18px 20px;margin:18px 0} .author-banner .avatars{display:flex} .author-banner .avatars .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center; margin-left:-10px;border:2px solid var(--bg2);font-size:13px;font-weight:700;color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand2))} .author-banner .avatars .av:first-child{margin-left:0} .author-banner .ab-main{flex:1;min-width:220px} .author-banner .ab-main .t{font-size:14px;font-weight:600;color:var(--txt)} .author-banner .ab-main .s{font-size:12px;color:var(--ink-secondary)} .author-banner .ab-stats{display:flex;gap:24px;text-align:center} .author-banner .ab-stats .v{font-size:20px;font-weight:800} .author-banner .ab-stats .v.cyan{color:var(--brand3)} .author-banner .ab-stats .v.blue{color:var(--brand)} .author-banner .ab-stats .v.purple{color:var(--brand2)} .author-banner .ab-stats .k{font-size:11px;color:var(--muted)} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px} .stat{position:relative;overflow:hidden;background:var(--panel);backdrop-filter:blur(14px); border:1px solid var(--line);border-radius:14px;padding:18px 18px 8px; box-shadow:0 8px 24px rgba(0,0,0,0.30)} .stat .v{font-size:26px;font-weight:800; background:linear-gradient(120deg,var(--brand),var(--brand2)); -webkit-background-clip:text;background-clip:text;color:transparent} .stat .k{font-size:12.5px;color:var(--muted);margin-top:4px} .stat .spark{display:block;width:100%;height:40px;margin-top:6px;opacity:.9} .empty{text-align:center;padding:46px 20px;color:var(--muted)} .empty .big{font-size:42px;opacity:.45;margin-bottom:12px} /* 认证页（登录/注册）：居中玻璃卡（对齐 Ardot Login） */ .auth-wrap{max-width:440px;margin:52px auto} .auth-wrap .brand-mark{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px} .auth-wrap .brand-mark .mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:var(--glow-blue);color:#fff;font-size:20px} .auth-wrap .brand-mark .name{font-size:26px;font-weight:800; background:linear-gradient(135deg,var(--brand),var(--brand2)); -webkit-background-clip:text;background-clip:text;color:transparent} .auth-wrap h1{text-align:center;font-size:24px;margin-bottom:6px} .auth-wrap .sub{text-align:center;color:var(--ink-secondary);font-size:13.5px;margin-bottom:18px} /* 大号金额（支付页，对齐 Ardot MockPay） */ .amount-lg{font-size:36px;font-weight:800;color:var(--brand3); text-shadow:0 0 26px rgba(75,224,200,0.30)} .pay-qr{display:inline-flex;align-items:center;justify-content:center;width:168px;height:168px; padding:10px;background:#fff;border-radius:14px;margin:10px 0;box-shadow:var(--glow-cyan)} .pay-qr svg{width:100%;height:100%;display:block} .pay-note{font-size:12.5px;color:var(--muted);margin-top:10px} /* 入场淡入（轻量，仅首屏） */ .fade-in{animation:fade .6s ease both} @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* 骨架流光（预留） */ .skeleton{background:linear-gradient(90deg,rgba(20,20,36,1) 25%,rgba(34,34,56,1) 37%,rgba(20,20,36,1) 63%); background-size:200% 100%;animation:shimmer 1.6s infinite linear} @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} /* ---------- 页脚（品牌 + 友情链接 + 合规护栏） ---------- */ .site-footer{margin-top:46px;border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(10,10,24,0.35), rgba(10,10,24,0.72)); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .site-footer .footer-inner{max-width:1200px;margin:0 auto;padding:30px 26px 28px} .footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .footer-brand{display:flex;align-items:center;gap:12px} .footer-brand .mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:var(--glow-blue); color:#fff;font-size:19px} .fb-name{font-weight:800;font-size:15px;letter-spacing:.4px; background:linear-gradient(90deg,var(--brand),var(--brand2)); -webkit-background-clip:text;background-clip:text;color:transparent} .fb-sub{font-size:12px;color:var(--muted);margin-top:2px} .footer-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .fl-label{font-size:12px;color:var(--muted);letter-spacing:1.5px;margin-right:2px} .fl{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px; border:1px solid var(--line);background:rgba(255,255,255,0.03);color:var(--ink-secondary); font-size:13.5px;font-weight:600;text-decoration:none;transition:.22s} .fl:hover{border-color:var(--brand);color:var(--brand);background:rgba(110,168,255,0.08); box-shadow:0 0 18px rgba(110,168,255,0.25);text-decoration:none;transform:translateY(-2px)} .fl-ico{font-size:16px;line-height:1} .footer-risk{margin-top:22px;padding:14px 16px;border-radius:12px; background:rgba(255,180,84,0.06);border:1px solid rgba(255,180,84,0.20); color:#ffd98a;font-size:12.5px;line-height:1.7} .footer-copy{margin-top:16px;color:var(--muted);font-size:12px;text-align:center;letter-spacing:.3px} @media (max-width:640px){ .footer-top{flex-direction:column;align-items:flex-start;gap:16px} .footer-links{width:100%} } /* ---------- 响应式 ---------- */ @media (max-width:880px){ .steps,.stat-grid{grid-template-columns:repeat(2,1fr)} .feature-grid{grid-template-columns:1fr} .stepper .lbl{font-size:10px} } @media (max-width:520px){ .steps,.stat-grid{grid-template-columns:1fr} .container{padding:22px 14px 60px} .topbar{padding:0 16px} .topbar nav{gap:10px} .brand .tag{display:none} } /* ---------- 在线联系：悬浮客服按钮 + 弹窗 ---------- */ .kf-fab{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:8px; padding:12px 18px;border:none;border-radius:999px;cursor:pointer; background:linear-gradient(135deg,#07C160,#05A350);color:#fff;font-size:15px;font-weight:600; box-shadow:0 10px 26px rgba(7,193,96,0.45);animation:breathe 2.4s ease-in-out infinite} .kf-fab:hover{transform:translateY(-2px)} .kf-fab span{white-space:nowrap} @keyframes breathe{0%,100%{box-shadow:0 10px 26px rgba(7,193,96,0.40)}50%{box-shadow:0 10px 34px rgba(7,193,96,0.70)}} .kf-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center; background:rgba(4,6,16,0.66);backdrop-filter:blur(3px)} .kf-modal[hidden]{display:none} .kf-modal-card{position:relative;width:min(420px,92vw);padding:26px;border-radius:18px; background:#0f1226;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.5)} .kf-modal-card h3{margin:0 0 6px} .kf-close{position:absolute;top:12px;right:14px;width:30px;height:30px;border:none;border-radius:8px; background:rgba(255,255,255,.06);color:var(--muted);font-size:20px;cursor:pointer;line-height:1} .kf-close:hover{color:#fff;background:rgba(255,255,255,.12)} .kf-contacts{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px} .kf-contact-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px; border:1px solid var(--line);background:rgba(255,255,255,.03);text-decoration:none;color:var(--txt); transition:border-color .15s,background .15s,transform .15s} .kf-contact-item:hover{border-color:var(--brand);background:rgba(110,168,255,.08);transform:translateY(-1px)} .kf-ci-ico{font-size:22px;line-height:1;flex:none} .kf-ci-body{display:flex;flex-direction:column;gap:2px;min-width:0} .kf-ci-label{font-size:12px;color:var(--muted)} .kf-ci-val{font-size:15px;font-weight:700;letter-spacing:.3px;word-break:break-all} .kf-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:14px 0} .kf-divider::before,.kf-divider::after{content:'';flex:1;height:1px;background:var(--line)} #kfForm{display:flex;flex-direction:column;gap:10px} #kfForm input,#kfForm textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line); background:rgba(255,255,255,.03);color:var(--txt);font:inherit;box-sizing:border-box} #kfForm textarea{resize:vertical} .kf-msg{margin:0;font-size:13px;color:var(--brand3);min-height:18px} /* ---------- 双模式入口卡片 ---------- */ .modes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0} .mode-card{position:relative;padding:26px 24px;border-radius:18px;background:#0f1226;border:1px solid var(--line); display:flex;flex-direction:column;gap:10px} .mode-card .badge{position:absolute;top:14px;right:14px;font-size:11px;padding:3px 10px;border-radius:999px; background:rgba(255,255,255,.06);color:var(--muted)} .mode-card h3{margin:0;font-size:19px} .mode-card .price{font-size:34px;font-weight:800;letter-spacing:.5px} .mode-card.auto{border-color:rgba(110,168,255,.4)} .mode-card.auto .price{color:var(--brand)} .mode-card.custom{border-color:rgba(168,120,255,.45)} .mode-card.custom .price{color:#A878FF} .mode-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6} .mode-card .btn{margin-top:6px;text-align:center} /* ---------- 状态/价格胶囊 ---------- */ .pill.price{background:rgba(110,168,255,.14);color:var(--brand);border-color:rgba(110,168,255,.4)} .pill.mode-auto{background:rgba(110,168,255,.14);color:var(--brand);border-color:rgba(110,168,255,.4)} .pill.mode-custom{background:rgba(168,120,255,.14);color:#A878FF;border-color:rgba(168,120,255,.4)} /* ---------- 生成中动画 ---------- */ .spinner{width:34px;height:34px;margin-top:12px;border-radius:50%;border:3px solid rgba(110,168,255,.25); border-top-color:var(--brand);animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @media (max-width:520px){.modes{grid-template-columns:1fr}.kf-fab span{display:none}.kf-fab{padding:14px}} /* ---- 表单字段 / 单选卡片 ---- */ .field{margin:16px 0} .field>label{display:block;margin-bottom:8px;font-weight:600;color:var(--txt)} .radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px} .radio-cards .rc{position:relative;display:block;cursor:pointer} .radio-cards .rc input{position:absolute;opacity:0} .radio-cards .rc span{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);transition:.18s} .radio-cards .rc span b{display:block;font-size:14px} .radio-cards .rc span small{color:var(--muted);font-size:12px} .radio-cards .rc input:checked + span{border-color:var(--brand);background:rgba(75,224,200,.08);box-shadow:0 0 0 2px rgba(75,224,200,.25)} /* ---- 提示条 ---- */ .notice{padding:12px 14px;border-radius:10px;margin:12px 0;font-size:14px;line-height:1.6; background:rgba(110,168,255,.08);border:1px solid rgba(110,168,255,.3);color:var(--txt)} .notice.ok{background:rgba(75,224,200,.1);border-color:rgba(75,224,200,.4)} .notice.warn{background:rgba(255,176,84,.1);border-color:rgba(255,176,84,.4)} /* ---- 退款状态条 ---- */ .refund-status-bar{display:flex;gap:8px;margin:18px 0;flex-wrap:wrap} .refund-status-bar .step{padding:6px 14px;border-radius:20px;font-size:13px;border:1px solid var(--line);color:var(--muted)} .refund-status-bar .step.done{background:rgba(75,224,200,.12);border-color:var(--brand);color:var(--brand)} .refund-status-bar .step.current{border-color:var(--brand3);color:var(--brand3);font-weight:600} .refund-status-bar .step.rejected{color:#ff7a7a;border-color:#ff7a7a} /* ---- 键值表 ---- */ .kv{width:100%;border-collapse:collapse;margin-top:10px} .kv td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top} .kv td:first-child{color:var(--muted);width:96px;white-space:nowrap} /* ---- 商家退款列表 ---- */ .filter-bar{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap} .filter-bar a{padding:6px 14px;border-radius:18px;border:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:13px} .filter-bar a.on{border-color:var(--brand);color:var(--brand);background:rgba(75,224,200,.08)} .tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px} .tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .tbl th{color:var(--muted);font-weight:600} .tbl .reason{max-width:220px;color:var(--muted)} .tbl .ops{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .tbl .amt{width:90px;padding:4px 6px} .tbl .ban{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:3px} .st{padding:3px 9px;border-radius:12px;font-size:12px;background:rgba(110,168,255,.12);color:#9ab6ff} .st-pending{background:rgba(255,176,84,.15);color:#ffc06b} .st-approved{background:rgba(75,224,200,.15);color:var(--brand)} .st-refunded{background:rgba(75,224,200,.2);color:var(--brand)} .st-rejected{background:rgba(255,122,122,.15);color:#ff9a9a} .st-locked{background:rgba(110,168,255,.15);color:#9ab6ff} .st-available{background:rgba(75,224,200,.15);color:var(--brand)} .st-voided{background:rgba(160,160,170,.18);color:#aab} .btn.sm{padding:5px 10px;font-size:12px} .btn.ok{background:rgba(75,224,200,.15);color:var(--brand);border:1px solid var(--brand)} .btn.warn{background:rgba(255,176,84,.15);color:#ffc06b;border:1px solid rgba(255,176,84,.4)} .btn.danger{background:rgba(255,122,122,.14);color:#ff9a9a;border:1px solid rgba(255,122,122,.4)} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)} /* ---------------- 会员等级 UI ---------------- */ .tier-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;line-height:1.6;vertical-align:middle; background:rgba(160,160,170,.16);color:#b9b9c6;border:1px solid rgba(160,160,170,.3)} .tier-badge.big{font-size:14px;padding:4px 14px;margin-top:6px} .tier-0{background:rgba(160,160,170,.16);color:#b9b9c6;border-color:rgba(160,160,170,.3)} .tier-1{background:rgba(192,197,205,.18);color:#cfd6df;border-color:rgba(192,197,205,.4)} /* 白银 */ .tier-2{background:rgba(255,196,92,.16);color:#ffcf7a;border-color:rgba(255,196,92,.42)} /* 黄金 */ .tier-3{background:rgba(120,205,255,.16);color:#8fd6ff;border-color:rgba(120,205,255,.45)} /* 钻石 */ .member-pay-box{margin:12px 0 4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(75,224,200,.04)} .mp-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:14px} .mp-row span:last-child{font-weight:600} .mp-disc{color:#ffc06b} .mp-disc span:last-child{color:#ffc06b} .mp-muted{color:var(--muted);font-size:13px} .mp-total{border-top:1px dashed var(--line);margin-top:4px;padding-top:9px;font-size:16px} .mp-total span:last-child{color:var(--brand);font-size:20px} .mp-hint{margin:10px 0 0;font-size:13px;color:var(--brand);font-weight:600} .mp-up{margin:10px 0 0;font-size:13px;color:#ffc06b} .mp-up b{color:#fff;background:rgba(255,196,92,.22);padding:1px 7px;border-radius:8px;margin:0 2px} .mp-mini{margin-top:8px;display:flex;flex-direction:column;gap:2px;font-size:13px} .mp-mini .mp-disc{color:#ffc06b} .mp-mini .muted{color:var(--muted)} .tier-progress{margin-top:6px} .tp-bar{height:12px;border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid var(--line)} .tp-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--brand),#6EA8FF);transition:width .4s ease} .tp-fill.tier-1{background:linear-gradient(90deg,#aeb6c2,#cfd6df)} .tp-fill.tier-2{background:linear-gradient(90deg,#ffc06b,#ffe1a8)} .tp-fill.tier-3{background:linear-gradient(90deg,#6EA8FF,#a8e0ff)} .tp-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:12.5px;color:var(--muted)} .tp-next{color:#ffc06b;font-weight:600} .tier-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px} .tier-table th,.tier-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line)} .tier-table th{color:var(--muted);font-weight:600;font-size:13px} .tier-table tr.cur{background:rgba(75,224,200,.08)} .tier-table tr.cur td:first-child{color:var(--brand);font-weight:700} /* —— 会员与奖励金规则卡（权威披露） —— */ .rules-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .rules-list li{padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(110,168,255,.04);font-size:13.5px;line-height:1.7;color:var(--ink-secondary)} .rules-list li b{color:var(--txt)} .rules-list li.warn{border-color:rgba(255,176,84,.38);background:rgba(255,176,84,.07)} .rules-list li.warn b{color:#ffc06b} /* —— 支付框信用金退款提示 —— */ .mp-note{margin:12px 0 0;font-size:12.5px;line-height:1.65;color:var(--muted);padding-top:10px;border-top:1px dashed var(--line)} .mp-note b{color:var(--ink-secondary)} .mp-note a{color:var(--brand);text-decoration:none} .mp-note a:hover{text-decoration:underline} /* —— footer 政策链接 —— */ .footer-policy{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:13px} .footer-policy a{color:var(--ink-secondary);text-decoration:none} .footer-policy a:hover{color:var(--brand);text-decoration:underline} .footer-policy .fp-sep{color:var(--muted)} /* —— 我的下载列表 —— */ .dl-list{display:flex;flex-direction:column;gap:12px;margin-top:8px} .dl-item{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(110,168,255,.03)} .dl-item:hover{border-color:rgba(110,168,255,.28);background:rgba(110,168,255,.06)} .dl-title{font-size:15.5px;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:8px} .dl-meta{margin-top:6px;font-size:12.5px;color:var(--muted)} .dl-actions{display:flex;gap:10px;flex-shrink:0} .empty-box{margin-top:10px;padding:28px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted)} .empty-box .btn{margin-top:14px} /* —— 交付方式说明横幅（告知用户交付的是源码文本） —— */ .delivery-notice{display:flex;gap:12px;align-items:flex-start;margin:16px 0;padding:14px 16px;border:1px solid rgba(75,224,200,.35);border-radius:12px;background:rgba(75,224,200,.06)} .delivery-notice .dn-ico{font-size:22px;line-height:1;flex-shrink:0;margin-top:2px} .delivery-notice .dn-body{font-size:13.5px;line-height:1.7;color:var(--ink-secondary)} .delivery-notice .dn-body b{color:var(--txt)} .delivery-notice .dn-body .hl{color:var(--brand3);font-weight:700} .delivery-notice .dn-body .warn{color:var(--warn);font-weight:700} /* —— 公式源码预览 + 一键复制（交付区） —— */ .src-code-block{margin:14px 0;border:1px solid var(--line-strong);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.45)} .src-code-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:rgba(110,168,255,.08);border-bottom:1px solid var(--line)} .src-code-lang{font-size:12.5px;color:var(--ink-secondary);font-weight:600} .src-copy-btn{font-size:12.5px!important;padding:4px 12px!important;border-radius:8px!important;background:var(--brand)!important;color:#fff!important;cursor:pointer;transition:all .2s} .src-copy-btn:hover{background:var(--brand2)!important;transform:scale(1.05)} .src-copy-btn.copied{background:var(--ok)!important} .src-code{margin:0;padding:16px 18px;font-family:'Cascadia Code','Fira Code','JetBrains Mono',Consolas,'Courier New',monospace;font-size:13px;line-height:1.7;color:var(--txt);overflow-x:auto;white-space:pre;tab-size:2;min-height:60px} /* —— 通达信导入步骤 —— */ .import-steps{margin:16px 0;padding:16px 18px;border:1px solid rgba(75,224,200,.25);border-radius:12px;background:rgba(75,224,200,.04)} .import-steps ol{padding-left:20px;margin:8px 0 0;color:var(--ink-secondary);font-size:13.5px;line-height:1.9} .import-steps li{margin-bottom:4px} .import-steps code{background:rgba(110,168,255,.15);color:var(--brand);padding:1px 6px;border-radius:4px;font-size:12.5px} /* ============================================================ 晨幻 tdx-shop · 设计系统 v3 — 高端精致化升级层 仅追加覆盖，不动 v2 基础；所有动效走 transform/opacity（GPU 友好）， 并尊重 prefers-reduced-motion。 ============================================================ */ :root{ /* —— 更克制的画布与分层（去掉喧闹感，强调纵深） —— */ --bg:#04060F; --bg2:#080B16; --panel:rgba(12,15,28,0.66); --panel-solid:#0B0E1A; /* —— 更高级的中性文本（更柔的对比，久看不累） —— */ --txt:#EEF1F8; --ink-secondary:#AEB6C9; --muted:#727A92; /* —— 香槟金点缀（奢华感，克制使用：价格 / eyebrow / 关键数据） —— */ --gold:#E4C98C; --gold-soft:rgba(228,201,140,0.14); /* —— 缓动与时序（高端动效的灵魂） —— */ --ease:cubic-bezier(.22,1,.36,1); /* ease-out-expo 般的高级减速 */ --ease-soft:cubic-bezier(.4,0,.2,1); --dur:.72s; /* —— 间距与半径尺度（统一呼吸节奏） —— */ --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:36px; --sp-5:56px; /* —— 更细腻的阴影与描边（分层、低噪） —— */ --line:rgba(150,170,220,0.10); --line-strong:rgba(150,170,220,0.22); --shadow-1:0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.38); --shadow-2:0 2px 6px rgba(0,0,0,.45), 0 22px 60px rgba(0,0,0,.55); --glow-blue:0 0 30px rgba(110,168,255,0.30); --glow-gold:0 0 32px rgba(228,201,140,0.30); } /* —— 排版层级：更大行距、更精致字距、清晰的视觉阶梯 —— */ body{font-size:16px;line-height:1.72;letter-spacing:.1px} h1,h2,h3{letter-spacing:.2px;font-weight:750} h1{font-size:clamp(30px,5.2vw,48px);line-height:1.14} h2{font-size:clamp(20px,2.6vw,26px)} h3{font-size:17px;letter-spacing:.3px} p{color:var(--ink-secondary)} .lead{color:var(--ink-secondary);font-size:clamp(15px,1.6vw,17px);line-height:1.8} /* —— 容器留白节奏 —— */ .container{max-width:1180px;padding:clamp(34px,5vw,60px) clamp(18px,4vw,28px) 96px} /* —— 颗粒噪点质感（极淡，提升高级感；固定层，不随内容重绘） —— */ .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px;mix-blend-mode:overlay} /* —— 顶栏：更纤薄的分隔与底部细线，导航悬停下划线滑入 —— */ .topbar{height:68px;padding:0 clamp(16px,3vw,30px);border-bottom:1px solid var(--line); box-shadow:0 6px 30px rgba(0,0,0,.40)} .brand{font-size:16px} .topbar nav{position:relative} .topbar nav>a,.topbar nav>.linklike{position:relative;padding:4px 2px} .topbar nav>a::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px; background:linear-gradient(90deg,var(--brand),var(--brand2)); transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)} .topbar nav>a:hover{color:var(--brand);text-decoration:none} .topbar nav>a:hover::after{transform:scaleX(1)} /* —— 玻璃卡：渐变描边 + 分层阴影 + 顶部高光，hover 上浮 + 描边点亮 —— */ .card{position:relative;border-radius:var(--r-md);padding:26px 28px; border:1px solid var(--line); box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.06); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)} .card::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(140deg, rgba(110,168,255,0.45), rgba(168,120,255,0.06) 42%, transparent 72%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .4s var(--ease);pointer-events:none} .card:hover{transform:translateY(-5px);border-color:transparent; box-shadow:var(--shadow-2), 0 0 0 1px rgba(110,168,255,0.10), inset 0 1px 0 rgba(255,255,255,0.08)} .card:hover::after{opacity:1} .card::before{left:26px;right:26px;height:2px; background:linear-gradient(90deg,transparent,var(--brand),var(--brand2),transparent)} /* —— 按钮：更顺滑缓动 + 按压回弹 + 香槟金次按钮 —— */ button,.btn{border-radius:13px;padding:12px 22px;letter-spacing:.4px; transition:transform .24s var(--ease), box-shadow .24s var(--ease), filter .24s var(--ease), background .24s} button:hover,.btn:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(110,120,255,0.46), inset 0 1px 0 rgba(255,255,255,0.30);filter:brightness(1.07);color:#fff} button:active,.btn:active{transform:translateY(0) scale(.985);transition-duration:.08s} .btn-gold{background:linear-gradient(135deg,var(--gold),#d8b877);color:#2a1f06;box-shadow:var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.4)} .btn-gold:hover{color:#2a1f06;box-shadow:0 14px 34px rgba(228,201,140,0.46)} /* —— 输入框：更细腻的圆角与聚焦辉光 —— */ input[type=text],input[type=password],input[type=email],input[type=number], textarea,select{border-radius:var(--r-sm);padding:12px 14px;margin:5px 0 16px; border:1px solid var(--line);background:rgba(6,8,18,0.6); transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s} input:focus,textarea:focus,select:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(110,168,255,0.16), 0 0 24px rgba(110,168,255,0.12); background:rgba(10,13,28,0.9)} label{color:var(--ink-secondary)} /* —— Hero：更舒展的留白 + 装饰光球（由 JS 注入） —— */ .hero{overflow:hidden;padding:clamp(48px,8vw,86px) 20px clamp(28px,4vw,40px);text-align:center;position:relative} .hero .eyebrow{letter-spacing:3px;color:var(--gold);border-color:rgba(228,201,140,0.30); background:var(--gold-soft)} .hero h1{font-weight:800; background:linear-gradient(115deg,#ffffff 6%,var(--brand) 50%,var(--brand2) 92%); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 0 60px rgba(110,168,255,0.22)} .hero .cta .btn{font-size:15px;padding:14px 30px} .hero-orbs{position:absolute;inset:-10% -5%;z-index:-1;pointer-events:none; transition:transform .6s var(--ease);will-change:transform} .hero-orbs .orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55} .hero-orbs .o1{width:340px;height:340px;left:8%;top:2%; background:radial-gradient(circle, rgba(110,168,255,0.55), transparent 70%)} .hero-orbs .o2{width:300px;height:300px;right:6%;top:18%; background:radial-gradient(circle, rgba(168,120,255,0.50), transparent 70%)} .hero-orbs .o3{width:240px;height:240px;left:42%;bottom:-12%; background:radial-gradient(circle, rgba(75,224,200,0.40), transparent 70%)} /* —— 步骤卡 / 特性卡：更柔的悬浮 + 内描边 —— */ .step-card,.feat{border-radius:var(--r-md);padding:22px 20px; box-shadow:var(--shadow-1);transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease)} .step-card:hover,.feat:hover{transform:translateY(-4px);border-color:var(--line-strong); box-shadow:var(--shadow-2)} .feat .ico{border-radius:13px;background:linear-gradient(135deg,rgba(110,168,255,0.20),rgba(168,120,255,0.20)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12)} /* —— 双模式入口：更精致的边框渐变与价格焦点 —— */ .modes{gap:20px;margin:26px 0} .mode-card{border-radius:var(--r-lg);padding:30px 28px;background:#0c1020; box-shadow:var(--shadow-1);transition:transform .4s var(--ease), box-shadow .4s var(--ease)} .mode-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)} .mode-card .price{font-size:38px;letter-spacing:1px} .mode-card.auto{border-color:rgba(110,168,255,.45)} .mode-card.custom{border-color:rgba(168,120,255,.50)} /* —— 作者背书 / 交付横幅：内描边高光 —— */ .author-banner{border-radius:var(--r-lg);padding:20px 24px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), var(--shadow-1)} .delivery-notice{border-radius:var(--r-md);padding:16px 18px} /* —— 状态徽章：仅 active 态发光，避免满屏辉光 —— */ .status{box-shadow:none} .status.s-DELIVERED,.status.s-COMPLETED{box-shadow:0 0 16px rgba(56,224,166,0.22)} /* —— 代码块：更高级的内阴影与左侧光条 —— */ pre{border-radius:var(--r-md);box-shadow:inset 0 0 40px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04)} /* —— 滚动渐入（由 base.html JS 触发；无 JS / 减弱动效时全部可见） —— */ .js .reveal-on-scroll{opacity:0;transform:translateY(20px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); will-change:opacity,transform} .js .reveal-on-scroll.revealed{opacity:1;transform:none} .js .fade-in{animation:none} /* 由 reveal 接管首屏动画 */ /* —— 移动端导航折叠 —— */ .nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px; background:rgba(110,168,255,0.06);color:var(--ink-secondary);font-size:18px;cursor:pointer;line-height:1} .nav-menu{display:flex;align-items:center;gap:18px} @media (max-width:760px){ .nav-toggle{display:grid;place-items:center} .nav-menu{position:absolute;top:68px;right:14px;left:14px;flex-direction:column;align-items:stretch;gap:6px; padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md); background:rgba(10,13,28,0.96);backdrop-filter:blur(18px); box-shadow:var(--shadow-2);transform:translateY(-10px);opacity:0;pointer-events:none; transition:transform .3s var(--ease), opacity .3s var(--ease)} .nav-menu.open{transform:none;opacity:1;pointer-events:auto} .nav-menu>a,.nav-menu>.inline{width:100%;text-align:left;padding:9px 4px;border-bottom:1px solid var(--line)} .nav-menu>a:last-child{border-bottom:0} .topbar{flex-wrap:wrap} } @media (max-width:520px){ .container{padding:26px 14px 70px} .brand .tag{display:none} .topbar{padding:0 14px} } /* —— 无障碍 / 性能：尊重减弱动效偏好 —— */ @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .js .reveal-on-scroll{opacity:1!important;transform:none!important} .hero-orbs{display:none} } /* ============================================================ 晨幻 tdx-shop · 设计系统 v3.1 — 最佳实践增强层 聚焦：可访问性(a11y) / 排版可读性 / 性能 / 微交互细节 ============================================================ */ /* —— 可访问性：统一键盘聚焦环（仅 :focus-visible 显示，鼠标点击不干扰） —— */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:8px; box-shadow:0 0 0 4px rgba(110,168,255,0.18)} :focus:not(:focus-visible){outline:none} /* —— 跳转主内容（键盘 / 读屏用户） —— */ .skip-link{position:fixed;left:14px;top:-52px;z-index:200; padding:9px 16px;border-radius:10px;background:var(--brand);color:#fff; font-size:13.5px;font-weight:600;transition:top .25s var(--ease);text-decoration:none} .skip-link:focus{top:12px;color:#fff} /* —— 排版可读性：标题平衡换行 + 正文优雅断行 —— */ h1,h2,h3{text-wrap:balance} .lead,p{text-wrap:pretty} /* 长文段落限制行宽，提升阅读舒适度（用在需要大段说明处） */ .prose{max-width:68ch;color:var(--ink-secondary);line-height:1.86} /* —— 原生控件一致性：焦点色 + 选中高亮（金色，呼应品牌） —— */ input,textarea,select{accent-color:var(--brand)} ::selection{background:rgba(228,201,140,0.32);color:#fff} /* —— 平滑滚动 + 锚点偏移（避开吸顶导航） —— */ html{scroll-behavior:smooth; scroll-padding-top:84px} /* —— 滚动进度细金线（顶部） —— */ #scrollProgress{position:fixed;left:0;top:0;height:3px;width:0;z-index:130; background:linear-gradient(90deg,var(--brand),var(--gold)); box-shadow:0 0 12px rgba(228,201,140,0.55); transition:width .08s linear;pointer-events:none} /* —— 回到顶部按钮（滚动后出现，香槟金圆形） —— */ #toTop{position:fixed;right:22px;bottom:22px;z-index:120;width:46px;height:46px; display:grid;place-items:center;border-radius:50%;cursor:pointer;font-size:20px; opacity:0;transform:translateY(12px);pointer-events:none;border:none; background:linear-gradient(135deg,var(--gold),#d8b877);color:#2a1f06; box-shadow:var(--glow-gold),var(--shadow-1); transition:opacity .35s var(--ease), transform .35s var(--ease), filter .2s, box-shadow .2s} #toTop.show{opacity:1;transform:none;pointer-events:auto} #toTop:hover{filter:brightness(1.08);box-shadow:0 0 26px rgba(228,201,140,0.55),var(--shadow-1)} #toTop:active{transform:scale(.93)} /* —— 性能：目录等长列表项延迟渲染（占位不阻塞首屏） —— */ .catalog-item{content-visibility:auto; contain-intrinsic-size:auto 300px} /* —— 链接默认过渡（更顺滑） —— */ a{transition:color .22s var(--ease)} /* —— 移动端导航：搜索框全宽 + 汉堡旋转态（增强） —— */ .nav-toggle{transition:border-color .25s var(--ease), background .25s, transform .25s var(--ease)} .nav-toggle:hover{border-color:var(--brand);background:rgba(110,168,255,0.12)} .nav-toggle[aria-expanded="true"]{transform:rotate(90deg);border-color:var(--brand)} @media (max-width:760px){ .nav-menu .nav-search{width:100%;margin:6px 0 10px} .nav-menu .nav-search input{width:100%} } /* —— 卡片入场 stagger 已由 JS 注入 transition-delay；此处仅收紧时序观感 —— */ .reveal-on-scroll{transition-timing-function:var(--ease)} /* ============================================================ 晨幻 tdx-shop · 交付样例与保障展示模块（新增内容区块） 承接用户提供的「私密安全 / 售后修改 / 交付样例 / 导入步骤 / 作者背书」 ============================================================ */ /* —— 区块容器 —— */ .showcase{margin:30px 0} .showcase-head{text-align:center;margin-bottom:22px} .showcase-head .eyebrow{display:inline-block} .showcase-head h2{margin:10px 0 8px} .showcase-head .lead{max-width:60ch;margin:0 auto} /* —— 保障条：双卡，渐变描边玻璃质感 —— */ .guarantee-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px} .guarantee{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-md); background:var(--panel);border:1px solid var(--line); box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.05); transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease)} .guarantee:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow-2)} .g-ico{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;font-size:20px;border-radius:12px; background:linear-gradient(135deg,var(--gold-soft),rgba(110,168,255,0.12)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12)} .guarantee h4{margin:0 0 4px;font-size:15.5px;color:var(--txt)} .guarantee p{margin:0;font-size:13.5px;line-height:1.66;color:var(--ink-secondary)} /* —— 样例卡 —— */ .sample-card{padding:24px 26px} .sample-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .sample-tag{font-size:13px;font-weight:600;letter-spacing:.4px;color:var(--gold); background:var(--gold-soft);border:1px solid rgba(228,201,140,0.28);padding:5px 12px;border-radius:999px} .sample-code{margin:0;padding:18px 20px;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:14px;line-height:1.7;color:#AEE9D2;white-space:pre;overflow-x:auto; background:rgba(2,4,10,0.66);border:1px solid var(--line);border-left:3px solid var(--brand)} .import-steps{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .is-label{display:block;font-size:13px;font-weight:600;color:var(--ink-secondary);margin-bottom:10px;letter-spacing:.3px} .import-steps ol{margin:0;padding-left:0;list-style:none;display:grid;gap:9px;counter-reset:imp} .import-steps li{counter-increment:imp;display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-secondary)} .import-steps li::before{content:counter(imp);flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center; font-size:12px;font-weight:700;color:#2a1f06;background:linear-gradient(135deg,var(--gold),#d8b877); border-radius:50%;box-shadow:var(--glow-gold)} .import-steps code{background:rgba(110,168,255,.15);color:var(--brand);padding:1px 6px;border-radius:4px;font-size:12.5px} /* —— 作者背书（引用式，区别于 stats 横幅） —— */ .author-endorse{display:flex;align-items:flex-start;gap:16px;margin-top:22px;padding:20px 22px; border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line); box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,0.05)} .ae-av{flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border-radius:14px; font-size:18px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:var(--glow-blue)} .ae-body{min-width:0} .ae-quote{margin:0;font-size:15px;line-height:1.78;color:var(--txt);font-style:italic} .ae-quote::before{content:"\201C";color:var(--gold);font-size:20px;margin-right:2px} .ae-quote::after{content:"\201D";color:var(--gold);font-size:20px;margin-left:2px} .ae-name{display:block;margin-top:8px;font-size:13px;color:var(--muted);font-style:normal} /* —— 移动端：保障条单列 —— */ @media (max-width:640px){ .guarantee-strip{grid-template-columns:1fr} } /* ============================================================ 晨幻 tdx-shop · 了解更多资源卡 / 关于页 / 教程页 样式 ============================================================ */ /* —— 首页资源卡（了解更多入口） —— */ .res-head{text-align:center;margin-bottom:6px} .res-head .eyebrow{display:inline-block} .res-head h2{margin:10px 0 8px} .res-head .lead{max-width:58ch;margin:0 auto} .res-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:18px} /* —— 关于页 / 教程页：分步与 FAQ —— */ .import-detail{display:grid;gap:16px;margin-top:6px} .id-step{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md); background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-1)} .id-n{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:9px; font-weight:700;color:#2a1f06;background:linear-gradient(135deg,var(--gold),#d8b877);box-shadow:var(--glow-gold)} .id-step b{color:var(--txt)} .id-step p{margin:4px 0 0;font-size:13.5px;color:var(--ink-secondary)} .faq{display:grid;gap:10px;margin-top:6px} .faq-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel); padding:4px 16px;box-shadow:var(--shadow-1)} .faq-item summary{cursor:pointer;padding:12px 0;font-weight:600;color:var(--txt); list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";font-size:20px;color:var(--brand);transition:transform .25s var(--ease)} .faq-item[open] summary::after{content:"\2212";transform:rotate(180deg)} .faq-item p{margin:0 0 14px;font-size:14px;color:var(--ink-secondary);line-height:1.7} /* ===== 商家收款提醒（旺旺式预警）===== */ /* 覆盖原 nav-bell 静态小点，改由 JS 控制的红点徽标 */ .nav-bell::after{display:none} .nav-bell-wrap{position:relative} .nav-bell{position:relative;color:var(--ink-secondary);background:none;border:0;cursor:pointer;font-size:18px;line-height:1;padding:2px} .bell-badge{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px; border-radius:9px;background:#ff4d4f;color:#fff;font-size:11px;line-height:16px;text-align:center; font-weight:700;box-shadow:0 0 0 2px var(--bg,#0f1420)} .bell-panel{position:absolute;top:38px;right:0;width:330px;max-width:90vw;background:var(--surface,#171c2b); border:1px solid var(--line,#2a3147);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.35); z-index:60;overflow:hidden} .bell-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px; border-bottom:1px solid var(--line,#2a3147);font-size:14px;font-weight:600} .bell-head .link{font-size:12px;color:var(--brand,#6EA8FF);background:none;border:0;cursor:pointer} .bell-list{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto} .bell-item a{display:block;padding:10px 14px;border-bottom:1px solid var(--line,#2a3147);text-decoration:none;color:inherit} .bell-item.unread{background:rgba(110,168,255,.08)} .bell-item .bi-title{font-size:13px;font-weight:600;color:var(--ink,#eef1f8)} .bell-item .bi-body{font-size:12px;color:var(--muted,#9aa3b8);margin-top:3px;white-space:pre-line;line-height:1.5} .bell-item .bi-time{font-size:11px;color:var(--muted,#9aa3b8);margin-top:4px} .bell-empty{padding:24px 14px;text-align:center;font-size:13px;color:var(--muted,#9aa3b8)} /* Toast 弹窗 */ .toast-wrap{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:10px} .toast{background:var(--surface,#171c2b);border:1px solid var(--line,#2a3147);border-left:3px solid #38E0A6; border-radius:10px;padding:12px 16px;min-width:260px;max-width:340px;box-shadow:0 12px 32px rgba(0,0,0,.4); opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s} .toast.show{opacity:1;transform:translateY(0)} .toast-title{font-size:14px;font-weight:700;color:#38E0A6} .toast-body{font-size:13px;color:var(--ink-secondary,#c5cce0);margin-top:4px;white-space:pre-line;line-height:1.5} /* ============================================================ 晨幻 tdx-shop · 设计系统 v4 — 全面视觉升级 新增：Hero K线图 / 数据指标条 / 社会证明 / FAQ / 价格对比 / 空状态插画 / SVG图标 / 搜索落地 / 表单增强 ============================================================ */ /* —— Hero 区：K线图表层 + 数据指标条 —— */ .hero{position:relative;overflow:hidden} .hero-chart{ position:absolute;inset:0;z-index:-1;width:100%;height:100%; opacity:.35;pointer-events:none; transition:opacity .6s var(--ease) } .hero:hover .hero-chart{opacity:.5} .hero-stats{ display:flex;align-items:center;justify-content:center;gap:24px 32px; flex-wrap:wrap;margin-top:36px;padding:20px 28px;border-radius:var(--r-lg); background:rgba(12,15,28,0.55);backdrop-filter:blur(16px); border:1px solid var(--line);max-width:680px;margin-left:auto;margin-right:auto } .hs-item{text-align:center} .hs-v{ font-size:26px;font-weight:800;color:var(--brand); background:linear-gradient(120deg,var(--brand),var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent } .hs-k{font-size:12px;color:var(--muted);margin-top:2px;letter-spacing:.3px} .hs-divider{ width:1px;height:36px;background:var(--line);flex-shrink:0 } @media (max-width:520px){ .hero-stats{gap:16px 20px;padding:14px 18px} .hs-v{font-size:20px} .hs-divider{display:none} } /* —— 主按钮大号变体 —— */ .btn-primary-lg{ padding:15px 34px;font-size:16px;border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:0 10px 32px rgba(110,168,255,0.40), inset 0 1px 0 rgba(255,255,255,0.28) } .btn-primary-lg:hover{ transform:translateY(-2px); box-shadow:0 16px 42px rgba(110,168,255,0.50), inset 0 1px 0 rgba(255,255,255,0.33) } /* —— 免费试用横幅增强 —— */ .trial-banner{ background:linear-gradient(135deg,rgba(75,224,200,0.06),rgba(110,168,255,0.06)); border-left-color:var(--brand3)!important } /* —— 双模式卡片增强（图标+特性列表）—— */ .mc-icon-wrap{ width:52px;height:52px;display:grid;place-items:center;margin-bottom:8px } .mc-icon{width:44px;height:44px} .mc-features{ list-style:none;margin:10px 0 16px;padding:0;display:flex;flex-direction:column;gap:7px } .mc-features li{ position:relative;padding-left:20px;font-size:13.5px;color:var(--ink-secondary);line-height:1.5 } .mc-features li::before{ content:"✓";position:absolute;left:0;color:var(--brand3);font-weight:700;font-size:13px } .mode-card.custom .mc-features li::before{color:var(--gold)} .price-num{font-size:0.65em;font-weight:800} /* —— 价格对比表 —— */ .price-compare{overflow:hidden} .pc-table{width:100%;border-collapse:separate;border-spacing:0} .pc-table th{ background:rgba(110,168,255,0.08);color:var(--txt);font-weight:700; padding:14px 16px;font-size:14px;border-bottom:2px solid var(--line) } .pc-table th:first-child{border-radius:12px 0 0 0;text-align:left} .pc-table th:last-child{border-radius:0 12px 0 0} .pc-table td{ padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--line);color:var(--ink-secondary) } .pc-table tr:last-child td{border-bottom:0} .pc-table tr:last-child td:first-child{border-radius:0 0 0 12px} .pc-table tr:last-child td:last-child{border-radius:0 0 12px 0} .pc-table .pc-auto{color:var(--brand)} .pc-table .pc-custom{color:var(--brand2)} .pc-table tbody tr:hover{background:rgba(110,168,255,0.04)} @media (max-width:640px){ .pc-table{font-size:12.5px} .pc-table th,.pc-table td{padding:10px 11px} } /* —— 社会证明区 —— */ .social-proof{margin:36px 0} .sp-head{text-align:center;margin-bottom:24px} .sp-head .eyebrow{display:inline-block} .sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .sp-card{ display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-md); background:var(--panel);border:1px solid var(--line); box-shadow:var(--shadow-1); transition:transform .4s var(--ease),box-shadow .4s var(--ease) } .sp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .sp-avatar{ width:40px;height:40px;border-radius:50%;display:grid;place-items:center; font-weight:700;font-size:15px;color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand2));flex-shrink:0 } .sp-quote{ font-size:14px;line-height:1.72;color:var(--ink-secondary); font-style:italic;margin:0;position:relative } .sp-quote::before{ content:"\201C";color:var(--brand);font-size:22px;line-height:0; position:absolute;top:2px;left:-4px;opacity:.4 } .sp-meta{display:flex;gap:10px;align-items:center;margin-top:auto} .sp-name{font-size:13px;font-weight:600;color:var(--txt)} .sp-tag{ font-size:11.5px;padding:2px 9px;border-radius:999px; background:var(--chip);color:var(--muted) } @media (max-width:720px){.sp-grid{grid-template-columns:1fr}} /* —— FAQ 折叠面板增强 —— */ .faq-section h2{margin-bottom:18px} .faq-item{ margin-bottom:0;border-radius:var(--r-sm)!important; transition:border-color .25s var(--ease) } .faq-item:hover{border-color:var(--line-strong)} .faq-item[open]{border-color:rgba(110,168,255,.25);background:rgba(110,168,255,.03)} .faq-item summary:focus-visible{outline-offset:4px} .faq-item p{padding:0 0 14px} /* ========== 空状态插画式设计 ========== */ .empty-state{ text-align:center;padding:56px 24px 48px; border:1px dashed var(--line-strong);border-radius:var(--r-lg); background:linear-gradient(180deg,rgba(110,168,255,0.02),transparent); margin:18px 0 } .empty-svg{width:160px;height:160px;margin:0 auto 18px;opacity:.55} .empty-title{font-size:18px;font-weight:700;color:var(--txt);margin:0 0 8px} .empty-desc{font-size:14.5px;color:var(--muted);max-width:380px;margin:0 auto 22px;line-height:1.66} .empty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* —— 我的下载空态特有 —— */ .dl-empty-icon{width:120px;height:120px;margin:0 auto 14px;opacity:.45} /* ========== 会员规则折叠卡片化 ========== */ .rules-collapsible{display:grid;gap:10px;margin-top:8px} .rc-item{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden; background:var(--panel);box-shadow:var(--shadow-1)} .rc-summary{ cursor:pointer;padding:14px 18px;font-weight:600;color:var(--txt); list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px; transition:background .2s } .rc-summary::-webkit-details-marker{display:none} .rc-summary::after{content:"+";font-size:20px;color:var(--brand);transition:transform .25s var(--ease)} .rc-summary:hover{background:rgba(255,255,255,.03)} .rc-item[open] .rc-summary::after{content:"\2212";transform:rotate(180deg)} .rc-body{padding:0 18px 16px;font-size:13.5px;color:var(--ink-secondary);line-height:1.74} .rc-body b{color:var(--txt)} .rc-item.warn{border-color:rgba(255,176,84,.30)} .rc-item.warn .rc-summary{color:var(--warn)} .rc-item.warn .rc-body b{color:var(--warn)} /* ========== 搜索框功能化 ========== */ .nav-search{cursor:pointer} .nav-search input::placeholder{transition:color .2s} .nav-search:hover input::placeholder{color:var(--ink-secondary)} .search-results{ position:absolute;top:100%;right:0;left:0;margin-top:6px; padding:10px 0;border-radius:var(--r-md);min-width:280px; background:var(--panel-solid,#0B0E1A);border:1px solid var(--line); box-shadow:var(--shadow-2);z-index:70;display:none } .search-results.active{display:block} .sr-item{display:block;padding:9px 16px;color:var(--ink-secondary);text-decoration:none; font-size:13.5px;transition:background .15s,color .15s} .sr-item:hover{background:rgba(110,168,255,.08);color:var(--brand);text-decoration:none} .sr-empty{padding:16px;text-align:center;color:var(--muted);font-size:13px} /* ========== 表单增强：校验态视觉反馈 ========== */ input[type=text].err-input, textarea.err-input{ border-color:var(--err)!important; box-shadow:0 0 0 3px rgba(255,107,129,0.15)!important } input[type=text].ok-input, textarea.ok-input{ border-color:var(--ok)!important; box-shadow:0 0 0 3px rgba(56,224,166,0.15)!important } .field-hint{font-size:12.5px;color:var(--muted);margin-top:-10px;margin-bottom:4px} .field-hint.err{color:var(--err)} .field-hint.ok{color:var(--ok)} /* ========== 客服悬浮按钮微调 ========== */ .kf-fab{animation:none} /* 去掉呼吸动画，改用更克制的 hover 效果 */ .kf-fab:hover{ animation:breathe 1.2s ease-in-out infinite paused; filter:brightness(1.1) } /* ========== 移动端适配补充 ========== */ @media (max-width:640px){ .hero-stats{gap:14px 18px;padding:14px 16px} .sp-card{padding:16px} .price-compare{overflow-x:auto} .pc-table{min-width:480px} .empty-state{padding:36px 16px 32px} .empty-svg{width:110px;height:110px} } /* ============================================================ v5 升级样式（支付页去内联 + 表单校验态） 追加于 2026-08-08 ============================================================ */ /* --- 支付页 pay.html 结构化类（原内联