/* ============ 基础 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    color:#fff;
    min-height:100vh;
    display:flex; flex-direction:column;
    /* 背景图（image/23.jpg）+ 压暗罩（保证文字可读）；图加载失败时显示底下的渐变兜底 */
    background:
        linear-gradient(180deg, rgba(10,12,16,.55) 0%, rgba(10,12,16,.32) 45%, rgba(10,12,16,.60) 100%),
        url('/image/23.jpg') center/cover no-repeat fixed,
        radial-gradient(1200px 600px at 20% -10%, rgba(99,102,241,.28), transparent 60%),
        radial-gradient(1000px 500px at 85% 110%, rgba(168,85,247,.20), transparent 60%),
        #0d0f14;
    -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }

/* 点击不显示焦点框，仅键盘 Tab 时显示 */
:focus{ outline:none; }
:focus-visible{ outline:2px solid #4d7cfe; outline-offset:2px; border-radius:6px; }

/* ============ 顶部导航 ============ */
.nav{
    position:fixed; top:22px; left:0; right:0;
    display:flex; justify-content:center; z-index:10;
    padding:0 16px;
}
.nav-inner{
    display:flex; align-items:center; gap:4px;
    background:rgba(13,15,20,.52);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-radius:999px; padding:5px;
    max-width:100%; overflow-x:auto; scrollbar-width:none;
}
.nav-inner::-webkit-scrollbar{ display:none; }
.nav-item{
    border:none; background:transparent;
    color:rgba(255,255,255,.72);
    font-size:14px; padding:8px 18px; border-radius:999px;
    white-space:nowrap; transition:.2s;
}
.nav-item:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav-item.nav-active{ background:rgba(255,255,255,.92); color:#111; font-weight:600; }
.nav-item.nav-active:hover{ background:#fff; }

/* ============ 主视觉 ============ */
.hero{
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:110px 20px 40px;
}
.hero-title{
    font-size:clamp(42px,8vw,76px); font-weight:800; letter-spacing:2px;
    background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.55));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 3px 16px rgba(0,0,0,.55));
}
.hero-sub{
    margin-top:16px; font-size:clamp(14px,2.4vw,17px);
    color:rgba(255,255,255,.72); letter-spacing:1px;
    text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.hero-btns{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.btn-main{
    border:none; border-radius:12px; padding:13px 32px;
    font-size:15px; font-weight:600; color:#111;
    background:#fff; transition:.2s;
    box-shadow:0 8px 30px rgba(255,255,255,.12);
}
.btn-main:hover{ transform:translateY(-2px); box-shadow:0 12px 36px rgba(255,255,255,.18); }
.btn-ghost{
    border:1px solid rgba(255,255,255,.22); border-radius:12px;
    padding:13px 28px; font-size:15px; color:rgba(255,255,255,.88);
    cursor:pointer;
    background:rgba(13,15,20,.38);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    transition:.2s;
}
.btn-ghost:hover{ background:rgba(13,15,20,.55); color:#fff; }

/* ============ 体验免费版 · 悬浮下载窗 ============ */
.free-wrap{ position:relative; display:flex; align-items:center; }
.free-pop{
    position:absolute; top:calc(100% + 12px); left:50%;
    transform:translate(-50%,8px);
    width:260px; background:#fff; color:#1a1a1a;
    border-radius:16px; padding:18px 14px 14px;
    box-shadow:0 16px 50px rgba(0,0,0,.45);
    opacity:0; visibility:hidden; transition:.22s;
    z-index:20; text-align:left;
}
.free-wrap:hover .free-pop{ opacity:1; visibility:visible; transform:translate(-50%,0); }
/* 小三角箭头（指向上方按钮） */
.free-pop::before{
    content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
    border-left:8px solid transparent; border-right:8px solid transparent;
    border-bottom:8px solid #fff;
}
/* 两列布局：图标在上、文字在下 */
.free-cols{ display:flex; gap:10px; }
.free-col{
    flex:1; display:flex; flex-direction:column; align-items:center;
    border:1px solid #f0f0f0; border-radius:12px; padding:14px 8px 12px;
    transition:.18s;
}
.free-col:hover{ border-color:#e2e2e2; background:#fafafa; }
.free-col-ico{
    width:84px; height:84px; display:flex; align-items:center; justify-content:center;
}
.free-col-ico img{ width:56px; height:56px; display:block; }
.free-col-name{ margin-top:10px; font-size:13px; font-weight:600; color:#333; }
/* 安卓版二维码（qrcode.js 前端生成，输出 canvas+img） */
.free-qr{
    width:84px; height:84px; border-radius:8px;
    background:#fff; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.free-qr img,.free-qr canvas{ display:block; }

/* ============ 页脚 ============ */
.footer{
    text-align:center; padding:18px 12px 26px;
    font-size:12px; color:rgba(255,255,255,.30); letter-spacing:.5px;
}

/* ============ 会员卡片（遮罩 + 白卡） ============ */
.overlay{
    position:fixed; inset:0; z-index:100;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.overlay.show{ opacity:1; visibility:visible; }
.card{
    width:min(760px,100%); max-height:86vh;
    background:#fff; color:#1a1a1a;
    border-radius:20px; overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.45);
    display:flex; flex-direction:column;
    transform:translateY(18px) scale(.98); transition:transform .28s cubic-bezier(.2,.9,.3,1.1);
}
.overlay.show .card{ transform:none; }

/* 卡片头：分段切换 + X */
.card-head{
    display:flex; align-items:center; justify-content:center;
    padding:16px 60px 14px; position:relative;
    border-bottom:1px solid #f0f0f0; flex-shrink:0;
}
.seg{
    display:flex; background:#f2f3f5; border-radius:12px; padding:4px; gap:2px;
}
.seg-btn{
    border:none; background:transparent; border-radius:9px;
    padding:8px 26px; font-size:14px; color:#777; transition:.18s;
    white-space:nowrap;
}
.seg-btn:hover{ color:#333; }
.seg-btn.on{
    background:#fff; color:#111; font-weight:600;
    box-shadow:0 2px 8px rgba(0,0,0,.10);
}
/* 苹果版后续要加：复制一个 seg-btn 解开注释即可
.seg-btn.disabled{ opacity:.4; cursor:not-allowed; }
*/
.card-x{
    position:absolute; right:16px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border:none; border-radius:50%;
    background:transparent; color:#888; font-size:0; line-height:1;
    display:flex; align-items:center; justify-content:center; transition:.18s;
}
/* ✕ 字符本身基线偏移导致视觉偏心（flex 居中救不了字形），改用伪元素画两条交叉线：
   原字符 font-size:0 隐藏（HTML 不动），两条线以圆心绝对居中；
   background:currentColor 跟随悬停变色，悬停旋转90°作用在按钮上同样带动两条线 */
.card-x::before,.card-x::after{
    content:""; position:absolute; left:50%; top:50%;
    width:14px; height:2px; border-radius:2px; background:currentColor;
}
.card-x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.card-x::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.card-x:hover{ background:#f2f3f5; color:#111; }

/* 卡片内容（滚动区） */
.card-body{ overflow-y:auto; flex:1; padding:28px 34px 34px; }
.panel{ display:none; }
.panel.on{ display:block; animation:fadeIn .22s; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1;} }

.panel-title{ font-size:22px; font-weight:700; }
.panel-desc{ margin-top:2px; font-size:15px; color:#888; line-height:1.8; text-align:center; letter-spacing:.5px; }

.sec-label{
    margin:26px 0 14px; font-size:13px; font-weight:600;
    color:#aaa; letter-spacing:2px;
}
/* 功能亮点 */
.feat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.feat{
    display:flex; gap:12px; align-items:flex-start;
    border:1px solid #f0f0f0; border-radius:14px; padding:14px 16px;
    transition:.18s;
}
.feat:hover{ border-color:#e2e2e2; background:#fafafa; }
.feat-ico{
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background:#f4f5f7; display:flex; align-items:center; justify-content:center;
    font-size:18px;
}
.feat-t{ font-size:14.5px; font-weight:600; }
.feat-d{ margin-top:3px; font-size:12.5px; color:#999; line-height:1.5; }

/* 套餐 */
.plan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.plan{
    border:1px solid #ececec; border-radius:14px; padding:18px;
}
.plan.hot{ border-color:#111; position:relative; }
.plan-badge{
    position:absolute; top:16px; right:16px;
    background:#111; color:#fff; font-size:11px;
    padding:2px 10px; border-radius:999px; letter-spacing:1px;
}
.plan-name{ font-size:15px; font-weight:700; }
.plan-price{ margin-top:10px; font-size:26px; font-weight:800; }
.plan-price small{ font-size:12px; font-weight:400; color:#999; margin-left:2px; }
.plan-ul{ margin-top:12px; list-style:none; }
.plan-ul li{
    font-size:12.5px; color:#777; padding:4px 0 4px 16px; position:relative;
}
.plan-ul li::before{ content:""; position:absolute; left:0; top:11px;
    width:5px; height:5px; border-radius:50%; background:#ccc; }

/* CTA */
.cta{
    display:block; margin-top:26px; text-align:center;
    background:#111; color:#fff; border-radius:12px;
    padding:14px; font-size:15px; font-weight:600; transition:.2s;
}
.cta:hover{ background:#000; transform:translateY(-1px); }
.panel-note{ margin-top:14px; text-align:center; font-size:12px; color:#bbb; }

/* ============ 免费资源卡片（小尺寸白卡） ============ */
.card-sm{ width:min(760px,100%); }
.free-head-title{ font-size:15px; font-weight:600; color:#1a1a1a; letter-spacing:1px; }
/* 小工具列表（占位条目，后续替换）；固定高度，超出滚动
   滚动条外挂：容器向右探出 20px，条目右侧补回 14px margin，
   条目右缘与上方下载区对齐，滚动条落在右侧空隙里 */
.tool-list{
    display:flex; flex-direction:column; gap:16px;
    max-height:430px; overflow-y:auto;
    margin-right:-20px;
    /* 首条目悬停上浮3px会被容器上边沿裁掉，顶部留6px余量（列表整体随之下移） */
    padding-top:6px;
    scrollbar-width:thin; scrollbar-color:#d8d8d8 transparent;
}
.tool-list .tool-item{ margin-right:14px; }
.tool-list::-webkit-scrollbar{ width:6px; }
.tool-list::-webkit-scrollbar-track{ background:transparent; }
.tool-list::-webkit-scrollbar-thumb{ background:#ddd; border-radius:999px; }
.tool-list::-webkit-scrollbar-thumb:hover{ background:#c5c5c5; }
.tool-item{
    display:flex; align-items:center; gap:12px;
    border:1px solid #f0f0f0; border-radius:12px; padding:12px 16px;
    transition:.18s;
}
.tool-item:hover{ border-color:#e2e2e2; background:#fafafa; transform:translateY(-1px); }
.tool-ico{
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    background:#f4f5f7; display:flex; align-items:center; justify-content:center;
    font-size:17px;
}
.tool-t{ font-size:14px; font-weight:600; color:#1a1a1a; }
.tool-badge{
    margin-left:5px; padding:0 4px; display:inline-block;
    border:1px solid #a9d9c2; border-radius:3px;
    font-size:11px; font-weight:400; color:#43a374; background:#f3faf6;
    vertical-align:middle; line-height:1.5;
}
.tool-badge.pc{
    border-color:#b9c8f5; color:#5a76d6; background:#f3f6fe;
}
/* 带右侧按钮的条目：主体仍是下载链接，按钮独立（避免 a 套 a） */
.tool-item-main{
    display:flex; align-items:center; gap:12px; flex:1; min-width:0;
    text-decoration:none; color:inherit;
}
.tool-act{
    margin-left:auto; flex-shrink:0;
    font-size:12.5px; color:#5a76d6; border:1px solid #c9d7ff;
    border-radius:8px; padding:5px 12px; background:#fff;
    text-decoration:none; transition:.18s; white-space:nowrap;
}
.tool-act:hover{ background:#5a76d6; color:#fff; border-color:#5a76d6; }
.tool-d{ margin-top:2px; font-size:12px; color:#999; }

/* ============ 会员卡片 · 华丽精修（全部用 #overlay 限定作用域，免费资源卡片与页面其它部分不受影响） ============ */
/* 卡片本体：顶部渐变装饰条 + 更柔和的投影 */
#overlay .card{
    position:relative;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 30px 90px rgba(0,0,0,.50);
}
#overlay .card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
    background:linear-gradient(90deg,#000,#333,#555);
}
/* 分段切换：选中项渐变黑药丸 */
#overlay .seg{ box-shadow:inset 0 1px 3px rgba(0,0,0,.06); }
#overlay .seg-btn.on{
    background:linear-gradient(135deg,#000,#333);
    color:#fff; font-weight:600;
    box-shadow:0 4px 14px rgba(0,0,0,.30);
}
/* 关闭按钮：悬停旋转90度并变黑 */
#overlay .card-x:hover{ background:#f2f3f5; color:#111; transform:translateY(-50%) rotate(90deg); }
/* 灰色小字介绍：两侧渐变引线 */
#overlay .panel-desc{
    display:flex; align-items:center; gap:14px;
    margin-top:4px; color:#999;
}
#overlay .panel-desc::before,
#overlay .panel-desc::after{
    content:""; flex:1; height:1px;
    background:linear-gradient(90deg,transparent,#e2e2e8);
}
#overlay .panel-desc::after{ background:linear-gradient(90deg,#e2e2e8,transparent); }
/* 区块小标题：右侧细线延伸 */
#overlay .sec-label{ display:flex; align-items:center; gap:12px; }
#overlay .sec-label::after{ content:""; flex:1; height:1px; background:#f0f0f3; }
/* 功能亮点：浅色渐变卡 + 悬停浮起；图标四色 pastel 渐变 */
#overlay .feat{
    border:1px solid #eeeef2; border-radius:16px; padding:16px;
    background:linear-gradient(180deg,#fff,#fcfcfe);
    transition:.22s;
}
#overlay .feat:hover{
    transform:translateY(-3px);
    border-color:#e0e0e0;
    box-shadow:0 10px 26px rgba(0,0,0,.08);
}
#overlay .feat-ico{ border-radius:12px; }
#overlay .feat-grid .feat:nth-child(1) .feat-ico{ background:linear-gradient(135deg,#e7ecff,#f0f4ff); }
#overlay .feat-grid .feat:nth-child(2) .feat-ico{ background:linear-gradient(135deg,#f3eaff,#fbf5ff); }
#overlay .feat-grid .feat:nth-child(3) .feat-ico{ background:linear-gradient(135deg,#ffeef6,#fff6fa); }
#overlay .feat-grid .feat:nth-child(4) .feat-ico{ background:linear-gradient(135deg,#e8fbff,#f2feff); }
/* 套餐卡：悬停浮起；热门卡渐变描边 + 渐变徽章 + 渐变价格 */
#overlay .plan{ border-radius:16px; padding:20px 18px; transition:.22s; }
#overlay .plan:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.07); }
#overlay .plan.hot{
    border:1.5px solid transparent;
    background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(135deg,#444,#777,#999) border-box;
}
#overlay .plan-badge{
    background:linear-gradient(135deg,#000,#333);
    box-shadow:0 4px 10px rgba(0,0,0,.30);
}
#overlay .plan.hot .plan-price{
    background:linear-gradient(135deg,#000,#555);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
/* 套餐明细：灰圆点改为黑色对勾 */
#overlay .plan-ul li{ padding-left:22px; }
#overlay .plan-ul li::before{
    content:"\2713"; left:2px; top:4px;
    width:auto; height:auto; background:none; border-radius:0;
    font-size:12px; font-weight:700; color:#111;
}
/* CTA：渐变按钮 + 悬停光泽扫过 */
#overlay .cta{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg,#000,#2a2a2a 55%,#444);
    border-radius:14px; letter-spacing:1px;
    box-shadow:0 10px 26px rgba(0,0,0,.30);
}
#overlay .cta:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#000,#1a1a1a 55%,#2e2e2e);
    box-shadow:0 14px 34px rgba(0,0,0,.40);
}
#overlay .cta::after{
    content:""; position:absolute; top:0; left:-60%;
    width:40%; height:100%; transform:skewX(-20deg);
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
    transition:left .55s;
}
#overlay .cta:hover::after{ left:120%; }
/* ============ 免费资源卡片 · 华丽精修（全部用 #freeOverlay 限定作用域，与会员卡片同一套设计语言） ============ */
/* 卡片本体：顶部渐变装饰条 + 更柔和的投影 */
#freeOverlay .card{
    position:relative;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 30px 90px rgba(0,0,0,.50);
}
#freeOverlay .card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
    background:linear-gradient(90deg,#000,#333,#555);
}
/* 头部标题：前置渐变菱形点缀 */
#freeOverlay .free-head-title{ display:flex; align-items:center; gap:9px; }
#freeOverlay .free-head-title::before{
    content:""; width:8px; height:8px; border-radius:2px; transform:rotate(45deg);
    background:linear-gradient(135deg,#000,#444);
}
/* 关闭按钮：悬停旋转90度并变黑 */
#freeOverlay .card-x:hover{ background:#f2f3f5; color:#111; transform:translateY(-50%) rotate(90deg); }
/* 区块小标题：右侧细线延伸 */
#freeOverlay .sec-label{ display:flex; align-items:center; gap:12px; }
#freeOverlay .sec-label::after{ content:""; flex:1; height:1px; background:#f0f0f3; }
/* 小工具条目：浅色渐变卡 + 悬停浮起 */
#freeOverlay .tool-item{
    border:1px solid #eeeef2; border-radius:14px;
    background:linear-gradient(180deg,#fff,#fcfcfe);
    transition:.22s;
}
#freeOverlay .tool-item:hover{
    transform:translateY(-3px);
    border-color:#e0e0e0;
    box-shadow:0 10px 26px rgba(0,0,0,.08);
}
/* 条目图标：pastel 渐变底循环 */
#freeOverlay .tool-ico{ border-radius:12px; }
#freeOverlay .tool-item:nth-child(1) .tool-ico{ background:linear-gradient(135deg,#e7ecff,#f0f4ff); }
#freeOverlay .tool-item:nth-child(2) .tool-ico{ background:linear-gradient(135deg,#f3eaff,#fbf5ff); }
#freeOverlay .tool-item:nth-child(3) .tool-ico{ background:linear-gradient(135deg,#ffeef6,#fff6fa); }
#freeOverlay .tool-item:nth-child(4) .tool-ico{ background:linear-gradient(135deg,#e8fbff,#f2feff); }
#freeOverlay .tool-item:nth-child(5) .tool-ico{ background:linear-gradient(135deg,#e7ecff,#f0f4ff); }
#freeOverlay .tool-item:nth-child(6) .tool-ico{ background:linear-gradient(135deg,#f3eaff,#fbf5ff); }
/* 右侧按钮：黑色描边，悬停黑色渐变填充 */
#freeOverlay .tool-act{ color:#222; border-color:#ccc; }
#freeOverlay .tool-act:hover{
    background:linear-gradient(135deg,#000,#333);
    color:#fff; border-color:transparent;
    box-shadow:0 6px 16px rgba(0,0,0,.28);
}
/* 列表滚动条：黑灰色系 */
#freeOverlay .tool-list{ scrollbar-color:#bbb transparent; }
#freeOverlay .tool-list::-webkit-scrollbar-thumb{ background:#bbb; }
#freeOverlay .tool-list::-webkit-scrollbar-thumb:hover{ background:#888; }
/* 会员卡片内容区滚动条：免费资源卡片同款（#overlay 限定，免费资源卡片不受影响） */
#overlay .card-body{
    scrollbar-width:thin; scrollbar-color:#bbb transparent;
}
#overlay .card-body::-webkit-scrollbar{ width:6px; }
#overlay .card-body::-webkit-scrollbar-track{ background:transparent; }
#overlay .card-body::-webkit-scrollbar-thumb{ background:#bbb; border-radius:999px; }
#overlay .card-body::-webkit-scrollbar-thumb:hover{ background:#888; }
/* 会员卡片 · 完整介绍按钮（#overlay 限定，免费资源卡片不受影响） */
#overlay .more-wrap{ margin-top:14px; text-align:center; }
#overlay .more-intro{
    display:inline-flex; align-items:center; gap:5px;
    font-size:12.5px; color:#222; letter-spacing:.5px;
    padding:5px 14px; border:1px solid #ccc; border-radius:999px;
    transition:.2s;
}
#overlay .more-intro:hover{
    border-color:#999; background:#f5f5f5;
    box-shadow:0 4px 12px rgba(0,0,0,.10);
}
#overlay .more-intro .mi-arrow{ transition:transform .2s; }
#overlay .more-intro:hover .mi-arrow{ transform:translateX(3px); }
/* ============ 会员卡片 · 完整介绍模式（#overlay 限定，免费资源卡片与页面其它部分不受影响） ============ */
/* 卡片变大：宽度由 760px 扩到 1080px，高度上限放宽到 90vh，宽度变化平滑过渡（transform 过渡沿用原值） */
#overlay .card{ transition:transform .28s cubic-bezier(.2,.9,.3,1.1), width .28s ease; }
#overlay .card.mode-intro{ width:min(1080px,100%); max-height:90vh; }
/* 完整介绍为常驻界面：分段切换保持显示，用于直接切换电脑版/安卓版介绍内容（右上角关闭按钮不变） */
/* 左上角返回按钮（与 .card-x 左右对称的圆钮，默认隐藏，介绍模式显示；悬停左移一下）
   ← 箭头用伪元素画（同 .card-x 思路）：原字符 font-size:0 隐藏（HTML 不动），
   两条圆角线以按钮中心偏左为顶点拼成「<」，background:currentColor 跟随悬停变色 */
.card-back{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border:none; border-radius:50%;
    background:transparent; color:#888; font-size:0; line-height:1;
    display:none; align-items:center; justify-content:center; transition:.18s;
}
.card-back::before,.card-back::after{
    content:""; position:absolute; left:50%; top:50%;
    width:11px; height:2px; border-radius:2px; background:currentColor;
}
.card-back::before{ transform:translate(-50%,-50%) translate(0,-3.9px) rotate(-45deg); }
.card-back::after{ transform:translate(-50%,-50%) translate(0,3.9px) rotate(45deg); }
.card-back:hover{ background:#f2f3f5; color:#111; transform:translateY(-50%) translateX(-2px); }
#overlay .card.mode-intro .card-back{ display:flex; }
/* 居中标题（复用免费资源卡片头部标题样式：前置渐变菱形点缀） */
.intro-head-title{
    display:none; align-items:center; gap:9px;
    font-size:16px; font-weight:600; color:#1a1a1a; letter-spacing:1px;
}
.intro-head-title::before{
    content:""; width:8px; height:8px; border-radius:2px; transform:rotate(45deg);
    background:linear-gradient(135deg,#000,#444);
}
#overlay .card.mode-intro .intro-head-title{ display:flex; }
/* 介绍视图：电脑版/安卓版共用一个容器，默认隐藏，进入介绍模式后淡入 */
.intro-view{ display:none; }
#overlay .card.mode-intro .intro-view{ display:block; animation:fadeIn .22s; }
.intro-panel{ display:none; }
.intro-panel.on{ display:block; }
/* 介绍正文：纯文本排版，行高放宽便于阅读 */
.intro-text p{ font-size:16px; line-height:1.95; color:#3d3d3d; margin-bottom:14px; }
/* 正文里的「查看效果」等链接：轻量小按钮——浅灰底 + 细浅边，默认低调融入正文不抢眼；
   悬停黑色渐变填充转白字，与卡片黑白设计语言呼应（边框色 #eeeef2 复用功能卡同款） */
.intro-text a{
    display:inline-block; vertical-align:middle; margin-left:6px;
    padding:2px 11px; font-size:12px; font-weight:500; color:#999;
    border:1px solid #eeeef2; border-radius:999px;
    background:#f8f8fa;
    text-decoration:none; white-space:nowrap; transition:.18s;
}
.intro-text a:hover{
    background:linear-gradient(135deg,#000,#333);
    color:#fff; border-color:transparent;
    box-shadow:0 3px 10px rgba(0,0,0,.18);
}
/* 正文内嵌小表情图：与文字基线对齐 */
.intro-text img{ vertical-align:-4px; }
/* 固定底部下载栏：白底包裹按钮并钉在卡片底部，滚动文本不穿透（默认隐藏，介绍模式显示） */
.intro-foot{
    display:none; flex-shrink:0;
    padding:14px 34px 18px; text-align:center;
    background:#fff; border-top:1px solid #f0f0f0;
    box-shadow:0 -8px 20px rgba(0,0,0,.05);
}
#overlay .card.mode-intro .intro-foot{ display:block; }
/* 「下载免费版体验」：黑色渐变胶囊按钮（沿用原 intro-dl 样式） */
.intro-dl-btn{
    display:inline-block; padding:10px 26px; border-radius:999px;
    background:linear-gradient(135deg,#000,#333); color:#fff;
    font-size:14px; font-weight:600; letter-spacing:1px; text-decoration:none;
    box-shadow:0 6px 16px rgba(0,0,0,.25); transition:.2s;
}
.intro-dl-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.32); }
/* ============ 移动端 ============ */
@media (max-width:640px){
    .card{ max-height:92vh; border-radius:16px; }
    .card-body{ padding:22px 18px 26px; }
    .intro-foot{ padding:12px 18px 14px; }
    .feat-grid,.plan-grid{ grid-template-columns:1fr; }
    .seg-btn{ padding:8px 18px; }
    .overlay{ padding:10px; }
}

/* ============ 关于我们卡片（#aboutOverlay 限定作用域，与会员/免费资源卡片同一套设计语言；骨架复用 .overlay/.card/.card-head/.card-x） ============ */
/* 页脚触发文字：「© 2026 大鹏网络科技」可点击，悬停微亮（默认与页脚同色，global a 已继承颜色） */
.footer .js-open-about{ cursor:pointer; transition:.2s; }
.footer .js-open-about:hover{ color:rgba(255,255,255,.75); }
/* 卡片本体：复用免费资源卡片同款描边/投影/顶部渐变装饰条；宽度收窄适配轻量内容 */
#aboutOverlay .card{
    position:relative;
    width:min(480px,100%);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 30px 90px rgba(0,0,0,.50);
}
#aboutOverlay .card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
    background:linear-gradient(90deg,#000,#333,#555);
}
/* 头部标题：复用「渐变菱形点缀」同款（同 free-head-title / intro-head-title） */
#aboutOverlay .about-head-title{
    display:flex; align-items:center; gap:9px;
    font-size:15px; font-weight:600; color:#1a1a1a; letter-spacing:1px;
}
#aboutOverlay .about-head-title::before{
    content:""; width:8px; height:8px; border-radius:2px; transform:rotate(45deg);
    background:linear-gradient(135deg,#000,#444);
}
/* 关闭按钮：悬停旋转90度并变黑（与其它卡片一致） */
#aboutOverlay .card-x:hover{ background:#f2f3f5; color:#111; transform:translateY(-50%) rotate(90deg); }
/* 内容区整体居中 */
#aboutOverlay .card-body{ text-align:center; }
/* 品牌宣言：「鹏鹏会员」复用热门套餐价签同款渐变字 */
#aboutOverlay .about-brand{ font-size:16px; font-weight:700; color:#1a1a1a; line-height:1.9; letter-spacing:.5px; }
#aboutOverlay .about-brand .hl{
    background:linear-gradient(135deg,#000,#555);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
/* 简介与座右铭（字体逐属性一致；灰色复用 .panel-desc 同款 #888） */
#aboutOverlay .about-desc{ margin-top:8px; font-size:14px; color:#888; line-height:1.9; }
#aboutOverlay .about-motto{ margin-top:2px; font-size:14px; color:#888; line-height:1.9; }
/* 特色标签：浅灰胶囊（底色复用 .feat-ico/.tool-ico 同款 #f4f5f7） */
#aboutOverlay .about-feats{ display:flex; gap:10px; justify-content:center; margin-top:18px; }
#aboutOverlay .about-feat{
    flex:1; padding:7px 0; font-size:12.5px; color:#555;
    background:#f4f5f7; border-radius:999px; letter-spacing:1px;
}
/* 公司署名（复用 .panel-note 同款浅灰 #bbb） */
#aboutOverlay .about-company{ margin-top:16px; font-size:12px; color:#bbb; letter-spacing:.5px; }
/* 底部按钮区：上边框分隔（复用 .intro-foot 同款 #f0f0f0 边线） */
#aboutOverlay .about-foot{
    display:flex; gap:12px;
    margin-top:20px; padding-top:16px;
    border-top:1px solid #f0f0f0;
}
/* 次要按钮「联系客服」：白底灰边，悬停黑色渐变填充（复用 .tool-act 交互语言） */
#aboutOverlay .about-btn-ghost{
    flex:1; padding:11px 0; text-align:center;
    font-size:14px; color:#222;
    border:1px solid #ccc; border-radius:12px; background:#fff;
    transition:.2s;
}
#aboutOverlay .about-btn-ghost:hover{
    background:linear-gradient(135deg,#000,#333);
    color:#fff; border-color:transparent;
    box-shadow:0 6px 16px rgba(0,0,0,.28);
}
/* 主要按钮「好哒」：黑色渐变（复用 .cta/.intro-dl-btn 同款渐变与投影） */
#aboutOverlay .about-btn-main{
    flex:1; padding:11px 0; border:none; border-radius:12px;
    font-size:14px; font-weight:600; color:#fff; letter-spacing:1px;
    background:linear-gradient(135deg,#000,#333);
    box-shadow:0 6px 16px rgba(0,0,0,.25); transition:.2s;
}
#aboutOverlay .about-btn-main:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(0,0,0,.32);
}

/* 页脚备案号：与「© 2026 大鹏网络科技」同款悬停高亮（复用 .footer .js-open-about 同一组参数） */
.footer .beian-link{ cursor:pointer; transition:.2s; }
.footer .beian-link:hover{ color:rgba(255,255,255,.75); }