.mode-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
a.mode-tab { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.mode-tab:hover { color: var(--accent); background: var(--accent-soft); }
a.mode-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stats-shell { width: min(1180px, calc(100% - 24px)); max-width: none; padding: 8px 0 28px; }
.stats-shell .topbar { font-size: 16px; flex-wrap: wrap; margin-bottom: 0; }
.stats-shell .topbar h1 { font-size: 24px; letter-spacing: 0; }
.stats-shell .topbar .mode-tabs { flex: 0 0 auto; }
.stats-shell #themeToggle { margin-left: 0; font-size: 12px; }
.stats-heading { padding: 18px 4px; gap: 12px; }
.stats-heading h2 { font-size: 18px; }
.stats-heading .intro { margin-top: 4px; font-size: 12px; }
.snapshot-mark strong { font-size: 16px; }
.stats-controls { padding: 14px; gap: 14px; border-radius: 12px; background: var(--panel-solid); box-shadow: var(--shadow); }
.stats-shell .results-heading { margin-top: 18px; }
.stats-controls { margin-top: 2px; }
.matrix-toggle { position: relative; padding: 0 12px; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-solid); font-size: 12px; color: var(--text-secondary); }
.matrix-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.matrix-switch { display: inline-block; position: relative; width: 28px; height: 16px; border-radius: 10px; background: var(--line-strong); transition: background var(--motion-fast); }
.matrix-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel-solid); transition: transform var(--motion-fast); }
.matrix-toggle:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.matrix-toggle input:checked + .matrix-switch { background: var(--accent); }
.matrix-toggle input:checked + .matrix-switch::after { transform: translateX(12px); }
.matrix-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.matrix-toggle:hover { border-color: var(--accent); }
.stats-shell .results, .stats-shell .guild-server { border-radius: 12px; box-shadow: var(--shadow-sm); }
@media (max-width: 800px) {
  .stats-shell .topbar .mode-tabs { order: 3; width: 100%; }
  .stats-shell .topbar { gap: 8px; }
  .mode-tabs .mode-tab { min-width: 0; padding-left: 7px; padding-right: 7px; }
}
@media (max-width: 520px) {
  .stats-shell { padding: 6px 0 24px; }
  .stats-shell .topbar h1 { font-size: 21px; }
  .stats-heading { display: flex; align-items: flex-start; padding: 14px 2px; }
  .snapshot-mark { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
  .snapshot-mark strong { font-size: 14px; }
  .stats-heading .intro { max-width: 180px; }
  .stats-shell #themeToggle { padding: 6px 9px; }
  .stats-shell .mode-tab { min-height: 40px; font-size: 12px; }
}

.statistics-filter-toggle { display: none; }
@media (max-width: 800px) {
  .statistics-filter-shell { position: sticky; top: 8px; z-index: 18; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); box-shadow: var(--shadow-lg); }
  .statistics-filter-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 0; background: transparent; box-shadow: none; text-align: left; }
  .statistics-filter-toggle:hover { box-shadow: none; }
  .statistics-filter-toggle > span:first-child { min-width: 0; }
  .statistics-filter-toggle small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
  .statistics-filter-toggle strong { display: block; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .filter-chevron { width: 7px; height: 7px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(225deg); margin: 0 5px; flex: none; }
  .is-mobile-collapsed .filter-chevron { transform: rotate(45deg); }
  .statistics-filter-shell .stats-controls { border: 0; border-top: 1px solid var(--line); box-shadow: none; margin: 0; border-radius: 0 0 12px 12px; max-height: 65dvh; overflow-y: auto; }
  .statistics-filter-shell.is-mobile-collapsed .stats-controls { display: none; }
}

#dateSelect { width: 100%; min-width: 0; height: 44px; padding: 0 10px; font-size: 14px; border: 1px solid var(--line-strong); background: var(--panel-solid); color: var(--text); border-radius: 7px; }
#statisticsDateStatus:empty { display: none; }
#statisticsDateStatus { color: var(--bad); font-size: 11px; }

.matrix-toggle { padding: 0; min-height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--muted); }
.matrix-toggle:has(input:checked) { background: transparent; }
@media (max-width: 800px) {
  .statistics-filter-shell .stats-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px; }
  .stats-controls .control-field { min-width: 0; }
  .stats-controls .control-field:first-child { grid-column: 1; grid-row: 1; }
  .stats-controls .tier-field { grid-column: 2; grid-row: 1; min-width: 0; }
  .stats-controls .control-field:nth-child(2) { grid-column: 1; grid-row: 2; }
  .stats-controls .control-field:nth-child(3) { grid-column: 2; grid-row: 2; }
  .stats-controls .tier-switch { padding: 2px; }
  .stats-controls .tier-switch button { min-width: 0; padding: 0; font-size: 11px; min-height: 38px; }
  .stats-controls select, .stats-controls #dateSelect { height: 44px; font-size: 13px; padding-left: 7px; }
  .stats-shell .results-heading { gap: 4px 12px; }
  .matrix-toggle { font-size: 11px; margin-left: auto; }
  .matrix-switch { width: 24px; height: 14px; }
  .matrix-switch::after { width: 8px; height: 8px; }
  .matrix-toggle input:checked + .matrix-switch::after { transform: translateX(10px); }
}

.mobile-power-cards, .mobile-power-toolbar { display: none; }
@media (max-width: 1000px) {
  #results { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  #results > .table-scroll { display: none; }
  .mobile-power-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
  .mobile-power-toolbar label { display: flex; align-items: center; gap: 8px; }
  .mobile-power-toolbar select { width: auto; font-size: 12px; }
  .mobile-power-toolbar button { font-size: 12px; box-shadow: none; }
  .mobile-power-cards { display: grid; gap: 12px; }
  .mobile-power-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); padding: 14px; box-shadow: var(--shadow-sm); }
  .mobile-power-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .mobile-power-card header strong { display: flex; align-items: center; gap: 8px; font-size: 16px; }
  .mobile-power-card header small { font-size: 11px; padding: 2px 6px; background: var(--soft); border-radius: 4px; color: var(--muted); }
  .mobile-power-card header div > span { font-size: 11px; color: var(--muted); }
  .sample-badge { font-size: 11px; color: var(--muted); padding: 3px 7px; background: var(--soft); border-radius: 5px; }
  .mobile-average { padding: 16px 0; display: flex; justify-content: space-between; align-items: baseline; }
  .mobile-average > span, .mobile-power-metrics span, .mobile-tier-grid span { color: var(--muted); font-size: 12px; }
  .mobile-average strong { font-size: 28px; color: var(--power-num); font-variant-numeric: tabular-nums; line-height: 1.2; }
  .mobile-power-metrics { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-cool); border-radius: 8px; padding: 10px 12px; gap: 12px; }
  .mobile-power-metrics strong, .mobile-tier-grid strong { display: block; margin-top: 3px; font-size: 17px; font-variant-numeric: tabular-nums; }
  .mobile-power-card footer { margin-top: 10px; font-size: 11px; color: var(--muted); }
  .mobile-tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 0 4px; }
  .mobile-tier-grid small { color: var(--muted); font-size: 11px; }
}

/* Keep the view switch anchored when the matrix summary grows. */
#powerHeading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; }
#powerHeading > div { min-width: 0; }
#powerHeading .matrix-toggle { margin-left: 0; align-self: start; }
#powerHeading #resultSummary { overflow-wrap: anywhere; }

/* Both desktop views share the same table rhythm to avoid vertical jumps. */
@media (min-width: 601px) {
  #results > .table-scroll > table > thead > tr { height: 64px; }
  #results > .table-scroll > table > tbody > tr:not(.section-label) { height: 100px; }
}

@media (max-width: 1000px) {
  .mobile-tier-grid { display: grid; grid-template-columns: 1fr; gap: 3px; padding: 12px 0 0; }
  .mobile-tier-row { display: grid; grid-template-columns: 58px minmax(24px,1fr) 82px; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 7px; }
  .mobile-tier-row.is-selected { background: var(--accent-soft); }
  .mobile-tier-row.is-selected .mobile-tier-label { color: var(--accent); font-weight: 700; }
  .mobile-tier-bar { height: 7px; border-radius: 4px; background: var(--soft); overflow: hidden; }
  .mobile-tier-bar i { display: block; height: 100%; border-radius: inherit; background: var(--line-strong); }
  .mobile-tier-row.is-selected .mobile-tier-bar i { background: var(--accent); }
  .mobile-tier-value { text-align: right; }
  .mobile-tier-grid .mobile-tier-value strong { font-size: 16px; margin: 0; color: var(--power-num); }
  .mobile-tier-caption { margin: 8px 8px 0; font-size: 11px; color: var(--muted); }
}

/* Statistics uses the shared ranking drawer surface and motion. */
#guildDrawer.change-dialog { border-left: 1px solid var(--detail-line); background: var(--panel-solid); color: var(--text); box-shadow: var(--shadow-float); overflow: hidden; }
#guildDrawer > .guild-drawer { position: static; width: 100%; height: 100%; max-width: none; border: 0; border-radius: inherit; }
#guildDrawer .guild-drawer header { padding: 24px 24px 20px; align-items: flex-start; border-color: var(--detail-line); }
#guildDrawer .guild-drawer header h2 { font-size: 21px; line-height: 1.35; letter-spacing: -.3px; }
#guildDrawer .guild-drawer-controls { padding: 20px 24px 0; }
#guildDrawer .guild-drawer-note { padding: 0 24px; line-height: 1.6; }
#guildDrawer .guild-drawer-body { margin: 0 24px 20px; border: 1px solid var(--detail-line); border-radius: 12px; background: var(--detail-surface); }
#guildDrawer #closeGuildDrawer { width: 36px; height: 36px; min-height: 36px; flex: none; padding: 8px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--muted); }
#guildDrawer #closeGuildDrawer:hover { background: var(--detail-hover); color: var(--text); }
#guildDrawer #closeGuildDrawer svg { width: 20px; height: 20px; }
#guildDrawer::backdrop { background: rgb(5 10 16 / 38%); backdrop-filter: blur(3px); }

/* Match the full-width navigation breakpoint with the toolbar layout. */
@media (max-width: 1100px) {
  .app-shell .topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; }
  .app-shell .topbar .title-cluster { grid-column: 1; grid-row: 1; }
  .app-shell .topbar .toolbar-actions { grid-column: 2; grid-row: 1; }
  .app-shell .topbar .mode-tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; box-sizing: border-box; }
}

#guildDrawer #closeGuildDrawer { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; padding: 0 9px; white-space: nowrap; font-size: 12px; }
#guildDrawer .guild-drawer header .guild-dismiss-hint { margin-top: 8px; font-size: 11px; color: var(--muted); font-weight: 400; }

@media (min-width: 601px) {
  .guild-expand::after, .guild-expand[aria-expanded="true"]::after { transform: rotate(-45deg); }
}

/* Keep the detail action on the title row; concentration has its own row. */
.guild-server-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 6px 12px; align-items: center; }
.guild-server-heading > strong { grid-column: 1; grid-row: 1; }
.guild-server-heading > span:first-of-type { grid-column: 2; grid-row: 1; }
.guild-server-heading > span:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; }
.guild-server-heading > .guild-expand { grid-column: 3; grid-row: 1; margin-left: 0; white-space: nowrap; }
@media (max-width: 380px) {
  .guild-server-heading { grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; }
  .guild-server-heading > strong { grid-column: 1; grid-row: 1; }
  .guild-server-heading > span:first-of-type { grid-column: 1; grid-row: 2; }
  .guild-server-heading > .guild-expand { grid-column: 2; grid-row: 1 / 3; padding-inline: 10px; }
  .guild-server-heading > span:nth-of-type(2) { grid-row: 3; }
}

/* Pointer-only dismissal cue, stationary outside the reading surface. */
#guildDrawer.change-dialog { overflow: visible; }
#guildDrawer > .guild-drawer { overflow: hidden; }
#guildDrawer > .guild-dismiss-hint {
  position: absolute; top: 50%; right: calc(100% + 24px); transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: max-content; margin: 0; padding: 0; border: 0; background: none;
  color: rgb(255 255 255 / 62%); font-size: 11px; font-weight: 400; line-height: 1.4;
  letter-spacing: .02em; pointer-events: none; visibility: hidden;
}
#guildDrawer > .guild-dismiss-hint span { opacity: .45; }
#guildDrawer > .guild-dismiss-hint kbd { padding: 0; border: 0; color: inherit; font: inherit; }
#guildDrawer[open]:not(.is-closing) > .guild-dismiss-hint { visibility: visible; }
@media (max-width: 800px) { #guildDrawer > .guild-dismiss-hint { display: none; } }

/* A quiet, persistent cue shared by ranking and analysis drawers. */
.detail-dismiss-hint { display: none; }
.detail-mobile-footer { display: none; }
@media (max-width: 780px) {
  #changeDialog.is-drawer:not(.share-card) .detail-mobile-footer {
    display: flex; justify-content: center; flex: 0 0 auto;
    padding: 8px 16px max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: var(--panel-solid);
  }
  #detailBottomBack {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: min(100%, 320px); min-height: 44px; border-radius: 10px;
    color: var(--accent); background: var(--soft); border: 0; box-shadow: none;
    font-size: 14px;
  }
  #detailBottomBack svg { width: 20px; height: 20px; }
}
.detail-dismiss-hint, #guildDrawer > .guild-dismiss-hint {
  user-select: none; -webkit-user-select: none; cursor: default;
}
@keyframes dismiss-cue-breathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@media (min-width: 801px) {
  #changeDialog.is-drawer:not(.is-expanded):not(.is-pinned):not(.share-card) { overflow: visible; }
  #changeDialog.is-drawer[open]:not(.is-expanded):not(.is-pinned):not(.is-closing):not(.share-card) > .detail-dismiss-hint,
  #guildDrawer[open]:not(.is-closing) > .guild-dismiss-hint {
    position: absolute; top: 50%; right: calc(100% + 24px); transform: translateY(-50%);
    display: flex; align-items: center; gap: 7px; width: max-content;
    margin: 0; padding: 0; color: rgb(255 255 255 / 62%);
    font-size: 11px; font-weight: 400; line-height: 1.4;
    pointer-events: none; animation: dismiss-cue-breathe 2.5s ease-in-out infinite;
  }
  .detail-dismiss-hint span { opacity: .45; }
  .detail-dismiss-hint kbd { font: inherit; color: inherit; padding: 0; border: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-dismiss-hint, #guildDrawer > .guild-dismiss-hint { animation: none !important; }
}
:root[data-motion="quiet"] .detail-dismiss-hint,
:root[data-motion="quiet"] #guildDrawer > .guild-dismiss-hint { animation: none !important; }

/* One statistics toolbar: content selection above the shared filters. */
.statistics-filter-shell { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); box-shadow: var(--shadow); overflow: hidden; }
.statistics-filter-shell > .stats-controls { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 800px) {
}

.mode-tabs { grid-template-columns: repeat(5,minmax(0,1fr)); }
body.analysis-mode .app-shell > .filter-shell, body.analysis-mode .ranking-panel, body.analysis-mode .pager, body.analysis-mode .page-timeline { display:none!important; }
.analysis-tabs { display:flex;gap:6px;margin:8px 0 12px;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--panel-solid); }
.analysis-tabs button { flex:1;box-shadow:none;border:0;background:transparent;color:var(--muted); }
.analysis-tabs button[aria-pressed="true"] { background:var(--accent);color:var(--panel-solid); }
#analysisHost { min-width:0; }

.analysis-tabs { position: sticky; top: 8px; z-index: 21; margin-bottom: 0; border-radius: 12px 12px 0 0; border-bottom: 0; }

#analysisHost .statistics-filter-shell { border-radius: 0 0 12px 12px; }
.server-field-heading { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.server-field-heading button { min-height:0;padding:0;border:0;background:none;box-shadow:none;font-size:11px;color:var(--accent); }
@media(max-width:800px) { .statistics-filter-shell { top: var(--analysis-tabs-height,0px); } }

#analysisLoadingCover { position:fixed;bottom:0;z-index:20;background:var(--bg);display:flex;align-items:flex-start;justify-content:center;gap:12px;padding-top:72px;color:var(--muted);font-size:13px; }
#analysisLoadingCover .spinner { width:18px;height:18px; }

/* Continuous opaque sticky surfaces: no content peeks through a top gap. */
.app-shell > .filter-shell { top: 0; background: var(--panel-solid); border-top-left-radius: 0; border-top-right-radius: 0; }
.analysis-tabs { top: 0; background: var(--panel-solid); border-radius: 0; box-shadow: none; }
body.analysis-section .app-shell > .filter-shell { top: var(--analysis-tabs-height,47px); }
.statistics-filter-shell { position: sticky; top: var(--analysis-tabs-height,47px); z-index: 18; background: var(--panel-solid); border-top-left-radius: 0; border-top-right-radius: 0; }

.analysis-tabs { padding:8px;gap:8px;background:var(--toolbar-surface); }
.analysis-tabs button { flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 18px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel-solid);color:var(--text-secondary);box-shadow:var(--shadow-sm);cursor:pointer;font-size:14px; }
.analysis-tabs button svg { width:17px;height:17px;flex:none; }
.analysis-tabs button:hover { background:var(--accent-soft);border-color:var(--accent);color:var(--accent); }
.analysis-tabs button[aria-pressed="true"] { background:var(--accent);border-color:var(--accent);color:var(--panel-solid);box-shadow:inset 0 1px 0 rgb(255 255 255 / 12%); }
.analysis-tabs button:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
@media(max-width:600px) { .analysis-tabs { gap:6px;padding:6px; } .analysis-tabs button { flex:1;min-width:0;gap:5px;padding:8px 4px;font-size:12px; } .analysis-tabs button svg { width:15px;height:15px; } }

/* Shared controls retain the original filter palette. */
.app-shell > .filter-shell #rankingFilters input,
.app-shell > .filter-shell #rankingFilters select,
.stats-controls input,
.stats-controls select {
  border-color: var(--line-strong);
  border-radius: 8px;
  background: var(--panel-solid);
  box-shadow: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.app-shell > .filter-shell #rankingFilters input:focus,
.app-shell > .filter-shell #rankingFilters select:focus,
.stats-controls input:focus,
.stats-controls select:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
  background: var(--panel-solid);
}
.filter-shell #saveChangeServer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-solid);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(16 45 38 / 5%);
  cursor: pointer;
}
.filter-shell #saveChangeServer:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.filter-shell #saveChangeServer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.filter-shell #saveChangeServer:active { background: var(--accent-soft); box-shadow: none; }
@media (max-width: 780px) {
  .app-shell > .filter-shell { padding: 8px 12px 12px; }
  .app-shell > .filter-shell.is-mobile-collapsed { padding-bottom: 8px; }
  .filter-shell .mobile-filter-toggle { border-radius: 0; background: transparent; }
  .filter-shell .mobile-filter-toggle[aria-expanded="true"] { border-bottom-color: var(--line); }
  .filter-shell #rankingFilters { gap: 14px 12px; padding: 14px 0 0; }
  .filter-shell #rankingFilters > label,
  .filter-shell #rankingFilters > .filter-field { gap: 7px; font-weight: 500; }
  .filter-shell #rankingFilters input,
  .filter-shell #rankingFilters select { height: 42px; min-height: 42px; padding-inline: 11px; }
  .filter-shell #changeRangeQuick { gap: 7px 10px; }
  .filter-shell #rankingFilters #saveChangeServer { height: 42px; min-height: 42px; }
  .filter-shell #changeServerPreference { font-size: 11px; line-height: 1.5; }
}

/* Consistent filter typography in the ranking shell and analysis component. */
.filter-shell #rankingFilters,
.statistics-filter-shell {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.filter-shell #rankingFilters > label,
.filter-shell #rankingFilters > .filter-field,
.filter-shell #rankingFilters .guild-filter-field > label,
.stats-controls .control-field,
.stats-controls legend { font-size: 12px; font-weight: 600; color: var(--muted); }
.filter-shell #rankingFilters input,
.filter-shell #rankingFilters select,
.stats-controls select,
.stats-controls #dateSelect { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text); }
.filter-shell #rankingFilters input::-webkit-datetime-edit { font-weight: 600; }
.filter-shell #rankingFilters input::placeholder { font-size: 13px; font-weight: 400; color: var(--muted); }
@media (max-width: 800px) {
  .filter-shell .mobile-filter-copy { display: block; }
  .filter-shell .mobile-filter-copy > span { display: block; font-size: 11px; line-height: 1.4; color: var(--muted); font-weight: 400; }
  .filter-shell .mobile-filter-copy strong,
  .statistics-filter-toggle strong { font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--text); }
  .filter-shell .mobile-filter-toggle,
  .statistics-filter-toggle { min-height: 56px; }
  .filter-shell #rankingFilters #filterResetField { top: -49px; }
  .filter-shell #rankingFilters input,
  .filter-shell #rankingFilters select,
  .stats-controls select,
  .stats-controls #dateSelect { font-size: 14px; height: 44px; min-height: 44px; }
}

/* Compact white filter surfaces, shared with the analysis controls. */
:root:not([data-theme="dark"]) .app-shell > .filter-shell {
  background: var(--panel-solid);
}
.statistics-filter-shell { background: var(--panel-solid); }
@media (max-width: 800px) {
  .app-shell > .filter-shell { padding: 6px 10px 10px; }
  .filter-shell .mobile-filter-toggle,
  .statistics-filter-toggle { min-height: 48px; padding-block: 5px; }
  .filter-shell #rankingFilters { gap: 10px; padding-top: 10px; }
  .filter-shell #rankingFilters > label,
  .filter-shell #rankingFilters > .filter-field { gap: 5px; }
  .filter-shell #rankingFilters input,
  .filter-shell #rankingFilters input[type="date"],
  .filter-shell #rankingFilters select,
  .filter-shell #rankingFilters #saveChangeServer,
  .stats-controls select,
  .stats-controls #dateSelect { height: 38px; min-height: 38px; }
  .filter-shell #rankingFilters .guild-filter-toggle { height: 38px; min-height: 38px; }
  .filter-shell #rankingFilters #filterResetField { top: -43px; }
  .statistics-filter-shell .stats-controls { gap: 10px; padding: 10px; }
  .stats-controls .tier-switch button { min-height: 32px; }
}

/* Desktop compact mode must collapse every caption, including text-node labels. */
@media (min-width: 801px) {
  .filter-shell #rankingFilters { align-items: end; }
  .filter-shell #rankingFilters input,
  .filter-shell #rankingFilters select,
  .filter-shell #rankingFilters .guild-filter-toggle {
    height: 36px; min-height: 36px;
  }
  .filter-shell.is-compact #rankingFilters > label { font-size: 0; gap: 0; }
  .filter-shell.is-compact #rankingFilters > .filter-field { gap: 0; }
  .filter-shell.is-compact #rankingFilters .filter-caption,
  .filter-shell.is-compact #rankingFilters .guild-filter-field > label { display: none; }
  .filter-shell.is-compact #rankingFilters input,
  .filter-shell.is-compact #rankingFilters select,
  .filter-shell.is-compact #rankingFilters .guild-filter-toggle,
  .filter-shell.is-compact #rankingFilters #filterResetBtn {
    height: 32px; min-height: 32px; font-size: 14px;
  }
}

@media (max-width: 800px) {
  .filter-shell.is-compact #rankingFilters .filter-caption,
  .filter-shell.is-compact #rankingFilters .guild-filter-field > label { display: block; }
  .filter-shell.is-compact #rankingFilters > label { font-size: 12px; gap: 5px; }
}

.mobile-quick-search { display: none; }
@media (max-width: 800px) {
  .mobile-quick-search { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 4px 4px 4px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel-solid); }
  .mobile-quick-search > svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
  .filter-shell .mobile-quick-search > .search-field { display: block; flex: 1; min-width: 0; margin: 0; font-size: 0; }
  .filter-shell .mobile-quick-search #searchInput { width: 100%; height: 34px; min-height: 34px; padding: 0 4px; border: 0; background: transparent; box-shadow: none; font-size: 14px; font-weight: 400; }
  .mobile-quick-search > button { min-height: 34px; padding: 5px 12px; border: 0; border-radius: 5px; background: var(--accent); color: var(--panel-solid); font-size: 13px; box-shadow: none; }
  .filter-shell #rankingFilters .guild-filter-field { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .filter-shell .mobile-quick-search > .search-field { order: 0; }
  .mobile-quick-search > button { order: 1; display: grid; place-items: center; width: 36px; padding: 6px; background: transparent; color: var(--accent); }
  .mobile-quick-search > button svg { width: 18px; height: 18px; }
  .mobile-quick-search > button:hover { background: var(--accent-soft); }
  .app-shell > .pager { padding: 4px; gap: 2px; border-radius: 12px; }
  .app-shell > .pager .pager-arrow { width: 38px; min-width: 38px; height: 38px; min-height: 38px; flex-basis: 38px; border-radius: 8px; }
  .app-shell > .pager .page-jump { min-width: 108px; gap: 3px; padding-inline: 3px; font-size: 12px; }
  .app-shell > .pager .page-jump input { width: 36px; height: 36px; min-height: 36px; font-size: 14px; }
}

/* Desktop search remains in the filter grid, with a distinct search affordance. */
@media (min-width: 801px) {
  .filter-shell #rankingFilters > .search-field { position: relative; color: var(--accent); }
  .filter-shell #rankingFilters > .search-field::after {
    content: ""; position: absolute; left: 11px; bottom: 10px;
    width: 16px; height: 16px; background: var(--accent); pointer-events: none;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .app-shell > .filter-shell #rankingFilters #searchInput {
    padding-left: 34px; border-color: var(--accent); background: var(--panel-solid);
  }
  .filter-shell #rankingFilters #searchInput::placeholder { color: var(--muted); }
  .filter-shell.is-compact #rankingFilters > .search-field::after { bottom: 8px; }
}

/* Keep the floating filter edge light over the list. */
:root .app-shell > .filter-shell,
.statistics-filter-shell { box-shadow: 0 2px 6px rgb(16 45 38 / 6%); }

/* Tabs and selected filters already identify the view; keep only its summary. */
.stats-accessible-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stats-shell #powerHeading { align-items: center; margin-top: 10px; margin-bottom: 10px; }
#powerHeading #resultSummary { margin: 0; }
#powerHeading .matrix-toggle { min-height: 32px; align-self: center; }
#guildSection > .results-heading { margin: 12px 0; }
#guildSection > .results-heading .intro { margin: 0; font-size: 12px; }

/* Hide the entire outgoing section while switching primary views. */
body.main-view-transition #analysisTabs { visibility: hidden; pointer-events: none; }
#analysisLoadingCover { z-index: 30; }

/* Native iOS date controls must not impose their intrinsic width on the grid. */
.stats-controls #dateSelect { width: 100%; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
.stats-controls #dateSelect::-webkit-date-and-time-value { text-align: left; min-width: 0; }
@media (max-width: 480px) {
  .stats-controls .control-field:first-child { grid-column: 1 / -1; grid-row: 1; }
  .stats-controls .tier-field { grid-column: 1 / -1; grid-row: 2; }
  .stats-controls .control-field:nth-child(2),
  .stats-controls .control-field:nth-child(3) { grid-row: 3; }
}
/* Keep native focus from magnifying small text fields; retain pinch zoom. */
@media (max-width: 800px), (pointer: coarse) {
  .app-shell input, .app-shell select, .app-shell textarea,
  .filter-shell #rankingFilters input, .filter-shell #rankingFilters select,
  .filter-shell .mobile-quick-search #searchInput,
  .app-shell > .pager .page-jump input,
  .stats-controls input, .stats-controls select, .stats-controls #dateSelect {
    font-size: 16px;
  }
}

/* Keep desktop selects in the page compositor instead of an OS popup.
   Mobile and engines without base-select retain their native picker. */
@supports (appearance: base-select) {
  @media (min-width: 801px) and (pointer: fine) {
    select, select::picker(select) {
      appearance: base-select;
      background: var(--panel-solid);
      color: var(--text);
      transition: none;
      animation: none;
    }
    select:not([hidden]):not(.change-range-mobile-select) {
      display: inline-flex;
      align-items: center;
    }
    select::picker(select) {
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      padding: 4px;
      max-height: min(320px, 60vh);
      overflow-y: auto;
      box-shadow: var(--shadow-float);
    }
    select::picker-icon { color: var(--muted); }
    select option {
      min-height: 32px;
      padding: 6px 10px;
      border-radius: 4px;
      font: inherit;
      background: var(--panel-solid);
      color: var(--text);
    }
    select option:hover, select option:focus-visible, select option:checked {
      background: var(--soft);
      color: var(--accent-strong);
    }
    select::picker(select)::backdrop { background: transparent; }
  }
}

/* Date shortcuts are buttons on desktop and a single select on phones. */
@media (min-width: 801px) {
  .filter-shell #changeRangeMobileSelect { display: none; }
  .filter-shell #changeRangeQuick { flex-wrap: wrap; gap: 8px 12px; }
  .filter-shell #changeServerPreference { white-space: nowrap; font-weight: 400; }
  .filter-shell #changeRangeQuick .change-range-buttons {
    flex-wrap: wrap;
    gap: 6px;
  }
  .filter-shell #changeRangeQuick button {
    flex-shrink: 0;
    white-space: nowrap;
    height: 32px;
    min-height: 32px;
  }
}

/* A stable keyboard-sized picker on touch layouts. */
body:has(#mobileGuildPicker[open]) { overflow: hidden; }
#mobileGuildPicker {
  position: fixed; inset: 0 auto auto 0; margin: 0; padding: 16px;
  width: 100%; max-width: none; max-height: none; box-sizing: border-box;
  border: 0; border-radius: 0; background: var(--panel-solid); color: var(--text);
  overflow: hidden;
}
#mobileGuildPicker[open] { display: flex; flex-direction: column; gap: 12px; }
#mobileGuildPicker header { display: flex; justify-content: space-between; align-items: center; flex: none; }
#mobileGuildPicker header button { min-height: 40px; padding: 6px 14px; }
#mobileGuildPicker > input { width: 100%; min-height: 44px; font-size: 16px; flex: none; }
#mobileGuildPicker .guild-filter-option-list {
  position: static; inset: auto; width: 100%; max-width: none; max-height: none;
  min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain;
  border: 0; box-shadow: none; margin: 0; padding: 0;
}
#mobileGuildPicker .guild-filter-option { min-height: 44px; font-size: 14px; }

/* Brand artwork has its own background; do not inherit the former red seal. */
:root .topbar .title-cluster .brand-mark { display: block; padding: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; transform: none; object-fit: contain; }

/* Outlined wordmark renders identically without depending on installed fonts. */
.brand-heading { display: flex; align-items: center; }
@media (max-width: 800px) {
  .filter-shell .mobile-filter-toggle { padding-right: 90px; border-radius: 8px; }
  .filter-shell .mobile-filter-toggle[aria-expanded="true"] {
    background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--line-strong);
    border-bottom-color: transparent;
  }
  .filter-shell .mobile-filter-toggle[aria-expanded="true"] .mobile-filter-copy > span {
    color: var(--accent);
  }
  .filter-shell .mobile-filter-toggle .mobile-filter-chevron { display: none; }
  .filter-shell .mobile-filter-toggle::after {
    content: '展开筛选'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; min-width: 76px; min-height: 44px;
    border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted);
  }
  .filter-shell .mobile-filter-toggle[aria-expanded="true"]::after {
    content: '收起筛选'; color: var(--accent);
  }
  .filter-shell #rankingFilters #filterResetField {
    position: static; inset: auto; grid-column: 1 / -1; grid-row: auto;
    width: auto; justify-self: end; order: 20;
  }
  .filter-shell #rankingFilters #filterResetBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: auto; height: 44px; min-height: 44px; padding: 0 10px;
    color: var(--muted); background: transparent; border: 0; box-shadow: none;
  }
  .filter-shell #filterResetBtn::after { content: '清除筛选'; font-size: 12px; }
}
@media (max-width: 800px) {
  .topbar .title-cluster .snapshot-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 4px;
  }
  .topbar .snapshot-line #snapshotMeta { grid-column: 1; grid-row: 1; max-width: none; margin: 0; }
  .topbar .snapshot-line #qualityWarningBtn { grid-column: 2; grid-row: 1; flex-shrink: 0; }
  .topbar .snapshot-line #freshnessNotice { grid-column: 1 / -1; grid-row: 2; }
}
.topbar .brand-heading h1 { margin: 0; line-height: 1; }
.brand-wordmark { display: block; width: 112px; height: 41px; }
:root .topbar .title-cluster .brand-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 0; }
:root[data-theme="dark"] .brand-wordmark { filter: brightness(1.9) saturate(.65); }
@media (max-width: 600px) {
  .brand-wordmark { width: 104px; height: 38px; }
}