/* DocFlow Web —— 样式表 */ :root{ --primary:#4f46e5; --primary-dark:#4338ca; --primary-soft:#eef2ff; --primary-ring:rgba(79,70,229,.18); --teal:#0f766e; --teal-soft:#ccfbf1; --purple:#6d28d9; --purple-soft:#ede9fe; --amber:#b45309; --amber-soft:#fef3c7; --danger:#b91c1c; --danger-soft:#fee2e2; --success:#15803d; --success-soft:#dcfce7; --page:#f6f7f9; --surface:#ffffff; --surface-2:#fafbfc; --text:#14181f; --text-2:#5b6472; --text-3:#8b95a3; --border:#e4e7ec; --border-2:#d3d8e0; --r-sm:8px; --r-md:12px; --r-lg:16px; --shadow-sm:0 1px 2px rgba(16,24,40,.04); --shadow-md:0 4px 16px rgba(16,24,40,.06); } *,*::before,*::after{box-sizing:border-box} /* hidden 属性必须压过作者样式：`.acct{display:flex}` 这类规则的特异性高于 UA 样式表的 `[hidden]{display:none}`，导致 hidden 形同失效 —— 已登录后 「登录/注册」仍会显示。这里统一兜住，避免逐个选择器打补丁。 */ [hidden]{display:none !important} html{scroll-behavior:smooth} body{ margin:0; background:var(--page); color:var(--text); font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif; font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3{margin:0;font-weight:600;line-height:1.35} p{margin:0} a{color:inherit;text-decoration:none} code{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:12px} .wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 24px} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border); } .header-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:20px} .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px} .brand-mark{ width:28px;height:28px;border-radius:8px; background:var(--primary);color:#fff; display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:700;letter-spacing:.5px; } /* 导航项一律不换行、不收缩：右侧再怎么变化也不许把导航挤成两行。 */ .site-nav{display:flex;gap:24px;flex:1 1 auto;flex-shrink:0} .site-nav a{font-size:14px;color:var(--text-2);white-space:nowrap} .site-nav a:hover{color:var(--primary)} /* 只改颜色不改字重/尺寸：避免 hover、激活态引起导航条宽度跳动 */ .site-nav a.active{color:var(--primary)} /* 头部是 sticky(60px)，锚点跳转若不预留偏移，区块标题会被头部盖住， 看起来就像「点了导航整页布局变了」。 */ #workbench,#tools,#faq,.section{scroll-margin-top:76px} .header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0} /* 头部已不再显示「服务运行中」状态胶囊，但该样式仍被 pay.html 的沙箱提示复用 */ .status-pill{ font-size:12px;color:var(--text-2); background:var(--surface-2);border:1px solid var(--border); border-radius:999px;padding:4px 12px;white-space:nowrap; } .status-pill.ok{color:var(--success);background:var(--success-soft);border-color:#bbf7d0} .status-pill.warn{color:var(--amber);background:var(--amber-soft);border-color:#fde68a} /* ---------- Hero ---------- */ .hero{padding:72px 0 44px;text-align:center} .hero-inner{max-width:720px;margin:0 auto} .hero h1{font-size:34px;letter-spacing:-.4px;margin-bottom:16px} .hero-sub{font-size:16px;color:var(--text-2);margin-bottom:24px} .hero-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:28px} .badge{ font-size:12px;color:var(--text-2); background:var(--surface);border:1px solid var(--border); border-radius:999px;padding:5px 12px; } .hero-cta{display:inline-block} /* ---------- Card / Section ---------- */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); } .section{padding:56px 0} .section-head{margin-bottom:24px} .section-head h2{font-size:22px;margin-bottom:6px} .section-head p{color:var(--text-2);font-size:14px} /* ---------- Page head (workbench) ---------- */ .page-head{padding:36px 0 4px} .page-head h1{font-size:26px;letter-spacing:-.2px;margin:0 0 8px} .page-head p{margin:0;color:var(--text-2);font-size:15px;line-height:1.7} /* ---------- Workbench ---------- */ .workbench{margin-top:8px;padding:8px 0} .step{padding:24px 28px;border-bottom:1px solid var(--border)} .step:last-child{border-bottom:none} .step-head{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap} .step-no{ width:22px;height:22px;border-radius:50%; background:var(--primary-soft);color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:600;flex:none; } .step-head h2{font-size:15px} .step-desc{font-size:13px;color:var(--text-3)} /* 方向选择 */ .dir-row{display:flex;align-items:flex-start;gap:20px} .dir-col{min-width:0} .dir-col-grow{flex:1} .dir-label{font-size:12px;color:var(--text-3);margin-bottom:8px} .fmt-grid{display:flex;gap:10px;flex-wrap:wrap} .fmt-card{ min-width:88px;padding:12px 14px; border:1px solid var(--border);border-radius:var(--r-md); background:var(--surface);cursor:pointer;text-align:center; transition:border-color .15s,background .15s,box-shadow .15s; } .fmt-card:hover{border-color:var(--border-2);background:var(--surface-2)} .fmt-card.active{ border-color:var(--primary);background:var(--primary-soft); box-shadow:0 0 0 3px var(--primary-ring); } .fmt-card .fmt-name{font-size:14px;font-weight:600;display:block} .fmt-card .fmt-hint{font-size:11px;color:var(--text-3);display:block;margin-top:2px} .fmt-card.active .fmt-hint{color:var(--primary)} .dir-arrow{ align-self:center;color:var(--text-3); padding-top:18px;flex:none; } .tgt-chips{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px} .chip{ border:1px solid var(--border);background:var(--surface); border-radius:999px;padding:7px 16px;font-size:13px; cursor:pointer;color:var(--text); transition:border-color .15s,background .15s,box-shadow .15s; } .chip:hover{border-color:var(--border-2);background:var(--surface-2)} .chip.active{ border-color:var(--primary);background:var(--primary-soft); color:var(--primary);font-weight:600; box-shadow:0 0 0 3px var(--primary-ring); } /* 上传区 */ .dropzone{ border:1.5px dashed var(--border-2);border-radius:var(--r-md); background:var(--surface-2); padding:36px 20px;text-align:center;cursor:pointer; transition:border-color .15s,background .15s; } .dropzone:hover{border-color:var(--primary);background:var(--primary-soft)} .dropzone.dragover{border-color:var(--primary);background:var(--primary-soft)} .dropzone:focus-visible{outline:2px solid var(--primary);outline-offset:2px} .dz-icon{color:var(--text-3);margin-bottom:10px} .dropzone:hover .dz-icon{color:var(--primary)} .dz-title{font-size:14px;font-weight:500;margin-bottom:4px} .dz-sub{font-size:12px;color:var(--text-3)} .file-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .file-item{ display:flex;align-items:center;gap:10px; background:var(--surface-2);border:1px solid var(--border); border-radius:var(--r-sm);padding:8px 12px;font-size:13px; } .file-ext{ flex:none;width:34px;height:34px;border-radius:6px; background:var(--primary-soft);color:var(--primary); display:flex;align-items:center;justify-content:center; font-size:10px;font-weight:700;text-transform:uppercase; } .file-meta{flex:1;min-width:0} .file-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .file-size{display:block;font-size:11px;color:var(--text-3)} .file-remove{ flex:none;border:none;background:transparent;color:var(--text-3); cursor:pointer;font-size:16px;line-height:1;padding:4px 6px;border-radius:4px; } .file-remove:hover{color:var(--danger);background:var(--danger-soft)} /* 参数 */ .options{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start} .opt{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)} .opt label{font-size:13px} .opt input[type=range]{width:110px;accent-color:var(--primary)} .opt select{ border:1px solid var(--border);border-radius:6px; padding:5px 8px;font-size:13px;background:var(--surface);color:var(--text); } .opt input[type=number]{width:64px;border:1px solid var(--border);border-radius:6px;padding:5px 8px;font-size:13px} .opt input[type=checkbox]{width:15px;height:15px;accent-color:var(--primary)} .opt-val{font-size:12px;color:var(--text-3);min-width:34px} .opt-empty{font-size:13px;color:var(--text-3)} /* 操作 */ .step-action{padding-top:8px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border:1px solid transparent;border-radius:var(--r-sm); padding:10px 18px;font-size:14px;font-weight:500;cursor:pointer; font-family:inherit;transition:background .15s,border-color .15s,opacity .15s; } .btn-primary{background:var(--primary);color:#fff} .btn-primary:hover:not(:disabled){background:var(--primary-dark)} .btn-primary:disabled{opacity:.45;cursor:not-allowed} .btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)} .btn-ghost:hover{border-color:var(--border-2);background:var(--surface-2)} .btn-block{width:100%;padding:12px} .action-hint{font-size:12px;color:var(--text-3);text-align:center;margin-top:10px} .action-hint.error{color:var(--danger)} /* 结果 */ .progress{margin-bottom:16px} .progress-bar{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden;border:1px solid var(--border)} .progress-bar i{ display:block;height:100%;width:0%; background:var(--primary);border-radius:999px; transition:width .3s ease; } .progress-bar.done i{background:var(--success)} .progress-bar.error i{background:var(--danger)} .progress-text{font-size:13px;color:var(--text-2);margin-top:8px} .progress-text.error{color:var(--danger)} .result-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .result-item{ display:flex;align-items:center;gap:12px; border:1px solid var(--border);border-radius:var(--r-sm); padding:10px 14px;background:var(--surface); } .result-item .file-ext{background:var(--success-soft);color:var(--success)} .result-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .empty{font-size:13px;color:var(--text-3)} /* ---------- 工具网格（参考 allfilestools：图标块 + 标题 + 描述） ---------- */ .tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px} .tool-card{ display:flex;align-items:flex-start;gap:11px; background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);padding:14px 15px;cursor:pointer; text-decoration:none;color:inherit; transition:border-color .15s,box-shadow .15s,transform .15s; } .tool-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)} .tool-card .tool-txt{display:flex;flex-direction:column;gap:3px;min-width:0} .tool-card .tool-dir{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;line-height:1.35} .tool-card .tool-dir .arrow{color:var(--text-3);font-weight:400} .tool-card .tool-note{font-size:12px;color:var(--text-3);line-height:1.5} .tool-card .tool-dir-row{display:flex;align-items:center;gap:8px;min-width:0} .tool-card .tool-dir-row .tool-dir{flex:1;min-width:0} /* 图标块：按分类着色（PDF 红 / 图片紫 / 文本绿 / 小工具主题色） */ .t-ico-wrap{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center} .t-ico-wrap svg{width:18px;height:18px} .t-ico-pdf{background:var(--danger-soft);color:var(--danger)} .t-ico-img{background:var(--purple-soft);color:var(--purple)} .t-ico-text{background:var(--teal-soft);color:var(--teal)} .t-ico-tool{background:var(--primary-soft);color:var(--primary)} /* 首页工具区：分类分块 */ .cat-block{margin-top:30px} .cat-head{margin-bottom:12px} .cat-head h3{font-size:17px;font-weight:700;color:var(--text);margin:0 0 3px} .cat-head p{font-size:13px;color:var(--text-3);margin:0} /* 首页小工具卡片 */ .gadget-top{display:flex;align-items:center;gap:8px;margin-bottom:6px} .gadget-price{margin-left:auto;font-size:12px;padding:1px 7px;border-radius:6px;background:#eef2ff;color:#4f46e5;white-space:nowrap} .gadget-price.free{background:#e7f6ee;color:#1a7f4b} /* 定价页：文档格式互转介绍 */ .conv-intro{margin-bottom:28px;padding:20px 22px} .conv-intro p{color:var(--text);font-size:14px;line-height:1.7;margin:0} .conv-points{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px} .conv-points li{font-size:14px;color:var(--text);line-height:1.6} /* ---------- 特性 ---------- */ .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px} .feature{padding:22px} .feature h3{font-size:15px;margin:14px 0 8px} .feature p{font-size:13px;color:var(--text-2)} .feature-icon{ width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:600; } .fi-blue{background:var(--primary-soft);color:var(--primary)} .fi-teal{background:var(--teal-soft);color:var(--teal)} .fi-purple{background:var(--purple-soft);color:var(--purple)} .fi-amber{background:var(--amber-soft);color:var(--amber)} /* ---------- FAQ ---------- */ .faq{display:flex;flex-direction:column;gap:10px} .faq details{ background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);padding:14px 18px; } .faq summary{font-size:14px;font-weight:500;cursor:pointer;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"+";color:var(--primary);font-weight:600;margin-right:10px;display:inline-block;width:12px} .faq details[open] summary::before{content:"−"} .faq details p{font-size:13px;color:var(--text-2);margin-top:10px;padding-left:22px} /* ---------- Footer ---------- */ .site-footer{border-top:1px solid var(--border);background:var(--surface);margin-top:40px} .footer-inner{ display:flex;justify-content:space-between;align-items:flex-start; gap:24px;padding:32px 24px;flex-wrap:wrap; } .brand-footer{margin-bottom:8px} .footer-note{font-size:12px;color:var(--text-3);max-width:460px} .footer-nav{display:flex;gap:18px} .footer-nav a{font-size:13px;color:var(--text-2)} .footer-nav a:hover{color:var(--primary)} /* ---------- 响应式 ---------- */ @media (max-width:900px){ .hero{padding:48px 0 32px} .hero h1{font-size:27px} .hero-sub{font-size:15px} .dir-row{flex-direction:column;gap:14px} .dir-arrow{padding:0;transform:rotate(90deg)} .site-nav{display:none} } @media (max-width:640px){ .wrap{padding:0 16px} .step{padding:20px 18px} .fmt-card{min-width:74px;padding:10px 12px} .options{gap:14px} .footer-inner{flex-direction:column} } /* ---------- 按钮尺寸 / 账户区 ---------- */ .btn-sm{padding:6px 12px;font-size:13px} /* 固定最小宽度并右对齐：登录前是「登录 + 注册」，登录后是「账户 + 退出」， 两者宽度接近，切换登录态时右侧不会左右跳动。宽度只取到「账户 + 退出」所需， 留出空间给左侧导航 —— 之前按「含会员胶囊」预留 186px，会把导航挤到换行。 */ .acct{display:flex;align-items:center;gap:8px;min-width:132px;justify-content:flex-end} .acct-balance{ font-size:13px;font-weight:600;color:var(--primary); background:var(--primary-soft);border:1px solid #dfe3ff; border-radius:999px;padding:6px 12px; } .acct-balance:hover{background:#e5e9ff} /* 管理员入口折叠在「我的账户」旁的小箭头里：平时只多 22px， 展开后是浮层，不会把 sticky 头部撑高、也不会挤窄左侧导航。 */ .acct-menu{position:relative;display:flex;align-items:center;gap:2px} .acct-caret{ display:inline-flex;align-items:center;justify-content:center; width:22px;height:28px;padding:0;margin-left:-4px; border:1px solid transparent;border-radius:8px; background:transparent;color:var(--text-3);cursor:pointer; transition:background .15s,color .15s; } .acct-caret:hover{background:var(--surface-2);color:var(--primary)} .acct-caret svg{transition:transform .18s} .acct-menu.open .acct-caret{background:var(--surface-2);color:var(--primary)} .acct-menu.open .acct-caret svg{transform:rotate(180deg)} .acct-dropdown{ position:absolute;top:calc(100% + 10px);right:0;z-index:90; min-width:210px;padding:6px;display:none; background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);box-shadow:var(--shadow-md); } .acct-menu.open .acct-dropdown{display:block} .acct-dd-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px} .acct-dd-item:hover{background:var(--surface-2)} .acct-dd-ico{ flex:0 0 28px;height:28px;display:inline-flex;align-items:center;justify-content:center; border-radius:8px;background:var(--primary-soft);color:var(--primary);font-weight:700; } .acct-dd-txt{display:flex;flex-direction:column;gap:2px;line-height:1.3} .acct-dd-txt b{font-size:13px;font-weight:600;color:var(--text)} .acct-dd-txt small{font-size:11px;color:var(--text-3)} .price-hint{font-size:12px;color:var(--text-3);text-align:center;margin-top:6px} /* ---------- 弹窗 ---------- */ .modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px} .modal[hidden]{display:none} .modal-mask{position:absolute;inset:0;background:rgba(16,24,40,.42)} .modal-box{ position:relative;width:100%;max-width:440px;max-height:88vh;overflow:auto; background:var(--surface);border-radius:var(--r-lg); box-shadow:0 20px 48px rgba(16,24,40,.18); } .modal-head{ display:flex;align-items:center;justify-content:space-between; padding:18px 22px;border-bottom:1px solid var(--border); } .modal-head h3{font-size:15px} .modal-close{ border:none;background:transparent;font-size:20px;line-height:1; color:var(--text-3);cursor:pointer;padding:2px 6px;border-radius:6px; } .modal-close:hover{color:var(--text);background:var(--surface-2)} .modal-body{padding:20px 22px} .modal-foot{ padding:14px 22px 20px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap; } .modal-foot .btn{min-width:96px} .q-price{ text-align:center;padding:16px;border-radius:var(--r-md); background:var(--primary-soft);margin-bottom:16px; } .q-price .q-value{font-size:30px;font-weight:700;color:var(--primary);line-height:1.2} .q-price .q-label{font-size:12px;color:var(--text-2)} .q-price.free .q-value{color:var(--success)} .q-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} .q-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text-2)} .q-row b{font-weight:600;color:var(--text)} .q-note{font-size:12px;color:var(--text-3);background:var(--surface-2);border-radius:var(--r-sm);padding:8px 12px} .q-note.warn{color:var(--amber);background:var(--amber-soft)} .form-row{display:flex;flex-direction:column;gap:10px} .form-row input{ border:1px solid var(--border);border-radius:var(--r-sm); padding:10px 12px;font-size:14px;font-family:inherit;color:var(--text);background:var(--surface); } .form-row input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)} .form-error{font-size:12px;color:var(--danger);min-height:16px} .form-tip{font-size:12px;color:var(--text-3);margin:0} .phone-row{display:flex;gap:8px;align-items:stretch} .phone-row input{flex:1;min-width:0} .phone-row .btn{white-space:nowrap;flex:none} /* ---------- 定价页 ---------- */ .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px} .price-panel{padding:22px 24px} .panel-title{font-size:15px;margin-bottom:14px} .panel-note{font-size:12px;color:var(--text-3);margin-top:12px} .panel-note.warn{color:var(--danger)} .price-table{width:100%;border-collapse:collapse;font-size:13px} .price-table th{ text-align:left;font-weight:500;color:var(--text-3);font-size:12px; padding:6px 0;border-bottom:1px solid var(--border); } .price-table td{padding:8px 0;border-bottom:1px solid var(--border)} .price-table tr:last-child td{border-bottom:none} .price-cell{text-align:right;font-weight:600;color:var(--primary)} .field-label{font-size:13px;color:var(--text-2);margin-bottom:8px} .check-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);margin:14px 0} .check-row input{width:15px;height:15px;accent-color:var(--primary)} .price-box{ display:flex;flex-direction:column;align-items:center;gap:2px; background:var(--primary-soft);border-radius:var(--r-md);padding:16px;margin-top:6px; } .price-box-label{font-size:12px;color:var(--text-2)} .price-box-value{font-size:30px;font-weight:700;color:var(--primary);line-height:1.2} .price-box-note{font-size:12px;color:var(--text-3)} .pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px} .pkg-card{padding:20px;text-align:center;position:relative} .pkg-hot{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)} .pkg-badge{ position:absolute;top:-10px;left:50%;transform:translateX(-50%); background:var(--primary);color:#fff;font-size:11px; border-radius:999px;padding:3px 10px;white-space:nowrap; } .pkg-card h3{font-size:14px;margin-bottom:8px} .pkg-price{font-size:24px;font-weight:700;color:var(--text);line-height:1.2} .pkg-bonus{font-size:12px;color:var(--primary);margin-top:4px} .pkg-total{font-size:12px;color:var(--text-3);margin:6px 0 14px} /* 双方案对比（单次付费 / VIP） */ .plan-price{font-size:36px;font-weight:800;color:var(--text);line-height:1.1;margin:2px 0 8px} .plan-price .plan-unit{font-size:14px;font-weight:600;color:var(--text-3);margin-left:2px} .plan-list{margin:12px 0 0;padding-left:20px;font-size:13px;color:var(--text-2);line-height:1.95} .plan-vip{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)} .pay-channels{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 18px} .pay-channels .ch-label{font-size:13px;color:var(--text-2)} .pay-channels .ch-btn{cursor:pointer} .pay-channels .ch-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)} .qr-box{display:flex;justify-content:center;margin:6px 0 12px} .qr-box img{width:200px;height:200px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px} .qr-tip{text-align:center;font-size:14px;color:var(--text);margin:4px 0} .qr-sub{text-align:center;font-size:12px;color:var(--text-3);word-break:break-all;margin-top:6px} /* 单号一键复制按钮（收银台共用） */ .pend-copy-btn{margin-left:6px;padding:2px 8px;font-size:11px;border:1px solid var(--border); border-radius:6px;background:transparent;color:var(--text-2);cursor:pointer;white-space:nowrap} .pend-copy-btn:hover{border-color:var(--primary);color:var(--primary)} .pay-method{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px} .pay-method .pm-label{font-size:13px;color:var(--text-2)} .pay-method .pm-btn{cursor:pointer} .pay-method .pm-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)} .faq-mini{margin-top:36px;padding:22px 24px} .faq-mini ul{margin:0;padding-left:18px} .faq-mini li{font-size:13px;color:var(--text-2);margin-bottom:8px} /* ---------- 账户页 ---------- */ .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .stat{padding:18px 20px;display:flex;flex-direction:column;gap:4px} .stat-label{font-size:12px;color:var(--text-3)} .stat-value{font-size:22px;font-weight:600} /* ---------- 账户页 · 未登录（登录 / 注册） ---------- */ .auth-shell{max-width:440px;margin:36px auto 0;position:relative} .auth-shell::before{ /* 光晕宽度跟着卡片走（left/right 0），不能写死 520px： 绝对定位元素即使 transform 居中，原始盒仍会把窄屏撑出横向滚动条。 */ content:"";position:absolute;z-index:-1;top:-52px; left:0;right:0;height:280px; background:radial-gradient(ellipse at center,rgba(79,70,229,.10),transparent 70%); pointer-events:none; } .auth-hero{text-align:center;margin-bottom:22px} .auth-brand{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-2)} .auth-brand .brand-mark{width:26px;height:26px;font-size:11px;border-radius:8px} .auth-badge{ display:inline-block;margin:16px 0 10px;padding:5px 13px;border-radius:999px; background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:600; } .auth-hero h2{font-size:24px;margin:0 0 6px} .auth-hero p{font-size:13px;color:var(--text-2);line-height:1.65;margin:0} .auth-card{padding:26px 28px 28px;box-shadow:0 12px 32px rgba(16,24,40,.07)} .auth-tabs{display:flex;gap:6px;margin-bottom:22px;border-bottom:1px solid var(--border)} .auth-tab{ flex:1;padding:10px 0 12px;border:0;background:transparent;cursor:pointer; font:inherit;font-size:14px;color:var(--text-3);position:relative; transition:color .15s; } .auth-tab:hover{color:var(--text)} .auth-tab.active{color:var(--primary);font-weight:600} .auth-tab.active::after{ content:"";position:absolute;left:22%;right:22%;bottom:-1px;height:2px; border-radius:2px;background:var(--primary); } .auth-form{display:flex;flex-direction:column;gap:15px} .auth-field{display:flex;flex-direction:column;gap:7px} .auth-lbl{font-size:12px;font-weight:600;color:var(--text-2)} .auth-row{display:flex;gap:8px;align-items:stretch} .auth-input{ width:100%;height:44px;padding:0 13px;border:1px solid var(--border); border-radius:10px;background:var(--surface);color:var(--text); font:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s; } .auth-input::placeholder{color:var(--text-3)} .auth-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)} .auth-row .auth-input{flex:1;min-width:0} .auth-row .btn{height:44px;flex:none;white-space:nowrap;border-radius:10px} .auth-captcha-img{ height:44px;width:112px;flex:none;object-fit:cover;cursor:pointer; border:1px solid var(--border);border-radius:10px;background:#fff; } .auth-captcha-img:hover{border-color:var(--primary)} /* 空内容时完全不占位，有错误才浮出一块浅红提示 */ .auth-err{display:none;font-size:12px;line-height:1.5;color:var(--danger); background:var(--danger-soft);border-radius:8px;padding:9px 12px;margin:0} .auth-err:not(:empty){display:block} .auth-tip{font-size:12px;line-height:1.6;color:var(--text-3);margin:0} .auth-submit{ height:46px;margin-top:2px;border:0;border-radius:10px; font-size:15px;font-weight:600;letter-spacing:.02em; box-shadow:0 6px 16px rgba(79,70,229,.22); transition:transform .15s,box-shadow .15s,background .15s; } .auth-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px rgba(79,70,229,.28)} .auth-foot{text-align:center;font-size:12px;color:var(--text-3);margin:16px 0 0;line-height:1.6} @media (max-width:520px){ .auth-shell{margin-top:20px} .auth-card{padding:22px 18px 24px} .auth-hero h2{font-size:21px} } .data-table{width:100%;border-collapse:collapse;font-size:13px} .data-table th{ text-align:left;font-weight:500;color:var(--text-3);font-size:12px; padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-2); } .data-table td{padding:10px 14px;border-bottom:1px solid var(--border)} .data-table tr:last-child td{border-bottom:none} .td-time{color:var(--text-3);white-space:nowrap} .td-ref{color:var(--text-3);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .amt-plus{color:var(--success);font-weight:600} .amt-minus{color:var(--text-2);font-weight:600} .st{display:inline-block;font-size:12px;border-radius:999px;padding:2px 10px;white-space:nowrap} .st-gray{background:var(--surface-2);color:var(--text-3)} .st-blue{background:var(--primary-soft);color:var(--primary)} .st-green{background:var(--success-soft);color:var(--success)} .st-amber{background:var(--amber-soft);color:var(--amber)} .st-red{background:var(--danger-soft);color:var(--danger)} /* ---------- 收银台 ---------- */ .pay-card{max-width:420px;margin:48px auto;padding:32px;text-align:center} .pay-label{font-size:12px;color:var(--text-3)} .pay-order{font-size:12px;color:var(--text-2);font-family:ui-monospace,Menlo,Consolas,monospace;margin-bottom:18px} .pay-sub{font-size:14px;margin-bottom:18px} .pay-amount{display:flex;align-items:baseline;justify-content:center;gap:2px;margin-bottom:18px} .pay-currency{font-size:20px;font-weight:600;color:var(--text)} .pay-value{font-size:40px;font-weight:700;color:var(--text);line-height:1} .pay-note{font-size:12px;color:var(--text-3);margin-bottom:20px;text-align:left} .pay-actions{display:flex;flex-direction:column;gap:10px} .pay-result{font-size:13px;margin-top:14px;min-height:18px} .pay-result.ok{color:var(--success)} .pay-result.error{color:var(--danger)} @media (max-width:640px){ .modal-box{max-width:100%} .stat-grid{grid-template-columns:repeat(2,1fr)} .data-table{font-size:12px} .data-table th,.data-table td{padding:8px 10px} .td-ref{display:none} } /* ---------- 小工具面板（首页内联运行器） ---------- */ /* 让 .tool-card 在作为