/* Shared across the portal, attendance, guide, example and tool pages. */
.guide-float, .support-float { box-sizing: border-box; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 14px; line-height: 1.5; letter-spacing: normal; }
.guide-float *, .support-float *, .guide-float::before, .support-float::before { box-sizing: border-box; }
.guide-float { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 1000; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; margin: 0; border: 1px solid #305366; border-radius: 50%; background: #102b3f; color: #f5ad38; text-decoration: none; box-shadow: 0 6px 20px rgba(16,43,63,.18); transition: transform .2s, box-shadow .2s; }
.guide-float:hover { color: #f5ad38; transform: translateY(-2px); box-shadow: 0 9px 24px rgba(16,43,63,.24); }
.guide-float-question { font: 700 27px/1 "Microsoft YaHei", "PingFang SC", sans-serif; }
.guide-float-hint { position: absolute; right: calc(100% + 12px); top: 50%; padding: 7px 12px; border: 1px solid #c8d7dc; border-radius: 8px; background: white; color: #102b3f; box-shadow: 0 4px 15px rgba(16,43,63,.07); font-size: 13px; font-weight: 400; white-space: nowrap; opacity: 0; visibility: hidden; transform: translate(4px,-50%); pointer-events: none; transition: opacity .18s, transform .18s, visibility .18s; }
.guide-float-hint::after { content: ""; position: absolute; right: -5px; top: calc(50% - 4px); width: 8px; height: 8px; border-top: 1px solid #c8d7dc; border-right: 1px solid #c8d7dc; background: white; transform: rotate(45deg); }
.guide-float:hover .guide-float-hint, .guide-float:focus-visible .guide-float-hint { opacity: 1; visibility: visible; transform: translate(0,-50%); }
.support-float { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 1000; }
.support-float::before { content: ""; position: absolute; top: 0; right: 100%; width: 14px; height: 100%; }
.support-float .support-trigger { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; margin: 0; border: 1px solid #11666c; border-radius: 50%; background: #167c80; color: white; box-shadow: 0 6px 20px rgba(16,43,63,.18); cursor: pointer; appearance: none; transition: background .2s, box-shadow .2s; }
.support-float .support-trigger:hover, .support-float .support-trigger[aria-expanded="true"] { background: #11666c; box-shadow: 0 9px 24px rgba(16,43,63,.24); }
.guide-float:focus-visible, .support-float .support-trigger:focus-visible { outline: 3px solid #f5ad38; outline-offset: 4px; }
.support-float .support-trigger svg { display: block; width: 29px; height: 29px; margin: 0; }
.support-float .support-panel { position: absolute; right: calc(100% + 14px); bottom: -4px; width: 284px; max-height: calc(100dvh - 110px - env(safe-area-inset-bottom)); overflow-y: auto; padding: 20px 18px 15px; border: 1px solid #c8d7dc; border-top: 3px solid #167c80; border-radius: 14px; background: white; color: #102b3f; box-shadow: 0 12px 36px rgba(16,43,63,.16); text-align: center; }
.support-float .support-panel[hidden] { display: none; }
.support-float .support-panel h2 { margin: 0; color: #102b3f; font: 700 17px/1.5 "Microsoft YaHei", "PingFang SC", sans-serif; letter-spacing: normal; }
.support-float .support-contact { margin: 5px 0 12px; color: #11666c; font-size: 15px; font-weight: 700; line-height: 1.5; }
.support-float .support-qr { display: block; width: 100%; height: auto; max-width: 100%; margin: 0; border: 1px solid #c8d7dc; border-radius: 8px; background: white; }
.support-float .support-caption { margin: 11px 0 0; color: #687983; font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) {
  .guide-float { right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  .guide-float-question { font-size: 24px; }
  .support-float { right: max(14px, env(safe-area-inset-right)); bottom: calc(74px + env(safe-area-inset-bottom)); }
  .support-float .support-trigger { width: 48px; height: 48px; }
  .support-float .support-trigger svg { width: 26px; height: 26px; }
  .support-float .support-panel { right: 0; bottom: calc(100% + 12px); width: min(284px, calc(100vw - 28px)); max-height: calc(100dvh - 148px - env(safe-area-inset-bottom)); }
  .support-float::before { inset: auto 0 100%; width: 100%; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-float, .guide-float *, .support-float, .support-float * { transition: none !important; animation: none !important; }
}