.du97 { padding: 18px; margin-top: 14px; }
.du97-h { display: flex; align-items: center; gap: 12px; } .du97-h h3 { margin: 0; font-size: 17px; } .du97-h p { margin: 2px 0 0; }
.du97-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #161412; color: #FFC52E; flex: none; } .du97-ic .ic { width: 22px; height: 22px; }
.du97-slots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; }
.du97-slot { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px dashed var(--line-2); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.du97-slot .ic { width: 14px; height: 14px; } .du97-slot.used { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--bg); }
.du97-slots .btn { margin-left: auto; }
.du97-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); margin-top: 8px; flex-wrap: wrap; }
.du97-row .grow { min-width: 0; display: flex; flex-direction: column; } .du97-row small { color: var(--muted); }
.du97-row.live { background: color-mix(in srgb, #FFC52E 22%, var(--surface-solid)); }
.du97-row.accepted { box-shadow: inset 0 0 0 2px var(--ink); }
.du97-k { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-solid); flex: none; } .du97-k .ic { width: 15px; height: 15px; }
.du97-list { max-height: 44vh; overflow: auto; margin-top: 10px; } .du97-list .list-item.on { background: color-mix(in srgb, var(--sport, #FFC52E) 22%, var(--surface-solid)); }
.du97-kind { display: grid; grid-template-columns: 1fr 1fr; } .du97-kind button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pq-tag.du97-chip { display: inline-flex !important; align-items: center; gap: 4px; padding: 2px 8px !important; border-radius: 999px !important; background: #161412 !important; color: #fff !important; font-size: 10.5px !important; font-weight: 800 !important; white-space: nowrap; }
.pq-tag.du97-chip.pending { background: var(--surface-2) !important; color: var(--ink-2) !important; border: 1px dashed var(--line-2); }
.pq-tag.du97-chip .ic { width: 11px; height: 11px; }
.fm97 { margin-left: 6px; } .fm97 b { margin-left: 4px; }
.es97 { margin-left: 4px; }
.fd97 { padding: 16px 18px; margin-top: 14px; }
.fd97-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.fd97-h h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; } .fd97-h h3 .ic { width: 17px; height: 17px; }
.fd97-list { display: flex; flex-direction: column; gap: 10px; }
.fp97 { border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; background: var(--surface-solid); }
.fp97 header { display: flex; align-items: center; gap: 10px; } .fp97 header .grow { display: flex; flex-direction: column; min-width: 0; } .fp97 header small { color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fp97-t { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; }
.fp97.preview .fp97-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fp97-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; margin-top: 10px; display: block; }
.fp97.preview .fp97-img { max-height: 160px; }
.fp97 footer { display: flex; gap: 6px; margin-top: 10px; } .fp97 footer .btn.on { background: color-mix(in srgb, var(--sport, #FFC52E) 30%, var(--surface-solid)); }
.pe97-prev img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; } .pe97-vis { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; } .pe97-vis button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fc97-list { gap: 8px; margin-top: 12px; max-height: 40vh; overflow: auto; }
.fc97 { display: flex; gap: 8px; align-items: flex-start; } .fc97 p { margin: 2px 0 0; font-size: 14px; }
.fc97-form { display: flex; gap: 8px; width: 100%; } .fc97-form .input { flex: 1; }
.fd97.pub { margin: 0 0 14px; }
.rq97 { padding: 14px 18px; margin: 0 0 14px; border: 1px solid color-mix(in srgb, #FFC52E 60%, var(--line)); }
.rq97 h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; } .rq97 h3 .ic { width: 17px; height: 17px; }
.rq97-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.rq97-row .grow { min-width: 180px; display: flex; flex-direction: column; }
.dupr97-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.dupr97-stats span { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 14px; background: var(--surface-2); } .dupr97-stats b { font-family: var(--display); font-size: 22px; } .dupr97-stats small { font-size: 11px; color: var(--muted); }
.dupr97-rows { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow: auto; margin-top: 10px; }
.dupr97-row { display: grid; grid-template-columns: 82px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: 13px; } .dupr97-row.no { opacity: .6; } .dupr97-row i { font-style: normal; color: var(--muted); }
.dupr97-me { margin-top: 10px; }
.sh96-tabs.four { grid-template-columns: repeat(4, 1fr); }
.tap97 { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tap97-art { position: relative; width: 220px; height: 150px; }
.tap97-ring { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--sport, #FFC52E); transform: translate(-50%, -50%); animation: tap97ring 2.4s ease-out infinite; opacity: 0; }
.tap97-ring.r2 { animation-delay: .8s; } .tap97-ring.r3 { animation-delay: 1.6s; }
@keyframes tap97ring { 0% { transform: translate(-50%, -50%) scale(.4); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
.tap97-ph { position: absolute; top: 20px; width: 64px; height: 110px; border-radius: 16px; background: #161412; color: #F5F1EA; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.tap97-ph .ic { width: 28px; height: 28px; } .tap97-ph.a { left: 22px; animation: tap97a 2.4s ease-in-out infinite; } .tap97-ph.b { right: 22px; animation: tap97b 2.4s ease-in-out infinite; }
@keyframes tap97a { 50% { transform: translateX(26px) rotate(-6deg); } } @keyframes tap97b { 50% { transform: translateX(-26px) rotate(6deg); } }
.tap97-nfc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: var(--sport, #FFC52E); color: #161412; display: grid; place-items: center; z-index: 2; } .tap97-nfc .ic { width: 18px; height: 18px; }
.tap97-t { text-align: center; margin: 0; } .tap97-t small { color: var(--muted); }
.tap97-acts { display: flex; flex-direction: column; gap: 8px; width: 100%; } .tap97-st.good { color: #1F9D55; } .tap97-st.bad { color: #D32F24; }
.tap97.busy .tap97-art { filter: saturate(1.4); }
.tap97-big { position: fixed; inset: 0; z-index: 100; background: #F2EEE7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
html[data-theme="dark"] .tap97-big { background: #161412; color: #F5F1EA; }
.tap97-qr { width: min(80vw, 420px); padding: 16px; border-radius: 24px; background: #fff; } .tap97-qr svg { width: 100%; height: auto; display: block; }
.tap97-cam { width: min(90vw, 460px); border-radius: 20px; background: #000; }
.tap97-big .btn { width: min(80vw, 320px); }
.nt95-head .qwee97 { flex: none; }
@media (max-width: 600px) {
  .app-head { flex-wrap: wrap; gap: 10px; } .app-head > .row { flex-wrap: wrap; width: 100%; } .app-head .btn { flex: 1 1 auto; justify-content: center; }
  .members-toolbar89 .row { flex-wrap: wrap; gap: 6px; }
  .modal-f { flex-wrap: wrap; gap: 8px; } .modal-f .btn { flex: 1 1 auto; justify-content: center; min-width: 0; } .modal-f .grow { display: none; }
  .court-tools { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .st92-bar { gap: 6px; } .st92-sel { height: 36px; }
  .pay93-acts { width: 100%; } .pay93-acts .btn { flex: 1; }
  .hero90-txt .sh96-btn { margin-top: 10px; }
  .du97-row .btn, .rq97-row .btn { flex: 1 1 auto; justify-content: center; }
  .dupr97-row { grid-template-columns: 70px 1fr; } .dupr97-row .mono, .dupr97-row .chip { justify-self: end; }
  .fd97-h { flex-wrap: wrap; } .fd97-h > .row { margin-left: auto; }
  .qteams-h { flex-wrap: wrap; gap: 6px; }
  .toasts { left: 12px; right: 12px; width: auto; } .toast { max-width: none; }
}
@media (max-width: 900px) {
  html[data-theme] body .side { display: none !important; }
  .shell { grid-template-columns: 1fr !important; }
  main, #clubMain { padding-bottom: 96px; }
  .topbar { gap: 4px; padding-left: 10px; padding-right: 10px; }
  .topbar .mode91 button { padding: 0 8px; } .topbar .btn.icon { width: 36px; height: 36px; }
  .topbar .online-btn span, .topbar .brand small { display: none; }
}
@media (max-width: 480px) { .topbar .online-btn { display: none; } .topbar .discover-toggle { display: none; } }
.fd97-toggle[hidden], .btn[hidden] { display: none !important; }
@media (max-width: 900px) { .dock { overflow-x: auto; scrollbar-width: none; } .dock::-webkit-scrollbar { display: none; } .dock .nav-item { min-width: 58px; padding: 8px 6px; font-size: 10px; white-space: nowrap; } }