/* Two-level browsing within the original list shell.
 * Shared styles own the header, theme, toolbar and club cards. */
/* WAAPI owns transforms during the scene change; avoid stacking legacy tweens. */
:root.view-mg-motion :is(#mapSvg,#listModeView,.list-top-bar,.list-content,.list-toolbar,.club-grid,.club-card,#userInfoCard,#introCard,#selectedCard) {
 transition:none !important;
}
:root.view-mg-motion #mapSvg { filter:none; }
:root.view-mg-motion #listModeView { transform:none; }
:root.view-mg-motion :is(.list-content,.club-grid) { opacity:1; transform:none; }
.view-motion-ghost { overflow:hidden; contain:layout style; }
.list-browser-layout { color:var(--md-on-surface); }
.list-browser-layout :is(.list-top-name,.club-card-name) { color:var(--md-on-surface); }
.list-browser-layout .list-nav-row .user-nav-btn {
 background:var(--md-surface-container); color:var(--md-on-surface);
}
.list-browser-layout .list-nav-row .user-nav-btn.active {
 background:var(--md-primary-container); color:var(--md-primary);
}
.list-browser-layout .list-nav-row .user-nav-btn:hover { background:var(--md-surface-container-high); }
.list-browser-layout .club-card { background:var(--md-surface); }
.list-browser-layout .club-card:hover { background:var(--md-surface-container); }
.list-browser-layout .mode-tab.active { background:var(--md-surface); }
.list-browser-layout .list-body { padding:0 14px; }
.list-browser-layout .list-content { margin:14px 0; }
.list-browser-layout .list-toolbar-title-row { align-items:center; flex-wrap:wrap; }
.list-browser-layout .list-browser-viewport {
 flex:1; min-height:0; overflow:auto; overscroll-behavior:contain;
 padding:18px; scrollbar-gutter:stable;
}
.list-browser-layout .list-region-grid {
 display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
 gap:12px; align-content:start;
}
.list-browser-layout .list-region-card {
 appearance:none; position:relative; display:grid;
 grid-template-columns:minmax(0,1fr) auto; align-content:center;
 gap:10px 14px; min-width:0; min-height:112px; padding:20px;
 border:1px solid var(--md-outline-variant); border-radius:14px;
 background:var(--md-surface); color:var(--md-on-surface);
 box-shadow:0 2px 8px color-mix(in srgb,var(--md-shadow) 22%,transparent);
 cursor:pointer; font:inherit; text-align:left;
 transition:border-color 180ms ease,background 180ms ease,transform 180ms var(--ease-spring);
}
.list-browser-layout .list-region-name {
 font-size:20px; font-weight:650; line-height:1.4; overflow-wrap:anywhere;
}
.list-browser-layout .list-region-count {
 grid-column:1; color:var(--md-on-surface-variant); font-size:12px; line-height:1.5;
}
.list-browser-layout .list-region-enter {
 grid-column:2; grid-row:1 / 3; align-self:center;
 display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
 background:var(--md-surface-container); color:var(--md-on-surface-variant); font-size:18px;
}
.list-browser-layout .list-region-card:hover {
 background:color-mix(in srgb,var(--md-primary-container) 30%,var(--md-surface));
 border-color:color-mix(in srgb,var(--md-primary) 48%,var(--md-outline-variant));
 transform:translateY(-2px);
}
.list-browser-layout .list-region-card:hover .list-region-enter {
 color:var(--md-primary); background:var(--md-primary-container);
}
.list-browser-layout .list-back-button {
 padding:6px 12px; border:1px solid var(--md-outline-variant); border-radius:999px;
 background:var(--md-surface-container); color:var(--md-on-surface-variant);
 cursor:pointer; font:inherit; font-size:12px; line-height:1.5;
}
.list-browser-layout .list-back-button:hover { background:var(--md-primary-container); color:var(--md-primary); }
.list-browser-layout :is(.list-region-card,.list-back-button):focus-visible {
 outline:2px solid var(--md-primary); outline-offset:3px;
}
.list-browser-layout #clubGrid {
 height:auto; overflow:visible; padding:0 0 12px; opacity:1; transform:none;
 grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.list-browser-layout [hidden] { display:none !important; }
.list-browser-layout .list-empty-state { grid-column:1/-1; }
@media(min-width:721px) and (max-width:1100px) {
 .list-browser-layout .list-toolbar-right { width:100%; justify-content:flex-start; }
 .list-browser-layout .list-search-input { flex:1; width:auto; min-width:180px; }
 .list-browser-layout .list-region-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .list-browser-layout .list-region-card { padding:16px; }
}
@media(prefers-reduced-motion:reduce) {
 .list-browser-layout .list-region-card { transition:none; }
 .list-browser-layout .list-region-card:hover { transform:none; }
}

/* Shirone-inspired tonal surfaces, adapted to VNFest's original list structure. */
#listModeView .list-browser-layout {
 /* 和地图模式共用同一套表面：画布 = 页面底，面板 = 卡片面，线 = outline-variant。 */
 --list-canvas: var(--vn-canvas);
 --list-panel: var(--md-surface);
 --list-tonal: var(--md-surface-container);
 --list-line: var(--md-outline-variant);
 /* 画布自己铺底纹：body 那层在某些规则下会被覆盖，列表这边独立铺一份更稳 */
 background-color:var(--list-canvas);
 background-image:var(--canvas-grain), var(--canvas-glow);
 background-size:160px 160px, 100% 100%;
 background-repeat:repeat, no-repeat;
 backdrop-filter:none;
}
#listModeView .list-browser-layout .list-top-bar {
 padding:14px max(24px,calc((100vw - 1400px)/2));
 background:var(--list-panel); border:0; box-shadow:none;
}
.list-browser-layout .list-top-row { min-height:38px; gap:14px; }
.list-browser-layout .list-top-avatar {
 background:var(--list-tonal); color:var(--md-primary); width:32px; height:32px;
}
.list-browser-layout .list-nav-row {
 gap:8px; padding-top:12px; margin-top:12px; border-color:var(--list-line);
}
.list-browser-layout .list-nav-row .user-nav-btn {
 padding:10px 16px; border:0; background:var(--md-surface-container); font-size:12px;
}
.list-browser-layout .list-nav-row .user-nav-btn.active {
 background:var(--md-primary-container); color:var(--md-on-primary-container);
}
.list-browser-layout .list-body {
 width:100%; max-width:1448px; margin:0 auto; padding:0 24px;
}
#listModeView .list-browser-layout .list-content {
 margin:24px 0 0; border:0; border-radius:0; background:transparent;
 box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.list-browser-layout .list-toolbar {
 padding:24px 26px; gap:20px; border:0; border-radius:24px;
 background:var(--list-panel);
}
.list-browser-layout .list-toolbar::after { display:none; }
.list-browser-layout .list-toolbar-left { gap:9px; }
.list-browser-layout .list-toolbar-title-row { gap:12px; }
.list-browser-layout .list-toolbar-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.list-browser-layout .list-toolbar-title::before {
 content:""; display:inline-block; width:4px; height:20px; margin-right:12px;
 border-radius:4px; background:var(--md-primary); vertical-align:-2px;
}
.list-browser-layout .list-toolbar-count {
 padding:4px 10px; background:var(--list-tonal); color:var(--md-on-surface-variant);
 border:0; box-shadow:none; font-size:11px; font-weight:600;
 letter-spacing:var(--tracking-wide); font-variant-numeric:tabular-nums;
}
.list-browser-layout .list-toolbar-subtitle { font-size:12px; line-height:1.8; letter-spacing:var(--tracking-wide); }
.list-browser-layout .list-toolbar-right { gap:8px; }
.list-browser-layout :is(.list-search-input,.list-type-filter,.list-sort-select) {
 min-height:34px; border:1px solid transparent; border-radius:10px;
 background:var(--md-surface-container); box-shadow:none;
 padding:6px 11px; font-size:var(--text-body);
}
.list-browser-layout :is(.list-search-input,.list-type-filter,.list-sort-select):focus {
 background:var(--list-panel); border-color:var(--md-primary);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--md-primary) 10%,transparent);
}
.list-browser-layout .list-search-input { width:clamp(170px, 16vw, 240px); }
.list-browser-layout .list-browser-viewport { padding:20px 0 32px; scrollbar-gutter:auto; }
.list-browser-layout .list-region-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.list-browser-layout .list-region-card {
 min-height:148px; padding:26px; gap:14px 12px; border:1px solid transparent;
 border-radius:22px; background:var(--list-panel); box-shadow:none;
 transition:background 200ms ease,border-color 200ms ease,transform 240ms var(--ease-spring);
}
.list-browser-layout .list-region-name { font-size:22px; font-weight:650; letter-spacing:.03em; }
.list-browser-layout .list-region-count {
 justify-self:start; padding:4px 10px; border-radius:8px; font-size:11px;
 background:var(--md-surface-container); color:var(--md-on-surface-variant);
}
.list-browser-layout .list-region-enter {
 width:36px; height:36px; border-radius:12px; background:var(--list-tonal);
 color:var(--md-primary); transition:background 200ms ease,transform 200ms ease;
}
.list-browser-layout .list-region-card:hover {
 background:color-mix(in srgb,var(--list-panel) 72%,var(--md-primary-container));
 border-color:color-mix(in srgb,var(--md-primary) 18%,transparent); transform:translateY(-3px);
}
.list-browser-layout .list-region-card:hover .list-region-enter {
 background:var(--md-primary-container); transform:translateX(3px);
}
.list-browser-layout .list-back-button { border:0; background:var(--md-surface-container); padding:8px 12px; }
.list-browser-layout #clubGrid { gap:16px; }
.list-browser-layout #clubGrid .club-card {
 padding:22px; background:var(--list-panel); border:1px solid transparent;
 border-radius:22px; box-shadow:none;
}
/* hover：提亮 + 中性阴影。之前是整圈亮红描边，在深色底上会「发光」，很脏 */
.list-browser-layout #clubGrid .club-card:hover {
  background: color-mix(in srgb, var(--list-panel) 88%, var(--md-primary-container));
  border-color: color-mix(in srgb, var(--md-primary) 22%, var(--md-outline-variant));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--md-shadow) 20%, transparent);
}
.list-browser-layout .club-card-avatar { border-radius:16px; box-shadow:none; }
/* .club-card 自带 hover 光效（3px 主色竖条 + 整卡径向红晕），在列表里会和
   边框/阴影叠成一层脏光，这里关掉，只用上面那套「提亮 + 中性边」。 */
.list-browser-layout #clubGrid .club-card::before,
.list-browser-layout #clubGrid .club-card::after {
  display: none;
}
.list-browser-layout .club-card-divider { background:var(--list-line); }
/* 卡片名和地图模式标题同一套显示字族；联系方式是纯号码，等宽才好一眼扫完 */
.list-browser-layout .club-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.list-browser-layout .club-card-contact {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.list-browser-layout :is(.club-card-tag, .club-card-location) {
  letter-spacing: var(--tracking-wide);
}
.list-browser-layout .list-empty-state { border-radius:22px; background:var(--list-panel); padding:56px 24px; }
/* 空结果：配一张 chibi 角色，沿用站内空状态的既有做法 */
.list-browser-layout .list-empty-state .list-empty-chibi {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto 16px;
  object-fit: contain;
  opacity: 0.92;
}
.list-browser-layout .list-empty-state p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--md-on-surface-variant);
}
:root[data-theme="dark"] .list-browser-layout .list-empty-state .list-empty-chibi {
  opacity: 0.82;
}
@media(min-width:721px) and (max-width:1100px) {
 .list-browser-layout .list-body { padding:0 20px; }
 .list-browser-layout .list-region-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
 .list-browser-layout .list-region-card { min-height:136px; padding:22px; }
 .list-browser-layout .list-toolbar { padding:22px; }
}
@media(prefers-reduced-motion:reduce) {
 .list-browser-layout :is(.list-region-card,.list-region-enter) { transition:none; }
 .list-browser-layout .list-region-card:hover,.list-browser-layout .list-region-card:hover .list-region-enter { transform:none; }
}
/* Animated native popovers for list type and sort; source selects remain the API. */
.list-browser-layout .list-picker { position:relative; flex:0 0 auto; }
.list-browser-layout .list-picker-trigger {
 display:flex; align-items:center; justify-content:flex-start; gap:10px;
 min-width:104px; cursor:pointer; font:inherit; font-weight:600;
 text-align:left; margin:0; white-space:nowrap;
}
.list-browser-layout .list-picker-trigger:active { transform:scale(.97); }
/* 箭头用 SVG chevron，尺寸固定；展开时翻 180° 并染成主色 */
.list-picker-arrow {
 display:inline-flex; align-items:center; justify-content:center;
 width:14px; height:14px; flex:0 0 14px; margin-left:auto;
 color:var(--md-on-surface-variant);
 transition:transform 200ms var(--ease-spring), color 160ms ease;
}
.list-picker-arrow svg { width:100%; height:100%; display:block; }
/* 触发器本体：常态无边框的 tonal 底，hover 提一档，展开时切成面板底 + 主色环 */
.list-browser-layout .list-picker-trigger {
 border:1px solid transparent;
 background:var(--list-tonal);
 color:var(--md-on-surface);
 transition:background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.list-browser-layout .list-picker-trigger:hover {
 background:var(--md-surface-container-high);
 border-color:var(--list-line);
}
.list-browser-layout .list-picker-trigger[aria-expanded="true"] {
 background:var(--list-panel);
 border-color:var(--md-primary);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--md-primary) 12%,transparent);
}
.list-browser-layout .list-picker-trigger[aria-expanded="true"] .list-picker-arrow {
 transform:rotate(180deg); color:var(--md-primary);
}
.list-picker-menu {
 position:fixed; inset:auto; margin:0; box-sizing:border-box; padding:6px;
 overflow-y:auto; border:1px solid var(--md-outline-variant); border-radius:16px;
 color:var(--md-on-surface); background:var(--md-surface-container);
 box-shadow:0 12px 32px color-mix(in srgb,var(--md-shadow) 22%,transparent);
 font:inherit; opacity:0; transform:translateY(-6px) scale(.96);
 transition:opacity 180ms var(--ease-spring),transform 180ms var(--ease-spring),display 180ms allow-discrete,overlay 180ms allow-discrete;
}
.list-picker-menu:popover-open { opacity:1; transform:translateY(0) scale(1); }
@starting-style {
 .list-picker-menu:popover-open { opacity:0; transform:translateY(-6px) scale(.96); }
}
.list-picker-menu .list-picker-option {
 appearance:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
 width:100%; min-height:40px; padding:9px 12px; margin:2px 0; border:0; border-radius:10px;
 color:var(--md-on-surface); background:transparent; font:inherit; font-size:13px; text-align:left; cursor:pointer;
 transition:background 120ms ease,color 120ms ease;
}
.list-picker-option[aria-selected="true"] { color:var(--md-primary); background:var(--md-primary-container); }
.list-picker-option[aria-selected="true"]::after { content:'✓'; }
.list-picker-option:focus-visible { outline:2px solid var(--md-primary); outline-offset:-2px; }
@media(hover:hover) and (pointer:fine) {
 .list-picker-option:hover { background:var(--md-surface-container-high); }
}
@media(prefers-reduced-motion:reduce) {
 .list-picker-menu { transition:opacity 100ms ease,display 100ms allow-discrete,overlay 100ms allow-discrete; transform:none; }
 .list-picker-menu:popover-open { transform:none; }
 .list-picker-arrow { transition:none; }
 .list-browser-layout .list-picker-trigger:active { transform:none; }
 @starting-style { .list-picker-menu:popover-open { transform:none; } }
}

/* ==========================================================================
   左侧导航栏（列表模式）
   ========================================================================== */

#listModeView .list-browser-layout.list-rail-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.list-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding: 18px 14px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* rail 比画布亮一档：既分得出层次，又不至于像贴了一块纯白 */
  background: color-mix(in srgb, var(--list-panel) 62%, var(--list-canvas));
  border-right: 1px solid color-mix(in srgb, var(--md-on-surface) 9%, transparent);
  color: var(--md-on-surface);
}

.rail-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rail-identity-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
#listModeView :is(.list-rail, .list-topstrip) .list-top-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--list-tonal);
  color: var(--md-primary);
  font-size: 15px;
  font-weight: 700;
}
#listModeView :is(.list-rail, .list-topstrip) .list-top-avatar svg {
  width: 56%;
  height: 56%;
}
#listModeView :is(.list-rail, .list-topstrip) .list-top-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
#listModeView :is(.list-rail, .list-topstrip) .list-top-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--md-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#listModeView :is(.list-rail, .list-topstrip) .list-role-badge {
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
}

.rail-menu-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.rail-menu-btn:hover {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}

/* 账号操作 */
.rail-auth {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rail-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.rail-auth-btn:hover { background: var(--md-surface-container-high); }
#listModeView :is(.list-rail, .list-topstrip) .top-login-btn.rail-auth-btn {
  background: var(--md-primary);
  color: #fff;
}
#listModeView :is(.list-rail, .list-topstrip) .top-login-btn.rail-auth-btn:hover {
  background: var(--md-primary);
  filter: brightness(1.06);
}

/* 模式切换 */
#listModeView .list-rail .rail-mode .mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 100%;
  padding: 3px;
  border-radius: 14px;
  background: var(--md-surface-container);
  overflow: visible;
}
#listModeView .list-rail .rail-mode .mode-tab {
  justify-content: center;
  min-height: 36px;
  border-radius: 11px;
  font-size: 12px;
}

/* 分类导航：折叠树。分类左对齐，展开后直接列出该分类下的省份。 */
.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--list-line);
}

.rail-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#listModeView .list-rail .rail-nav .user-nav-btn.rail-group__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 100%;
  min-height: 44px;
  padding: 0 10px 0 20px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
#listModeView .list-rail .rail-nav .user-nav-btn.rail-group__head::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--md-primary);
  transform: translateY(-50%);
  transition: height 240ms var(--ease-spring);
}
#listModeView .list-rail .rail-nav .user-nav-btn.rail-group__head:hover {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}
.rail-group.is-current .rail-group__head {
  color: var(--md-on-surface);
}
.rail-group.is-current .rail-group__head::before { height: 20px; }

.rail-group__label {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-group__count {
  flex-shrink: 0;
  font-family: var(--font-num);
  font-size: var(--text-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--md-on-surface-variant);
  opacity: 0.65;
}
.rail-group__chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.6;
  transition: transform 260ms var(--ease-spring);
}
.rail-group.is-open .rail-group__chevron { transform: rotate(180deg); }

/* 折叠：用 grid-template-rows 0fr→1fr 做真正的高度动画 */
.rail-group__list {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 280ms var(--ease-spring),
    opacity 180ms ease;
}
.rail-group.is-open .rail-group__list {
  grid-template-rows: 1fr;
  opacity: 1;
}
.rail-provinces {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  overflow: hidden;
  padding: 2px 0 6px;
}

.rail-province {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px 0 28px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--md-on-surface-variant);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.rail-province::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 150ms ease, background 150ms ease;
}
.rail-province:hover {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
}
.rail-province.is-active {
  background: var(--list-accent-soft, var(--md-primary-container));
  color: var(--md-on-primary-container);
  font-weight: 650;
  animation: rail-pick 320ms var(--ease-spring) both;
}
@keyframes rail-pick {
  from { transform: scale(0.965); }
  to { transform: none; }
}
.rail-province.is-active::before {
  opacity: 1;
  background: var(--md-primary);
}
.rail-province__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.rail-province__count {
  flex-shrink: 0;
  font-family: var(--font-num);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* 主区域 */
#listModeView .list-browser-layout .list-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 16px 22px 20px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#listModeView .list-browser-layout .list-main .list-toolbar {
  flex: 0 0 auto;
  margin-bottom: 14px;
  border-radius: 20px;
}
#listModeView .list-browser-layout .list-main .list-browser-viewport {
  flex: 1;
  min-height: 0;
  padding: 4px 2px 24px;
  scrollbar-gutter: stable;
}
/* 工具栏里的输入与下拉在 tonal 底上容易糊成一色，抬到 tonal 层 */
#listModeView .list-browser-layout .list-main
  :is(.list-search-input, .list-type-filter, .list-sort-select) {
  background: var(--list-tonal);
  border-color: transparent;
}

@media (max-width: 1100px) and (min-width: 721px) {
  #listModeView .list-browser-layout.list-rail-layout {
    grid-template-columns: 232px minmax(0, 1fr);
  }
  .list-rail { padding: 14px 10px 16px; gap: 12px; }
  #listModeView .list-browser-layout .list-main { padding: 14px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .list-rail *,
  #listModeView .list-browser-layout .list-main * { transition: none !important; }
}


/* rail 上的悬停用一层极淡的白，而不是把块提亮成灰 */
:root[data-theme="dark"] #listModeView .list-rail .rail-province:hover,
:root[data-theme="dark"]
  #listModeView
  .list-rail
  .rail-nav
  .user-nav-btn.rail-group__head:hover,
:root[data-theme="dark"] #listModeView .list-rail .rail-menu-btn:hover {
  background: rgba(255, 255, 255, 0.055);
}
:root[data-theme="dark"] #listModeView :is(.list-rail, .list-topstrip) .rail-auth-btn {
  background: #212124;
  color: #e9e9ec;
}
:root[data-theme="dark"] #listModeView :is(.list-rail, .list-topstrip) .rail-auth-btn:hover {
  background: #2a2a2e;
}
/* 主操作用品牌红，不能被上面的次要按钮底色盖掉 */
:root[data-theme="dark"] #listModeView :is(.list-rail, .list-topstrip) .top-login-btn.rail-auth-btn {
  background: var(--md-primary);
  color: #fff;
}
:root[data-theme="dark"] #listModeView :is(.list-rail, .list-topstrip) .top-login-btn.rail-auth-btn:hover {
  background: var(--md-primary);
  filter: brightness(1.08);
}
:root[data-theme="dark"] #listModeView :is(.list-rail, .list-topstrip) .list-top-avatar {
  background: #2a1e1b;
  color: #ff8b7c;
}
:root[data-theme="dark"] #listModeView .list-rail .rail-group__count {
  color: #8b8b92;
  opacity: 1;
}
:root[data-theme="dark"] #listModeView .list-rail .rail-province__count {
  color: #7c7c83;
  opacity: 1;
}
:root[data-theme="dark"] #listModeView .list-rail .rail-province.is-active {
  color: #ffd9d2;
}
:root[data-theme="dark"] #listModeView .list-rail .rail-province.is-active::before {
  background: #ff7c6c;
}
/* 工具栏里的输入与下拉在暗色下要能和面板分开 */
:root[data-theme="dark"]
  #listModeView
  .list-browser-layout
  .list-main
  :is(.list-search-input, .list-type-filter, .list-sort-select) {
  background: #202124;
  border-color: rgba(255, 255, 255, 0.07);
}
:root[data-theme="dark"] #listModeView .list-browser-layout .list-toolbar-title {
  color: #f2f2f4;
}
:root[data-theme="dark"] #listModeView .list-browser-layout .list-toolbar-count {
  background: #2a1e1b;
  color: #ffb3a8;
}
:root[data-theme="dark"] #listModeView .list-browser-layout .list-toolbar-subtitle {
  color: #8b8b92;
}
:root[data-theme="dark"] #listModeView .list-browser-layout .list-back-button {
  background: #242427;
  color: #d6d6da;
}
:root[data-theme="dark"] #listModeView .list-browser-layout #clubGrid .club-card {
  background: var(--md-surface);
}
/* 暗色 hover：不要亮红整圈描边，改成背景提亮 + 一层中性白边 + 深阴影 */
:root[data-theme="dark"] #listModeView .list-browser-layout #clubGrid .club-card:hover {
  background: #222326;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] #listModeView .list-browser-layout .list-empty-state {
  background: #191a1c;
  color: #8b8b92;
}

/* ==========================================================================
   地图 ↔ 列表 转场：View Transitions 元素级 morph
   ========================================================================== */:root.view-vt-motion :is(#mapSvg, #listModeView, .list-rail, .list-main, .list-toolbar,
  .list-browser-viewport, .list-region-card, .club-card, #userInfoCard, #map) {
  transition: none !important;
  animation: none !important;
}

/* 转场只让两块「整块」元素独立运动：地图（vn-map）和列表主区域（vn-main）。
   其余（顶栏 ↔ rail）不拆元素做 morph —— 容器淡出时子元素各飞各的会散架，
   整块强行变形又会被拉伸，两种都难看。整体淡变最稳。 */
:root #map { view-transition-name: vn-map; }

/* 转场：旧内容淡出 + 地图下沉，同时新 rail 从左侧、主区域从下方滑入。
   关键在于 rail/main 的 view-transition-name 只在「列表态」存在 —— 旧快照里
   没有这两个元素，所以不会发生 morph，只播入场动画，不会和旧内容糊在一起。 */
:root.list-mode-active .list-rail { view-transition-name: vn-rail; }
:root.list-mode-active .list-main { view-transition-name: vn-main; }

::view-transition-new(vn-rail) {
  animation: vn-rail-in 360ms cubic-bezier(0.2, 0, 0, 1) both;
}
/* 退出时旧列表要更快让位，否则会压在新升起的地图上 */
::view-transition-old(vn-rail) {
  animation: vn-rail-out 140ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-old(vn-main) {
  animation: vn-main-out 140ms cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes vn-rail-in {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: none; }
}
@keyframes vn-rail-out {
  to { opacity: 0; transform: translateX(-22px); }
}

::view-transition-new(vn-main) {
  animation: vn-main-in 400ms cubic-bezier(0.2, 0, 0, 1) 50ms both;
}
@keyframes vn-main-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes vn-main-out {
  to { opacity: 0; transform: translateY(12px); }
}

/* 剩余部分（顶栏、简介卡、详情卡）淡出 */
::view-transition-old(root) {
  animation: vn-root-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vn-root-in 200ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes vn-root-out {
  to { opacity: 0; }
}
@keyframes vn-root-in {
  from { opacity: 0; }
}

/* 地图：240ms 下沉，幅度收小 */
::view-transition-group(vn-map) { animation-duration: 240ms; }
:root.view-to-list ::view-transition-old(vn-map) {
  transform-origin: 50% 46%;
  animation: vn-map-sink 240ms cubic-bezier(0.4, 0, 1, 1) both;
}
:root.view-to-list ::view-transition-new(vn-map) { animation: none; opacity: 0; }
:root.view-to-map ::view-transition-old(vn-map) { animation: none; opacity: 0; }
:root.view-to-map ::view-transition-new(vn-map) {
  transform-origin: 50% 46%;
  animation: vn-map-rise 260ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes vn-map-sink {
  to { opacity: 0; transform: translateY(28px) scale(0.975); }
}
@keyframes vn-map-rise {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   2026-10 列表模式重排
   顶部那条沿用地图模式那张 #userInfoCard 本体（位置尺寸一字不改，只把层级抬到
   #listModeView 之上）；下面左右两块**独立容器**：左边地区导航、右边同好会列表，
   都不贴视口边缘，两块顶边齐平。
   ========================================================================== */

#listModeView .list-browser-layout.list-rail-layout {
  --list-gap: 14px;
  --list-inset-x: clamp(16px, 2.4vw, 30px);
  --list-inset-y: 14px;
  --list-panel-radius: var(--radius-lg);

  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "strip strip"
    "rail  main";
  gap: var(--list-gap);
  height: 100%;
  min-height: 0;
  padding: var(--list-inset-y) var(--list-inset-x) calc(var(--list-inset-y) + 4px);
  overflow: hidden;
  background: transparent;
}

/* ── 顶：通栏（账号 / 视图切换，控件尺寸与地图模式完全一致） ────────── */
.list-topstrip {
  grid-area: strip;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 8px clamp(12px, 1.4vw, 18px) 8px 16px;
  border: 1px solid var(--list-line);
  border-radius: var(--list-panel-radius);
  background: var(--list-panel);
  box-shadow: var(--elev-2);
  color: var(--md-on-surface);
}
.list-topstrip .rail-identity {
  flex: 0 1 auto;
  min-width: 0;
}
/* 视图切换靠右，和登录/菜单挤在同一簇里 —— 与地图模式那张卡里一样，
   它不占中间；尺寸仍是 165×38，不许压缩或撑满。 */
.list-topstrip .rail-mode {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}
.list-topstrip .rail-mode .mode-switch {
  flex: 0 0 165px;
  width: 165px;
}
.list-topstrip .rail-auth {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.list-topstrip .rail-auth-btn {
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: var(--text-body-sm);
}

/* ── 左：地区导航 ─────────────────────────────────────────────────── */
.list-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 16px 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--list-line);
  border-right: 1px solid var(--list-line);
  border-radius: var(--list-panel-radius);
  background: var(--list-panel);
  box-shadow: var(--elev-2);
  color: var(--md-on-surface);
  scrollbar-width: thin;
}

.rail-head { padding: 0 8px 12px; border-bottom: 1px solid var(--list-line); }
.rail-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--md-on-surface);
}
.rail-head__sub {
  margin: 4px 0 0;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-body-sm);
  line-height: var(--leading-snug);
  color: var(--md-on-surface-variant);
}
.rail-foot {
  margin: auto 0 0;
  padding: 10px 8px 0;
  border-top: 1px solid var(--list-line);
  font-size: var(--text-label);
  line-height: var(--leading-relaxed);
  color: var(--md-on-surface-variant);
  opacity: 0.85;
}
/* 标题已经在 rail-head 里了，导航树自己不再画分隔线 */
.rail-nav { padding-top: 0; border-top: 0; }

/* ── 右：同好会列表（一张卡：标题区 + 分隔线 + 滚动列表） ──────────── */
/* 右侧是两块独立容器：上面「标题 + 筛选」，下面列表本身 */
#listModeView .list-browser-layout .list-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--list-gap);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#listModeView .list-browser-layout .list-main .list-toolbar {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 18px 15px;
  border: 1px solid var(--list-line);
  border-radius: var(--list-panel-radius);
  background: var(--list-panel);
  box-shadow: var(--elev-2);
}
/* 列表区比工具栏区沉一档：白卡才有地方浮起来，否则卡片和面板同色、只剩一条淡边 */
/* 列表本身不再套一层灰底容器：卡片直接铺在画布上，右边只留「标题+筛选」那一块卡 */
#listModeView .list-browser-layout .list-main .list-browser-viewport {
  flex: 1;
  min-height: 0;
  padding: 4px 2px 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-gutter: stable;
}
#listModeView .list-browser-layout .list-main
  :is(.list-search-input, .list-type-filter, .list-sort-select) {
  background: var(--list-tonal);
  border-color: transparent;
}
#listModeView .list-browser-layout #clubGrid .club-card {
  border-color: var(--list-line);
  box-shadow: var(--elev-1);
}
#listModeView .list-browser-layout #clubGrid .club-card:hover {
  box-shadow: var(--elev-2);
}
/* 900~1100 那段用 280 只剩一列、单卡拉到 560 宽 */
.list-browser-layout #clubGrid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* 滚动条换成中性色：全局那条是红渐变，在长列表边上会变成一根刺眼的红条 */
#listModeView :is(.list-browser-viewport, .list-rail) {
  scrollbar-color: color-mix(in srgb, var(--md-on-surface) 20%, transparent) transparent;
}
#listModeView :is(.list-browser-viewport, .list-rail)::-webkit-scrollbar-track {
  background: transparent;
}
#listModeView :is(.list-browser-viewport, .list-rail)::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--md-on-surface) 18%, transparent);
  border-color: transparent;
}
#listModeView :is(.list-browser-viewport, .list-rail)::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--md-on-surface) 30%, transparent);
}

@media (max-width: 1279px) and (min-width: 721px) {
  #listModeView .list-browser-layout.list-rail-layout {
    grid-template-columns: 232px minmax(0, 1fr);
    --list-gap: 12px;
  }
  .list-rail { padding: 14px 8px 10px; }
  #listModeView .list-browser-layout .list-main .list-toolbar { padding: 16px 18px 14px; }
  #listModeView .list-browser-layout .list-main .list-browser-viewport { padding: 16px 18px 20px; }
}
@media (max-width: 980px) and (min-width: 721px) {
  #listModeView .list-browser-layout.list-rail-layout {
    grid-template-columns: 208px minmax(0, 1fr);
  }
  .rail-head { padding: 0 6px 10px; }
  #listModeView .list-rail .rail-nav .user-nav-btn.rail-group__head { padding: 0 8px 0 16px; }
  .rail-province { padding: 0 8px 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .list-rail *,
  #listModeView .list-browser-layout .list-main * { transition: none !important; }
}