/* A · 心動星霧 — shared by companion/live rankings, matching and profile cards. */
body .dc-starmist-ranking, body .dc-starmist-profile, body .dc-starmist-match {
  --sm-ink: #faf5ff; --sm-muted: #c7b9db; --sm-line: rgba(207,177,255,.18);
  --sm-fill: linear-gradient(110deg,#ef83de 0%,#ad72f5 55%,#8665fa 100%);
  font-family: Inter,-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
  color: var(--sm-ink); -webkit-font-smoothing: antialiased;
}
body .dc-starmist-ranking.dc-rk-overlay, body .dc-starmist-profile.dc-uip-overlay {
  align-items: flex-end; padding: 16px 12px max(12px,env(safe-area-inset-bottom));
  background: rgba(9,5,20,.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
body .dc-starmist-ranking .dc-rk-card, body .dc-starmist-profile > .dc-starmist-profile-card {
  width: 100%; max-width: 440px; max-height: calc(100dvh - 72px - env(safe-area-inset-top));
  border: 1px solid rgba(210,176,255,.3); border-radius: 28px;
  background: radial-gradient(ellipse at 10% 0%,rgba(159,104,205,.2),transparent 48%),#21182f;
  box-shadow: 0 24px 80px #07031288,inset 0 1px 0 #f6dcff22;
  overflow: hidden;
}
body .dc-starmist-ranking .dc-rk-card { display: flex; flex-direction: column; }
body .dc-starmist-ranking .dc-rk-header { padding: 29px 54px 12px; border: 0; flex-shrink: 0; }
body .dc-starmist-ranking .dc-rk-header::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 4px; background: #b19acb80;
}
body .dc-starmist-ranking .dc-rk-eyebrow { color: #e0b2fa; font-size: 19px; line-height: 1; margin: 0 0 9px; letter-spacing: 0; }
body .dc-starmist-ranking .dc-rk-title { font-family: inherit; font-size: 23px; font-weight: 700; font-style: normal; line-height: 1.3; color: #faf5ff; background: none; -webkit-text-fill-color: currentColor; }
body .dc-starmist-ranking .dc-sm-subtitle { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--sm-muted); }
body .dc-starmist-ranking .dc-rk-close { width: 40px; height: 40px; top: 19px; right: 12px; color: #f3e9ff; background: #ffffff0a; border-color: var(--sm-line); }
body .dc-starmist-ranking .dc-rk-card > .px-5 { padding-inline: 18px; }
body .dc-starmist-ranking .dc-rk-card > .px-5:last-child { min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; }
body .dc-starmist-ranking .dc-rk-card > .px-5:not(:last-child) { padding-top: 10px; flex-shrink: 0; }
body .dc-starmist-ranking .dc-rk-segctrl { border: 1px solid var(--sm-line); padding: 4px; border-radius: 16px; background: #ffffff06; }
body .dc-starmist-ranking .dc-rk-segctrl-item { min-height: 42px; padding: 9px 6px; border-radius: 12px; font-size: 14px; color: #c5b6d6; }
body .dc-starmist-ranking .dc-rk-segctrl-item.is-active { color: #fff; background: var(--sm-fill); box-shadow: 0 3px 12px #ca80e82b,inset 0 1px #ffffff50; }
body .dc-starmist-ranking .dc-rk-period { height: 36px; font-size: 12px; color: #c5b6d6; border-color: #cab0ea1f; }
body .dc-starmist-ranking .dc-rk-period.is-active { color: #f4bcf0; border-color: #d789ca99; background: #db8ab91a; }
body .dc-starmist-ranking .dc-rk-empty { padding: 0; text-align: center; }
body .dc-starmist-ranking .dc-sm-art { display: block; width: clamp(136px,26dvh,228px); max-width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: transparent !important; margin: -3px auto 8px; mask-image: radial-gradient(ellipse at center,#000 54%,transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center,#000 54%,transparent 75%); }
body .dc-starmist-ranking .dc-rk-empty-text { font-family: inherit; font-style: normal; font-size: 18px; font-weight: 700; line-height: 1.5; color: #faf5ff; margin: 0; text-wrap: balance; }
body .dc-starmist-ranking .dc-sm-empty-note { font-size: 12px; color: var(--sm-muted); line-height: 1.6; margin: 5px 0 20px; text-wrap: balance; }
body .dc-starmist-ranking .dc-sm-cta, body .dc-starmist-match .dc-sm-cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 50px; padding: 12px 18px; border: 1px solid #e9c3ff38; border-radius: 18px; background: var(--sm-fill); color: white; font-size: 15px; font-weight: 700; box-shadow: 0 7px 24px #a05ce833,inset 0 1px #fff3; cursor: pointer; }
body .dc-starmist-ranking .dc-rk-row { min-height: 70px; border-radius: 16px; border-color: #d4b1ff14; background: linear-gradient(110deg,#b286ff12,#ffffff04); padding: 12px; }
body .dc-starmist-ranking .dc-rk-row:nth-child(-n+3) { border-color: #d4b1ff33; }
body .dc-starmist-ranking .dc-rk-name { font: 600 14px/1.4 Inter,-apple-system,sans-serif; }
body .dc-starmist-ranking .dc-rk-meta { font-size: 11px; color: var(--sm-muted); }
body .dc-starmist-ranking .dc-rk-value { font: 700 15px/1.4 Inter,-apple-system,sans-serif; color: #e8c4ff; }
body .dc-starmist-profile > .dc-starmist-profile-card { background: #21182f; overflow-y: auto; overscroll-behavior: contain; }
body .dc-starmist-profile-card .dc-uip-cover-wrap { isolation: isolate; }
body .dc-starmist-profile-card .dc-uip-cover-default { height: 154px; background: radial-gradient(circle at 50% 70%,#9560d866,transparent 52%),radial-gradient(ellipse at 10% 10%,#dc89ca36,transparent 65%),#251b38; }
body .dc-starmist-profile-card .dc-uip-cover-default::before { content: ""; position: absolute; width: 210px; height: 65px; left: calc(50% - 105px); top: 65px; border: 1px solid #dba7ff70; border-radius: 50%; transform: rotate(-17deg); box-shadow: 0 0 18px #ab78fc25; }
body .dc-starmist-profile-card .dc-uip-cover-default::after { content: "✦"; position: absolute; left: calc(50% + 68px); top: 56px; color: #edb8ff; font-size: 26px; text-shadow: 0 0 17px #cc8cff; }
body .dc-starmist-profile-card .dc-uip-cover-img { height: 154px; filter: brightness(.8) saturate(.85); }
body .dc-starmist-profile-card .dc-uip-cover-tint { height: 154px; background: linear-gradient(180deg,#21182f22,#21182f44); }
body .dc-starmist-profile-card .dc-uip-cover-fade { background: linear-gradient(180deg,transparent,#21182f); }
body .dc-starmist-profile-card .dc-uip-avatar-pos { left: 50%; bottom: -40px; transform: translateX(-50%); border-radius: 50%; filter: drop-shadow(0 0 16px #b779eb55); }
body .dc-starmist-profile-card .dc-uip-avatar-pos::before { content: ""; position: absolute; inset: -12px; border: 1px solid #c399e63d; border-radius: 50%; pointer-events: none; }
body .dc-starmist-profile-content > .flex.justify-between { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
body .dc-starmist-profile-content > .flex.justify-between > div { min-width: 0; max-width: 100%; }
body .dc-starmist-profile-content > .flex.justify-between > div > .flex { justify-content: center; flex-wrap: wrap; }
body .dc-starmist-profile-card .dc-uip-name { font-family: inherit; font-size: 24px; font-weight: 650; font-style: normal; line-height: 1.3; overflow-wrap: anywhere; }
body .dc-starmist-profile-card .dc-uip-id { color: #c2afda; font-size: 12px; margin-top: 5px; }
body .dc-starmist-profile-card .dc-uip-icon-btn { width: 40px; height: 40px; border-color: #ddbcff29; background: #20132e70; }
body .dc-starmist-profile-card .dc-uip-follow-btn { height: 40px; min-width: 112px; padding: 0 22px; background: var(--sm-fill); box-shadow: 0 5px 18px #b171e733; font-size: 13px; }
body .dc-starmist-profile-card .dc-uip-follow-btn.is-following { color: #e1d0ee; background: #ad82d61a; border: 1px solid #d7b7ed3b; box-shadow: none; }
body .dc-starmist-profile-card .dc-uip-stats { border-color: var(--sm-line); border-radius: 17px; padding: 16px 0; background: #ae89d70b; margin-top: 20px; }
body .dc-starmist-profile-card .dc-uip-stat-num { font: 600 20px/1.3 Inter,-apple-system,sans-serif; color: #f4e6ff; background: none; -webkit-text-fill-color: currentColor; }
body .dc-starmist-profile-card .dc-uip-stat-label { font-size: 11px; color: var(--sm-muted); letter-spacing: .02em; }
body .dc-starmist-profile-card .dc-uip-stat-divider { border-color: var(--sm-line); }
body .dc-starmist-profile-card .dc-sm-invitation { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 0; padding: 17px 12px; border: 1px solid #d4b1ff12; border-radius: 17px; color: #decbed; font-size: 12px; line-height: 1.7; text-align: center; background: linear-gradient(120deg,#b887df13,#ffffff03); }
body .dc-starmist-profile-card .dc-sm-invitation i { color: #e5a6df; }
body .dc-starmist-profile-card .dc-uip-bio { color: #d3c3e2; }
body .dc-starmist-profile-card .dc-uip-action-btn { min-height: 48px; height: auto; padding: 12px 8px; font-size: 14px; border-radius: 15px; line-height: 1.4; }
body .dc-starmist-profile-card .dc-uip-action-btn--primary { background: var(--sm-fill); box-shadow: 0 6px 20px #a364da30; }
body .dc-starmist-profile-card .dc-sm-more { position: relative; }
body .dc-starmist-profile-card .dc-sm-more summary { list-style: none; }
body .dc-starmist-profile-card .dc-sm-more summary::-webkit-details-marker { display: none; }
body .dc-starmist-profile-card .dc-sm-more-menu { position: absolute; right: 0; top: 45px; width: max-content; max-width: 240px; padding: 6px; border: 1px solid #ccb0ee40; border-radius: 14px; background: #30233f; box-shadow: 0 10px 30px #07031188; }
body .dc-starmist-profile-card .dc-sm-more-menu button { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 44px; padding: 8px 12px; color: #efdaff; font-size: 13px; border-radius: 8px; }
body .dc-starmist-profile-card .dc-sm-more-menu button:hover { background: #b591e61c; }
body .dc-starmist-match { background: radial-gradient(ellipse at 50% 17%,#3a2550 0%,#181020 57%) !important; }
body .dc-starmist-match .dc-nav { background: #181020eb; border-color: #c4a0e318; backdrop-filter: blur(14px); }
body .dc-starmist-match .dc-nav-title { font-family: inherit; font-style: normal; font-size: 19px; font-weight: 650; color: #f6ecff; background: none; -webkit-text-fill-color: currentColor; }
body .dc-starmist-match main { width: 100%; max-width: 460px; margin: auto; padding: 10px 20px calc(110px + env(safe-area-inset-bottom)); }
body .dc-starmist-match .dc-sm-match-hero { text-align: center; margin-bottom: 20px; padding-top: 4px; }
body .dc-starmist-match .dc-sm-match-art { width: 100%; max-width: 330px; height: clamp(160px,28dvh,238px); object-fit: cover; background: transparent !important; margin: -8px auto -2px; mask-image: radial-gradient(ellipse at center,#000 54%,transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center,#000 54%,transparent 75%); }
body .dc-starmist-match .dc-sm-match-hero h2 { font-size: clamp(20px,5.2vw,24px); line-height: 1.5; font-weight: 700; margin-bottom: 7px; text-wrap: balance; }
body .dc-starmist-match .dc-sm-match-hero p { color: var(--sm-muted); font-size: 13px; line-height: 1.6; }
body .dc-starmist-match .dc-sm-queue, body .dc-starmist-match .dc-sm-rules { background: #b68ede09; border: 1px solid #c7a5ea26; border-radius: 20px; padding: 17px; margin-bottom: 16px; box-shadow: inset 0 1px #ebd7ff09; }
body .dc-starmist-match .dc-sm-queue h3, body .dc-starmist-match .dc-sm-rules h3 { color: #ded0eb; font-size: 12px; margin-bottom: 12px; font-weight: 600; }
body .dc-starmist-match .dc-sm-queue .grid { gap: 10px; }
body .dc-starmist-match .dc-sm-queue .grid > div { background: #ba9add0c; border: 1px solid #d3b6f112; border-radius: 13px; padding: 12px 8px; }
body .dc-starmist-match .dc-sm-queue .grid span.text-xs { color: #c6b6d7; }
body .dc-starmist-match .dc-sm-queue .grid span.text-2xl { font-size: 28px; font-weight: 600; }
body .dc-starmist-match .dc-sm-quiet { color: #d5bedf; font-size: 11px; line-height: 1.7; padding-top: 13px; text-align: center; }
body .dc-starmist-match .dc-sm-quiet i { color: #d5a5f0; margin-inline-end: 6px; }
body .dc-starmist-match .dc-sm-rules ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
body .dc-starmist-match .dc-sm-rules li { flex-direction: column; gap: 9px; align-items: center; text-align: center; margin: 0 !important; padding: 13px 5px; border-radius: 12px; background: #b799d50a; color: #d5c5e3; font-size: 11px; line-height: 1.6; }
body .dc-starmist-match .dc-sm-rules li i { color: #cf9bed; font-size: 20px; width: auto; }
body .dc-starmist-match .dc-sm-rules li:last-child { grid-column: 1/-1; flex-direction: row; justify-content: center; padding: 7px 0 0; background: none; color: #bfaacf; }
body .dc-starmist-match .dc-sm-rules li:last-child i { font-size: 13px; }
body .dc-starmist-match .dc-sm-match-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 22px 20px max(16px,env(safe-area-inset-bottom)); background: linear-gradient(0deg,#181020 75%,#18102000); z-index: 51; }
body .dc-starmist-match .dc-sm-match-footer button { max-width: 420px; margin: auto; min-height: 54px; }
body .dc-starmist-match .pool-entry-card { margin: 8px 0 0; min-height: 76px; border: 1px solid #c7a5ea26; border-radius: 18px; padding: 13px; background: #ac88d00b; color: #e5d7f1; box-shadow: none; }
body .dc-starmist-match .pool-entry-copy strong { font-size: 14px; }
body .dc-starmist-match .pool-entry-copy small { color: #bdaacb; font-size: 11px; }
body .dc-starmist-match .pool-entry-eight { transform: scale(.8); margin: -5px; }
body .dc-starmist-ranking button:focus-visible, body .dc-starmist-profile button:focus-visible, body .dc-starmist-profile summary:focus-visible, body .dc-starmist-match button:focus-visible { outline: 2px solid #ecc2ff; outline-offset: 3px; }
body .dc-starmist-ranking button:active, body .dc-starmist-match .dc-sm-cta:active { transform: scale(.98); }
body .dc-starmist-match button:disabled { opacity: .55; cursor: default; }
@media(min-width: 640px) { body .dc-starmist-ranking.dc-rk-overlay, body .dc-starmist-profile.dc-uip-overlay { align-items: center; } }
@media(max-height: 700px) { body .dc-starmist-ranking .dc-rk-header { padding-top: 23px; padding-bottom: 6px; } body .dc-starmist-ranking .dc-rk-eyebrow { display: none; } body .dc-starmist-ranking .dc-sm-art { width: 140px; height: 140px; } body .dc-starmist-profile-card .dc-uip-cover-default, body .dc-starmist-profile-card .dc-uip-cover-img, body .dc-starmist-profile-card .dc-uip-cover-tint { height: 124px; } }
@media(prefers-reduced-motion: reduce) { body .dc-starmist-ranking *, body .dc-starmist-profile *, body .dc-starmist-match * { animation: none !important; transition: none !important; } }