/* 静态技术线稿仅装饰支持页，置于文字后且不接收事件，不增加图片下载依赖或持续动画。 */
.resource-view .ph-page.res-support{overflow:clip}
.resource-view .res-support .res-support-hero{position:relative;isolation:isolate}
.resource-view .res-support .res-support-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-165px;top:-80px;width:570px;height:380px;background:url("技术支持磁力线.svg") center/contain no-repeat;opacity:.38;mask-image:linear-gradient(90deg,transparent,#000 38%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%)}

/* 问答区域仅在右侧外缘延续磁力线，避免线条穿过主要阅读列；随内容高度延展的蓝光连接上下区域。 */
.resource-view .res-support .res-support-body{position:relative;isolation:isolate}
.resource-view .res-support .res-support-body::after{content:"";position:absolute;z-index:-1;pointer-events:none;top:50px;bottom:30px;right:-190px;width:230px;background:url("技术支持磁力线.svg") center right/440px auto no-repeat;opacity:.18;mask-image:linear-gradient(90deg,transparent,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000)}

/* 资料及咨询区以低亮度工程网格衬托右侧留白，局部渐隐防止形成整块背景面板或覆盖资料行。 */
.resource-view .res-support .res-support-resources,
.resource-view .res-support .ph-callout{position:relative;isolation:isolate}
.resource-view .res-support .res-support-resources::before,
.resource-view .res-support .ph-callout::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0 -170px 0 42%;background:linear-gradient(#8ebcff12 1px,transparent 1px),linear-gradient(90deg,#8ebcff12 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 78% 48%,#000,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 78% 48%,#000,transparent 72%)}
.resource-view .res-support .ph-callout::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-70px;top:44px;width:240px;height:140px;border:1px solid #8ebcff30;outline:1px solid #8ebcff14;outline-offset:20px;transform:skewY(-16deg);background:linear-gradient(90deg,transparent 49.7%,#8ebcff20 50%,transparent 50.3%);mask-image:linear-gradient(90deg,transparent,#000 45%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%)}

/* 手机减少装饰密度并限制在右侧，标题、输入框和问答保持清楚的暗底，不改变正常滚动和触控。 */
@container website (max-width:700px){
  .resource-view .res-support .res-support-hero::after{right:-105px;top:-10px;width:290px;height:350px;opacity:.20}
  .resource-view .res-support .res-support-body::after{display:none}
  .resource-view .res-support .res-support-resources::before,
  .resource-view .res-support .ph-callout::before{inset:0 -22px 0 30%;background-size:38px 38px;opacity:.65}
  .resource-view .res-support .ph-callout::after{right:0;width:140px;height:90px;opacity:.4}
}

/* ===== 技术支持高级感层 =====
   本层位于样式链末尾，只作用于 .res-support 支持页，沿用首页的深蓝受光、银白标题、冰蓝边缘与玻璃材质。
   步骤：1 页首光场与标题  2 搜索玻璃面  3 主题玻璃卡  4 问答层次  5 资料横行  6 咨询玻璃板  7 窄屏与减少动态。 */

/* 1 页首光场：标题后方加入一束低亮度宝蓝光，让文字浮在深蓝展台上；文字带轻微阴影以增加景深。 */
.resource-view .res-support .res-support-hero::before{content:"";position:absolute;z-index:-2;pointer-events:none;left:-12%;top:-35%;width:72%;height:150%;background:radial-gradient(ellipse 50% 50% at 40% 45%,#2f63b43d,transparent 72%)}
.resource-view .res-support .res-support-hero h1{text-shadow:0 2px 28px #00061899}
.resource-view .res-support .res-support-hero .ph-lead{color:#c3d4ea}

/* 2 搜索玻璃面：输入区采用较深的透明蓝底与窄边高光；聚焦时出现冰蓝边缘和柔光，搜索按钮使用浅宝蓝配深蓝文字。 */
.resource-view .res-support .res-search>div{background:linear-gradient(145deg,#1a46984d,#06245b8c);border-color:#b7d3fa4d;border-radius:8px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px #d8e9ff24,0 16px 40px #00061838;transition:border-color .25s ease,box-shadow .25s ease}
.resource-view .res-support .res-search>div:focus-within{border-color:#b7d3fab3;box-shadow:inset 0 1px #d8e9ff33,0 0 0 3px #7fb0f223,0 16px 40px #00061838}
.resource-view .res-support .res-search button{background:linear-gradient(135deg,#a9c9f5,#7fb0f2);color:#06245b;font-weight:600;border-left-color:#06245b26;transition:background .25s ease,color .25s ease}
.resource-view .res-support .res-search button:hover{background:linear-gradient(135deg,#c6dcfb,#9cc3f7);color:#041a43}
.resource-view .res-support .res-search button:focus-visible{outline:2px solid #d8e9ff;outline-offset:-4px}

/* 3 主题玻璃卡：每张卡片有窄边高光、内部冷光和细微景深；悬浮时上移约 5 像素并提亮边缘，离开时稍慢地回落。 */
.resource-view .res-support .res-support-topics button{position:relative;overflow:hidden;background:linear-gradient(150deg,#1a46986b,#0a234380 58%,#06152e8c);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #a5c5ed33;box-shadow:inset 0 1px #d8e9ff1f,0 22px 48px #00061840;transition:transform .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease}
/* 顶部细高光线模拟玻璃边缘受光；伪元素不接收事件，且位于卡片内容之下。 */
.resource-view .res-support .res-support-topics button::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#d8e9ffb3,transparent);opacity:.7;pointer-events:none}
/* 底部蓝色柔光在悬浮时逐渐显现，形成卡片内部的受光层次，不遮挡说明文字。 */
.resource-view .res-support .res-support-topics button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:radial-gradient(ellipse 70% 100% at 50% 100%,#4d86cf33,transparent 70%);opacity:0;transition:opacity .35s ease;pointer-events:none}
/* 卡片内容需要位于光层之上，否则文字会被伪元素盖住。 */
.resource-view .res-support .res-support-topics button>*{position:relative;z-index:1}
.resource-view .res-support .res-support-topics button>span:first-child{letter-spacing:0}
.resource-view .res-support .res-topic-action>span{transition:transform .25s ease}
/* 悬浮效果只在支持悬停的设备上生效，触屏不会出现卡在放大状态的反馈。 */
@media(hover:hover){
  .resource-view .res-support .res-support-topics button:hover{transform:translateY(-5px);border-color:#b7d3fa80;background:linear-gradient(150deg,#245a9a80,#0c2a52a6 58%,#06152ea6);box-shadow:inset 0 1px #d8e9ff33,0 28px 56px #00061859;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
  .resource-view .res-support .res-support-topics button:hover::after{opacity:1}
  .resource-view .res-support .res-support-topics button:hover .res-topic-action>span{transform:translate(3px,-3px)}
}
/* 当前选中的主题使用更亮的冰蓝边缘与深蓝渐层，与悬浮状态区分；键盘聚焦另加清晰的外框。 */
.resource-view .res-support .res-support-topics button[aria-pressed="true"]{border-color:#b7d3fa;background:linear-gradient(150deg,#2b5f9e,#123056 70%);box-shadow:inset 0 1px #e6f1ffb3,0 0 0 1px #b7d3fa33,0 26px 52px #00061866}
.resource-view .res-support .res-support-topics button:focus-visible{outline:2px solid #b7d3fa;outline-offset:4px}

/* 4 问答层次：分区以渐隐冰蓝线替代硬边；展开的问题左侧出现一根冰蓝竖线，文字随之右移，形成清楚的当前项。 */
.resource-view .res-support .res-support-body,
.resource-view .res-support .res-support-resources{border-top:0;background-image:linear-gradient(90deg,transparent,#b7d3fa40 30%,#b7d3fa40 70%,transparent);background-size:100% 1px;background-repeat:no-repeat;background-position:top}
.resource-view .res-support .res-faq{transition:box-shadow .3s ease}
.resource-view .res-support .res-faq summary{transition:color .25s ease,padding-left .3s ease}
.resource-view .res-support .res-faq[open]{box-shadow:inset 2px 0 0 #b7d3fa}
.resource-view .res-support .res-faq[open] summary,.resource-view .res-support .res-faq[open]>div{padding-left:20px}
.resource-view .res-support .res-faq[open]>div p{color:#c9d9ee}
@media(hover:hover){
  .resource-view .res-support .res-faq:not([open]) summary:hover{padding-left:8px;color:#fff}
}

/* 5 资料横行：悬浮时出现一道淡蓝渐层与左侧细线，文字轻微右移，链接箭头同步前移，说明可点击的区域范围。 */
.resource-view .res-support .res-document-slots>div{transition:background .3s ease,padding-left .3s ease,box-shadow .3s ease}
.resource-view .res-support .res-document-slots .ph-link{transition:color .25s ease,transform .25s ease}
@media(hover:hover){
  .resource-view .res-support .res-document-slots>div:hover{background:linear-gradient(90deg,#2f63b424,transparent 80%);padding-left:14px;box-shadow:inset 2px 0 0 #b7d3fa80}
  .resource-view .res-support .res-document-slots>div:hover .ph-link{color:#fff;transform:translateX(3px)}
}

/* 6 咨询玻璃板：底部咨询区使用与主题卡相同的玻璃材质，右上角加入宝蓝光源，形成与首页相近的收束感。 */
.resource-view .res-support .ph-callout{position:relative;isolation:isolate;margin-top:24px;padding:54px 48px 56px;border:1px solid #a5c5ed30;border-radius:6px;background:radial-gradient(ellipse 70% 90% at 92% 0,#3d7bd13d,transparent 65%),linear-gradient(145deg,#16397066,#06152ec2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px #d8e9ff1a,0 30px 60px #00061859}
.resource-view .res-support .ph-callout .ph-button{box-shadow:0 10px 26px #00061866;transition:background .25s ease,transform .25s ease,box-shadow .25s ease}
@media(hover:hover){
  .resource-view .res-support .ph-callout .ph-button:hover{transform:translateY(-2px);box-shadow:0 14px 30px #00061880}
}

/* 7 窄屏与减少动态：手机降低模糊强度以保证性能与可读性；减少动态偏好下关闭位移与缩放，保留颜色和边缘状态。 */
@container website (max-width:700px){
  .resource-view .res-support .res-support-topics button{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .resource-view .res-support .res-search>div{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .resource-view .res-support .ph-callout{padding:34px 22px 38px}
}
@media(prefers-reduced-motion:reduce){
  .resource-view .res-support .res-support-topics button,
  .resource-view .res-support .res-support-topics button::after,
  .resource-view .res-support .res-topic-action>span,
  .resource-view .res-support .res-document-slots>div,
  .resource-view .res-support .res-document-slots .ph-link,
  .resource-view .res-support .res-faq,
  .resource-view .res-support .res-faq summary,
  .resource-view .res-support .res-search>div,
  .resource-view .res-support .ph-callout .ph-button{transition:none}
  .resource-view .res-support .res-support-topics button:hover,
  .resource-view .res-support .res-document-slots>div:hover .ph-link,
  .resource-view .res-support .ph-callout .ph-button:hover{transform:none}
  .resource-view .res-support .res-document-slots>div:hover{padding-left:0}
}