/* 应用详情以应用介绍、概况、工程条件、需求和产品为阅读顺序；只覆盖四个详情，不改变总览及其他页面。 */
/* 页面底色覆盖英文与中文共用宿主，留白仍有蓝色层次；区块受光只作静态衬底，不接收操作。 */
#page-content.placeholder-view:has(>.ph-application-detail){background:radial-gradient(ellipse at 84% 2%,#24569b38,transparent 30%),linear-gradient(160deg,#0c284f,#091f42 46%,#081b38)}
#page-content .ph-application-detail{--application-gutter:clamp(24px,4.5cqw,68px);max-width:1440px;padding-inline:var(--application-gutter);overflow:visible}
#page-content .ph-application-detail :is(h1,h2,h3){letter-spacing:0;overflow-wrap:break-word}
#page-content .ph-application-detail h2{font-size:32px;line-height:1.4;max-width:none}
#page-content .ph-application-detail p{color:#c4d5e9}
#page-content .ph-application-detail .ph-top{min-height:80px}
#page-content .ph-application-detail::before,
#page-content .ph-application-detail::after{display:none}

/* 标题只保留名称、简介和返回入口。右侧为可辨认的场景，向左和向正文渐隐，不把概念图当成独立展示内容。 */
#page-content .ph-application-detail .ph-detail-hero{position:relative;isolation:isolate;display:block;min-height:320px;padding:44px 0 40px;overflow:clip}
#page-content .ph-application-detail .ph-detail-copy{position:relative;z-index:1;width:62%;max-width:790px}
#page-content .ph-application-detail .ph-detail-hero h1{font-size:46px;line-height:1.3;white-space:normal;max-width:100%;text-wrap:balance;margin-bottom:20px}
#page-content .ph-application-detail .ph-detail-hero .ph-section-label{margin-bottom:12px}
#page-content .ph-application-detail .ph-detail-hero .ph-lead{font-size:17px;line-height:1.8;max-width:36em;margin:0}
#page-content .ph-application-detail .ph-detail-copy>.ph-link{margin-top:16px}
#page-content .ph-application-detail .ph-detail-scene{position:absolute;z-index:-1;inset:0 -24px;margin:0;pointer-events:none;overflow:hidden;border:0;border-radius:0;box-shadow:none;mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 80%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 80%,transparent)}
#page-content .ph-application-detail .ph-detail-scene img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:right 58%;border:0;opacity:.82;filter:blur(1px);transform:scale(1.01)}
#page-content .ph-application-detail .ph-detail-scene::after{content:"";position:absolute;inset:0;width:auto;height:auto;pointer-events:none;background:linear-gradient(90deg,#0c284ff5 5%,#0c284fe6 33%,#0c284f55 66%,#0c284f14),linear-gradient(0deg,#0c284fe6,transparent 55%);box-shadow:none}
#page-content .ph-application-detail .ph-detail-scene figcaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 应用概况把范围说明与两项属性集中呈现：文字为主、属性为辅；轻量入口依附该概况，不再形成独立横栏。 */
#page-content .ph-application-detail .ph-application-context{padding:32px 0 24px;border-bottom:1px solid #abc9ee24}
#page-content .ph-application-detail .ph-detail-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:40px;row-gap:10px;margin:0;padding:0;border:0}
#page-content .ph-application-detail .ph-detail-intro>.ph-section-label{grid-column:1;grid-row:1;margin:0;font-size:15px;color:#a9c7ec}
#page-content .ph-application-detail .ph-detail-intro>p:not(.ph-section-label){grid-column:1;grid-row:2;font-size:17px;line-height:1.85;max-width:45em;margin:0}
#page-content .ph-application-detail .ph-scope{grid-column:2;grid-row:1 / span 2;align-self:start;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0;padding:0 0 0 28px;border:0;border-left:1px solid #abc9ee30}
#page-content .ph-application-detail .ph-scope>div{min-width:0;overflow-wrap:break-word}
#page-content .ph-application-detail .ph-scope dt{font-size:14px;color:#a8bdd8}
#page-content .ph-application-detail .ph-scope dd{margin-top:8px;font-size:17px;line-height:1.7}
#page-content .ph-application-detail .ph-chapters{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px;padding:0;border:0}
#page-content .ph-application-detail .ph-chapters a{font-size:15px;min-height:44px;color:#b9d3f3;border-bottom:1px solid #accdf23d}
#page-content .ph-application-detail .ph-chapters a:hover{color:#fff}

/* 标题、导语与正文共用稳定网格；信息项使用独立浅蓝底面，区块背景保持通栏，不嵌套面板。 */
#page-content .ph-application-detail .ph-section{border:0;padding-block:48px}
#page-content .ph-application-detail .ph-section-heading{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:32px;background:none;border:0;box-shadow:none;margin-bottom:28px}
#page-content .ph-application-detail .ph-section-heading h2{max-width:none;margin:0}
#page-content .ph-application-detail .ph-section-heading>p{max-width:44em;font-size:16px;line-height:1.8;margin:0}
#page-content .ph-application-detail .ph-section-heading>.ph-link{justify-self:end}
#page-content .ph-application-detail #ph-workflow{position:relative;isolation:isolate}
#page-content .ph-application-detail #ph-workflow::before{content:"";position:absolute;z-index:-1;inset:0 calc(-1 * var(--application-gutter));pointer-events:none;background:radial-gradient(ellipse at 90% 25%,#2c5d9a1f,transparent 65%),linear-gradient(120deg,#163c6424,#1030580d);border-bottom:1px solid #abc9ee1a}
#page-content .ph-application-detail .ph-workflow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0}
#page-content .ph-application-detail .ph-workflow li{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;gap:10px 16px;padding:24px;border:1px solid #a7c9ef26;border-radius:6px;background:linear-gradient(135deg,#4070a323,#17355b1a);min-width:0;box-shadow:inset 0 1px #e1efff0a}
#page-content .ph-application-detail .ph-workflow li::before{display:none}
#page-content .ph-application-detail .ph-step{grid-column:1;grid-row:1 / span 2;margin:0;padding-top:3px;font-size:15px;line-height:1.7;color:#a9cfff;font-variant-numeric:tabular-nums}
#page-content .ph-application-detail .ph-workflow h3{grid-column:2;grid-row:1;margin:0;font-size:21px;line-height:1.5}
#page-content .ph-application-detail .ph-workflow p{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:16px;line-height:1.8;max-width:38em}

/* 需求区以左侧说明对应右侧四项清单，统一顶边与行间距，避免一侧过长形成大片空白。 */
#page-content .ph-application-detail .ph-requirements{position:relative;isolation:isolate;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);align-items:start;padding-left:0;gap:48px}
#page-content .ph-application-detail .ph-requirements::before{display:none}
#page-content .ph-application-detail .ph-requirements::after{content:"";position:absolute;z-index:-1;inset:0 calc(-1 * var(--application-gutter));pointer-events:none;background:linear-gradient(110deg,#1b416a36,#0b254a12);border-bottom:1px solid #abc9ee1a}
/* 衬底铺满网站宽度，正文继续受阅读宽度约束，避免宽屏把整段内容看成悬浮卡片。 */
#page-content .ph-application-detail #ph-workflow::before,
#page-content .ph-application-detail .ph-requirements::after{inset:0 auto 0 50%;width:100cqw;transform:translateX(-50%)}
#page-content .ph-application-detail .ph-requirements h2{margin:0 0 18px}
#page-content .ph-application-detail .ph-requirements .ph-lead{font-size:16px;line-height:1.8;max-width:30em}
#page-content .ph-application-detail .ph-requirements ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px;min-width:0}
#page-content .ph-application-detail .ph-requirements li{border:0;border-top:1px solid #a7c9ef38;padding:16px 0 0;font-size:17px;line-height:1.6;min-width:0;overflow-wrap:break-word}
#page-content .ph-application-detail .ph-requirements li+li{margin:0}
#page-content .ph-application-detail .ph-requirements li>span{font-size:16px;line-height:1.8;margin-top:8px;color:#bacde5}

/* 产品图、标题和正文共用卡片内边距，链接贴齐底部；不裁切设备图片或压缩长标题。 */
#page-content .ph-application-detail .ph-format-slots{gap:20px}
#page-content .ph-application-detail .ph-format-slots article{display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid #a7c9ef26;border-radius:6px;background:linear-gradient(145deg,#21476d40,#12315a24)}
#page-content .ph-application-detail .ph-format-slots h3{font-size:21px;line-height:1.5;margin:16px 0 12px}
#page-content .ph-application-detail .ph-format-slots p{font-size:16px;line-height:1.8;margin-bottom:16px}
#page-content .ph-application-detail .ph-format-slots .ph-link{margin-top:auto;align-self:flex-start}
/* 实物图沿用卡片原有响应式位置，完整保留设备比例；固定窗口避免延迟加载时挤动文字。 */
#page-content .ph-application-detail .ph-format-photo{height:156px;margin-bottom:12px}
#page-content .ph-application-detail .ph-format-photo::after{display:none}
#page-content .ph-application-detail .ph-format-photo img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px #00061840)}
#page-content .ph-application-detail .ph-callout{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center;border:0;border-top:1px solid #abc9ee26;padding-block:48px 60px}
#page-content .ph-application-detail .ph-resource-slot{border:0;border-top:1px solid #abc9ee26;margin-top:32px;padding:28px 0 0}
#page-content .ph-application-detail .ph-resource-slot h3{font-size:21px;line-height:1.5}

/* 平板与手机按语义顺序纵向展开，属性仍并列；背景不占额外高度，主体两列在手机收为单列。 */
@container website (max-width:800px){
  #page-content .ph-application-detail .ph-detail-hero{min-height:0;padding:26px 0}
  #page-content .ph-application-detail .ph-detail-copy{width:76%}
  #page-content .ph-application-detail .ph-detail-hero h1{font-size:38px}
  #page-content .ph-application-detail .ph-detail-intro{grid-template-columns:minmax(0,1fr);gap:10px}
  #page-content .ph-application-detail .ph-scope{grid-column:1;grid-row:3;margin-top:12px;padding:18px 0 0;border-left:0;border-top:1px solid #abc9ee30}
  #page-content .ph-application-detail .ph-application-context{padding-block:20px 24px}
  #page-content .ph-application-detail .ph-section-heading{grid-template-columns:minmax(0,1fr);gap:16px}
  #page-content .ph-application-detail .ph-section-heading>.ph-link{justify-self:start}
  #page-content .ph-application-detail .ph-workflow{gap:16px}
  #page-content .ph-application-detail .ph-workflow li{padding:20px;grid-template-columns:26px minmax(0,1fr);column-gap:12px}
  #page-content .ph-application-detail .ph-requirements{grid-template-columns:minmax(0,1fr);gap:26px}
  #page-content .ph-application-detail .ph-format-slots{grid-template-columns:minmax(0,1fr)}
  #page-content .ph-application-detail .ph-callout{grid-template-columns:minmax(0,1fr);gap:24px}
}
@container website (max-width:560px){
  #page-content .ph-application-detail{--application-gutter:22px}
  #page-content .ph-application-detail h2{font-size:28px}
  #page-content .ph-application-detail .ph-detail-copy{width:100%}
  #page-content .ph-application-detail .ph-detail-hero h1{font-size:32px}
  #page-content .ph-application-detail .ph-detail-scene img{object-position:70% center;opacity:.58}
  #page-content .ph-application-detail .ph-detail-scene::after{background:linear-gradient(90deg,#0c284fe6,#0c284f66),linear-gradient(0deg,#0c284fe6,transparent 60%)}
  #page-content .ph-application-detail .ph-chapters{gap:5px 20px;margin-top:14px}
  #page-content .ph-application-detail .ph-section{padding-block:32px}
  #page-content .ph-application-detail .ph-section-heading{margin-bottom:24px}
  #page-content .ph-application-detail .ph-workflow{grid-template-columns:minmax(0,1fr);gap:14px}
  #page-content .ph-application-detail .ph-workflow h3{font-size:20px}
  #page-content .ph-application-detail .ph-requirements ul{grid-template-columns:minmax(0,1fr);gap:20px}
  #page-content .ph-application-detail .ph-resource-slot{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
  #page-content .ph-application-detail .ph-callout{padding-block:32px 40px}
}