/* 帮退虾官网统一样式表 */
/* 由 index.html 提取并整合，所有页面共用 */

/* 全局盒模型重置 */
*, *::before, *::after {
    box-sizing: border-box;
}

img, svg, video {
    max-width: 100%;
    height: auto;
}

body {
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Company logo: preserve existing layout footprints and never crop the artwork. */
.btx-brand-slot {
    width: 128px;
    height: 44px;
    flex: 0 0 128px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.btx-footer-brand-slot {
    width: 112px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.btx-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
    flex: 0 0 auto;
}

.btx-logo-nav {
    width: auto;
    height: 67px;
    max-width: none;
    max-height: 67px;
}

.btx-logo-footer {
    width: 112px;
    height: 32px;
    max-width: 112px;
    max-height: 32px;
}

.btx-logo-avatar {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 3px;
    object-fit: contain;
    object-position: center;
    border-radius: inherit;
}


        *{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
        :root{--p:#1F4D3A;--pl:#2D6A4F;--b:#fff;--bd:#E5E5E5}
        body{color:#1A1A1A;line-height:1.6;background:var(--page-bg,#FFFFFF)}
        .c{max-width:1200px;margin:0 auto;padding:0 24px}
.btn1{background:#fff;color:#000;padding:14px 32px;border-radius:50px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;transition:background 1.65s cubic-bezier(0.25,1,0.5,1),color 1.65s cubic-bezier(0.25,1,0.5,1),border-color 1.65s cubic-bezier(0.25,1,0.5,1);border:2px solid #000;cursor:pointer;text-decoration:none}
.btn1:hover{background:#000;color:#fff}
        .btn2{background:transparent;color:#1A1A1A;padding:14px 32px;border-radius:50px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;transition:background 1.65s cubic-bezier(0.25,1,0.5,1),color 1.65s cubic-bezier(0.25,1,0.5,1),border-color 1.65s cubic-bezier(0.25,1,0.5,1);border:1px solid var(--bd);cursor:pointer;text-decoration:none}
        .btn2:hover{border-color:var(--p);color:var(--p)}
        /* 导航按钮 - 共享正圆（全局唯一，无缝切换）*/
        .nav-links{position:relative}
        .nav-button{padding:12px 22px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;position:relative;z-index:2}
        .nav-text{color:#1A1A1A;font-weight:600;font-size:15px;transition:color .15s ease}
        .nav-shared-circle{position:absolute;width:72px;height:72px;background:#000;border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .15s ease,background .2s ease;transform:translate(-50%,-50%);left:-9999px;top:-9999px}
        .nav-links:hover .nav-shared-circle{opacity:1}

        /* ====== 全屏扩张层 ====== */
        .expansion-layer{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;z-index:60;pointer-events:none;clip-path:circle(0% at var(--x,50%) var(--y,50%));will-change:clip-path;overflow:hidden}
        .expansion-layer.active{transition:clip-path 1.4s cubic-bezier(.77,0,.175,1);clip-path:circle(150% at var(--x) var(--y));pointer-events:all}
        /* 扩张时导航栏始终浮在上层 */
        .nav-expanding{z-index:61 !important}
        /* 只有黑色扩散时才变白 */
        .nav-expanding.nav-white .nav-text{color:#fff !important;transition:color .15s}
        .nav-expanding.nav-white button{color:#fff !important;border-color:rgba(255,255,255,.5) !important}

        /* 按钮级文字颜色 - 需 !important 对抗 dark-mode span{color:#fff !important} */
        .nb-home:hover .nav-text{color:#fff!important}
        .nb-complaint:hover .nav-text{color:#1A1A1A!important}
        .nb-refund:hover .nav-text{color:#1A1A1A!important}
        .nb-rights:hover .nav-text{color:#fff!important}
        .nb-about:hover .nav-text{color:#fff!important}
        /* 投诉/退费/我的维权：hover不变色，保持#1A1A1A */
        .cd{background:#ffffff;border:none;border-radius:16px;box-shadow:0 5px 18px rgba(0,0,0,.07);transition:background-color 1.5s cubic-bezier(0.25,1,0.5,1),color 1.5s cubic-bezier(0.25,1,0.5,1),box-shadow 1.5s cubic-bezier(0.25,1,0.5,1),transform 1.5s cubic-bezier(0.25,1,0.5,1)}
        .cd:hover{box-shadow:0 10px 36px rgba(0,0,0,.14);transform:translateY(-2px)}
        .ft{background:#1A1A1A;color:#fff}
        .dd{position:relative}
        .dm{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.1);min-width:160px;padding:6px;opacity:0;visibility:hidden;transition:all .2s;z-index:100}
        .dd:hover .dm{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
        .dm a{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:8px;font-size:14px;color:#666;font-weight:500;transition:all .15s;white-space:nowrap;text-decoration:none}
        .dm a:hover{background:#E8F5E9;color:var(--p)}
        .da{font-size:11px;margin-left:2px;transition:transform .2s}
        .dd:hover .da{transform:rotate(180deg)}
        #toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:#1A1A1A;color:#fff;padding:12px 28px;border-radius:50px;font-size:14px;z-index:9999;display:none}
        /* AI聊天框样式 */
        .chat-box{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:16px;margin-top:32px}
        .chat-input-wrap{display:flex;align-items:center;gap:12px;margin-top:12px}
        .chat-input{flex:1;padding:14px 16px;border:1px solid var(--bd);border-radius:12px;font-size:15px;transition:all .2s}
        .chat-input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(31,77,58,0.1)}
        .chat-send{width:48px;height:48px;background:#1A1A1A;color:#fff;border:2px solid #fff;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 1.65s cubic-bezier(0.25,1,0.5,1),color 1.65s cubic-bezier(0.25,1,0.5,1),border-color 1.65s cubic-bezier(0.25,1,0.5,1)}
        .chat-send:hover{background:#333}
        .tag-btn{padding:10px 20px;border-radius:50px;font-size:14px;font-weight:500;cursor:pointer;transition:background 1.65s cubic-bezier(0.25,1,0.5,1),color 1.65s cubic-bezier(0.25,1,0.5,1),border-color 1.65s cubic-bezier(0.25,1,0.5,1);border:1px solid #1A1A1A;background:#fff;white-space:nowrap;color:#1A1A1A}
        .tag-btn:hover,.tag-btn.active:hover{border-color:#fff;background:#1A1A1A;color:#fff}
        .tag-btn.active{border-color:#1A1A1A;background:#fff;color:#1A1A1A}
        .case-card{min-width:280px;background:#fff;border:1px solid var(--bd);border-radius:16px;padding:24px;box-shadow:0 4px 15px rgba(0,0,0,.05)}
        .case-scroll{display:flex;gap:24px;overflow-x:auto;padding-bottom:16px;-webkit-overflow-scrolling:touch}
        .case-scroll::-webkit-scrollbar{height:6px}
        .case-scroll::-webkit-scrollbar-thumb{background:#FFFFFF;border-radius:3px}
        /* 周围图标基础样式 */
        .icon-orb{position:absolute;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 8px 24px rgba(0,0,0,0.12);transition:transform .3s}
        .icon-orb:hover{transform:scale(1.1)}
        /* 各位置图标 */
        .orb-lock{top:20px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#1F4D3A 0%,#2D6A4F 100%);color:#fff}
        .orb-key{top:80px;right:20px;background:linear-gradient(135deg,#8B5CF6 0%,#7C3AED 100%);color:#fff}
        .orb-eye{bottom:80px;right:30px;background:linear-gradient(135deg,#3B82F6 0%,#2563EB 100%);color:#fff}
        .orb-shield{bottom:20px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#F59E0B 0%,#D97706 100%);color:#fff}
        .orb-cloud{bottom:80px;left:30px;background:linear-gradient(135deg,#06B6D4 0%,#0891B2 100%);color:#fff}
        .orb-user{top:80px;left:20px;background:linear-gradient(135deg,#EC4899 0%,#DB2777 100%);color:#fff}
        /* 连接线 */
        .connect-line{position:absolute;background:linear-gradient(90deg,rgba(34,197,94,0.4),rgba(34,197,94,0.1));height:2px;transform-origin:left center}
        .line-1{top:48px;left:50%;width:70px;transform:translateX(-50%)}
        .line-2{top:115px;right:76px;width:60px;transform:rotate(-50deg)}
        .line-3{bottom:125px;right:76px;width:55px;transform:rotate(50deg)}
        .line-4{bottom:48px;left:50%;width:70px;transform:translateX(-50%)}
        .line-5{bottom:125px;left:76px;width:55px;transform:rotate(-50deg)}
        .line-6{top:115px;left:76px;width:60px;transform:rotate(50deg)}
        /* 小装饰点 */
        .deco-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#1F4D3A;opacity:0.4}
        .dot-1{top:15px;left:100px}.dot-2{top:150px;right:10px}.dot-3{bottom:150px;right:15px}
        .dot-4{bottom:10px;left:130px}.dot-5{bottom:140px;left:5px}.dot-6{top:155px;left:15px}
        /* 固定背景层 */
        #bg{position:fixed;inset:0;z-index:-1;will-change:background-color;background:var(--page-bg,#FFFFFF)}
#bg{transition:background-color 1.65s cubic-bezier(0.25,1,0.5,1)}
        #diffuse-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;will-change:background-image;transition:none}
/* ====== 白→黑滚动 dark-mode ====== */
#main-nav.dark-nav{background:transparent!important;border-bottom:none!important}
body{transition:background-color 1.65s cubic-bezier(0.25,1,0.5,1),color 1.65s cubic-bezier(0.25,1,0.5,1)}
.dark-mode,.dark-mode *{transition:color 1.65s cubic-bezier(0.25,1,0.5,1)}
.dark-mode h1,.dark-mode h2,.dark-mode h3,.dark-mode h4,.dark-mode h5,.dark-mode h6,
.dark-mode p,.dark-mode span,.dark-mode a:not(.btn1):not(.btn2),
.dark-mode label,.dark-mode li,.dark-mode strong,
.dark-mode [style*="var(--p)"]{color:#fff!important}
.dark-mode .btn1,.dark-mode .btn2,
.dark-mode button[class*="btn"],
.dark-mode nav button{background:transparent!important;color:#fff!important;border:2px solid #fff!important;transition:background 1.65s cubic-bezier(0.25,1,0.5,1),color 1.65s cubic-bezier(0.25,1,0.5,1),border-color 1.65s cubic-bezier(0.25,1,0.5,1)}
.dark-mode .btn1:hover,.dark-mode .btn2:hover,
.dark-mode button[class*="btn"]:hover,
.dark-mode nav button:hover{background:#fff!important;color:#000!important;border-color:#000!important}
.dark-mode .nl{color:rgba(255,255,255,0.8)!important}
.dark-mode .nl:hover{background:#fff!important;color:#000!important}
.dark-mode .base-text{color:rgba(255,255,255,0.9)!important}
.dark-mode .hover-mask{background-color:#fff!important}
.dark-mode .mask-text{color:#000!important}
.dark-mode section a[style*="background:#fff"],.dark-mode section a[style*="background:#ffffff"]{background:#222!important}
.dark-mode .cd{background:#222!important;transition:background-color 1.5s cubic-bezier(0.25,1,0.5,1),color 1.5s cubic-bezier(0.25,1,0.5,1)}
.dark-mode .cd:hover{background:#222!important}


.service-card{background:#fff;transition:background-color 1.65s cubic-bezier(0.25,1,0.5,1),color 1.65s cubic-bezier(0.25,1,0.5,1),box-shadow 1.65s cubic-bezier(0.25,1,0.5,1),transform 1.65s cubic-bezier(0.25,1,0.5,1)}
.service-card h3,.service-card p,.service-card i,.service-card div{transition:color 1.65s cubic-bezier(0.25,1,0.5,1),background 1.65s cubic-bezier(0.25,1,0.5,1)}
.dark-mode .service-card{background:#222!important}
.dark-mode .service-card h3{color:#fff!important}
.dark-mode .service-card p{color:#ccc!important}
.dark-mode .service-card div[style*="background:#f5f5f5"]{background:#333!important}
.dark-mode .service-card i{color:#fff!important}


    

/* ====== 汉堡菜单按钮 ====== */
.hamburger-btn{
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100;
}

.hamburger-btn span{
    display: block;
    width: 100%;
    height: 3px;
    background: #1A1A1A;
    border-radius: 3px;
    transition: all 0.3s;
}

.hamburger-btn.active span:nth-child(1){
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-btn.active span:nth-child(2){
    opacity: 0;
}

.hamburger-btn.active span:nth-child(3){
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ====== 移动端导航菜单 ====== */
@media(max-width:768px){
    body{
        padding-top: 72px !important;
    }

    .c{
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    #main-nav .c > div{
        height: 72px !important;
        gap: 12px !important;
    }

    .btx-logo-nav{
        height: 52px;
        max-height: 52px;
    }

    .service-chat-layout{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px !important;
        align-items: stretch !important;
    }

    .service-chat-intro{
        width: 100% !important;
        min-width: 0;
    }

    .service-chat-panel{
        width: 100%;
        min-width: 0;
    }

    .service-chat-panel > div{
        width: 100%;
        min-width: 0;
    }

    .service-chat-panel textarea{
        min-width: 0;
    }

    .ft > .c > div:first-child{
        flex-direction: column;
        gap: 48px !important;
    }

    .ft > .c > div:first-child > div{
        width: 100%;
        max-width: none !important;
        min-width: 0;
    }

    .ft > .c > div:first-child a[style*="font-size:56px"]{
        font-size: 38px !important;
    }

    .ft > .c > div:nth-child(2){
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 20px;
    }

    .hamburger-btn{
        display: flex !important;
    }

    .nav-links{
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        padding: 80px 24px 24px;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
        z-index: 60;
        box-shadow: -4px 0 20px rgba(0,0,0,0.1);
        display: flex;
    }

    .nav-links.open{
        transform: translateX(0);
        visibility: visible;
        transition-delay: 0s;
    }

    .nav-button{
        width: 100%;
        padding: 16px;
        border-bottom: 1px solid #E5E5E5;
        justify-content: flex-start;
    }

    .nav-shared-circle{
        display: none;
    }

    /* 移动端导航遮罩 */
    .nav-overlay{
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.3);
        z-index: 59;
    }

    .nav-overlay.show{
        display: block;
    }

    /* 修复 bottom 拼写 */
    .orb-eye, .orb-shield, .orb-cloud,
    .dot-2, .dot-3, .dot-4{
        bottom: auto;
    }
}

/* ====== 移动端通用优化 ====== */
@media(max-width:768px){
    h1{ font-size: 32px !important; }
    h2{ font-size: 28px !important; }
    .container{ padding-left: 16px; padding-right: 16px; }

    /* 防止固定宽度导致溢出 */
    .case-card, .cd{
        min-width: 0;
        width: 100%;
    }
}

@media(max-width:640px){
    h1{ font-size: 26px !important; }
    h2{ font-size: 22px !important; }

    .service-chat-intro p{
        overflow-wrap: anywhere;
    }

    .service-chat-panel [style*="padding:20px 24px"]{
        padding: 16px !important;
    }

    .service-chat-panel [style*="padding:24px"]{
        padding: 16px !important;
    }

    .service-chat-panel [style*="padding:10px 24px"]{
        padding: 10px 16px !important;
    }

    .service-chat-panel [style*="padding:16px 24px"]{
        padding: 14px 16px !important;
        gap: 8px !important;
    }
}


/* ====== 系统B汉堡菜单（about, contact, mission, team, trust） ====== */
@media(max-width:768px){
    /* 系统B的导航容器 */
    nav > div[class="container-custom"] > div:last-child{
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #F9F9F6;
        flex-direction: column;
        padding: 80px 24px 24px;
        transition: right 0.3s ease;
        z-index: 60;
        box-shadow: -4px 0 20px rgba(0,0,0,0.1);
        display: flex;
    }

    nav > div[class="container-custom"] > div:last-child.open{
        right: 0;
    }

    nav > div[class="container-custom"] > div:last-child .nav-link{
        width: 100%;
        padding: 16px;
        border-bottom: 1px solid #E8E8E8;
        justify-content: flex-start;
    }

    /* 汉堡按钮系统B */
    nav .hamburger-btn{
        display: flex !important;
    }
}