body[data-q8d="clubs"] .sc101-club.q8d-yclub .sc101-logo { overflow: visible; }
body[data-q8d="clubs"] .sc101-club.q8d-yclub .sc101-logo .club-logo { overflow: hidden; }
body[data-q8d="clubs"] .sc101-club.q8d-yclub .sc101-live { bottom: -14px; z-index: 2; box-shadow: 0 0 0 3px var(--q8-card); font-size: 9.5px; padding: 3px 9px; }
body[data-q8d="clubs"] .sc101-club.q8d-yclub.live > b { margin-top: 18px; }
.sc101-logo .sc101-live { pointer-events: none; }
.modal-f.sh108-f:has(.pm98-acts) { display: flex; flex-direction: row !important; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: space-between; padding-top: 12px; padding-bottom: 14px; }
.modal-f .pm98-acts { display: flex; flex-direction: row !important; width: auto !important; flex-wrap: wrap; gap: 6px; flex: 1 1 0 !important; justify-content: flex-start; min-width: 0; margin: 0; }
.modal-f .pm98-acts .pm98-row { display: contents; }
.modal-f .pm98-acts .pm98-btn { flex: none !important; width: auto !important; height: 36px !important; min-height: 36px; padding: 0 13px !important; border-radius: 999px !important; font: 700 13px var(--q8-font) !important; gap: 6px; margin: 0 !important; box-shadow: none !important; }
.modal-f .pm98-acts .pm98-btn svg { width: 15px !important; height: 15px !important; }
.modal-f .pm98-acts .pm98-btn.danger { border-color: rgba(217,71,47,.35) !important; }
.modal-f.sh108-f:has(.pm98-acts) > [data-x="save"] { height: 38px; padding: 0 18px; margin-left: auto; flex: none; }
.ch108-ph img { border-radius: 0 !important; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
#chatMain #msgIn { color: var(--q8-ink, #0e2e30) !important; -webkit-text-fill-color: var(--q8-ink, #0e2e30) !important; caret-color: var(--q8-ink, #0e2e30); }
#chatMain #msgIn::placeholder { color: rgba(14,46,48,.45) !important; -webkit-text-fill-color: rgba(14,46,48,.45) !important; }
body.q8 .pn108 > .chat-shell.q8d-chat { padding: 0 24px 24px 32px; gap: 16px; }
@media (max-width: 760px) { body.q8 .pn108 > .chat-shell.q8d-chat { padding: 0; gap: 0; } }
.ch108-logo { width: 108px; height: 108px; box-shadow: 0 0 0 6px rgba(255,255,255,.3), var(--q8-shadow-lg); }
.ch108-logo .club-logo { width: 100px !important; height: 100px !important; font-size: 34px; }
.ch108-title { font-size: clamp(28px, 2.6vw, 44px); margin: 2px 0 10px; gap: 4px 10px; }
.ch108-tail { gap: 8px; }
.ch108-title em { font-size: clamp(15px, 1.2vw, 18px); margin-top: 2px; }
.ch108-live { height: 26px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.ch108-live i { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(47,158,107,.18); }
.ch108-chips { gap: 8px; }
.ch108-venue { font: 700 15px var(--q8-font); letter-spacing: -.01em; gap: 6px; }
.ch108-venue svg { width: 24px; height: 24px; padding: 5px; }
.ch108-pc { height: 26px; padding: 0 10px; font-size: 12px; }
.ch108-qm { height: 26px; padding: 0 10px 0 3px; font-size: 12px; gap: 6px; box-shadow: none; }
.ch108-qm .avatar { --s: 20px; width: 20px; height: 20px; }
.ch108-qm small { font-size: 10px; }
.ch108-eye { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch108-eye .cv110-eye { position: static; height: 24px; padding: 0 10px; font-size: 11.5px; opacity: 1 !important; box-shadow: none; background: rgba(255,253,248,.75); }
.ch108-eye .cv110-eye svg { width: 13px; height: 13px; }
body.sb108-mini .sb108-av, body.sb108-mini .sb108-user .avatar { border-radius: 50% !important; overflow: hidden; }
body.sb108-mini .sb108-av img, body.sb108-mini .sb108-user .avatar img { border-radius: 50%; }
.st110 { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(28px, 6vh, 72px) 16px 28px; font-family: var(--q8-font); color: var(--q8-ink); }
.st110-eye { font: 700 11.5px var(--q8-font); letter-spacing: .14em; color: var(--q8-ink-3, #6b7c7b); text-transform: uppercase; }
.st110 h1 { margin: 10px 0 0; font: 400 clamp(38px, 4.6vw, 64px)/1.02 var(--q8-display); letter-spacing: -.045em; color: var(--q8-ink); }
.st110 h1 b { font-weight: 800; }
.st110-sub { margin: 10px 0 0; color: var(--q8-ink-2, #3e5453); font-size: 15px; }
.st110-sub kbd, .st110-cta kbd { font: 700 12px var(--q8-font); }
.st110-row { margin-top: clamp(26px, 5vh, 52px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(18px, 3vw, 44px); width: min(100%, 940px); }
.st110-side { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; cursor: pointer; }
.st110-ring { width: min(100%, 380px); aspect-ratio: 1; border-radius: 50%; padding: 12px; background: var(--q8-card, #fffdf8); box-shadow: 0 24px 60px -24px rgba(14,46,48,.35); transition: transform .25s cubic-bezier(.2,.9,.25,1); }
.st110-side:hover .st110-ring, .st110-side:focus-visible .st110-ring { transform: translateY(-4px) scale(1.015); }
.st110-c { position: relative; width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.st110-side.badminton .st110-c { background: var(--q8-lime, #e8dc3a); color: var(--q8-teal, #0b3537); }
.st110-side.pickleball .st110-c { background: #e2533f; color: #fff; }
.st110-court { width: 62%; height: auto; margin-bottom: 8px; }
.st110-name { font: 800 clamp(30px, 3.6vw, 52px)/1 var(--q8-display); letter-spacing: -.045em; }
.st110-meta { margin-top: 10px; font: 700 11.5px var(--q8-font); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.st110-live { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--q8-teal, #0b3537); color: #fff; font: 800 11px var(--q8-font); letter-spacing: .1em; }
.st110-live i { width: 7px; height: 7px; border-radius: 50%; background: #3ad07a; box-shadow: 0 0 0 3px rgba(58,208,122,.25); }
.st110-cta { position: relative; margin-top: -26px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 22px; border-radius: 999px; font: 700 16px var(--q8-font); box-shadow: 0 12px 26px -12px rgba(14,46,48,.5); }
.st110-side.badminton .st110-cta { background: var(--q8-teal, #0b3537); color: #fff; }
.st110-side.pickleball .st110-cta { background: #fff; color: #c8402d; }
.st110-cta kbd { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 6px; border: 1.5px solid currentColor; opacity: .85; }
.st110-cta i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.st110-side.badminton .st110-cta i { background: var(--q8-lime, #e8dc3a); color: var(--q8-teal, #0b3537); }
.st110-side.pickleball .st110-cta i { background: #c8402d; color: #fff; }
.st110-cta i svg { width: 18px; height: 18px; }
.st110-net { display: flex; flex-direction: column; align-items: center; gap: 12px; align-self: stretch; justify-content: center; }
.st110-net::before, .st110-net::after { content: ''; flex: 0 1 110px; width: 0; border-left: 2.5px dotted var(--q8-teal, #0b3537); opacity: .55; }
.st110-q { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
.st110-q svg { width: 54px; height: 54px; }
.st110-foot { margin-top: clamp(28px, 5vh, 52px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.st110-jump, .st110-create { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px 8px 10px; border-radius: 20px; background: var(--q8-card, #fffdf8); border: 0; box-shadow: var(--q8-shadow); color: var(--q8-ink); font: 600 14px var(--q8-font); text-align: left; cursor: pointer; }
.st110-create { padding: 8px 18px; }
.st110-create svg { width: 18px; height: 18px; }
.st110-jump .club-logo { flex: none; }
.st110-jump b { display: block; font-size: 14.5px; }
.st110-jump small { display: block; color: var(--q8-ink-3, #6b7c7b); font-size: 12px; font-weight: 500; }
.st110-jump .st110-go { margin-left: 10px; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--q8-lime, #e8dc3a); color: var(--q8-teal, #0b3537); display: inline-flex; align-items: center; font: 700 13.5px var(--q8-font); }
:root[data-theme="dark"] .st110-ring { background: #10393b; }
:root[data-theme="dark"] .st110 h1, :root[data-theme="dark"] .st110-sub { color: var(--q8-ink); }
@media (max-width: 760px) {
  .st110-row { grid-template-columns: 1fr; gap: 26px; }
  .st110-net { flex-direction: row; }
  .st110-net::before, .st110-net::after { flex: 0 1 80px; height: 0; width: auto; border-left: 0; border-top: 2.5px dotted var(--q8-teal, #0b3537); }
  .st110-ring { width: min(84vw, 320px); }
}
body.q8.r108-home .pn108:has(.ch108) > header.topbar { pointer-events: none; }
body.q8.r108-home .pn108:has(.ch108) > header.topbar > * { pointer-events: auto; }
body.q8.r108-home .pn108:has(.ch108) > header.topbar > .grow, body.q8.r108-home .pn108:has(.ch108) > header.topbar > .spacer { pointer-events: none; }