/* 小智圆屏 · 表情引擎样式（内部坐标统一 360×360，外层按尺寸缩放） */
.xf-host {
  --c-brand: #2EE6A6;
  --c-listen: #3FD0FF;
  --c-think: #9B8CFF;
  --c-remind: #FFB020;
  --c-warn: #FF6A3D;
  --c-danger: #FF3B3B;
  --c-mute: #5B6670;
  --c-text: #E8F1EE;
  --c-text-dim: #7E8A87;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: #000;
}
.xf-root {
  --c: #2EE6A6;
  position: absolute;
  left: 0; top: 0;
  width: 360px; height: 360px;
  transform-origin: 0 0;
  background: #000;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  color: var(--c);
  overflow: hidden;
  border-radius: 50%;
  user-select: none;
}
.xf-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 62%, rgba(255, 59, 59, .38) 0%, rgba(255, 59, 59, .12) 45%, transparent 72%);
  opacity: 0;
}
.xf-ring { position: absolute; inset: 0; width: 360px; height: 360px; overflow: visible; }
.xf-ring circle { fill: none; stroke: var(--c); stroke-linecap: round; }
.xf-ring .xf-track { stroke: #1A2321; opacity: 1; }
.xf-ring .xf-track-hi { stroke: var(--c); }
.xf-ring .xf-tick { fill: #E8F1EE; opacity: .55; }
.xf-ring .xf-dash { stroke: var(--c-mute); }
.xf-ring rect { fill: var(--c); }

.xf-eyes {
  position: absolute; inset: 0;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 55%, transparent));
}
.xf-noglow .xf-eyes, .xf-night .xf-eyes { filter: none; }
.xf-night { filter: brightness(.6); }

.xf-eye { position: absolute; left: 0; top: 0; width: 60px; height: 88px; }
.xf-shape {
  position: absolute; inset: 0;
  background: var(--c);
  border-radius: 24px;
}
.xf-glyph { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.xf-glyph polyline, .xf-glyph line {
  fill: none; stroke: var(--c); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round;
}

.xf-dyn { position: absolute; inset: 0; pointer-events: none; }
.xf-num {
  position: absolute; left: 0; right: 0; top: 98px;
  height: 140px; line-height: 140px;
  text-align: center;
  font-size: 120px; font-weight: 800; letter-spacing: -4px;
  font-variant-numeric: tabular-nums;
  color: var(--c);
  opacity: 0;
}
.xf-cap {
  position: absolute; left: 40px; right: 40px; top: 248px;
  height: 40px; line-height: 40px;
  text-align: center; white-space: nowrap;
  font-size: 30px; font-weight: 600;
  color: var(--c-text);
  opacity: 0;
}
.xf-icon {
  position: absolute; left: 160px; top: 52px; width: 40px; height: 40px;
  color: var(--c);
  opacity: 0;
}
.xf-icon svg, .xf-mini svg { width: 100%; height: 100%; display: block; }
.xf-mini { position: absolute; width: 22px; height: 22px; color: var(--c); opacity: 0; }
.xf-spark { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c); opacity: 0; }