/* ARCO glass.css — 玻璃材质与组件外观。
 * .glass-true  真玻璃（backdrop-filter），同屏 ≤ 3：首屏主胶囊、导航条、弹窗。
 * .pg          伪玻璃（半透明白渐变 + 1px 渐变描边 + 内高光 + 柔和投影），其余一切。
 * 组件：.tile .chip .dock .artifact .gold .window .panel .gcard；部门色通过 --c 传入。
 * 悬停倾斜：[data-tilt]（由 ui.js 写入 --rx --ry --gx --gy）。
 * 三层高光（设计书 16.1-8）：顶部 1px 白色内描边 .95、上半部白色线性高光 .55→0、底部 1px 部门色反光 .25。
 * 真玻璃：blur＋saturate(190%) brightness(1.06)，内部叠一层部门色流光（.18），避免被模糊后发灰。
 */
:root { --hl-top: inset 0 1px 0 rgba(255,255,255,.95); --hl-half: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 50%); }

.glass-true {
  position: relative;
  background: var(--hl-half), linear-gradient(150deg, rgba(255,255,255,.42), rgba(255,255,255,.16) 48%, rgba(255,250,242,.30));
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
}
.glass-true::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .18; z-index: 0;
  background: linear-gradient(100deg, #FF9900, #407AAA 30%, #587B3B 55%, #A85F34 78%, #FF9900);
  mix-blend-mode: soft-light;
}

.pg {
  position: relative;
  background: var(--hl-half), linear-gradient(155deg, rgba(255,255,255,.86), rgba(255,255,255,.62) 52%, rgba(255,251,245,.74));
  box-shadow: var(--hl-top), inset 0 -1px 0 color-mix(in oklch, var(--c, #FF9900) 25%, transparent), var(--sh-2);
}
.pg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(158deg, rgba(255,255,255,1), rgba(255,255,255,.25) 32%, color-mix(in oklch, var(--c, #FF9900) 30%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.pg > .spec {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(42% 36% at var(--gx, 30%) var(--gy, 0%), rgba(255,255,255,.85), transparent 70%);
  mix-blend-mode: soft-light; transition: opacity .4s var(--ease-out);
}
[data-tilt]:hover > .spec { opacity: 1; }

/* 悬停倾斜：默认端正；由 ui.js 写入 --rx/--ry */
[data-tilt] {
  transform: perspective(900px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
  transform-style: preserve-3d;
}
[data-tilt].is-tilting { transition: transform .12s linear, box-shadow .3s var(--ease-out); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), var(--sh-3); }

/* 系统方块 Tile：112×112，r 28，部门色 22% 染色＋1.5px 部门色描边 */
.tile {
  --c: var(--c-med);
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--r-tile); text-align: center; cursor: pointer; color: var(--ink);
  background: var(--hl-half), linear-gradient(155deg, color-mix(in oklch, var(--c) 26%, rgba(255,255,255,.88)), color-mix(in oklch, var(--c) 14%, rgba(255,255,255,.66)));
  box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--c) 78%, white), inset 0 2.5px 0 -1px rgba(255,255,255,.95), inset 0 -2.5px 0 -1px color-mix(in oklch, var(--c) 25%, transparent), var(--sh-2);
}
.tile::before { display: none; }
.tile .t-code { font: 700 20px/1.1 var(--f-en); letter-spacing: .01em; color: var(--ink); }
.tile .t-cn { font: 500 15px/1.3 var(--f-cn); color: var(--ink-2); }

/* 智能体芯片 Chip：h 40，r 20，白玻璃＋部门色圆点 */
.chip {
  --c: var(--c-med);
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: var(--r-chip);
  font: 500 var(--fs-chip)/1.2 var(--f-ui); color: var(--ink); white-space: nowrap;
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in oklch, var(--c) 22%, transparent); flex: none; }
.chip b { font: 700 13px/1 var(--f-en); color: var(--ink-3); letter-spacing: .02em; }

/* 码头 Dock：168×60，r 18，白玻璃＋岩蓝描边＋图标 */
.dock {
  --c: var(--c-gov);
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 60px; border-radius: var(--r-dock);
  font: 600 17px/1.2 var(--f-cn); color: var(--ink); text-wrap: balance;
  box-shadow: inset 0 0 0 1.25px color-mix(in oklch, var(--c) 55%, white), inset 0 2.25px 0 -1px rgba(255,255,255,.95), inset 0 -2.25px 0 -1px color-mix(in oklch, var(--c) 25%, transparent), var(--sh-1);
}
.dock.cmp { height: 40px; gap: 6px; padding: 0 12px; border-radius: 14px; font-size: 15px; white-space: nowrap; }
.dock.cmp .ic { width: 16px; height: 16px; }
.dock.cmp .grid40 { display: none; }
.dock .ic { width: 22px; height: 22px; flex: none; color: var(--c); }
.dock .ic svg { width: 100%; height: 100%; }
.dock.is-int { --c: var(--c-med); }
.dock .grid40 { display: grid; grid-template-columns: repeat(8, 4px); gap: 2.5px; flex: none; margin-left: auto; }
.dock .grid40 i { width: 4px; height: 4px; border-radius: 1px; background: color-mix(in oklch, var(--c-gov) 70%, white); }

/* 工件卡 Artifact：176×112，r 18 */
.artifact {
  --c: var(--c-med);
  position: absolute; width: 176px; height: 112px; border-radius: var(--r-card); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px; color: var(--ink);
}
.artifact .a-ic { width: 22px; height: 26px; color: var(--c); }
.artifact .a-t { font: 600 17px/1.3 var(--f-cn); }
.artifact .a-s { font: 500 14px/1.3 var(--f-ui); color: var(--ink-3); }

/* 金色胶囊 Gold：200×56，r 28 */
.gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; min-width: 200px; padding: 0 22px; border-radius: 28px;
  font: 700 17px/1.2 var(--f-cn); color: var(--c-gold-ink);
  background: var(--hl-half), linear-gradient(160deg, #FBE7B0 0%, var(--c-gold-hi) 28%, var(--c-gold) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 6px rgba(122,84,16,.18), 0 14px 30px -12px rgba(160,110,20,.45);
}

/* 系统窗口 Window：r 28，顶栏三点＋标题 */
.window { border-radius: var(--r-win); overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
.window .w-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--line-soft); font: 600 15px/1 var(--f-ui); }
.window .w-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E3DED6; }
.window .w-bar i:nth-child(1) { background: #F2B0A0; } .window .w-bar i:nth-child(2) { background: #F2D48A; } .window .w-bar i:nth-child(3) { background: #BFD6A8; }
.window .w-bar b { margin-left: 8px; font-family: var(--f-en); letter-spacing: .02em; }
.window .w-body { flex: 1; padding: 20px 24px; overflow: hidden; }

/* 大玻璃面板 / 大玻璃卡 */
.panel { border-radius: 28px; color: var(--ink); }
.gcard { border-radius: 24px; padding: 28px 28px 26px; color: var(--ink-2); }
.gcard h3 { font-size: 24px; line-height: 1.3; margin-bottom: 14px; }

/* 浮卡（悬停三问） */
.hovercard {
  position: fixed; z-index: 90; width: 340px; padding: 18px 20px; border-radius: 20px; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
  background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(255,252,247,.96));
}
.hovercard.is-on { opacity: 1; transform: none; }
.hovercard h4 { font: 700 18px/1.3 var(--f-ui); margin-bottom: 8px; }
.hovercard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; }
.hovercard dt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.hovercard dd { margin: 0; }

/* 跨页胶囊 .vcap（capsule.js）：真玻璃＋顶部白描边、上半高光、底部部门色反光、部门色流光 */
.vcap { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; --c: #FF9900; }
.vcap-in, .vcap-b, .vcap-g { position: absolute; inset: 0; border-radius: inherit; }
.vcap-sh { position: absolute; left: 8%; right: 8%; top: 42%; bottom: -14%; border-radius: 50%; background: color-mix(in oklch, var(--c) 34%, rgba(50,45,40,.4)); filter: blur(22px); opacity: .5; }
.vcap-g {
  overflow: hidden;
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.06); backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 50%), linear-gradient(160deg, rgba(255,255,255,.32), rgba(255,255,255,.10) 55%, rgba(255,250,242,.24));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 color-mix(in oklch, var(--c) 25%, transparent), inset 0 0 0 1px rgba(255,255,255,.6), 0 16px 36px -18px rgba(40,50,70,.35);
}
.vcap-flow { position: absolute; left: 0; top: 0; width: 300%; height: 100%; opacity: .3; mix-blend-mode: soft-light; background: var(--flow, linear-gradient(90deg, #FF9900, #407AAA 16.6%, #587B3B 33.3%, #A85F34 50%, #FF9900 66.6%, #407AAA 83.3%, #587B3B 100%)); }
.vcap-spec { position: absolute; inset: 0; background: radial-gradient(30% 60% at var(--gx, 30%) var(--gy, 16%), rgba(255,255,255,.7), transparent 70%); mix-blend-mode: soft-light; }

/* 人形图标、回执点 */
.person { width: 28px; height: 28px; color: var(--c-gold); }
.receipts { display: inline-flex; gap: 3px; }
.receipts i { width: 5px; height: 5px; border-radius: 50%; background: #D8D2C8; }
.receipts i.on { background: var(--c-dms); }