.reference-utility-panel.modal {
  --utility-muted: #8b8d97;
  --utility-line: #2c2e37;
  --utility-accent: #8b75f5;
  width: min(33.9858rem, calc(100vw - 1.8156rem));
  padding: 0;
  max-height: min(85vh, calc(100dvh - 1.8156rem));
  border: 1px solid #30323b;
  border-radius: 0.6809rem;
  background: #16181d;
  color: #e9e9ef;
  box-shadow: 0 1.3617rem 5.1064rem #0009;
  font-family: inherit;
  font-size: 0.7943rem;
  scrollbar-width: thin;
  scrollbar-color: #454651 transparent;
}
.reference-utility-panel *, .reference-utility-panel *::before, .reference-utility-panel *::after { box-sizing: border-box; }
.modal-backdrop.support-backdrop { z-index: 130; backdrop-filter: blur(.25rem); }
.reference-utility-support.modal { z-index: 131; }
.reference-utility-panel [hidden] { display: none !important; }
.reference-utility-panel button, .reference-utility-panel input, .reference-utility-panel textarea { font: inherit; }
.reference-utility-panel button { color: inherit; cursor: pointer; }
.reference-utility-panel button:disabled { opacity: .42; cursor: not-allowed; }
.reference-utility-panel button:focus-visible, .reference-utility-panel input:focus-visible, .reference-utility-panel textarea:focus-visible { outline: 0.1135rem solid var(--utility-accent); outline-offset: 0.1702rem; }
.reference-utility-panel h2, .reference-utility-panel h3, .reference-utility-panel p { margin: 0; }
.reference-utility-panel.modal p { color: var(--utility-muted); font-size: 0.7376rem; line-height: 1.6; }
.reference-utility-panel.modal small { display: inline; margin: 0; color: var(--utility-muted); font-size: 0.6809rem; }
.reference-utility-panel.modal h2 { color: #f0eff4; font-size: 1.061rem; font-weight: 600; line-height: 1.5; }
.reference-utility-icon { width: 1.2482rem; height: 1.2482rem; flex-shrink: 0; }
.reference-utility-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.1348rem; padding: 1.4184rem 1.5319rem 1.1348rem; border-bottom: 1px solid var(--utility-line); }
.reference-utility-heading { display: flex; align-items: center; gap: 0.7376rem; min-width: 0; }
.reference-utility-heading p { margin-top: 0.227rem !important; }
.reference-utility-header-icon { width: 1.8156rem; height: 1.8156rem; color: var(--utility-accent); }
.reference-utility-close { flex-shrink: 0; width: 1.5887rem; height: 1.5887rem; padding: 0.227rem; display: grid; place-items: center; border: 0; border-radius: 0.2837rem; background: transparent; color: #8f909b !important; }
.reference-utility-close .reference-utility-icon { width: 1.1348rem; height: 1.1348rem; }
.reference-utility-close:hover { background: #ffffff0b; color: #fff !important; }
.reference-utility-panel > .reference-utility-close { position: absolute; top: 1.1348rem; right: 1.1348rem; z-index: 2; }
.reference-utility-tabs { display: flex; flex-shrink: 0; align-items: center; gap: 0.227rem; padding: 0 1.4752rem; border-bottom: 1px solid var(--utility-line); }
.reference-utility-tabs button { position: relative; padding: 0.9645rem 1.2482rem; border: 0; white-space: nowrap; background: transparent; color: #8b8c97; font-size: 0.7943rem; line-height: 1.4; }
.reference-utility-tabs button.is-active { color: #aa93ff; }
.reference-utility-tabs button.is-active::after { position: absolute; content: ''; left: 0.8511rem; right: 0.8511rem; bottom: -1px; height: 0.1135rem; background: #9076f8; }
.reference-utility-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.2695rem; min-width: 5.3901rem; padding: 0.5106rem 1.2482rem; border: 1px solid transparent; border-radius: 0.3972rem; font-size: 0.7943rem !important; transition: background .15s, border-color .15s; }
.reference-utility-button.secondary { border-color: #373944; background: #23252e; color: #c1c1cb; }
.reference-utility-button.primary { background: #7c61d8; color: #fff; }
.reference-utility-button.amber { background: #c99948; color: #15110a; }
.reference-utility-button.danger { background: #de4d56; color: #fff; }
.reference-utility-footer { display: flex; justify-content: flex-end; align-items: center; gap: 0.6809rem; margin-top: 1.305rem; padding-top: 1.078rem; border-top: 1px solid var(--utility-line); }
.reference-utility-status { margin: 0.7943rem 0 0 !important; padding: 0.6241rem 0.7376rem; border: 1px solid #77634255; border-radius: 0.3972rem; background: #a87f2110; color: #d1b880 !important; font-size: 0.6809rem !important; overflow-wrap: anywhere; }
.reference-utility-status.is-error { border-color: #9d465b66; background: #bc345715; color: #f09aad !important; }
.reference-utility-service-note { margin-top: 1.0213rem !important; font-size: 0.6809rem !important; }
.reference-utility-recharge.modal { display: flex; flex-direction: column; width: min(50rem, calc(100vw - 1.8156rem)); height: min(31.6721rem, calc(100dvh - 1.5887rem)); max-height: calc(100dvh - 1.5887rem); overflow: hidden; }
.reference-utility-recharge .reference-utility-header { flex: 0 0 5.8621rem; padding: 1.2499rem 1.5001rem; border-bottom: 0; }
.reference-utility-recharge .reference-utility-tabs { flex: 0 0 2.7155rem; gap: 1.5001rem; margin: 0 1.5001rem; padding: 0 0.1248rem; }
.reference-utility-recharge .reference-utility-tabs button { padding: 0.6252rem 0.2502rem 0.7501rem; font-size: 0.8749rem; }
.reference-utility-recharge .reference-utility-tabs button.is-active { color: #16bf96; }
.reference-utility-recharge .reference-utility-tabs button.is-active::after { left: 0; right: 0; background: #16bf96; }
.reference-utility-recharge-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.2499rem 1.5001rem; }
.reference-utility-recharge-body h3 { margin-bottom: 0.6252rem; color: #92949e; font-size: 0.7501rem; font-weight: 500; line-height: 1.1251rem; }
.reference-utility-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6252rem; margin-bottom: 1.5001rem; }
.reference-utility-tier { position: relative; min-width: 0; height: 7.5001rem; padding: 0.6252rem 0.6252rem 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; border: 1px solid #ffffff0c; border-radius: 0.4999rem; background: #1d2026; }
.reference-utility-tier:hover { border-color: #279984; }
.reference-utility-tier.is-selected { border-color: #16bf96; background: #136b5526; box-shadow: inset 0 0 0 1px #16bf96; }
.reference-utility-tier-glyph { position: absolute; top: 0.6241rem; left: 0.6241rem; display: grid; place-items: center; width: 1.2482rem; height: 1.2482rem; border-radius: 0.227rem; color: #747982; background: #ffffff04; }
.reference-utility-tier-money { display: flex; align-items: baseline; justify-content: center; gap: 0.1702rem; }
.reference-utility-tier-money strong { font-size: 1.7021rem; font-weight: 600; line-height: 1; letter-spacing: -.4px; }
.reference-utility-tier-money small { font-size: 0.8511rem !important; color: #d7d4e0 !important; }
.reference-utility-tier-money { height: 3.4718rem; padding-top: 0.5674rem; }
.reference-utility-tier-credits { display: flex; align-items: center; justify-content: space-between; height: 2rem; border-top: 1px solid #ffffff0b; font-size: 0.6877rem; color: #747782; }
.reference-utility-tier-credits strong { color: #e0e2e7; font-size: 0.7501rem; }
.reference-utility-tier-credits i { margin-right: 0.1702rem; color: #ff8b40; font-style: normal; }
.reference-utility-payment-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8511rem; }
.reference-utility-payment-methods > button { display: flex; align-items: center; gap: 0.6809rem; min-height: 3.6879rem; padding: 0.7943rem 0.9645rem; border: 1px solid #373741; border-radius: 0.4539rem; background: #20212a; }
.reference-utility-payment-methods > button.is-selected { border-color: #9175e5; background: #5f478123; }
.reference-utility-payment-methods i { width: 0.9645rem; height: 0.9645rem; margin-left: auto; border: 1px solid #575766; border-radius: 50%; }
.reference-utility-payment-methods > button.is-selected i { border: 0.2837rem solid #a18bfb; background: #252431; }
.reference-utility-pay-logo { display: grid; place-items: center; width: 1.8723rem; height: 1.8723rem; border-radius: 0.3404rem; }
.reference-utility-pay-logo.wechat { color: #4bcc74; background: #1e6f482a; }
.reference-utility-pay-logo.alipay { color: #36a5ef; background: #1e88c12a; font-size: 1.4184rem; font-weight: 600; }
.reference-utility-recharge .reference-utility-payment-methods { gap: 0.4999rem; }
.reference-utility-recharge .reference-utility-payment-methods > button { min-height: 3.3521rem; padding: 0.7501rem 0.8749rem; gap: 0.6252rem; background: #1d2026; border-color: #ffffff0c; border-radius: 0.375rem; font-size: 0.8749rem; font-weight: 600; }
.reference-utility-recharge .reference-utility-payment-methods > button.is-selected { border-color: #16bf96; background: #136b5526; }
.reference-utility-recharge .reference-utility-payment-methods > button.is-selected i { border-color: #16bf96; }
.reference-utility-recharge .reference-utility-pay-logo { width: 1.7498rem; height: 1.7498rem; background: transparent; }
.reference-utility-pay-logo svg { width: 1.3617rem; height: 1.3617rem; }
.reference-utility-recharge-footer { flex: 0 0 4.7274rem; margin: 0; padding: 0.8749rem 1.5001rem 1.1251rem; gap: 0.4999rem; }
.reference-utility-recharge-footer .reference-utility-button { flex: 1; min-width: 0; min-height: 2.6877rem; font-size: 0.8749rem !important; font-weight: 600; }
.reference-utility-recharge-footer .reference-utility-button.primary { background: #179c78; }
.reference-utility-recharge-footer .reference-utility-button.secondary { background: transparent; }
.reference-utility-card-tips { padding: 0.8511rem 1.0213rem; margin-top: 1.1348rem; border: 1px solid #333540; border-radius: 0.4539rem; background: #20222b; }
.reference-utility-card-tips p + p { margin-top: 0.3404rem !important; }
.reference-utility-field { display: grid !important; gap: 0.5106rem !important; margin: 0 0 1.078rem !important; color: #c7c7d1 !important; font-size: 0.7376rem !important; }
.reference-utility-field > span { display: block; }
.reference-utility-field > span b { font-weight: normal; color: #e56f78; }
.reference-utility-field input, .reference-utility-field textarea { width: 100%; padding: 0.6241rem 0.7376rem !important; border: 1px solid #383a46 !important; border-radius: 0.3972rem !important; background: #20222b !important; color: #e7e7ef !important; font-size: 0.7376rem !important; }
.reference-utility-field input { height: 2.3262rem !important; }
.reference-utility-field textarea { min-height: 7.0922rem; resize: vertical; line-height: 1.65; }
.reference-utility-field input::placeholder, .reference-utility-field textarea::placeholder { color: #70727d; }
.reference-utility-counter { display: block !important; text-align: right; margin-top: -0.1135rem !important; font-size: 0.6241rem !important; }
.reference-utility-field-tip { margin-top: 0.4539rem !important; font-size: 0.6241rem !important; }
.reference-utility-form { padding: 1.305rem 1.5319rem 1.3617rem; }
.reference-utility-empty { display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; gap: 0.7943rem; padding: 2.0426rem 1.2482rem; min-height: 16.1702rem; text-align: center; }
.reference-utility-empty > .reference-utility-icon { width: 2.4397rem; height: 2.4397rem; color: #62636e; }
.reference-utility-empty h3 { color: #b1b2bc; font-size: 0.8511rem; font-weight: 500; }
.reference-utility-empty p { max-width: 23.8298rem; }
.reference-utility-empty.compact { min-height: 12.4823rem; }
.reference-utility-empty-orbit { display: grid; place-items: center; width: 4.2553rem; height: 4.2553rem; border-radius: 50%; background: #242630; color: #71727e; }
.reference-utility-empty-orbit .reference-utility-icon { width: 2.0993rem; height: 2.0993rem; }
.reference-utility-devices { --utility-accent: #3bcdb9; }
.reference-utility-devices.modal h2 { font-size: 1.3617rem; }
.reference-utility-device-body { padding: 1.3617rem; }
.reference-utility-device-note { display: flex; gap: 0.5674rem; align-items: center; padding: 0.7943rem; border: 1px solid #26877944; border-radius: 0.3972rem; background: #1283780b; color: #55bea9; }
.reference-utility-device-note p { color: #a5c7bf !important; font-size: 0.6809rem !important; }
.reference-utility-current-browser { display: flex; align-items: center; gap: 0.7943rem; padding: 1.1348rem 0.8511rem; margin-top: 1.0213rem; border: 1px solid #353740; border-radius: 0.4539rem; background: #20222a; }
.reference-utility-current-browser h3 { margin-bottom: 0.227rem; font-size: 0.8511rem; }
.reference-utility-current-browser small { display: block !important; margin-top: 0.2837rem !important; font-size: 0.5674rem !important; }
.reference-utility-device-symbol { display: grid; place-items: center; width: 2.4965rem; height: 2.4965rem; color: #52cbb5; border-radius: 0.5106rem; background: #28baaa17; }
.reference-utility-messages.modal { width: min(1057px, calc(100vw - 1.8156rem)); height: min(85vh, calc(100dvh - 1.8156rem)); display: flex; flex-direction: column; }
.reference-utility-messages.modal h2 { font-size: 1.1915rem; }
.reference-utility-message-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 0.6809rem; border-bottom: 1px solid var(--utility-line); }
.reference-utility-message-toolbar .reference-utility-tabs { border-bottom: 0; min-width: 0; }
.reference-utility-message-toolbar .reference-utility-tabs button { padding: 0.9645rem 0.9078rem; }
.reference-utility-message-actions { display: flex; gap: 0.6809rem; padding-right: 1.4752rem; flex-shrink: 0; }
.reference-utility-message-actions button, .reference-utility-message-batch button { padding: 0.3404rem 0.5674rem; border: 1px solid #343640; border-radius: 0.3404rem; background: #23252d; font-size: 0.6809rem; white-space: nowrap; }
.reference-utility-message-batch { display: flex; gap: 0.8511rem; align-items: center; flex-wrap: wrap; padding: 0.6809rem 1.4184rem; border-bottom: 1px solid var(--utility-line); font-size: 0.6809rem; color: #a9aab7; }
.reference-utility-message-batch label { display: flex !important; align-items: center; gap: 0.4539rem !important; margin: 0 !important; }
.reference-utility-message-batch input { height: auto !important; accent-color: #977eee; }
.reference-utility-message-batch button:last-child { margin-left: auto; }
.reference-utility-complaint { --utility-accent: #e15862; }
.reference-utility-complaint.modal { height: min(35.6312rem, calc(90dvh - 0.9078rem)); max-height: min(90vh, calc(100dvh - 1.8156rem)); background: #16171d; }
.reference-utility-complaint .reference-utility-header { padding: 1.305rem 1.4184rem 1.0213rem; }
.reference-utility-complaint .reference-utility-heading { align-items: flex-start; }
.reference-utility-complaint .reference-utility-header-icon { width: 1.305rem; height: 1.305rem; margin-top: 0.1702rem; }
.reference-utility-complaint.modal h2 { font-size: 1.0496rem; }
.reference-utility-complaint .reference-utility-heading p { max-width: 24.3972rem; font-size: 0.6809rem; }
.reference-utility-complaint .reference-utility-form { padding-top: 1.0213rem; }
.reference-utility-complaint .reference-utility-field { margin-bottom: 0.7943rem !important; }
.reference-utility-complaint .reference-utility-field:first-child { margin-bottom: 0.4539rem !important; }
.reference-utility-complaint .reference-utility-footer { margin-top: 0.9645rem; padding-top: 0.8511rem; }
.reference-utility-select { position: relative; margin-bottom: 0.9645rem; }
.reference-utility-select > button { display: flex; align-items: center; justify-content: space-between; gap: 0.6809rem; width: 100%; height: 2.3262rem; padding: 0 0.7376rem; border: 1px solid #383a46; border-radius: 0.3972rem; background: #20222b; color: #b8b8c4; font-size: 0.7376rem; text-align: left; }
.reference-utility-select-options { position: absolute; z-index: 5; top: calc(100% + 0.2837rem); left: 0; right: 0; max-height: 15.8865rem; padding: 0.2837rem; overflow: auto; border: 1px solid #454551; border-radius: 0.4539rem; background: #23242d; box-shadow: 0 0.7943rem 1.7021rem #0007; scrollbar-width: thin; }
.reference-utility-select-options button { display: grid; gap: 0.227rem; width: 100%; padding: 0.5674rem 0.6809rem; text-align: left; border: 0; border-radius: 0.2837rem; background: transparent; }
.reference-utility-select-options button:hover, .reference-utility-select-options button[aria-selected=true] { background: #d14c5c1a; }
.reference-utility-select-options strong { font-size: 0.7376rem; font-weight: 500; }
.reference-utility-select-options small { font-size: 0.6241rem !important; line-height: 1.5; }
.reference-utility-images, .reference-utility-image-list { display: flex; flex-wrap: wrap; gap: 0.5106rem; }
.reference-utility-image-list:empty { display: none; }
.reference-utility-image-add, .reference-utility-image-preview { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 4.1418rem; height: 4.1418rem; border: 1px dashed #40424f; border-radius: 0.3972rem; background: #20222b; gap: 0.2837rem; }
.reference-utility-image-add { color: #8b8d9c !important; font-size: 0.5674rem !important; }
.reference-utility-image-add .reference-utility-icon { width: 1.2482rem; height: 1.2482rem; }
.reference-utility-image-preview { border-style: solid; }
.reference-utility-image-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.3404rem; }
.reference-utility-image-preview button { position: absolute; top: -0.3404rem; right: -0.3404rem; display: grid; place-items: center; width: 1.078rem; height: 1.078rem; padding: 0.1135rem; border: 1px solid #73717b; border-radius: 50%; background: #3c343d; }
.reference-utility-image-preview .reference-utility-icon { width: 0.6809rem; height: 0.6809rem; }
.reference-utility-feedback { --utility-accent: #d1ab61; }
.reference-utility-feedback.modal { width: min(37.4979rem, calc(100vw - 1.8156rem)); height: min(90vh, calc(100dvh - 1.8156rem)); max-height: min(90vh, calc(100dvh - 1.8156rem)); }
.reference-utility-feature-header { text-align: center; padding: 1.7021rem 1.5319rem 1.4184rem; }
.reference-utility-feature-icon { display: grid; place-items: center; width: 3.5177rem; height: 3.5177rem; margin: 0 auto 0.7943rem; border: 1px solid #b8944644; border-radius: 0.9078rem; color: #dcba71; background: linear-gradient(135deg, #ad842127, #b68a3411); box-shadow: 0 0.227rem 1.1348rem #8a602213; }
.reference-utility-feature-icon .reference-utility-icon { width: 1.8156rem; height: 1.8156rem; }
.reference-utility-feature-header h2 { font-size: 1.7475rem !important; font-weight: 600; }
.reference-utility-feature-header p { margin-top: 0.3404rem !important; }
.reference-utility-feedback .feedback-tabs { justify-content: center; }
.reference-utility-feedback .reference-utility-tabs button.is-active { color: #dcba71; }
.reference-utility-feedback .reference-utility-tabs button.is-active::after { background: #cfac64; }
.reference-utility-feedback-notice { margin: 1.1915rem 1.5319rem 0; padding: 0.7376rem 0.8511rem; border: 1px solid #aa864442; border-radius: 0.3972rem; background: #8d67230e; color: #bfb096; line-height: 1.7; font-size: 0.6809rem; }
.reference-utility-feedback-notice button { padding: 0; color: #deb769; background: transparent; border: 0; text-decoration: underline; }
.reference-utility-feedback .reference-utility-form { padding-top: 1.0213rem; }
.reference-utility-feedback .reference-utility-field textarea { min-height: 7.6028rem; }
.reference-utility-support.modal { width: min(24rem, calc(100% - 2.5rem)); height: auto; max-height: 92dvh; padding: 0; overflow: hidden; border: 1px solid #2a2e36; border-radius: .75rem; color: #f5f6f8; box-shadow: 0 24px 56px #00073; font-size: 1rem; line-height: 1.5; }
.reference-utility-support.modal:not([hidden]) { display: flex; flex-direction: column; animation: referenceSupportEnter .18s ease; }
.reference-utility-support .reference-utility-header { flex: none; align-items: center; justify-content: flex-start; gap: .75rem; padding: 1.125rem 1.25rem 1rem; border-color: #2a2e36; }
.reference-utility-support-header-icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: .4375rem; background: #10b98124; }
.reference-utility-support-header-icon img { display: block; width: 1.5rem; height: 1.5rem; }
.reference-utility-support-header-text { flex: 1; min-width: 0; }
.reference-utility-support.modal h2 { margin: 0 0 .125rem; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #f5f6f8; }
.reference-utility-support .reference-utility-header p { margin: 0; font-size: .6875rem; line-height: 1.5; color: #9aa0a8; }
.reference-utility-support .reference-utility-close { position: absolute; top: .875rem; right: .875rem; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: .375rem; background: transparent; color: #9aa0a8; z-index: 1; transition: background .15s, border-color .15s, color .15s; }
.reference-utility-support .reference-utility-close:hover { background: #1d2026; border-color: #2a2e36; color: #f5f6f8; }
.reference-utility-support-body { display: flex; flex-direction: column; align-items: center; padding: 1.25rem 1.25rem 1rem; overflow-y: auto; text-align: center; }
.reference-utility-support-avatar-section,.reference-utility-support-qr-section { display: flex; flex: none; flex-direction: column; align-items: center; margin-bottom: 1rem; }
.reference-utility-support-avatar { position: relative; display: block; width: 4rem; height: 4rem; margin-bottom: .625rem; }
.reference-utility-support-avatar img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 2px solid #10b981; border-radius: 50%; object-fit: cover; }
.reference-utility-support-avatar > i { position: absolute; inset: -.25rem; border: 2px solid #10b981; border-radius: 50%; pointer-events: none; animation: referenceSupportAvatarPulse 2s ease-in-out infinite; }
.reference-utility-support-body h3 { margin: 0 0 .4375rem; font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: -.005em; color: #f5f6f8; }
.reference-utility-service-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .5rem; border: 1px solid transparent; border-radius: .25rem; color: #10b981; background: #10b98124; font-size: .6875rem; font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
.reference-utility-service-badge i { width: .375rem; height: .375rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 2px #10b98124; animation: referenceSupportDotPulse 2s ease-in-out infinite; }
.reference-utility-support-qr { width: 10.5rem; height: 10.5rem; padding: .5rem; border: 1px solid #2a2e36; border-radius: .5rem; background: #fff; }
.reference-utility-support-qr img { display: block; width: 100%; height: 100%; border-radius: .25rem; object-fit: contain; }
.reference-utility-support.modal .reference-utility-support-qr-section p { margin: .625rem 0 0; font-size: .6875rem; line-height: 1.5; color: #6b7079; letter-spacing: .02em; }
.reference-utility-support-contact { display: flex; flex: none; align-items: center; justify-content: center; gap: .4375rem; width: 100%; height: 2.5rem; padding: 0 1rem; border: 1px solid #10b981; border-radius: .375rem; background: #10b981; color: #fff; font-size: .875rem; font-weight: 600; line-height: normal; letter-spacing: .02em; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.reference-utility-support-contact:hover { background: #34d399; border-color: #34d399; }
@keyframes referenceSupportEnter { from { opacity: 0; transform: translate(-50%, calc(-50% + .5rem)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes referenceSupportAvatarPulse { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.15); opacity: 0; } }
@keyframes referenceSupportDotPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.reference-utility-announcement.modal { width: min(56.227rem, calc(100vw - 1.8156rem)); max-height: min(90vh, calc(100dvh - 1.8156rem)); }
.reference-utility-announcement .reference-utility-feature-header { padding: 1.7589rem 1.4184rem 1.4752rem; border-bottom: 1px solid var(--utility-line); }
.reference-utility-announcement .reference-utility-feature-icon { color: #b7a1ff; border-color: #9374e85c; background: linear-gradient(135deg, #61449855, #397aaa33); box-shadow: 0 0 1.7021rem #65579e1d; }
.reference-utility-announcement-body { padding: 1.4184rem 1.7589rem; }
.reference-utility-announcement-card { padding: 1.1348rem; border: 1px solid #353743; border-radius: 0.5674rem; background: #1d1f28; }
.reference-utility-announcement-card h3 { font-size: 0.9078rem; font-weight: 500; }
.reference-utility-announcement-card + .reference-utility-announcement-card { margin-top: 1.0213rem; }
.reference-utility-announcement-card.muted p { margin-top: 0.6809rem !important; }
.reference-utility-announcement-footer { display: flex; justify-content: center; align-items: center; gap: 0.8511rem; padding: 1.0213rem 1.4184rem 1.305rem; border-top: 1px solid var(--utility-line); }
.reference-utility-announcement-footer button { padding: 0.5106rem 1.1348rem; border: 1px solid #3a3b47; border-radius: 0.3404rem; background: #262731; font-size: 0.7376rem; }
.reference-utility-checkin.modal { width: min(1008px, calc(100vw - 1.8156rem)); height: min(37.1064rem, calc(90dvh - 0.9078rem)); max-height: min(90vh, calc(100dvh - 1.8156rem)); border-color: #3a3342; }
.reference-utility-checkin-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100%; }
.reference-utility-checkin-main { padding: 1.7589rem 1.6454rem 1.4184rem; background: radial-gradient(ellipse at 20% 0, #a1741320, transparent 70%), #1a181c; border-right: 1px solid #38303e; }
.reference-utility-checkin-header { display: flex; align-items: center; gap: 0.6809rem; }
.reference-utility-checkin-header > .reference-utility-icon { width: 2.2695rem; height: 2.2695rem; padding: 0.3972rem; border: 1px solid #99782966; border-radius: 0.5674rem; color: #e3ba66; background: #745c2520; }
.reference-utility-checkin-header h2 { font-size: 1.2482rem !important; }
.reference-utility-checkin-header p { font-size: 0.6809rem !important; margin-top: 0.1702rem !important; }
.reference-utility-checkin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7943rem; margin-top: 1.5887rem; }
.reference-utility-checkin-stats article { display: grid; gap: 0.4539rem; padding: 1.078rem 0.9645rem; border: 1px solid #6b54294d; border-radius: 0.5674rem; background: #493b2218; }
.reference-utility-checkin-stats article + article { border-color: #75609f44; background: #54406c19; }
.reference-utility-checkin-stats strong { color: #d8b163; font-size: 1.8723rem; line-height: 1.2; font-weight: 600; }
.reference-utility-checkin-stats article + article strong { color: #b39ada; }
.reference-utility-checkin-stats strong small { margin-left: 0.3972rem !important; font-size: 0.6809rem !important; }
.reference-utility-checkin-stats article > span { color: #9f9391; font-size: 0.6809rem; }
.reference-utility-checkin-progress { margin: 1.2482rem 0 1.078rem !important; padding: 0.6809rem 0.7943rem; border-radius: 0.3404rem; background: #d5aa4220; color: #b7a073 !important; font-size: 0.6809rem !important; }
.reference-utility-checkin-milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7376rem; }
.reference-utility-checkin-milestones article { display: grid; justify-items: center; gap: 0.3972rem; padding: 0.8511rem 0.227rem; border: 1px solid #604e3044; border-radius: 0.4539rem; background: #41342617; }
.reference-utility-checkin-milestones strong { font-size: 0.7376rem; font-weight: 500; color: #bfac8d; }
.reference-utility-checkin-milestones article > span:last-child { font-size: 0.6809rem; color: #aa935e; }
.reference-utility-milestone-icon { font-size: 1.6454rem; color: #947c44; line-height: 1.2; }
.reference-utility-milestone-icon .reference-utility-icon { width: 1.6454rem; height: 1.6454rem; }
.reference-utility-checkin-main > .reference-utility-field-tip { margin-top: 0.7943rem !important; font-size: 0.5674rem !important; }
.reference-utility-checkin-submit { display: flex; align-items: center; justify-content: center; gap: 0.8511rem; width: 100%; margin-top: 1.3617rem; padding: 0.7943rem 0.6809rem; border: 1px solid #dfb85966; border-radius: 0.4539rem; background: linear-gradient(110deg, #d8b763, #bb963f); box-shadow: 0 0.1702rem 0.9078rem #bd93451c; color: #36280e !important; font-size: 0.8511rem !important; font-weight: 600; }
.reference-utility-checkin-submit span { font-size: 0.6809rem; font-weight: 500; padding: 0.1702rem 0.3972rem; border-radius: 0.2837rem; background: #70440e1a; }
.reference-utility-checkin-reminder { display: flex !important; align-items: center; gap: 0.4539rem !important; margin: 1.1348rem 0 0 !important; color: #b9aa94 !important; font-size: 0.6809rem !important; }
.reference-utility-checkin-reminder input { width: 0.7943rem; height: 0.7943rem !important; margin: 0; accent-color: #d4af61; }
.reference-utility-checkin-reminder small { margin-left: auto !important; font-size: 0.5674rem !important; }
.reference-utility-checkin-calendar { padding: 1.8156rem 1.5887rem 1.4752rem; background: radial-gradient(ellipse at 90% 0, #7554a120, transparent 65%), #191720; }
.reference-utility-checkin-calendar > header { display: flex; align-items: center; justify-content: space-between; gap: 0.5674rem; padding: 0.4539rem 1.9858rem 0.6809rem 0; }
.reference-utility-checkin-calendar > header strong { color: #d7c8ef; font-size: 0.9078rem; font-weight: 500; }
.reference-utility-checkin-calendar > header button { width: 1.5887rem; height: 1.5887rem; border: 1px solid #44364e; border-radius: 0.3404rem; background: #36283f33; color: #b99ddc; font-size: 1.1348rem !important; }
.reference-utility-calendar-week, .reference-utility-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.reference-utility-calendar-week { margin: 0.9645rem 0 0.6809rem; color: #806e94; font-size: 0.6809rem; }
.reference-utility-calendar-days { row-gap: 0.5106rem; }
.reference-utility-calendar-days > span { display: grid; place-items: center; width: 1.9858rem; height: 1.9858rem; margin: auto; border: 1px solid transparent; border-radius: 50%; color: #9e8cb6; font-size: 0.7376rem; }
.reference-utility-calendar-days > span.is-today { color: #e3cdff; border-color: #9875c866; background: #78539d47; box-shadow: 0 0 0.9645rem #65417a24; }
.reference-utility-calendar-legend { display: flex; align-items: center; justify-content: center; gap: 1.1915rem; margin-top: 1.2482rem; font-size: 0.5674rem; color: #8c7a9e; }
.reference-utility-calendar-legend span { display: flex; align-items: center; gap: 0.3404rem; }
.reference-utility-calendar-legend i { width: 0.3972rem; height: 0.3972rem; border-radius: 50%; background: #9973c9; }
.reference-utility-calendar-legend span + span i { background: #b49f63; }
.reference-utility-checkin-calendar-note { margin-top: 1.7021rem; padding: 0.9645rem; border: 1px solid #59406455; border-radius: 0.4539rem; background: #613e7010; }
.reference-utility-checkin-calendar-note h3 { color: #ac93c6; font-size: 0.7376rem; font-weight: 500; }
.reference-utility-checkin-calendar-note p { margin-top: 0.5106rem !important; color: #8f7aa0 !important; font-size: 0.6241rem !important; }
@media (max-width: 700px) {
  .reference-utility-header { padding: 1.1348rem 1.1348rem 0.9645rem; }
  .reference-utility-panel.modal { max-height: calc(100dvh - 1.5887rem); width: calc(100vw - 1.5887rem); }
  .reference-utility-recharge-body { padding: 1.1348rem; }
  .reference-utility-tiers { grid-template-columns: repeat(3, 1fr); gap: 0.5106rem; }
  .reference-utility-tier { padding: 1.0213rem 0.227rem; }
  .reference-utility-tier-money strong { font-size: 1.5319rem; }
  .reference-utility-payment-methods { gap: 0.5674rem; }
  .reference-utility-payment-methods > button { padding: 0.6809rem 0.5674rem; gap: 0.3972rem; font-size: 0.6809rem; }
  .reference-utility-payment-methods i { width: 0.8511rem; height: 0.8511rem; }
  .reference-utility-tabs { padding: 0 0.8511rem; }
  .reference-utility-tabs button { padding: 0.8511rem 0.8511rem; }
  .reference-utility-form { padding: 1.1915rem 1.1348rem; }
  .reference-utility-feature-header { padding-top: 1.7021rem; }
  .reference-utility-feature-header h2 { font-size: 1.5319rem !important; }
  .reference-utility-feedback-notice { margin-left: 1.1348rem; margin-right: 1.1348rem; }
  .reference-utility-message-toolbar { flex-wrap: wrap; gap: 0; }
  .reference-utility-message-toolbar .reference-utility-tabs { width: 100%; overflow: auto; scrollbar-width: none; }
  .reference-utility-message-toolbar .reference-utility-tabs button { padding: 0.8511rem 0.7943rem; flex-shrink: 0; }
  .reference-utility-message-actions { margin-left: auto; padding: 0.4539rem 1.1348rem 0.6241rem; }
  .reference-utility-messages.modal { height: calc(90dvh - 0.9078rem); }
  .reference-utility-complaint.modal { height: auto; }
  .reference-utility-complaint .reference-utility-header { padding-left: 1.1348rem; padding-right: 1.1348rem; }
  .reference-utility-select-options { max-height: 12.4823rem; }
  .reference-utility-devices.modal h2 { font-size: 1.1915rem; }
  .reference-utility-device-body { padding: 1.1348rem; }
  .reference-utility-current-browser { align-items: flex-start; }
  .reference-utility-announcement-body { padding: 1.1915rem 1.1348rem; }
  .reference-utility-checkin.modal { height: auto; }
  .reference-utility-checkin-layout { grid-template-columns: 1fr; }
  .reference-utility-checkin-main { padding: 1.5887rem 1.2482rem 1.2482rem; border-right: 0; border-bottom: 1px solid #38303e; }
  .reference-utility-checkin-calendar { padding: 1.3617rem 1.2482rem 1.4184rem; }
  .reference-utility-checkin-calendar > header { padding-right: 0; }
  .reference-utility-checkin-calendar-note { margin-top: 1.2482rem; }
}
@media (max-width: 30rem) {
  .reference-utility-support.modal { width: calc(100% - 3.5rem); border-radius: .625rem; }
  .reference-utility-support .reference-utility-header,.reference-utility-support-body { padding: 1rem 1.125rem .875rem; }
  .reference-utility-support-qr { width: 10rem; height: 10rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-utility-support.modal:not([hidden]),.reference-utility-support-avatar > i,.reference-utility-service-badge i { animation: none; }
}
@media (max-width: 360px) {
  .reference-utility-payment-methods { grid-template-columns: 1fr; }
  .reference-utility-tier-money strong { font-size: 1.3617rem; }
  .reference-utility-tier-credits { font-size: 0.5674rem; }
  .reference-utility-message-toolbar .reference-utility-tabs button { padding-left: 0.5674rem; padding-right: 0.5674rem; }
  .reference-utility-footer { gap: 0.5106rem; }
  .reference-utility-button { min-width: 4.8227rem; padding: 0.5106rem 0.9078rem; }
  .reference-utility-checkin-reminder { flex-wrap: wrap; }
  .reference-utility-checkin-reminder small { flex-basis: 100%; margin-left: 1.2482rem !important; }
}
@media (max-width: 650px) {
  .reference-utility-recharge.modal { height: min(41.9858rem, calc(100dvh - 1.5887rem)); }
  .reference-utility-recharge .reference-utility-tiers { grid-template-columns: repeat(2, 1fr); }
  .reference-utility-recharge .reference-utility-header { padding: 1.2482rem 1.1348rem; }
  .reference-utility-recharge .reference-utility-tabs { margin-inline: 1.1348rem; }
  .reference-utility-recharge-body { padding: 1.2482rem 1.1348rem; }
  .reference-utility-recharge-footer { padding-inline: 1.1348rem; }
  .reference-utility-recharge .reference-utility-payment-methods { grid-template-columns: 1fr; }
}