.topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.music-toggle{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:15px;background:#fff7fb;color:#ad879b;transition:background .2s,color .2s,box-shadow .2s}
.music-toggle.is-playing{background:linear-gradient(135deg,#ffe3f0,#eff9ff);color:var(--pink-dark);box-shadow:0 6px 18px rgba(221,66,129,.12)}
.music-toggle.is-playing .music-off-mark{display:none}
.music-toggle[hidden],#wechat-link[hidden],#contact-dialog [hidden]{display:none!important}
.music-toggle:focus-visible,.support-agent:focus-visible,.support-back:focus-visible{outline:3px solid #ed4d9480;outline-offset:3px}
#contact-dialog{display:block;width:min(680px,calc(100% - 28px));max-width:680px;max-height:calc(100dvh - 32px);overflow:auto;padding:32px;border:1px solid rgba(238,182,211,.45);background:linear-gradient(140deg,#fffafd,#fff5fa 60%,#eff8ff)}
#contact-dialog .support-heading{padding-bottom:22px}
#contact-dialog .support-heading small{font-size:10px;letter-spacing:.18em;color:#bf7f9d}
#contact-dialog h2{font-size:28px;line-height:1.25;margin:9px 0}
#contact-dialog .support-heading p{margin:0;font-size:12px}
.support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.support-agent{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 10px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.86);color:var(--ink);box-shadow:0 7px 20px rgba(174,90,130,.07);transition:transform .2s,border-color .2s}
.support-agent:hover{transform:translateY(-3px);border-color:#ec9dc2}
.support-agent img{width:88px;height:88px;border-radius:50%;object-fit:cover;background:#fff1f7;box-shadow:0 6px 18px rgba(211,109,154,.12)}
.support-agent strong{max-width:100%;font-size:14px;overflow-wrap:anywhere;text-align:center}
.support-agent span{color:var(--muted);font-size:12px;line-height:1.5;white-space:pre-wrap;text-align:center}
#contact-dialog .support-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-top:24px;padding:20px 0 0;border-top:1px solid var(--line);background:transparent}
.support-footer #wechat-link{margin-right:auto}
.support-detail{text-align:center}
.support-back{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted);font-size:12px}
.support-detail-avatar{display:block;width:66px;height:66px;margin:20px auto 10px;border-radius:20px;object-fit:cover;background:#fff1f7}
.support-detail h3{margin:0;font-size:19px;overflow-wrap:anywhere}
#contact-dialog .support-hours{margin:5px 0 0;color:#b18196;font-size:12px}
.support-qr-wrap{position:relative;width:fit-content;max-width:100%;min-width:min(260px,100%);margin:18px auto 0;padding:12px;border:1px solid var(--line);border-radius:20px;background:#fff}
.support-qr{display:block;width:auto;height:auto;max-width:100%;max-height:48dvh;margin:auto;object-fit:contain;user-select:auto;-webkit-user-select:auto;-webkit-touch-callout:default}
#contact-dialog .support-qr-status{max-width:290px;margin:10px auto;padding:8px 10px;color:var(--muted)}
.support-empty{text-align:center;padding:28px 14px;border:1px dashed var(--line);border-radius:22px;background:rgba(255,255,255,.65)}
.support-empty>span{color:var(--pink);font-size:36px}
.drawer-item img{object-position:center top}
@media(max-width:680px){
  .topbar-inner{gap:8px}.topbar-actions{gap:7px}.music-toggle{width:36px;height:36px;border-radius:12px}.music-toggle svg{width:19px;height:19px}
  #contact-dialog{padding:24px 18px;border-radius:26px;max-height:calc(100dvh - 24px)}
  #contact-dialog h2{font-size:25px}.support-grid{gap:9px}.support-agent{padding:15px 7px;border-radius:18px;gap:9px}.support-agent img{width:64px;height:64px}.support-agent strong{font-size:12px}.support-agent span{font-size:10px}
  #contact-dialog .support-footer{margin-top:20px;padding-top:16px}.support-qr{max-height:45dvh}.support-detail-avatar{margin-top:16px}
}
@media(max-width:390px){.topbar .brand{gap:6px;font-size:12px}.topbar-actions{gap:5px}.support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.topbar .brand>span{display:none}.topbar .main-nav{gap:8px}}
@media(prefers-reduced-motion:reduce){.support-agent,.music-toggle{transition:none}.support-agent:hover{transform:none}}