/* ===== shell-tools: re-homed utility cluster, per template ===== */
/* Desktop: tidy footer row in the sidebar. */
html[data-shell="desktop-pro"] #dp-sidebar .dp-tools { margin-top:auto; padding:12px 12px 16px; border-top:1px solid var(--line,#e5e7eb); }
html[data-shell="desktop-pro"] #dp-sidebar .dp-tools .rhs.shell-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; }
/* Mobile/WeChat: a ⚙ button in the bar + a dropdown panel (keeps the tiny bar clean). */
html[data-shell="webview-mobile"] .shell-tools-btn, html[data-shell="wechat-mini"] .shell-tools-btn {
  flex:0 0 auto; width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:inherit; cursor:pointer; border-radius:10px; }
html[data-shell="wechat-mini"] #wm-bar .shell-tools-btn { color:#fff; }
.shell-tools-panel { display:none; position:fixed; top:52px; right:8px; z-index:200; background:var(--surface,#fff);
  border:1px solid var(--line,#e5e7eb); border-radius:14px; box-shadow:0 10px 34px rgba(0,0,0,.18); padding:10px; min-width:210px; max-width:280px; }
.shell-tools-panel.open { display:block; }
.shell-tools-panel .rhs.shell-tools { display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:0; }
.shell-tools-panel .rhs.shell-tools > * { width:100%; justify-content:flex-start; }
/* Common: collapse the re-homed dropdowns (their #hkpl-sh collapse broke on move); size icons; compact. */
.rhs.shell-tools svg, .rhs.shell-tools img { width:16px !important; height:16px !important; }
.rhs.shell-tools > *, .rhs.shell-tools button, .rhs.shell-tools .fs-pill, .rhs.shell-tools .lang > button, .rhs.shell-tools .signin-btn {
  font-size:12px !important; line-height:1 !important; height:auto !important; padding:7px 9px !important; border-radius:8px; white-space:nowrap; }
.rhs.shell-tools .fs-dd, .rhs.shell-tools .lang, .rhs.shell-tools .sh-switch { position:relative; }
.rhs.shell-tools .fs-dd .panel, .rhs.shell-tools .lang .panel, .rhs.shell-tools .sh-switch .panel { display:none !important; }
.rhs.shell-tools .fs-dd.open .panel, .rhs.shell-tools .fs-dd:hover .panel, .rhs.shell-tools .lang.open .panel, .rhs.shell-tools .lang:hover .panel,
.rhs.shell-tools .sh-switch.open .panel, .rhs.shell-tools .sh-switch:hover .panel {
  display:block !important; position:absolute; left:0; min-width:150px; background:var(--surface,#fff);
  border:1px solid var(--line,#e5e7eb); border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.14); padding:6px; z-index:220; }
html[data-shell="desktop-pro"] .rhs.shell-tools .fs-dd.open .panel, html[data-shell="desktop-pro"] .rhs.shell-tools .lang.open .panel { bottom:calc(100% + 6px); }
.rhs.shell-tools .fs-dd .panel button, .rhs.shell-tools .lang .panel button { display:flex !important; align-items:center; gap:8px; width:100%; padding:7px 9px !important; border:0; background:transparent; text-align:left; }

/* ===== SHARED template fixes (2026-09-05) — apply on every shell ===== */
/* Website cookie banner overlaps content + breaks the app/mini-program illusion — suppress in template mode
   (essential-session-only notice; app/WeChat handle sessions natively). */
html[data-shell] #hkpl-cookie-banner { display:none !important; }
/* Clubs filter labels shattered one-letter-per-line (flex row crushed the label column). Keep on one line. */
html[data-shell] [data-i18n="clubs_show_venues"],
html[data-shell] [data-i18n="clubs_division"],
html[data-shell] [data-i18n*="division"] { white-space:nowrap !important; flex-shrink:0 !important; }
html[data-shell] label:has([data-i18n="clubs_show_venues"]) { white-space:nowrap !important; flex-shrink:0 !important; }

/* ===== v3: hide the floating command-palette pill under shells (real apps don't show it) ===== */
html[data-shell] .cmdk-hint { display:none !important; }
/* mobile app-bar search button — matches the app-bar icon buttons */
html[data-shell="webview-mobile"] .shell-search-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; margin:0; border:0; background:transparent;
  color:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; border-radius:10px;
}
html[data-shell="webview-mobile"] .shell-search-btn:active { background:rgba(0,0,0,.06); }

/* Redundant under shells: app.html league-portal "Menu" pill (nav lives in the shell tab bar / grid / sidebar). */
html[data-shell] #portal-modebar { display:none !important; }

/* ===== v446 shared: inner-page hero + floating chat FAB (top blocker across all templates) ===== */
/* The 260px stock-photo hero repeats the page title (already in the app-bar / nav / sidebar) and
   burns the fold. Under shells, collapse it to a clean compact solid-brand header — keep the title
   and any real content (e.g. clubs stat band), drop the photo + eyebrow pill + oversized padding. */
html[data-shell] section.bg-hero {
  background-image:none !important;
  background:var(--brand,#00913a) !important;
  padding-top:14px !important; padding-bottom:14px !important;
}
html[data-shell] section.bg-hero .hero-pill,
html[data-shell] section.bg-hero .skew.hero-pill { display:none !important; }
html[data-shell] section.bg-hero h1 { font-size:1.4rem !important; margin-top:2px !important; line-height:1.2 !important; }
html[data-shell] section.bg-hero p { font-size:.92rem !important; }
/* Floating support-chat FAB is a web tell hovering over the tab bar on app/mini shells. */
html[data-shell="webview-mobile"] #hkpl-chat-fab,
html[data-shell="wechat-mini"] #hkpl-chat-fab { display:none !important; }

/* ===== v447: clubs "Find a Team" filter — stack to full-width on app/mini shells ===== */
/* The flex justify-between bar squeezes #filter-pills into a narrow right column so each pill
   wraps one-per-line with a huge empty gutter. Give the controls + pills the full row width. */
html[data-shell="webview-mobile"] .flex.items-center.gap-3:has(#show-venues),
html[data-shell="wechat-mini"] .flex.items-center.gap-3:has(#show-venues) {
  width:100% !important; flex-wrap:wrap !important; gap:10px !important;
}
html[data-shell="webview-mobile"] .flex.items-center.gap-2:has(#filter-pills),
html[data-shell="wechat-mini"] .flex.items-center.gap-2:has(#filter-pills) {
  width:100% !important; flex-wrap:wrap !important;
}
html[data-shell="webview-mobile"] #filter-pills,
html[data-shell="wechat-mini"] #filter-pills { width:100% !important; }

/* ===== v448 cross-shell: duplicate hero title + hero decorations + coaching hero ===== */
/* Mobile app-bar / WeChat nav title already show the page title — drop the duplicate hero h1. */
html[data-shell="webview-mobile"] section.bg-hero h1,
html[data-shell="wechat-mini"] section.bg-hero h1 { display:none !important; }
/* Kill the decorative radial + the misaligned translucent scrim band behind hero titles (all shells). */
html[data-shell] section.bg-hero::before,
html[data-shell] section.bg-hero::after { display:none !important; background:none !important; content:none !important; }
html[data-shell] section.bg-hero h1 { background:none !important; box-shadow:none !important; }
/* Coaching marketing hero (.coach-hero) is a different class — compact it under shells too. */
html[data-shell] .coach-hero { padding-top:22px !important; padding-bottom:22px !important; }
html[data-shell] .coach-hero::before, html[data-shell] .coach-hero::after { display:none !important; }
html[data-shell="webview-mobile"] .coach-hero h1,
html[data-shell="wechat-mini"] .coach-hero h1 { font-size:1.5rem !important; line-height:1.18 !important; }

/* ===== v449: WeChat black standings header + red announcement strip + onboarding coach-mark ===== */
/* WeChat had no thead rule -> fell back to the base black header (off-palette). Light-grey group strip. */
html[data-shell="wechat-mini"] table.stand-tbl thead th {
  background:#f4f4f5 !important; color:#888 !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.03em;
  text-transform:uppercase; border:0 !important; padding:10px 12px !important; white-space:nowrap;
}
/* The full-bleed red announcement strip (📢) is a web tell over app/mini chrome — dismissible + non-critical. */
html[data-shell="webview-mobile"] #hkpl-announce-bar,
html[data-shell="wechat-mini"] #hkpl-announce-bar { display:none !important; }
/* One-time "Simple or Advanced" coach-mark floats over shell chrome (sidebar footer) — suppress under shells. */
html[data-shell] #hkpl-mode-hint { display:none !important; }

/* ===== v450: hide title-only green hero bands (schedule/standings/results/players) on app/mini shells;
   keep clubs (its hero carries the stat counters #stat-*). Removes the redundant "Full season" band +
   the truncated tiebreak paragraph the graders flagged. ===== */
html[data-shell="webview-mobile"] section.bg-hero:not(:has(.tab-num)),
html[data-shell="wechat-mini"] section.bg-hero:not(:has(.tab-num)) { display:none !important; }

/* ===== v452: hide the in-content duplicate page title (tagged by shell-tools.js) on app/mini shells ===== */
html[data-shell="webview-mobile"] [data-shell-duptitle="1"],
html[data-shell="wechat-mini"] [data-shell-duptitle="1"] { display:none !important; }

/* ===== v454: desktop = sidebar-only nav. Hide the in-page league pill-row (its unique items
   Club Rankings / Team Stats / Top Players now live in the sidebar Compete group). ===== */
html[data-shell="desktop-pro"] #league-nav { display:none !important; }

/* ===== v459: division tab strip scroll+fade + onboarding web-header hidden under shells ===== */
html[data-shell] #div-tabs, html[data-shell] #division-tabs {
  flex-wrap:nowrap !important; overflow-x:auto !important; scrollbar-width:none;
  padding-right:28px; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
          mask-image:linear-gradient(90deg,#000 88%,transparent);
}
html[data-shell] #div-tabs::-webkit-scrollbar, html[data-shell] #division-tabs::-webkit-scrollbar { display:none; }
html[data-shell] #div-tabs > *, html[data-shell] #division-tabs > * { flex:0 0 auto; }
/* Onboarding/settings page ships its own web header — the shell already provides chrome, so hide it. */
html[data-shell] .onb-webhdr { display:none !important; }

/* ===== v463 shell-chrome families ===== */
/* Footer account portal / authed chip drifted to gold (--accent) on some pages — force brand green. */
html[data-shell] .sh-portal, html[data-shell] .sh-portal *,
html[data-shell] .signin-btn.authed, html[data-shell] .signin-btn.authed * { color:var(--brand,#00913a) !important; }
/* When authed, never show the anonymous "Sign in" in the shell chrome (the #hkpl-sh-scoped hide no longer
   matches once .rhs is re-homed). */
html[data-shell] #dp-sidebar:has(.signin-btn.authed) .signin-btn:not(.authed),
html[data-shell] #dp-sidebar:has(.sh-portal) .signin-btn:not(.authed),
html[data-shell] .rhs.shell-tools:has(.signin-btn.authed) .signin-btn:not(.authed) { display:none !important; }
/* Desktop: trim the wasted title hero bands to a compact header (keeps the title — no sidebar page title). */
html[data-shell="desktop-pro"] section.bg-hero { padding-top:18px !important; padding-bottom:18px !important; }
html[data-shell="desktop-pro"] section.bg-hero h1 { font-size:1.8rem !important; line-height:1.15 !important; }
/* Full-bleed .site-hero (matchup etc.) must stay in the content column, not slide under the fixed sidebar. */
html[data-shell="desktop-pro"] .site-hero {
  width:auto !important; max-width:100% !important;
  margin-left:0 !important; margin-right:0 !important; left:auto !important; right:auto !important; transform:none !important;
}
/* WeChat: card-cap full-bleed marketing heroes (coaching/about) so they read on the grey/white system. */
html[data-shell="wechat-mini"] .site-hero, html[data-shell="wechat-mini"] .coach-hero {
  margin:10px !important; border-radius:14px !important; overflow:hidden !important;
}

/* ===== v464 final chrome ===== */
/* Stale hardcoded "Sign in / Members & players" footer — hide when authed (account chip present). */
html[data-shell="desktop-pro"] #dp-sidebar:has(.signin-btn.authed) #dp-signin,
html[data-shell="desktop-pro"] #dp-sidebar:has(.sh-portal) #dp-signin,
html[data-shell="desktop-pro"] #dp-sidebar:has(.dp-tools .sh-portal) #dp-signin { display:none !important; }
/* settings.html ships its own web header + breadcrumb — the shell already provides chrome. */
html[data-shell] .settings-webhdr { display:none !important; }
/* Announcement bar: hide on desktop too (was only mobile/wechat). */
html[data-shell="desktop-pro"] #hkpl-announce-bar { display:none !important; }
/* DOB nudge "Add now" CTA -> brand green (was amber). */
html[data-shell] #dob-nudge a[href], html[data-shell] #dob-nudge button { background:var(--brand,#00913a) !important; color:#fff !important; border-color:var(--brand,#00913a) !important; }

/* ===== v465: unify header — hide the page-hero body strap on app/mini shells (title lives in the bar);
   keep genuine stat bands (.tab-num). Complements the section.bg-hero rule. ===== */
html[data-shell="webview-mobile"] section.page-hero:not(:has(.tab-num)),
html[data-shell="wechat-mini"] section.page-hero:not(:has(.tab-num)),
html[data-shell="webview-mobile"] .page-hero:not(:has(.tab-num)):not(section),
html[data-shell="wechat-mini"] .page-hero:not(:has(.tab-num)):not(section) { display:none !important; }
/* Safety: the shell bar title must always show (never hidden by the dup-title tagger). */
html[data-shell="wechat-mini"] #wm-bar .wm-title,
html[data-shell="webview-mobile"] #wv-appbar .wv-title { display:block !important; }

/* ===== v466: COMPLETE header-unify family — title lives ONLY in the shell bar on mobile/wechat.
   Hide every in-content page-title hero/strap variant + the lime skew eyebrow + the duplicated content h1.
   Keep genuine stat bands (.tab-num, e.g. clubs 313/49/..). ===== */
html[data-shell="webview-mobile"] section.site-hero:not(:has(.tab-num)),
html[data-shell="wechat-mini"] section.site-hero:not(:has(.tab-num)),
html[data-shell="webview-mobile"] .site-hero:not(:has(.tab-num)),
html[data-shell="wechat-mini"] .site-hero:not(:has(.tab-num)),
html[data-shell="webview-mobile"] main > .hero:not(:has(.tab-num)),
html[data-shell="wechat-mini"] main > .hero:not(:has(.tab-num)) { display:none !important; }
/* lime/chartreuse skewed eyebrow pill (HKPL / PLAYER PROFILE / ACCOUNT) */
html[data-shell="webview-mobile"] .hero-pill, html[data-shell="wechat-mini"] .hero-pill,
html[data-shell="webview-mobile"] .skew, html[data-shell="wechat-mini"] .skew { display:none !important; }
/* duplicated page-title H1 in content (feed/h2h/detail-match plain H1) — the bar already shows it */
html[data-shell="webview-mobile"] main h1:not(.wm-title):not(.wv-title):not([data-keep-h1]),
html[data-shell="wechat-mini"] main h1:not(.wm-title):not(.wv-title):not([data-keep-h1]) { display:none !important; }

/* ===== v467: desktop footer utility cluster — force uniform PLAIN styling (some pages reverted to the
   browser-default boxed button because #hkpl-sh-scoped styles don't follow the re-homed .rhs). ===== */
html[data-shell="desktop-pro"] .dp-tools .rhs button,
html[data-shell="desktop-pro"] .dp-tools .rhs .sh-simple-toggle,
html[data-shell="desktop-pro"] .dp-tools .rhs [role="button"] {
  -webkit-appearance:none !important; appearance:none !important;
  border:0 !important; background:transparent !important; box-shadow:none !important;
}

/* ===== v469 final polish (all shells) ===== */
/* DOB "add your date of birth" nag is a web-tell on the Home tab — hide under templates (addable in profile). */
html[data-shell] #dob-nudge { display:none !important; }
/* Coaching secondary "Share this page" marketing button. */
html[data-shell] #c-cta2 { display:none !important; }
/* Settings "ACCOUNT" eyebrow pill uses inline skewX (missed by the .skew class rule) — hide the pill. */
html[data-shell] *:has(> [data-i18n="settings_eyebrow"]) { display:none !important; }

/* ===== v469b: catch duplicate content H1 on pages with NO <main> (feed/h2h/detail-match) ===== */
html[data-shell="webview-mobile"] body h1:not(.wm-title):not(.wv-title):not([data-keep-h1]),
html[data-shell="wechat-mini"] body h1:not(.wm-title):not(.wv-title):not([data-keep-h1]) { display:none !important; }

/* v474: no floating FABs over the bottom tab bar in the app/mini shells (chat/scroll/etc.). */
html[data-shell="webview-mobile"] #hkpl-chat-fab, html[data-shell="wechat-mini"] #hkpl-chat-fab,
html[data-shell="webview-mobile"] .hkpl-chat-fab, html[data-shell="wechat-mini"] .hkpl-chat-fab,
html[data-shell="webview-mobile"] [class*="scroll-top"], html[data-shell="wechat-mini"] [class*="scroll-top"] { display:none !important; }

/* BUGFAB-ABOVE-TABBAR-V5: the feedback FAB (.hkpl-bug-fab, z9998) sat over the bottom tab bar
   and hid Players/Me. Lift it clear of the tab bar in the mobile/wechat shells. */
html[data-shell="webview-mobile"] .hkpl-bug-fab, html[data-shell="wechat-mini"] .hkpl-bug-fab {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
/* SETTINGS-PANEL-ROWS-V5: the re-homed controls are icon-first pills built for a horizontal bar;
   in the vertical panel give every row the same full-width, left-aligned, single-line shape. */
.shell-tools-panel .rhs.shell-tools > * { display:flex !important; align-items:center; justify-content:flex-start;
  gap:10px; width:100%; min-height:42px; box-sizing:border-box; padding:9px 11px !important; border-radius:10px;
  flex-direction:row !important; }
.shell-tools-panel .rhs.shell-tools > *:hover { background:var(--accent-soft,#eef6f1); }
.shell-tools-panel .dm-pill, .shell-tools-panel .sh-switch { flex-direction:row !important; }
/* drop the redundant in-panel Menu (there is already a ☰) and the empty stray switch */
.shell-tools-panel .rhs.shell-tools > .hamburger, .shell-tools-panel .rhs.shell-tools > .sh-switch:empty { display:none !important; }

/* SETTINGS-PANEL-POLISH-V6: make every row self-explanatory + tighten the sparse column.
   The dark toggle is icon-only (moon+sun) — label it from its aria-label and show one icon. */
.shell-tools-panel .rhs.shell-tools { gap:2px !important; }
.shell-tools-panel .rhs.shell-tools > * { min-height:40px !important; }
.shell-tools-panel #hkpl-dm-pill { gap:9px; }
.shell-tools-panel #hkpl-dm-pill::after { content: attr(aria-label); font-size:13px; font-weight:500; color:inherit; }
.shell-tools-panel #hkpl-dm-pill .dm-sun { display:none !important; }
html[data-theme="dark"] .shell-tools-panel #hkpl-dm-pill .dm-sun,
html.hkpl-dark .shell-tools-panel #hkpl-dm-pill .dm-sun { display:inline-block !important; }
html[data-theme="dark"] .shell-tools-panel #hkpl-dm-pill .dm-moon,
html.hkpl-dark .shell-tools-panel #hkpl-dm-pill .dm-moon { display:none !important; }
/* keep dropdown popups (text-size / language) from inflating their row height */
.shell-tools-panel .fs-dd, .shell-tools-panel .lang { min-height:40px; align-items:center; }
.shell-tools-panel .fs-dd > .fs-pill, .shell-tools-panel .lang > button { width:100%; justify-content:flex-start; }

/* HOME-HERO-CLIP-FIX-V8 (2026-09-06): the SIMPLE landing hero (#hkpl-basic-landing > .bg-hkpl-600)
   is a Tailwind-class banner the section.bg-hero rules never reach; under the app/mini shells it
   clamped to ~100px with overflow:hidden and clipped the welcome tagline 2nd line. Let it fit. */
html[data-shell="webview-mobile"] #hkpl-basic-landing > .bg-hkpl-600,
html[data-shell="wechat-mini"] #hkpl-basic-landing > .bg-hkpl-600 {
  height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
}
html[data-shell="webview-mobile"] #hkpl-basic-herobox,
html[data-shell="wechat-mini"] #hkpl-basic-herobox { padding-top: 20px !important; padding-bottom: 44px !important; }

/* SETTINGS-GRID-V1 (2026-09-07): render the wechat/mobile tools panel as a tidy icon+label MENU GRID
   (matches the wechat-mini home tile language) instead of a plain vertical list. Light-safe; scoped to panel. */
.shell-tools-panel { width: 268px !important; padding: 12px !important; border-radius: 16px !important; }
.shell-tools-panel .rhs.shell-tools {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  align-items: stretch !important;
}
.shell-tools-panel .rhs.shell-tools > * {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 74px !important;
  padding: 9px 4px !important;
  border-radius: 14px !important;
  background: var(--surface-2, #f3f5f4) !important;
  color: var(--ink, #1f2a24) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  border: 1px solid var(--line, #e7ebe9) !important;
  white-space: normal !important;
  overflow: hidden !important;
}
.shell-tools-panel .rhs.shell-tools > *:hover { background: var(--accent-soft, #eef6f1) !important; }
.shell-tools-panel .rhs.shell-tools svg,
.shell-tools-panel .rhs.shell-tools img { width: 24px !important; height: 24px !important; flex: none !important; }
/* My Team + Sign out = full-width action rows across the grid */
.shell-tools-panel .rhs.shell-tools > .sh-portal,
.shell-tools-panel .rhs.shell-tools > .signin-btn {
  grid-column: 1 / -1 !important;
  flex-direction: row !important;
  min-height: 46px !important;
  gap: 8px !important;
  font-size: 13px !important;
}
.shell-tools-panel .rhs.shell-tools > .signin-btn {
  background: var(--brand-50, #ecfdf5) !important;
  color: var(--brand-ink, #00622a) !important;
  border-color: var(--brand-200, #bbf7d0) !important;
}
/* drop the redundant hamburger tile (the bottom tab bar is the nav) */
.shell-tools-panel .rhs.shell-tools > .hamburger { display: none !important; }

/* SETTINGS-GRID-V2 (2026-09-07): group the icon tiles first, then My Team / Signed-in / Sign out as
   full-width rows at the bottom; style + include the real sign-out (.sh-signout); hide empty containers. */
.shell-tools-panel .rhs.shell-tools > .sh-notif,
.shell-tools-panel .rhs.shell-tools > .sh-simple-toggle,
.shell-tools-panel .rhs.shell-tools > .fs-dd,
.shell-tools-panel .rhs.shell-tools > .dm-pill,
.shell-tools-panel .rhs.shell-tools > .lang { order: 1; }
.shell-tools-panel .rhs.shell-tools > .sh-portal   { order: 2; }
.shell-tools-panel .rhs.shell-tools > .signin-btn  { order: 3; }
.shell-tools-panel .rhs.shell-tools > .sh-signout  { order: 4; }
.shell-tools-panel .rhs.shell-tools > .sh-portal,
.shell-tools-panel .rhs.shell-tools > .signin-btn,
.shell-tools-panel .rhs.shell-tools > .sh-signout {
  grid-column: 1 / -1 !important;
  flex-direction: row !important;
  min-height: 44px !important;
  gap: 8px !important;
  font-size: 13px !important;
}
.shell-tools-panel .rhs.shell-tools > .sh-signout {
  background: var(--err-bg, #fef2f2) !important;
  color: var(--err-fg, #b91c1c) !important;
  border-color: var(--err-line, #fecaca) !important;
  font-weight: 700 !important;
}
.shell-tools-panel .rhs.shell-tools > .sh-switch { display: none !important; }

/* ===== NATIVE-LIST-V1 (2026-09-07): data-tables render as native list cells under the mobile shells.
   iOS-grouped-list feel for webview-mobile; weui-cell feel for wechat-mini. Only active under a shell. ===== */
html[data-shell="webview-mobile"] .nlist,
html[data-shell="wechat-mini"] .nlist {
  display: flex; flex-direction: column; margin: 0 0 16px;
  background: var(--card, #fff); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line, #e6e8eb); box-shadow: 0 1px 2px rgba(16,24,32,.05);
}
html[data-shell="wechat-mini"] .nlist { border-radius: 8px; box-shadow: none; }
.nlist-hdr {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, #8a9199); padding: 4px 4px 8px;
}
.nlist-cell {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-height: 60px;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--line, #f0f1f3);
  -webkit-tap-highlight-color: transparent;
}
.nlist-cell:last-child { border-bottom: 0; }
.nlist-cell:active { background: var(--surface-2, #f2f3f5); }
.nlist-rank {
  width: 24px; text-align: center; font-weight: 800; font-size: 14px;
  color: var(--muted, #a0a6ad); flex: none; font-variant-numeric: tabular-nums;
}
/* A11Y-A2 (WCAG): podium colors, bold 14px (not large-text), need >=4.5:1. On the white LIGHT card
   the originals failed (gold 2.26 / silver 2.63 / bronze 3.12). Darkened for light below; the dark
   card (#161d19) keeps the brighter originals (gold 7.59 / silver 6.52 / bronze 5.50, all pass). */
.nlist-rank.top1 { color: #9a6a00; } .nlist-rank.top2 { color: #6b7280; } .nlist-rank.top3 { color: #8a4b1f; }
html[data-theme="dark"] .nlist-rank.top1 { color: #e0a11c; }
html[data-theme="dark"] .nlist-rank.top2 { color: #9aa0aa; }
html[data-theme="dark"] .nlist-rank.top3 { color: #cd7f4a; }
.nlist-avatar {
  width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: none;
  background: var(--surface-2, #eef0f2); border: 1px solid var(--line, #eef0f2);
}
.nlist-main { flex: 1; min-width: 0; }
.nlist-title {
  font-weight: 600; font-size: 15px; color: var(--ink, #1c1e21); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nlist-sub { font-size: 12px; color: var(--muted, #8a9199); margin-top: 3px; font-variant-numeric: tabular-nums; }
.nlist-trail { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.nlist-value { font-weight: 800; font-size: 19px; color: var(--brand, #008034); font-variant-numeric: tabular-nums; line-height: 1; }
.nlist-vlabel { font-size: 10px; color: var(--muted, #a0a6ad); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
/* iOS chevron affordance on tappable cells */
html[data-shell="webview-mobile"] a.nlist-cell::after {
  content: ""; width: 8px; height: 8px; flex: none; margin-left: 2px; align-self: center;
  border-right: 2px solid var(--muted-3, #c4c9cf); border-top: 2px solid var(--muted-3, #c4c9cf); transform: rotate(45deg);
}

/* ===== NATIVE-SEGMENTED-V1 (2026-09-07): div-tabs + group-tabs render as native segmented controls
   (iOS gray track + white thumb) under the mobile shells. Overrides the web pill/border styling. ===== */
html[data-shell="webview-mobile"] #div-tabs,
html[data-shell="wechat-mini"] #div-tabs {
  background: var(--surface-2, #eceef0) !important; border: 0 !important; border-radius: 11px !important;
  padding: 3px !important; gap: 2px !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
html[data-shell="webview-mobile"] .div-tab,
html[data-shell="wechat-mini"] .div-tab {
  border: 0 !important; border-radius: 8px !important; background: transparent !important;
  color: var(--muted, #6b7280) !important; font-weight: 600 !important; padding: 8px 16px !important;
  box-shadow: none !important; white-space: nowrap; letter-spacing: normal !important; text-transform: none !important;
}
html[data-shell="webview-mobile"] .div-tab.tab-active,
html[data-shell="wechat-mini"] .div-tab.tab-active {
  background: var(--card, #fff) !important; color: var(--ink, #1c1e21) !important;
  box-shadow: 0 1px 3px rgba(16,24,32,.14) !important;
}
/* group strip (VIEW: ALL GROUPS / COMBINED / GROUP A…) — scrollable native segmented */
html[data-shell="webview-mobile"] #group-tabs,
html[data-shell="wechat-mini"] #group-tabs {
  background: var(--surface-2, #eceef0) !important; border-radius: 11px !important; padding: 3px !important;
  border: 0 !important; gap: 2px !important;
}
html[data-shell="webview-mobile"] .group-tab,
html[data-shell="wechat-mini"] .group-tab {
  border: 0 !important; border-radius: 8px !important; background: transparent !important;
  color: var(--muted, #6b7280) !important; padding: 7px 14px !important; box-shadow: none !important;
  letter-spacing: normal !important; text-transform: none !important; font-weight: 600 !important;
}
html[data-shell="webview-mobile"] .group-tab.bg-hkpl-500,
html[data-shell="wechat-mini"] .group-tab.bg-hkpl-500 {
  background: var(--card, #fff) !important; color: var(--ink, #1c1e21) !important;
  box-shadow: 0 1px 3px rgba(16,24,32,.14) !important;
}
/* the "VIEW:" label above the group strip — quieter, native */
html[data-shell="webview-mobile"] #group-tabs + *,
html[data-shell="wechat-mini"] .group-tabs-label { }

/* ===== NATIVE-SUBNAV-V1 (2026-09-07): the league sub-nav (Club Rankings / Top Players / …) and section
   labels render native (subtle filled pills, quiet headers) under the mobile shells. ===== */
html[data-shell="webview-mobile"] #league-nav a,
html[data-shell="wechat-mini"] #league-nav a {
  background: var(--surface-2, #f1f3f5) !important; color: var(--ink, #3a3f45) !important;
  border: 0 !important; border-radius: 999px !important; padding: 7px 15px !important;
  font-weight: 600 !important; font-size: 13px !important; box-shadow: none !important; white-space: nowrap;
}
html[data-shell="webview-mobile"] #league-nav a:active,
html[data-shell="wechat-mini"] #league-nav a:active { background: var(--surface-3, #e6e9ec) !important; }
/* group section label (GROUP A green pill) → quiet native section header */
html[data-shell="webview-mobile"] .stand-group-label,
html[data-shell="webview-mobile"] [class*="bg-hkpl-500"].inline-flex:not(.group-tab),
html[data-shell="wechat-mini"] .stand-group-label { }
/* "VIEW:" caption — quieter */
html[data-shell="webview-mobile"] .view-caption, html[data-shell="wechat-mini"] .view-caption { color: var(--muted,#9aa0a6) !important; }

/* ===== SETTINGS-MENU-V1 (2026-09-08): purpose-built preferences gear + panel for all 3 shells.
   Premium deep-green/lime, rounded, tabular-nums, system font; explicit light + dark palettes so the
   panel stays readable when data-theme="dark" is set. Colors are self-contained (not reliant on shell
   tokens) so the panel renders correctly on every shell. ===== */
:root {
  --set-bg: #ffffff; --set-ink: #14231b; --set-muted: #5d6b63; --set-line: #e6ebe8;
  --set-track: #eef2f0; --set-brand: #0aa065; --set-brand-2: #053d24; --set-lime: #c6f24a;
  --set-shadow: 0 18px 50px rgba(5,42,26,.22); --set-hover: #f3f7f4;
}
html[data-theme="dark"] {
  --set-bg: #12211a; --set-ink: #e9f1ec; --set-muted: #9db0a6; --set-line: #223a2e;
  --set-track: #1b2c24; --set-brand: #16c07d; --set-brand-2: #0aa065; --set-lime: #c6f24a;
  --set-shadow: 0 18px 50px rgba(0,0,0,.5); --set-hover: #1a2c23;
}

/* ---- gear button (per-shell sizing) ---- */
.hkpl-set-btn {
  -webkit-appearance: none; appearance: none; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: inherit;
  padding: 0; border-radius: 10px; flex: 0 0 auto; -webkit-tap-highlight-color: transparent;
}
.hkpl-set-btn:active { background: rgba(0,0,0,.06); }
html[data-shell="desktop-pro"] .hkpl-set-wrap { position: relative; display: inline-flex; align-items: center; }
html[data-shell="desktop-pro"] .hkpl-set-btn-dp { width: 40px; height: 40px; border-radius: 999px; color: var(--ink, #0a0e0c); }
html[data-shell="desktop-pro"] .hkpl-set-btn-dp:hover { background: var(--surface-2, #f1f4f2); }
html[data-shell="webview-mobile"] .hkpl-set-btn-wv { width: 40px; height: 40px; }
html[data-shell="wechat-mini"] .hkpl-set-searchrow { display: flex; align-items: center; gap: 10px; }
html[data-shell="wechat-mini"] .hkpl-set-searchrow .wm-search { flex: 1 1 auto; margin: 0 !important; }
html[data-shell="wechat-mini"] .hkpl-set-btn-wm {
  width: 42px; height: 42px; border-radius: 12px; color: #fff; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--set-brand) 0%, var(--set-brand-2) 100%);
  box-shadow: 0 4px 12px rgba(4,107,65,.28);
}

/* ---- shared panel chrome (dropdown on desktop, sheet on mobile/wechat) ---- */
.hkpl-set-drop, .hkpl-set-sheet {
  background: var(--set-bg); color: var(--set-ink); box-shadow: var(--set-shadow);
  font: 500 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang HK", "Microsoft JhengHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hkpl-set-drop {
  position: absolute; top: calc(100% + 12px); right: 0; width: 300px; z-index: 900;
  border: 1px solid var(--set-line); border-radius: 16px; padding: 6px 16px 14px;
  display: none; transform-origin: top right;
}
.hkpl-set-drop.open { display: block; animation: hkpl-set-pop .16s ease; }
@keyframes hkpl-set-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
/* bottom sheet + backdrop */
.hkpl-set-backdrop {
  position: fixed; inset: 0; background: rgba(4,20,12,.44); z-index: 2147483646;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
}
.hkpl-set-backdrop.open { opacity: 1; visibility: visible; }
.hkpl-set-sheet {
  /* SHEET-ABOVE-TABBAR-V1 (2026-09-09, shell UAT): the wechat/app bottom tab-bar uses z-index 2147483000,
     which painted over the bottom of this sheet and occluded the Sign Out row when logged in. Raise the
     sheet + backdrop above the tab-bar so the whole sheet (incl. Sign Out) is reachable. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483647; width: 100%;
  border-radius: 22px 22px 0 0; padding: 6px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .28s cubic-bezier(.32,.72,0,1);
  max-width: 640px; margin: 0 auto;
}
.hkpl-set-sheet.open { transform: translateY(0); }
.hkpl-set-sheet::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 999px;
  background: var(--set-line); margin: 8px auto 2px;
}

/* ---- header ---- */
.hkpl-set-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 8px; }
.hkpl-set-title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--set-ink); position: relative; padding-left: 12px; }
.hkpl-set-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 15px; border-radius: 999px; background: linear-gradient(180deg, var(--set-lime), var(--set-brand)); }
.hkpl-set-x { -webkit-appearance: none; appearance: none; border: 0; background: transparent; color: var(--set-muted); cursor: pointer; width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } /* A11Y-A3: 34x34 -> 40x40 tap target (glyph unchanged) */
.hkpl-set-x:active { background: var(--set-hover); }

/* ---- rows ---- */
.hkpl-set-body { display: block; }
.hkpl-set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--set-line); }
.hkpl-set-row:first-child { border-top: 0; }
.hkpl-set-label { font-size: 14.5px; font-weight: 600; color: var(--set-ink); white-space: nowrap; }

/* ---- Edit Profile (prominent first action → /settings.html) ---- */
.hkpl-set-editprofile {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  margin: 6px 0 4px; padding: 13px 14px; border-radius: 14px;
  background: linear-gradient(135deg, var(--set-brand) 0%, var(--set-brand-2) 100%);
  color: #fff; box-shadow: 0 6px 18px rgba(4,107,65,.26);
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease, box-shadow .12s ease;
}
.hkpl-set-editprofile:hover { box-shadow: 0 8px 22px rgba(4,107,65,.32); }
.hkpl-set-editprofile:active { transform: translateY(1px) scale(.995); }
.hkpl-set-ep-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(198,242,74,.22); color: var(--set-lime);
}
.hkpl-set-ep-lbl { flex: 1 1 auto; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.hkpl-set-ep-chevwrap { flex: 0 0 auto; display: inline-flex; color: rgba(255,255,255,.72); }
html[data-theme="dark"] .hkpl-set-editprofile { box-shadow: 0 6px 18px rgba(0,0,0,.45); }
html[data-theme="dark"] .hkpl-set-ep-ic { background: rgba(198,242,74,.16); }

/* ---- segmented control (language / text size / display mode) ---- */
.hkpl-set-seg { display: inline-flex; align-items: center; background: var(--set-track); border-radius: 11px; padding: 3px; gap: 2px; }
.hkpl-set-seg button {
  -webkit-appearance: none; appearance: none; border: 0; background: transparent; cursor: pointer;
  /* A11Y-A3: >=40x40 tap target (was 43x27). Glyph size unchanged; flex-center keeps it visually put. */
  min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 13px; border-radius: 8px; font-weight: 700; font-size: 13px;
  color: var(--set-muted); line-height: 1; transition: background .15s ease, color .15s ease;
  font-variant-numeric: tabular-nums; font-family: inherit;
}
.hkpl-set-seg button.on {
  background: linear-gradient(135deg, var(--set-brand) 0%, var(--set-brand-2) 100%);
  color: #fff; box-shadow: 0 2px 8px rgba(4,107,65,.28);
}
.hkpl-set-seg-fs button { min-width: 40px; padding: 6px 10px; font-weight: 800; color: var(--set-ink); } /* A11Y-A3: min-width 34->40; min-height 40 inherited from .hkpl-set-seg button */
.hkpl-set-seg-fs button.on { color: #fff; }

/* ---- dark-mode toggle switch ---- */
.hkpl-set-toggle {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; padding: 0;
  position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--set-track);
  flex: 0 0 auto; transition: background .2s ease;
}
.hkpl-set-toggle .knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform .2s ease;
}
.hkpl-set-toggle.on { background: linear-gradient(135deg, var(--set-brand) 0%, var(--set-brand-2) 100%); }
.hkpl-set-toggle.on .knob { transform: translateX(20px); }

/* ---- retire the older re-homed .shell-tools-btn PREFS gear ONLY where our clean panel rendered
   (webview-mobile + wechat-mini). Auth/nav stay in the hamburger (#hkpl-mobile) / tab bar, so nothing
   is lost. Gated on html.hkpl-set-ready so if our widget fails to place, the legacy gear survives. ===== */
html.hkpl-set-ready[data-shell="webview-mobile"] .shell-tools-btn,
html.hkpl-set-ready[data-shell="webview-mobile"] .shell-tools-panel,
html.hkpl-set-ready[data-shell="wechat-mini"] .shell-tools-btn,
html.hkpl-set-ready[data-shell="wechat-mini"] .shell-tools-panel { display: none !important; }