/* CSS 基础设置 */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color:#e9eef5;
    background-color:#0b0f14;
    line-height:1.6;
}

/* 全站链接颜色：默认浅灰，悬停浅蓝 */
a{color:#c6cfda;text-decoration:none}
a:hover{color:#5ad2ff}

/* 顶部扁平导航 */
.site-header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:10;
    backdrop-filter:saturate(1.2) blur(6px);
    background:linear-gradient(to bottom, rgba(7,11,17,.75), rgba(7,11,17,.35));
    border-bottom:1px solid rgba(223, 228, 235, 0.185);
}
.nav-container{
    max-width:100%;
    margin:0;
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
}
.nav{position:absolute;left:50%;transform:translateX(-50%)}
.brand{
    color:#e9eef5;
    text-decoration:none;
    font-weight:700;
    letter-spacing:.3px;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
/* 品牌 LOGO 尺寸与对齐 */
.brand-logo{display:block;width:20px;height:20px}
.nav a{
    color:#c6cfda;
    text-decoration:none;
    margin-left:16px;
    padding:8px 10px;
    border-radius:8px;
    transition:background-color .15s ease, color .15s ease;
}
.nav a:hover{color:#5ad2ff;background-color:rgba(146,162,186,.15)}
.nav a:active{background-color:rgba(146,162,186,.22)}

/* 音乐按钮（扁平风格） */
.music-btn{
    margin-left:16px;
    padding:4px 12px;
    border-radius:8px;
    border:1px solid rgba(223, 228, 235, 0.18);
    background:transparent;
    color:#c6cfda;
    font:inherit;
    cursor:pointer;
    transition:background-color .15s ease, color .15s ease, opacity .15s ease;
}
*.music-btn:hover{color:#fff;background-color:rgba(146,162,186,.15)}
.music-btn:active{background-color:rgba(146,162,186,.22)}
*.music-btn[aria-pressed="true"]{color:#dafffc}
/* 头部音乐按钮单独靠右 */
.header-music{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
/* 不使用 display:none，提升某些移动浏览器的播放兼容 */
#bg-audio{position:absolute;width:0;height:0;opacity:0;pointer-events:none}

/* 背景视频容器 */
.video-background{
    position:fixed;
    inset:0;
    z-index:-2;
    overflow:hidden;
    background:#0b0f14;
}

/*下雨特效，置于页面最前；仍为 pointer-events:none 不拦截交互 */
 .particles-canvas{
    position:fixed;
    inset:0;
    z-index:30;  
    pointer-events:none;
    display:block;
} 

.video-background .video{
    position:absolute;
    top:50%;
    left:50%;
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    transform:translate(-50%, -50%);
    object-fit:cover;
    filter:saturate(1.05) contrast(1.05);
}
.video-background .video-overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(1200px 600px at 50% 20%, rgba(7,11,17,0), rgba(7,11,17,0)), linear-gradient(to bottom, rgba(7,11,17,0.2), rgba(7,11,17,0.2));
    pointer-events:none;
}

/* 主内容布局 */
.content{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:calc( clamp(24px, 3vw, 48px) + 54px ) clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px);
}
.content h1{
    margin:0 0 12px;
    font-size:clamp(28px, 4vw, 56px);
    letter-spacing:.5px;
}
.content p{
    margin:0 0 24px;
    max-width:720px;
    color:#d4dbe6;
}
.cta-btn{
    display:inline-block;
    padding:12px 20px;
    border-radius:999px;
    background:linear-gradient(135deg, #73fcce, #2286f8);
    color:#0b0f14;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 6px 24px rgba(96, 154, 255, .35);
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}
.cta-btn.secondary{
    background:transparent;
    color:#e9eef5;
    border:1px solid rgba(223, 228, 235, 0.18);
}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(96,154,255,.45)}
.cta-btn:active{transform:translateY(0);filter:brightness(.95)}

/* 更多内容区 */
.more{
    background:linear-gradient(to bottom, rgba(7,11,17,.45), rgba(7,11,17,0.5));
    backdrop-filter:saturate(1.1);
}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
}
.feature-card{
    background:rgba(146,162,186,.08);
    border:none;
    border-radius:12px;
    padding:16px 16px 14px;
}
.feature-card h3{margin:0 0 8px;font-size:18px}
.feature-card p{margin:0;color:#c6cfda}

/* 文本左对齐偏好（卡片类） */
.feature-card,
.gallery-card,
.community-card,
.about-card,
.contact-card{ text-align:left }
.gallery-card p,
.community-card p{ text-align:left }

/* 绘画区块 */
.painting{background:linear-gradient(to bottom, rgba(7,11,17,0.5), rgba(7,11,17,0.5))}
.section-desc{margin:0 0 16px;color:#c6cfda;text-align:center}
.gallery-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px}
.gallery-card{background:rgba(146,162,186,.08);border:none;border-radius:12px;padding:12px;text-align:center}
.card-link{color:inherit;text-decoration:none;display:block}
.card-link:hover{filter:brightness(1.02)}
.gallery-thumb{height:120px;border-radius:10px;background:linear-gradient(135deg, #2a2f3a, #171b22);overflow:hidden}
.gallery-img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-card p{margin:8px 0 0;color:#c6cfda;font-size:14px}

/* 智能画布 */
.canvas{background:linear-gradient(to bottom, rgba(7,11,17,1), rgba(7,11,17,1))}
.canvas-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.canvas-illustration{
    height:220px;
    border-radius:12px;
    overflow:hidden;
    position:relative;
}
.canvas-img{width:100%;height:100%;object-fit:cover;display:block}

/* 仅为 #introduction 区域的 container 设置背景图 */
#introduction .container{
    background-image:url('assets/tawyIM.png');
    background-size:52% auto;
    background-position-x: right;
    /* background-color: rgb(15, 21, 22); */
    background-position-y: center;
    background-repeat:no-repeat;
    position:relative;
}
/* 右侧可点击区域，与背景宽度保持一致 */
#introduction .container .bg-link{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:52%;
    display:block;
    z-index:1;
    text-indent:-9999px;
    cursor:pointer;
}

/* 社区 */
.community{background:linear-gradient(to bottom, rgba(7,11,17,0.35), rgba(7,11,17,0.2))}
.community-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px}
.community-card{background:rgba(146,162,186,.08);border:none;border-radius:12px;padding:12px;text-align:center}
.community-card .avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg, #5ad2ff, #7c5cff);margin:0 auto 8px}
.avatar{overflow:hidden;position:relative}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}

/* 覆盖先前的左对齐设置，使社区卡片文本回到居中 */
.community-card, .community-card p{ text-align:center }
.container{
    max-width:1080px;
    /* max-width: 75%; */
    margin:0 auto;
    padding:48px 24px 72px;
}
/* .carousel{background:linear-gradient(to bottom, rgba(7,11,17,.35), rgba(7,11,17,.2))} */
.carousel-viewport{width: min(100%, 100%); margin: 0 auto; position:relative; overflow:hidden; border-radius:12px; border:none; background:rgba(146,162,186,.06); box-shadow: 0.1px 0.10px rgba(0,0,0,.30); padding-bottom:44px}
.carousel-track{ display:flex; transition:transform .35s ease}
/* .carousel-slide{min-width:100%; user-select:none; display:flex; justify-content:center} */
.carousel-slide{min-width:100%; user-select:none}
.carousel-img{width:100%; height:300px; object-fit:cover; display:block; opacity:0.8; transition:opacity .6s ease}
.carousel-slide:hover .carousel-img, .carousel-link:hover .carousel-img{opacity:1}
.carousel-link{display:block}
.carousel-btn{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; border:1px solid rgba(223,228,235,.2); background:rgba(7,11,17,.45); color:#e9eef5; cursor:pointer}
.carousel-btn:hover{background:rgba(7,11,17,.6)}
.carousel-btn.prev{left:12px}
.carousel-btn.next{right:12px}
.carousel-dots{position:absolute; left:50%; bottom:54px; transform:translateX(-50%); display:flex; gap:8px}
.carousel-dots button{width:8px; height:8px; border-radius:50%; border:1px solid rgba(223,228,235,.3); background:rgba(223,228,235,.2); cursor:pointer; padding:0}
.carousel-dots button[aria-selected="true"]{background:#7c5cff; border-color:#7c5cff}
.carousel-caption{position:absolute; left:0; right:0; bottom:0; padding:10px 14px; color:#e9eef5; font-size:14px; text-align:center; background:transparent; border-bottom-left-radius:12px; border-bottom-right-radius:12px; pointer-events:none}
.more h2{margin:0 0 16px;font-size:clamp(22px, 3vw, 32px)}
.features{margin:0;padding-left:18px;color:#c6cfda}
.features li{margin:8px 0}

/* 页脚 */
.site-footer{padding:24px;text-align:center;color:#9fb0c4}
.site-footer hr{border:0;border-top:1px solid rgba(230, 233, 238, 0.212)}

/* 公安备案图标样式 */
.beian-icon{
    height:20px;
    vertical-align:text-bottom;
    margin-right:4px;
}

/* 可见占位间距 */
.spacer{display:block;width:100%}
.spacer-5{height:5em}
.spacer-2{height:2em}

/* 个人资料与联系方式区块 */
.about, .contact{
    background:linear-gradient(to bottom, rgba(7,11,17,.2), rgba(7,11,17,0));
}
.about .container, .contact .container{
    padding-top:48px;
    padding-bottom:64px;
}
.about-grid, .contact-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:16px;
}
.contact-grid{ grid-template-columns: 1fr }
.about-card, .contact-card{
    background:rgba(146,162,186,0.0);
    border:none;
    border-radius:12px;
    padding:16px 16px 14px;
}
.about-card h3, .contact-card h3{margin:0 0 8px;font-size:18px}
.about-list{margin:0;padding-left:18px;color:#c6cfda}
.about-list li{margin:6px 0}
.contact-card a{color:#c6cfda;text-decoration:none}
.contact-card a:hover{color:#5ad2ff;text-decoration:underline}

/* 群聊二维码展示 */
.qr-box{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px;margin-right:12px;vertical-align:top}
.qr-img{width:120px;max-width:60vw;height:auto;border-radius:8px;border:1px solid rgba(223,228,235,.2);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.qr-img{cursor:pointer}
.qr-tip{margin:0;color:#c6cfda;font-size:14px;text-align:center}

/* 动态减少偏好处理 */
@media (prefers-reduced-motion: reduce){
    .video{animation:none;transition:none}
    .cta-btn{transition:none}
}

/* 小屏优化 */
@media (max-width: 480px){
    .content p{font-size:15px}
    .about-grid, .contact-grid{grid-template-columns: 1fr}
    .feature-grid{grid-template-columns:1fr}
    .gallery-grid{grid-template-columns:1fr 1fr}
    .canvas-grid{grid-template-columns:1fr}
    .community-grid{grid-template-columns:1fr 1fr}
    /* 移动端导航优化：单行横向滚动，避免换行拥挤 */
    .nav{position:static; transform:none; display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:8px; padding:6px 0}
    .nav::-webkit-scrollbar{display:none}
    .nav a{margin-left:0; padding:10px 12px; font-size:14px; flex:0 0 auto}
}


/* 底部悬浮操作栏（二维码气泡） */
.floating-dock{
    position:fixed;
    right:16px;
    bottom:16px;
    display:flex;
    gap:8px;
    z-index:60;
}
.dock-item{position:relative}
.dock-btn{
    width:40px;height:40px;
    border-radius:30px;
    border:1px solid rgba(223,228,235,.18);
    background:rgba(146,162,186,.08);
    color:#e9eef5;
    cursor:pointer;
    font-weight:700;
    outline:none;
    display:flex;align-items:center;justify-content:center;
}
.dock-btn:hover{background:rgba(146,162,186,.15)}
.dock-icon{width:20px;height:20px;display:block}
.dock-popover{
    position:absolute;
    right:0; bottom:48px;
    transform-origin:bottom left;
    opacity:0; visibility:hidden; transform:translateY(6px) scale(.98);
    transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index:9999;
}
.dock-item.open .dock-popover{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
.dock-card{
    background:rgba(15,21,28,.98);
    border:1px solid rgba(223,228,235,.18);
    border-radius:12px;
    padding:10px;
    box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.dock-qr{width:140px;height:auto;display:block;border-radius:8px}
.dock-tip{margin:6px 0 0;font-size:12px;color:#c6cfda;text-align:center}

/* 悬停显示（桌面） */
.dock-item:hover .dock-popover{opacity:1; visibility:visible; transform:translateY(0) scale(1)}

/* 移动端：改为点击展开，悬停无效，由 JS 添加 .open 控制 */
@media (hover: none){
    .dock-item:hover .dock-popover{opacity:0; visibility:hidden; transform:translateY(6px) scale(.98)}
    .dock-item.open .dock-popover{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
    /* 移动端放大二维码尺寸 */
    .dock-qr{width:180px}
}

/* 居中图片模态层 */
.image-modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(7,11,17,.55);
    backdrop-filter: blur(4px);
    z-index:80;
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease, visibility .18s ease;
}
.image-modal[aria-hidden="false"]{opacity:1; visibility:visible}
.image-modal-content{
    position:relative;
}
.image-modal-img{
    max-width:min(86vw, 820px);
    max-height:80vh;
    border-radius:12px;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    border:1px solid rgba(223,228,235,.18);
}
.image-modal-close{
    position:absolute;
    right:8px;
    top:8px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(223,228,235,.18);
    background:rgba(146,162,186,.12);
    color:#e9eef5;
    cursor:pointer;
    z-index:1;
}
.image-modal-close:hover{background:rgba(146,162,186,.18)}
.image-modal-close:active{background:rgba(146,162,186,.26)}

/* ===== TAPackage 下载页样式（作用域：data-page="ta-download"） ===== */
[data-page="ta-download"]{
    --bg: #0b0f14;
    --bg-soft: #0f141b;
    --panel: #121823;
    --txt: #e6ebf2;
    --txt-dim: #b8c1ce;
    --brand: #f5792a;
    --link: #6ab3ff;
    --ok: #3ecf8e;
    --muted: #6a7485;
    --border: #1b2431;
}
[data-page="ta-download"] .topbar{
    position:fixed; top:0; left:0; right:0; z-index:20;
    background:#11151d; border-bottom:1px solid #0c1118;
}
[data-page="ta-download"] .topbar-inner{
    max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:18px;
    height:44px; padding:0 16px; color:var(--txt-dim); overflow-x:auto;
}
[data-page="ta-download"] .topbar-inner a{ color:var(--txt-dim); white-space:nowrap }
[data-page="ta-download"] .topbar-inner a:hover{ color:var(--txt) }

[data-page="ta-download"] .hero-banner{
    position:relative; min-height:520px; padding-top:64px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    color:#eef3fb;
    background:
        radial-gradient(1100px 600px at 70% -10%, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%) no-repeat,
        linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.85) 100%),
        url("../assets/poster.png") center/cover no-repeat;
}
[data-page="ta-download"] .hero-content{ max-width:780px; margin:0 16px }
[data-page="ta-download"] .hero-title{ font-size:56px; line-height:1.15; margin:18px 0 16px }
[data-page="ta-download"] .hero-info,
[data-page="ta-download"] .hero-subinfo{ color:#cbd6e6 }
[data-page="ta-download"] .hero-subinfo{ margin-top:6px; font-size:14px; opacity:.9 }
[data-page="ta-download"] .hero-actions{ margin-top:18px }
[data-page="ta-download"] .wrap{ max-width:1120px; margin:0 auto; padding:24px }

[data-page="ta-download"] .primary-btn{
    appearance:none; border:0; border-radius:10px; padding:14px 16px;
    font-weight:700; letter-spacing:.3px;
    background:linear-gradient(180deg, #61b0ff 0%, #3d8bff 100%);
    color:#081225; cursor:pointer;
    box-shadow:0 4px 0 #1f5ed1, 0 10px 28px rgba(61,139,255,.45);
    display:flex; align-items:center; justify-content:center; gap:10px;
}
[data-page="ta-download"] .primary-btn:hover{ filter:brightness(1.03) }
[data-page="ta-download"] .primary-btn:active{ transform:translateY(1px); box-shadow:0 3px 0 #1f5ed1, 0 6px 16px rgba(61,139,255,.35) }
[data-page="ta-download"] .note{ color:var(--txt-dim); font-size:13px }

[data-page="ta-download"] .dropdown-btn{
    appearance:none; border:1px solid #1b2640; border-radius:10px; padding:10px 14px;
    background:#0b1323; color:#d5deed; cursor:pointer;
}
[data-page="ta-download"] .platform-panel{
    margin:16px auto 0; max-width:760px; text-align:left;
    background:rgba(12,18,29,.7); backdrop-filter:blur(6px);
    border:1px solid var(--border); border-radius:12px; padding:14px 16px;
}
[data-page="ta-download"] .platform-panel .meta{ margin-top:8px }
[data-page="ta-download"] .platform-panel .row{ margin-top:6px }
[data-page="ta-download"] .selects{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
[data-page="ta-download"] .select{ position:relative }
[data-page="ta-download"] .select select{
    width:100%; padding:12px 12px; border-radius:10px; border:1px solid var(--border);
    background:#0c121d; color:var(--txt); appearance:none;
}
[data-page="ta-download"] .select:after{
    content:""; position:absolute; right:12px; top:50%; width:10px; height:10px;
    border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
    transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
[data-page="ta-download"] .meta{ display:flex; flex-wrap:wrap; gap:14px; color:var(--txt-dim); font-size:13px }
[data-page="ta-download"] .meta a{ color:var(--txt-dim) }
[data-page="ta-download"] .meta a:hover{ color:var(--txt) }
[data-page="ta-download"] .panel{
    background:var(--panel); border:1px solid var(--border);
    border-radius:12px; padding:20px; box-shadow:0 8px 32px rgba(0,0,0,.45);
}
[data-page="ta-download"] .panel h3{ margin:0 0 10px; font-size:18px }
[data-page="ta-download"] .list{ margin:0; padding:0; list-style:none; display:grid; gap:8px }
[data-page="ta-download"] .list a{ color:#6ab3ff }
[data-page="ta-download"] .pill{
    display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border);
    border-radius:999px; padding:6px 10px; background:#0c121d; color:var(--txt-dim); font-size:12px;
}
[data-page="ta-download"] .row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
[data-page="ta-download"] .sec{ margin-top:24px }
[data-page="ta-download"] .sec h2{ margin:0 0 12px; font-size:22px }
[data-page="ta-download"] .muted{ color:var(--txt-dim) }
[data-page="ta-download"] footer.page-foot{ margin:40px 0 16px; color:var(--muted); text-align:center }
@media (max-width:980px){
    [data-page="ta-download"] .hero-title{ font-size:40px }
    [data-page="ta-download"] .selects{ grid-template-columns:1fr }
}