/* --- 1. 全局变量定义（已适配移动端状态栏） --- */
:root {
    --bg-black: #000000;
    --text-white: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6); /* 移动端稍加亮，防看不清 */  
    --accent-red: #f80039;   
    --img-radius: 12px;

    /* 【移动端状态栏锁定参数】 */
    --nav-font-size: 14px;      /* 手机端精致小字号 */
    --nav-gap: 12px;            /* 紧凑间距，确保 375px 不挤压折行 */
    --nav-height: 64px;         /* 适合手指触控的黄金高度 */
    --line-height: 2px;         
    --line-radius: 0.5px;       

    /* 楼层数值（其余未改动部分暂留，后续改页面时再动） */

    --tag-size: clamp(17px, 17px, 17px);
    --title-size: clamp(40px, 40px, 40px); 
    --desc-size: clamp(15px, 15px, 15px);
    --title-weight: 500;
    --desc-weight: 300;
    
    /* 暂不污染全局 body，先仅对状态栏解除 768px 锁定 */
    --min-page-width: 100%;

    /* 按钮与交互参数 */
    --btn-size: clamp(40px, 2vw, 60px);
    --arrow-size: calc(var(--btn-size) * 0.25);
    --hover-duration: 0.6s; 

    /* 间距控制中心 */
    --global-margin: 48px;
}




/* --- 2. 基础重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a, a:visited, a:hover, a:active {
    color: inherit;
    text-decoration: none;
    /* 核心优化：彻底清除移动设备点击链接时的大块蓝斑阴影 */
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-black);
    color: var(--text-white);
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    /* 就改下面这一行 */
    min-width: 100%;
    overflow-x: hidden; 
    -webkit-text-size-adjust: 100%;
}


/* --- 3. 状态栏 (移动端 375px 独立适配版) --- */
.navbar {
    width: 100%;
    min-width: var(--min-page-width);
    height: var(--nav-height);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);

    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; 
    height: 1px;
    background: linear-gradient(to right,  rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.3),  rgba(255, 255, 255, 0.05));
    z-index: 1;
}

.nav-container {
    height: 100%; 
    width: 100%;
    min-width: 100% !important; /* 彻底放开容器宽度 */
    padding: 0 12px; /* 留出手机屏幕两侧的安全边距 */
    display: flex;
    justify-content: center; 
    align-items: center;
}

.nav-links {
    height: 100%; 
    display: flex;
    align-items: center;
    gap: var(--nav-gap); 
}

.nav-item {
    position: relative;
    height: 100%; 
    display: flex;
    align-items: center; 
    color: var(--text-muted) !important; 
    font-size: var(--nav-font-size); 
    font-weight: 320;
    letter-spacing: 0.05em;
    white-space: nowrap; /* 强制单行，防止文字上下错位折行 */
}

.nav-item.brand {
    color: var(--text-white) !important;
    font-weight: 320;
    margin-right: 8px; 
    cursor: default;
}

/* 移除手机端鸡肋的 hover 效果，改为 active 精准控制 */
.nav-item.active { 
    color: var(--text-white) !important; 
    font-weight: 600; 
}

.nav-item.active::after {
    content: "";
    display: block;
    position: absolute;
    left: 0; right: 0; 
    bottom: 0; 
    height: var(--line-height);
    background-color: var(--text-white);
    border-radius: var(--line-radius);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

/* --- 修正：全局 R标 正右上角对齐 --- */
sup {
    font-size: 0.75em; 
    vertical-align: super;
    line-height: 0;
    margin-left: 1px; 
    margin-right: 2px; 
    position: relative;
    top: -2px;
}


/* --- 5. 楼层布局逻辑 --- */
.main-wrapper {
    width: 100%;
    min-width: 100% !important;
    padding-top: calc(var(--nav-height) + var(--global-margin));
}

.floor-section {
    width: 100%;
    padding: 0; 
    display: flex;
    justify-content: center;
    text-align: center;
}

.floor-container {
    width: var(--floor-max-width); 
    padding: 0px 20px 68px; 
}

/* --- 6. 楼层文字细节控制 --- */
.floor-tag {
    display: block;
    color: var(--accent-red);
    font-size: var(--tag-size); 
    font-weight: 450;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

.floor-title {
    color: var(--text-white);
    font-size: var(--title-size); 
    font-weight: var(--title-weight);
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: 0.05em;
}

.floor-desc {
    color: #888;
    font-size: var(--desc-size); 
    font-weight: 350;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

/* --- 7. 图片组件 (干净无干扰·高级紧凑缩减版) --- */
.full-view-images {
    width: 100%;
    padding: 0px 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.image-group {
    width: 100% !important;
    border-radius: var(--img-radius);
    overflow: hidden;
    position: relative;
}

.card-left { margin-right: 0 !important; }

.aspect-placeholder {
    display: block;
    width: 100%;
    height: auto;
    visibility: hidden;
}

.fade-slider {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.slide-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}
.slide-img.active { opacity: 1; z-index: 2; }

/* 按钮外框：【精细重构·完美缩小至60%】 */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;             /* 【60%精确锁定】：76px * 0.6 = 45.6px -> 46px */
    height: 46px;            /* 【60%精确锁定】：76px * 0.6 = 45.6px -> 46px */
    z-index: 10;
    cursor: pointer;
    display: block;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent; 

    /* 平时完全透明，无任何痕迹 */
    background: rgba(0, 0, 0, 0) !important; 
    border: 1px solid rgba(255, 255, 255, 0) !important; 
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    
    transition: background 0.2s ease, border-color 0.2s ease, backdrop-filter 0.2s ease;
}

/* 【交互焦点】：只有手指按住的瞬间，才允许显现圆圈 */
.slider-btn:active {
    background: rgba(0, 0, 0, 0.45) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* 🟢 用这种联合锁死选择器，直接轰开任何潜在的样式拦截 */
.slider-btn.prev { left: 8px !important; }  /* 改这里调左按钮 */
.slider-btn.next { right: 8px !important; } /* 改这里调右按钮 */

/* 箭头本体：【精细重构·完美缩小至60%】 */
.arrow {
    display: block;
    width: 11px;             /* 【60%精确锁定】：18px * 0.6 = 10.8px -> 11px */
    height: 11px;            /* 【60%精确锁定】：18px * 0.6 = 10.8px -> 11px */
    border-top: 2px solid #fff;   /* 【60%等比缩减线条】：3px * 0.6 = 1.8px -> 2px */
    border-right: 2px solid #fff;  /* 【60%等比缩减线条】：3px * 0.6 = 1.8px -> 2px */
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.85; 
    z-index: 99;
    pointer-events: none; 
}

/* 几何校正：完美锁死在 46px 紧凑圆心 */
.left {
    transform: translate(-30%, -50%) rotate(-135deg);
}
.right {
    transform: translate(-70%, -50%) rotate(45deg);
}

/* --- 8. 作品集网格系统 --- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;         /* 👈 取消死高，自动等比 */
    grid-auto-flow: row;          /* 👈 关闭 dense，不嵌套 */
    gap: 14px;                    /* 格子间距 */
    padding: 0 16px;              /* 左右边距 */
    width: 100%;
    box-sizing: border-box;
}

/* 手机端：完美 2 列 */
@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 14px;
    }
    .u-3x2,
    .u-2x2,
    .u-2x1 {
        grid-column: span 2;
    }
}

/* 格子尺寸 */
.u-1x1 { grid-column: span 1; grid-row: span 1; }
.u-1x2 { grid-column: span 1; grid-row: span 2; }
.u-2x1 { grid-column: span 2; grid-row: span 1; }
.u-2x2 { grid-column: span 2; grid-row: span 2; }
.u-3x2 { grid-column: span 3; grid-row: span 2; }

/* 项目容器 */
.work-item {
    position: relative;
    background-color: #0a0a0a;
    border-radius: var(--img-radius);
    overflow: hidden;
    cursor: pointer;
}

/* 图片盒子：强制等比 */
.img-box {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 图片：自动填满，不变形 */
.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.6s ease;
}

.dark-img  { position: relative; z-index: 2; opacity: 1; }
.light-img { position: absolute; top:0; left:0; z-index:1; opacity:0; }

.work-item:hover .dark-img  { opacity:0; }
.work-item:hover .light-img { opacity:1; }


/* --- 9. 独立插件：绝对间距控制中心 --- */
.divider-glow {
    width: 100%;
    display: flex;
    justify-content: center;
    /* 锁定 120px 垂直居中间距 */
    margin: var(--global-margin) 0; 
}

.divider-glow::after {
    content: "";
    width: 100%;
    height: 1px;
    background: linear-gradient(to right,  rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.3),  rgba(255, 255, 255, 0.05));
}

/* --- 10. 客户 Logo 墙系统 (3排独立流·150%完美放大横滑版) --- */

/* 外层总舞台：保留 12% 聚拢边距，切断手机外的溢出部分 */
.client-logo-grid {
    width: 100%;
    padding: 0 0% !important; 
    overflow: hidden !important;
    position: relative;
    display: flex !important;
    flex-direction: column !important; /* 强制 3 排纵向整齐堆叠 */
    gap: 24px !important;              /* 【等比微调】：排与排之间的上下间距从 18px 放大至 24px */
    min-width: min-width: 100% !important;
}

/* 单排滑动视窗 */
.logo-row-stream {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* 核心动力输送带 */
.logo-track-container {
    display: flex !important;
    width: max-content !important;
    gap: 42px !important;              /* 【等比微调】：Logo 之间的横向间距从 28px 放大至 42px，防止大图扎堆 */
}

/* 🟢【速度与方向控制中心】 
   （因为 Logo 变大、轨道变长，为了保持原本均匀的高级流速，秒数进行了等比例微调） */

/* 第一排：正向正常流速 */
.row-speed-normal {
    animation: logoScrollLeft 20s linear infinite !important;
}

/* 第二排：反向流速（制造高级错落感） */
.row-speed-reverse {
    animation: logoScrollRight 18s linear infinite !important;
}

/* 第三排：正向慢流速 */
.row-speed-slow {
    animation: logoScrollLeft 24s linear infinite !important;
}

/* 触碰时优雅静止 */
.logo-track-container:active {
    animation-play-state: paused !important;
}

/* 单个 Logo 精致微调（150% 锁定放大中心） */
.logo-item {
    width: 128px !important;           /* 【150% 完美锁定】：85px * 1.5 = 127.5px -> 向上取整 128px */
    flex-shrink: 0 !important;         /* 绝对禁止压缩变形 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 1;                        /* 原始呈现 */
}

/* 🟢 物理无缝回弹引擎 A：向左匀速无缝滚动 */
@keyframes logoScrollLeft {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); } /* 走到刚好一半时无痕回弹 */
}

/* 🟢 物理无缝回弹引擎 B：向右匀速无缝滚动 */
@keyframes logoScrollRight {
    0% { transform: translate3d(-50%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}


/* --- 11. 灵活间距插件：50px 占位块 (保持完全不变) --- */
.spacer-50 { width: 100%; height: 50px; display: block; clear: both; }
.spacer-10 { width: 100%; height: 10px; display: block; clear: both; }

/* --- 11. 灵活间距插件：50px 占位块 (保持完全不变) --- */
.spacer-50 { width: 100%; height: 50px; display: block; clear: both; }
.spacer-10 { width: 100%; height: 10px; display: block; clear: both; }

/* --- 11. 灵活间距插件：50px 占位块 --- */
.spacer-50 {
    width: 100%;
    height: 50px;
    display: block;
    clear: both;
    /* 默认不带 margin，让它就是一个纯粹的 50px 物理占位 */
}

.spacer-10 {
    width: 100%;
    height: 10px;
    display: block;
    clear: both;
    /* 默认不带 margin，让它就是一个纯粹的 50px 物理占位 */
}


/* --- 12. 站点页脚系统 (Footer 纵向对称高定版) --- */
.site-footer {
    width: 100%;
    /* 彻底放开 768px 枷锁，完美融入移动端底盘 */
    min-width: 100% !important; 
    background-color: var(--bg-black);
    /* 移动端改为上下 40px 的物理留白，两侧 16px 呼吸边距 */
    padding: 0px 16px 0px !important; 
    color: #888; 
    font-size: 16px; /* 移动端页脚文字稍微收敛，更显精细 */
    font-weight: 350;
    line-height: 1.35;
}

/* 顶部 SVG 装饰线：强制居中对齐 */
.footer-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-banner img {
    width: 90%; /* 移动端横向占 90%，两侧留空 */
    height: auto;
}

/* 核心容器：抛弃横排，全面转向纵向流 */
.footer-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column !important; /* 【核心修改】：强制全员纵向单列堆叠 */
    align-items: center !important;    /* 【核心修改】：全员轴线绝对水平居中 */
    gap: 32px;                         /* 块与块之间的纵向呼吸间距 */
}

/* 栏目基础：抹平 PC 端的宽度自适应，在手机上全部撑满 */
.footer-col {
    width: 100%;
    flex: none !important;
}

/* 【左右两栏合并与居中】
   强制覆盖原 PC 端的靠左/靠右死锁，达成你要求的“全员居中” */
.col-left, .col-right { 
    text-align: center !important; 
    display: flex;
    flex-direction: column;
    gap: 4px; /* 行与行之间精细的密排间距 */
}

/* 联络文字间距微调 */
.footer-col p { 
    margin-bottom: 0 !important; 
    letter-spacing: 0.02em;
}

/* 二维码容器微调：确保在手机正中心展示 */
.qr-code {
    display: inline-block;
    margin: 4px auto 0; /* 居中死锁 */
    padding: 12px;
    background: rgba(255, 255, 255, 0.02); /* 给予微微的液态感暗底 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.qr-code img {
    width: 88px; /* 移动端轻微放大，方便扫码体验 */
    height: 88px;
    display: block;
}


/* ─── 【中间栏：强制沉底区域】 ─── */
.col-center {
    text-align: center !important;
    color: var(--text-white);
    
    /* 🟢 物理引擎介入：利用 CSS 的 order 属性，在不改动 HTML 节点顺序的前提下，
       强行把中间栏的视觉层级踢到最底部展示（数值越大越靠后） */
    order: 99 !important; 
    
    margin-top: 0px; /* 与上方的图文拉开一道更显著的审美分界 */
    padding-top: 0px;
    position: relative;
    width: 90%; /* 缩窄宽度，用来做内部的细腻装饰线 */
}


.footer-url {
    font-size: 14px;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    opacity: 0.55;
}

/* 品牌文本与 Mini Logo 混排包裹层 */
.footer-brand-wrap {
    display: flex;
    align-items: center;
    justify-content: center; /* 轴线内部居中 */
    gap: 10px;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
}

.footer-mini-logo {
    height: 40px; /* 移动端微型化，保持精致 */
    width: auto;
    border-radius: 2px;
}

.sep { 
    opacity: 0.25; 
    font-weight: 300; 
}





/* 链接交互 */
.footer-col p { margin-bottom: 2px; }


/* 容器：强制一行五列，左右边距 2% */
.five-column-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 5列平分 */
    gap: 30px 12px;      /* 行间距 30px，列间距 15px */
    padding: 0 2%;       /* 左右 2% 边距 */
    width: 100%;
    margin-bottom: 50px;
    box-sizing: border-box;
}

/* 单个项目包裹层 */
.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中心对齐 */
}

/* 图片容器：取消比例锁定，完全跟随图片高度 */
.image-box {
    position: relative;
    width: 100% !important;
    /* 核心修改：移除 aspect-ratio，让容器由内部图片高度撑开 */
    border-radius: 10px !important; 
    overflow: hidden !important;
    background-color: #0a0a0a !important;
}

/* 展示图：自然呈现 */
.display-img {
    width: 100% !important;
    height: auto !important; /* 关键：高度设为 auto，保持图片原始比例不被拉伸 */
    display: block !important;
    object-fit: contain !important; /* 确保图片完整展示 */
}

/* --- 成员信息区域控制 --- */

.item-info {
    width: 100%;
    text-align: center;
    padding-top: 15px; /* 增加一点呼吸感 */
}

/* 第一行：职位 - 严格统一 floor-desc 的灰色 */
.info-title {
    color: #888; /* 统一颜色 */
    font-size: 15px; /* 略小于正文，保持精致感 */
    font-weight: 350; /* 统一字重 */
    line-height: 1.2;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

/* 第二行：姓名 - 颜色保持一致，通过字号区分层级 */
.info-name {
    color: #888; /* 统一颜色，不再使用 opacity */
    font-size: 15px; /* 名字稍微放大，作为视觉焦点 */
    font-weight: 350; /* 字重略微调轻，拉开细腻的差距 */
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin: 0;
}

/* 交互建议：鼠标悬停在 grid-item 时，名字可以微微变白 */
.grid-item:hover .info-name {
    color: var(--text-white);
    transition: color 0.3s ease;
}


















/* --- 独立文字固定显示插件 (水平居中版) --- */

/* 核心：强制纵向排列，并使内部元素水平居中 */
.full-view-images .image-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;    /* 关键：确保图片和文字容器整体居中 */
    overflow: visible !important;
}

/* 图片框：保持 12px 圆角 */
.slider-container {
    position: relative !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    z-index: 1;
}

/* --- 4. 文字部分样式 (二级标题：基于一级标题等比缩小) --- */

.item-info-box {
    width: 100% !important;
    /* 间距由 25px 缩小为 22px，保持呼吸感但更紧凑 */
    padding-top: 22px !important;      
    text-align: center !important;     
    z-index: 2;
    display: flex !important;
    flex-direction: column !important;
    /* 行间距微调，确保整体高度占比不反超一级标题 */
    gap: 5px !important;               
}

/* 第一行：红色行 (基于 var(--tag-size) 缩小) */
.service-tag {
    color: #F80039 !important;
    /* 使用 calc 动态缩小，确保占比永远小于一级标题 */
    font-size: calc(var(--tag-size) * 0.9) !important; 
    /* 字重由 450 降至 400，增加视觉层级感 */
    font-weight: 400 !important;
    margin: 0 !important;              
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
}

/* 第二行：白色行 (基于 var(--title-size) 的逻辑，但作为副标题需大幅缩减) */
/* 或者直接参考一级标题的 floor-desc 进行 10% 缩减 */
.service-desc {
    color: #8a8a8a !important;
    /* 同样保持 10% 的缩减比例 */
    font-size: calc(var(--desc-size) * 0.9) !important; 
    font-weight: 400 !important;
    margin: 0 !important;              
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    /* 降低透明度，让视觉重心停留在一级标题上 */
    opacity: 0.7 !important; 
}























/* 1. 总背景区域：彻底清除内外边距 */
.news-single-display {
    width: 100% !important;
    background-color: #000 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* 2. 核心容器：锁定宽度，防止被挤压 */
.news-box {
    width: 96% !important;
    max-width: 1920px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important; /* 防止在 flex 布局中收缩 */
    box-sizing: border-box !important;
}

/* 3. 图片组容器 */
.image-group.single-card {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: #1a1a1a !important;
    border-radius: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    display: block !important; /* 确保它不是 flex 项目 */
}

/* 关键：占位图，强制横向撑开 100% */
.aspect-placeholder {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 轮播层覆盖 */
.fade-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* 实际显示的图片：解决“缩到左边”的核心代码 */
.slide-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* 强制铺满父容器 */
    height: 100% !important;
    object-fit: cover !important; /* 保持比例裁剪 */
    opacity: 0;
    transition: opacity 0.8s ease-in-out !important;
    z-index: 1;
}

/* 激活状态 */
.slide-img.active {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* 4. 文字部分样式 */
.news-info-center {
    text-align: center !important;
    width: 100% !important;
    padding: 0 20px !important; /* 移动端左右留白 */
    box-sizing: border-box !important;
}

.news-tag-red {
    color: #F80039 !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    margin-bottom: 0px !important;
    font-weight: 500 !important;
}

.news-title-white {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: bold !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4 !important;
}

.news-desc-gray {
    color: #8a8a8a !important;
    font-size: 12px !important;
    line-height: 1.8 !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important; /* 彻底清除底部间距 */
}

/* 按钮样式补全（防止线上丢失样式） */
.slider-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    background: rgba(0,0,0,0.2) !important;
    border: none !important;
    color: #fff !important;
    padding: 20px 10px !important;
    cursor: pointer !important;
    outline: none !important;
}
.prev { left: 32px !important; }
.next { right: 32px !important; }

/* 强制全局同步圆角变量 */
.image-group, 
.work-item, 
.slider-container, 
.image-box, 
.image-group.single-card {
    border-radius: var(--img-radius) !important;
    overflow: hidden !important; /* 必须确保溢出隐藏，圆角才看得见 */
}

/* 针对内部图片的兼容（防止部分浏览器切不掉圆角） */
.slide-img, 
.display-img, 
.img-box img {
    border-radius: var(--img-radius) !important;
}


/* 强制基础样式，确保两张图重叠 */
.work-item .img-box {
    position: relative;
    overflow: hidden;
}

.work-item .light-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 亮色图在底层 */
    opacity: 1;
}

.work-item .dark-img {
    position: relative;
    z-index: 2; /* 暗色图在顶层 */
    transition: opacity 0.8s ease-in-out !important; /* 强制平滑过渡 */
}



html,body{
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
*{
    box-sizing: border-box;
}

/* 终极修复：强制手机端所有宽度不超出屏幕 */
@media (max-width:768px) {
  html, body {
    width: 100% !important;
    min-width: 100% !important;
    overflow-x: hidden !important;
  }
  .floor-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 0 16px !important;
  }
  .portfolio-grid {
    padding: 0 16px !important;
    gap: 12px !important;
  }
}



/* ==========================================================================
   【遇义设计事务所】Daily 互动控制舱完全体 CSS（像素级物理咬合线版）
   ========================================================================== */

/* 1. 大底座：让点赞和评论作为一个紧凑整体，在图片正下方绝对水平居中 */
.daily-interaction-bar {
    display: flex !important;
    align-items: center !important;        /* 垂直绝对咬齐 */
    justify-content: center !important;    /* 水平绝对对齐 */
    width: 100% !important;                /* 撑满横向空间，绝不换行 */
    margin: 8px auto 0 auto !important;
    height: 15px !important;               /* 严格锁死总高度 */
}

/* 2. 点赞/评论轨道容器：宽度自适应，绝不向两边霸道撑满 */
.like-container,
.comment-trigger-box {
    display: flex !important;              
    align-items: center !important;        /* 强制内部图标和数字中轴线物理平齐 */
    justify-content: center !important;
    width: auto !important;                
    height: 15px !important;               /* 物理高度死锁 */
    flex-shrink: 0 !important;             /* 禁止横向缩水变形 */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent; 
}

/* 两个大组件之间横向死死咬住 10px 的亲密距离 */
.like-container {
    margin-right: 10px !important;         
}

/* 3. 左轨：点赞图标防护罩（死锁 15px 几何正方形） */
.heart-animation-shroud {
    width: 15px !important;
    height: 15px !important;
    display: flex !important;              
    align-items: center !important;        
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;             
    overflow: visible !important;          /* 💥 核心：允许爆破动画溢出边界，绝对禁止裁切 */
}

/* 4. 右轨：评论图标防护罩（死锁 15px 几何正方形） */
.comment-icon-shroud {
    width: 15px !important;
    height: 15px !important;
    display: flex !important;              
    align-items: center !important;        
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;             
    overflow: visible !important;          /* 🟢 核心：允许 lun.svg 边缘舒展，彻底斩断裁切阴影 */
}

/* 5. 内部所有图标内核纯净化：强制解除一切外来的圆形照片遮罩与基线干扰 */
.heart-animation-shroud img,
.comment-icon-shroud img,
.comment-icon-svg {
    width: 15px !important;
    height: 15px !important;
    display: block !important;             /* 变成纯几何方块，斩断文字行高挤压 */
    object-fit: contain !important;
    border-radius: 0 !important;           /* 💥 核心：强行干碎一切全局遗传下来的圆形遮罩 */
    clip-path: none !important;            
    margin: 0 !important;
    padding: 0 !important;
}

/* 6. ─── 💥 极客双图层解法：底层灰心染色常驻控制线 ─── */
.heart-animation-shroud .heart-icon-svg {
    transition: filter 0.25s ease;         /* 变红时优雅地褪色或加色 */
}

/* 一旦被点赞（大盒子拿到 is-active 暗号），底层基础灰心零延迟被滤镜直接染成高亮正红色常驻 */
.like-container.is-active .heart-icon-svg {
    content: url("https://lascauxdesign.com/m/images/daily/zan_active.svg") !important; /* 直接替换内核展示高亮红心 */
}

/* 7. ─── 🎬 顶层光效空壳：独立出来专门伺候无限连击的 5倍大爆破 ─── */
.pop-laser {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 15px !important; height: 15px !important;
    pointer-events: none;                  
    z-index: 9999;
}

/* 💥 核心修正：出生即为 75px 的高清巨无霸，通过 scale(0.2) 缩回到 15px 潜伏 */
.pop-laser.is-popping::after {
    content: url("https://lascauxdesign.com/m/images/daily/zan_active.svg") !important;
    position: absolute !important;
    
    /* 1. 把画布直接扩大 5 倍，从源头锁定超高清像素密度 */
    width: 75px !important; 
    height: 75px !important;
    
    /* 2. 物理位移纠偏：为了让 75px 的大方块在 15px 的防护罩里完美中心重合 */
    top: 50% !important;
    left: 50% !important;
    margin-top: -37.5px !important; /* 75 的一半 */
    margin-left: -37.5px !important;
    
    /* 3. 硬件加速全开 */
    will-change: transform, opacity !important;
    transform-style: preserve-3d !important;
    
    /* 4. 彻底执行大图缩放动画 */
    animation: likePopFadeOverClear 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

/* 8. 点赞与评论数字：高度、行高与图标实现绝对物理平齐 */
.like-count,
.comment-trigger-text {
    color: #888;                           /* 遇义高级克制灰 */
    font-size: 15px;                       /* 严格字号 */
    font-weight: 350;                      /* 严格字重 */
    letter-spacing: 0.02em;                /* 严格字间距 */
    height: 15px !important;               /* 高度锁死 */
    line-height: 15px !important;          /* 行高锁死，强行剥离浏览器的默认行高水分 */
    margin: 0 0 0 5px !important;          /* 严格保持与左边图标 5px 留白，上下归零 */
    padding: 0 !important;
    display: block !important;             
    flex-shrink: 0 !important;             
    transition: color 0.15s ease;
}

/* 9. PC 端鼠标悬停数字高亮变白 */
.like-container:hover .like-count,
.comment-trigger-box:hover .comment-trigger-text {
    color: var(--text-white);
}

/* 10. 手机端手指按住点赞盒子时，整体顺滑物理回弹放大 5%（隔离不打架） */
.like-container.is-touching {
    transform: scale(1.05) !important;
    transition: transform 0.1s ease-out !important;
}

/* 11. 评论点击时的物理回弹感知 */
.comment-trigger-box:active .comment-icon-shroud {
    transform: scale(1.18);
}
.comment-trigger-box:active .comment-trigger-text {
    color: var(--text-white) !important;
}

/* 12. 💥 【全新超清动画帧】：从 0.2（等同于15px）瞬间炸满到 1（75px的原图极限高清） */
@keyframes likePopFadeOverClear {
    0% { 
        transform: scale(0.2); /* 🟢 初始状态：物理尺寸等同于 15px，完美隐藏在灰心上方 */
        opacity: 1; 
    }
    15% { 
        transform: scale(1);   /* 🟢 爆破瞬间：放大到原本的 75px 极限尺寸，100% 矢量无损，绝对不可能模糊！ */
        opacity: 1; 
    }
    100% { 
        transform: scale(1.1); /* 再次微微蔓延一丢丢 */
        opacity: 0; 
    }
}

/* ==========================================================================
   【遇义高定版】圆角磨砂评论弹窗控制系统
   ========================================================================== */
.comment-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); z-index: 10000;                
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease; 
}
.comment-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.comment-modal-window {
    background: #121212; border: 1px solid rgba(255, 255, 255, 0.08); 
    width: 90%; max-width: 460px; border-radius: 16px !important; overflow: hidden;
    display: flex; flex-direction: column; max-height: 80vh;              
    transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.comment-modal-backdrop.is-open .comment-modal-window { transform: scale(1); }
.modal-header { padding: 18px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: space-between; align-items: center; }
#modal-title { font-size: 16px; font-weight: 400; color: #eee; letter-spacing: 0.05em; }
.modal-close-btn { background: none; border: none; color: #666; font-size: 18px; cursor: pointer; transition: color 0.2s;  }
.modal-close-btn:hover { color: #fff; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; min-height: 200px; }
.comment-item-demo { background: rgba(255, 255, 255, 0.03); padding: 18px 18px; border-radius: 8px; color: #f0f0f0; font-size: 14px; line-height: 1.5; font-weight: 300; }
.modal-footer { padding: 18px 18px; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; gap: 10px; }
#modal-comment-input { flex: 1; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 5px; padding: 10px 14px; color: #fff; font-size: 14px; outline: none; transition: border 0.2s; }
#modal-comment-input:focus { border-color: rgba(255, 255, 255, 0.2); }
.modal-send-btn { background: #ffffff79; color: #000; border: none; border-radius: 5px; padding: 0 16px; font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
.modal-send-btn:hover { opacity: 0.9; }

#modal-name-input{
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius:5px;
    padding:10px 14px;
    color:#fff;
    outline:none;
}
#modal-name-input:focus{border-color:rgba(255,255,255,0.2);}

.comment-list-wrap {
  max-height: 60vh; /* 手机最多占屏幕60%高度，内容少自动收缩、多了出滚动 */
  overflow-y: auto; /* 超出自动出竖向滑条 */
  -webkit-overflow-scrolling: touch; /* iOS惯性顺滑滚动 */
  overscroll-behavior: contain; /* 防止滚动带动整页滑动 */
}
/* 微调移动端滚动条变细、美观 */
.comment-list-wrap::-webkit-scrollbar {
  width:4px;
}
.comment-list-wrap::-webkit-scrollbar-thumb {
  background:#ccc;
  border-radius:2px;
}