/* 审核开关始终可见；材质只影响官网画布，实色模式继续使用既有极光配色，方便在同一页面直接比较。 */
.surface-controls{display:flex;gap:4px;padding:3px;border:1px solid #b9a9dc44;border-radius:9px;background:#15162a66}
.review-controls .surface-controls button{min-height:44px;border-color:transparent;background:transparent;border-radius:6px}
.review-controls .surface-controls button[aria-pressed="true"]{background:linear-gradient(110deg,#9beefa,#bb9dfa);color:#101127;border-color:#d1ddf080}
.type-status{flex-wrap:wrap;gap:12px 22px}
#surface-load-status{color:#dfd9ee}

/* 三种玻璃厚度共用同一色系；轻表面承接光线，普通表面承接文字，较厚表面承接输入和长参数。 */
html[data-surface="glass"]{
  --glass-fill:rgba(34,30,66,.43);
  --glass-fill-reading:rgba(30,28,55,.64);
  --glass-fill-strong:rgba(27,28,49,.83);
  --glass-rim:rgba(231,226,255,.23);
  --glass-highlight:rgba(244,245,255,.14);
  --glass-shadow:0 22px 54px rgba(5,8,25,.3),inset 0 1px 0 var(--glass-highlight);
}

/* 导航采用薄玻璃，滚动时可以透出下面的图像与极光；弹出菜单使用更厚的玻璃以保证密集链接的清晰度。 */
html[data-surface="glass"] .site-header{
  background:linear-gradient(110deg,rgba(229,225,255,.065),rgba(124,235,255,.025)),rgba(25,23,48,.58);
  border-color:var(--glass-rim);
  box-shadow:0 12px 32px #050b201f,inset 0 1px 0 #ffffff12;
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}
html[data-surface="glass"] .menu-panel,
html[data-surface="glass"] .mobile-nav div{
  background:linear-gradient(145deg,#f3eaff0e,transparent 52%),rgba(28,25,52,.83);
  border-color:#d3c1eb55;
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
}
html[data-surface="glass"] .button.secondary,
html[data-surface="glass"] .picture-tag{
  background:linear-gradient(135deg,#ffffff0e,#ffffff02),rgba(30,25,58,.48);
  border-color:#dfcff772;
  box-shadow:inset 0 1px 0 #ffffff12;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
html[data-surface="glass"] .button.secondary:hover{background-color:rgba(58,43,83,.72);border-color:#ece3ff}

/* 产品系列是最明显的玻璃展示区；背景光位于卡片后面，半透明卡片才能真正显出折射后的环境色。 */
html[data-surface="glass"] .glass-families{
  background:radial-gradient(ellipse at 12% 76%,#dc46a72b,transparent 56%),radial-gradient(ellipse at 78% 32%,#008fae24,transparent 55%),linear-gradient(125deg,#12162d,#301b4b 57%,#122d3d);
}
html[data-surface="glass"] .glass-light-one{background:radial-gradient(ellipse at 65% 50%,#00d8f252,transparent 68%)}
html[data-surface="glass"] .glass-light-two{background:radial-gradient(ellipse,#b561e754,transparent 70%)}
html[data-surface="glass"] .glass-family-card{
  background:linear-gradient(145deg,rgba(239,224,255,.095),rgba(255,255,255,.012) 43%,rgba(79,233,252,.07)),var(--glass-fill);
  border-color:var(--glass-rim);
  box-shadow:var(--glass-shadow),inset 1px 0 0 #b5eaff12;
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}
/* 复用卡片的遮罩边框，渐变仅绘制一像素边缘，不给文字、照片增加模糊或色彩滤镜。 */
html[data-surface="glass"] .glass-family-card::before{
  background:linear-gradient(135deg,#b3f6ffbd,#d3b3fa58 28%,#ffffff0a 54%,#fba4d36e 82%,#bdedff80);
}
html[data-surface="glass"] .glass-family-card.is-active{border-color:#c9c7e96b;box-shadow:0 25px 65px #060c254d,inset 0 1px 0 #f2f5ff2b,inset 1px 0 0 #dcefff0f}
html[data-surface="glass"] .glass-card-copy::before{
  background:linear-gradient(140deg,#e5d4ff0a,#ffffff02),rgba(28,25,51,.44);
  box-shadow:inset 0 1px 0 #ffffff0e;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
html[data-surface="glass"] .glass-card-media{
  background:radial-gradient(ellipse at 15% 35%,#73e8f91c,transparent 65%),radial-gradient(ellipse at 94% 67%,#ee95d426,transparent 70%),linear-gradient(145deg,rgba(218,194,246,.09),rgba(75,181,199,.1)),rgba(62,54,87,.25);
  box-shadow:inset 0 1px 0 #f5eaff26,inset 0 0 0 1px #e7dcff14;
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
}
html[data-surface="glass"] .motion-family-picker button:not([aria-pressed="true"]),
html[data-surface="glass"] .glass-arrow{
  background:linear-gradient(145deg,#ffffff0b,transparent),rgba(34,29,61,.56);
  border-color:#d0bde342;
  box-shadow:inset 0 1px 0 #ffffff0d;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
html[data-surface="glass"] .motion-family-picker button:not([aria-pressed="true"]):hover,
html[data-surface="glass"] .glass-arrow:hover{background-color:rgba(58,44,78,.72);border-color:#aae9f2a8}

/* 首页图片区与内页说明共享轻磨砂材质，半透明填色配合内侧高光；保留原来的区块尺度，避免把整页切成重复卡片。 */
html[data-surface="glass"] .business-visual,
html[data-surface="glass"] .focus-picture,
html[data-surface="glass"] .application-picture,
html[data-surface="glass"] .story-picture-zone,
html[data-surface="glass"] .knowledge-cover,
html[data-surface="glass"] .media-box{
  background:radial-gradient(ellipse at 18% 20%,#96f2ff16,transparent 67%),radial-gradient(ellipse at 90% 90%,#ffa8df16,transparent 64%),linear-gradient(140deg,#dfc2ff0e,#70d8f408),var(--glass-fill);
  border-color:var(--glass-rim);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
html[data-surface="glass"] .outline-block,
html[data-surface="glass"] .config-box,
html[data-surface="glass"] .source-card,
html[data-surface="glass"] #inquiry-form{
  background:linear-gradient(145deg,#edd9ff0b,transparent 48%,#95eafa06),var(--glass-fill-reading);
  border:1px solid var(--glass-rim);
  box-shadow:var(--glass-shadow);
  border-radius:14px;
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
/* 询盘外层留出玻璃边缘，字段内部使用较厚底色；边缘不挤压长英文标签，手机随后收紧内边距。 */
html[data-surface="glass"] #inquiry-form{padding:28px}
html[data-surface="glass"] .inquiry-layout,
html[data-surface="glass"] .catalogue-layout{
  background:radial-gradient(ellipse at 4% 18%,#be64e828,transparent 54%),radial-gradient(ellipse at 97% 68%,#09c6da1c,transparent 60%),linear-gradient(120deg,#19172f,#192036);
}
html[data-surface="glass"] .category-rail button[aria-current="true"],
html[data-surface="glass"] .category-mobile select,
html[data-surface="glass"] .chip:not([aria-pressed="true"]),
html[data-surface="glass"] .sequence span{
  background:linear-gradient(135deg,#e6ddff0e,transparent),var(--glass-fill-reading);
  box-shadow:inset 0 1px 0 #ffffff0d;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
html[data-surface="glass"] .section-nav{
  background:rgba(29,26,52,.69);
  border-color:var(--glass-rim);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* 技术表格和输入框用厚玻璃承接冰白文字，背景光不会直接穿过正文；原有焦点轮廓继续可见。 */
html[data-surface="glass"] .spec-table th{background:rgba(46,37,66,.9);box-shadow:inset 0 1px 0 #ffffff08}
html[data-surface="glass"] .spec-table td{background:rgba(28,31,52,.91)}
html[data-surface="glass"] .field input,
html[data-surface="glass"] .field select,
html[data-surface="glass"] .field textarea{
  background:var(--glass-fill-strong);
  border-color:#c5afd17a;
  box-shadow:inset 0 1px 0 #ffffff0b;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
html[data-surface="glass"] .field input[readonly]{background:rgba(42,36,60,.87)}
html[data-surface="glass"] .demo-feedback{background:rgba(32,61,72,.83);box-shadow:inset 0 1px 0 #d6fcff1f}
html[data-surface="glass"] .site-footer{
  background:radial-gradient(ellipse at 8% 82%,#ee4db217,transparent 49%),radial-gradient(ellipse at 87% 90%,#00e6fd12,transparent 49%),rgba(24,22,46,.8);
  box-shadow:inset 0 1px 0 #ffffff0c;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* 小尺寸画布减少玻璃表面的模糊强度和表单留白，保留相同材质关系，也控制同时滚动时的绘制成本。 */
@container website (max-width:700px){
  html[data-surface="glass"] .glass-family-card{backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%)}
  html[data-surface="glass"] #inquiry-form{padding:20px 16px}
  html[data-surface="glass"] .site-header{backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)}
}
@media(max-width:640px){.surface-controls{gap:4px}.review-controls .surface-controls button{padding:8px 10px}}

/* 无模糊支持时以较厚底色承接内容；这种降级保留所有文字、操作和渐变边缘。 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-surface="glass"]{--glass-fill:rgba(37,31,66,.95);--glass-fill-reading:rgba(30,28,55,.97)}
  html[data-surface="glass"] .site-header,
  html[data-surface="glass"] .menu-panel,
  html[data-surface="glass"] .mobile-nav div{background:#211c3b}
  html[data-surface="glass"] .glass-card-copy::before{background:#28223f}
  html[data-surface="glass"] .glass-card-media{background:linear-gradient(140deg,#3e3456,#294759)}
}