/* 卡片：8px 圆角面板 */
.toolbar, .mini-stat, .series-directory-card, .match-detail-facts { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel); }

/* 卡片：大圆角面板（--radius） */
.admin-panel, .admin-tabs, .series-detail-stats, .room-board, .profile-aside, .side-card, .panel{ border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }

/* 面板内边距只有这一个值。原先各页自己写 12/18/20/24px，同一种卡片在不同页
   高矮不一，看起来像不同的东西。窄屏覆盖见 8-responsive.css。
   `.profile-aside` 原先漏在这条之外 —— 它上面第 6 行拿到了边框和底色，却没拿到内边距，
   于是"我的"页面左栏的每一行都直接顶在边框上。凡是第 6 行画成卡片的，这里都要有内边距。 */
.panel, .admin-panel, .bracket-panel, .side-card, .form-panel, .profile-aside{ padding: 20px; }

/* 列表行：同一种行只有一种尺寸 —— 4 处曾各写各的（12/12、12/14、14/16）。 */
.series-directory-card, .series-row { padding: 12px 14px; gap: 14px; }

/* 统计条：与面板同样的大圆角，单元格内边距与标签/数值字号全站统一。 */
.match-detail-facts{ border-radius: var(--radius); }
.match-detail-facts > div, .series-detail-stats > div{ padding: 16px 18px; }
.match-detail-facts span, .series-detail-stats span{ color: var(--muted); font-size: 10px; }
.match-detail-facts strong, .series-detail-stats strong{ font-size: 15px; font-weight: 700; }

/* 行布局：两端对齐 + 垂直居中 */
.admin-panel-head, .bracket-match-head, .bracket-round-title, .demo-team-preview-head, .level-line, .match-section-head, .room-board-meta, .room-screen-head, .section-title, .switch-row, .sync-error, .toolbar, .topbar { display: flex; align-items: center; justify-content: space-between; }

/* 单行截断 */
.bracket-team-display strong, .demo-binding-targets strong, .demo-team-preview-list > span > span:last-child, .duel-corner strong, .duel-player strong, .match-detail-facts strong, .match-detail-team strong, .match-roster-player span, .match-roster-title strong, .match-stat-head > strong > span:last-child, .match-stat-player strong, .series-directory-copy strong, .match-strip-names span, .match-strip-names strong, .match-strip-team, .member-row strong, .picker-list .picker-item > span, .match-stat-team-link > span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 等宽小标签 */
.match-detail-score > span, .nav-badge, .role, .room-board-meta, .section-note, .side-label, .match-filter-btn, .match-strip-time, .bracket-band-label, .bracket-zoom-value{ color: var(--muted); font: 10px "DM Mono", monospace; }

/* 横向滚动容器 */
.match-stat-table, .duel-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }

/* 页面级标题行：底部对齐、左右分开 */
.page-head, .history-section-head, .series-detail-head { display: flex; align-items: flex-end; justify-content: space-between; }

/* 标题行：顶部对齐、左右分开 */
.match-detail-heading, .modal-head { display: flex; align-items: flex-start; justify-content: space-between; }

/* 图标 + 文字行 */
.match-roster-player, .match-stat-player, .duel-player, .integration, .admin-head-actions, .match-stat-head > strong, .picker-item, .match-strip-side, .picker-list .picker-item, .bracket-band-label, .bracket-tree-head{ display: flex; align-items: center; gap: 8px; }

/* 品牌标识行 */
.brand, .room-brand { display: flex; align-items: center; gap: 10px; }

/* 列表行：网格、垂直居中 */
.series-directory-card, .series-row, .bracket-route label, .match-detail-versus, .match-strip, .match-strip-versus, .member-row, .round-row, .match-strip-when{ display: grid; align-items: center; }

/* 控件行：图标与文字并排 */
.nav-btn, .search, .toast, .admin-tab, .auth-switch, .demo-team-preview-list > span, .duel-row-head, .match-map-score, .match-roster-title, .match-upload-binding, .room-head-actions, .series-detail-brand, .slot, .table-player, .top-actions, .user-chip, .round-mark, .bracket-tabs, .bracket-zoom, .feature-brand{ display: flex; align-items: center; }

/* 状态标签：行内、带前置圆点 */
.back-link, .match-pager { display: inline-flex; align-items: center; gap: 6px; }

/* 下拉选框的搜索弹层（web/js/select-search.js）。它是全站的控件，不是某一页的样式。
   挂在 <body> 上而不是挂进卡片里：赛程画布带 transform，而 `position: fixed` 在变换过的
   祖先里会以那个祖先为参照 —— 挂进去就会跟着缩放和平移。 */
.select-pop { position: fixed; z-index: 60; display: grid; gap: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--panel-raised); box-shadow: var(--shadow); }
.select-pop-search { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-input); outline: 0; background: var(--surface-input); color: var(--text); font-size: 11px; }
.select-pop-search:focus { border-color: var(--lime); }
.select-pop-list { display: grid; gap: 1px; max-height: 240px; margin: 6px 0 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.select-pop-item { padding: 6px 8px; border-radius: var(--radius-input); color: var(--text); font-size: 11px; cursor: pointer; overflow-wrap: anywhere; }
.select-pop-item.is-active { background: var(--surface-hover); }
.select-pop-item.is-current { color: var(--lime); font-weight: 700; }
.select-pop-item.is-disabled { color: var(--muted-2); cursor: not-allowed; }
.select-pop-empty { margin: 6px 0 0; padding: 6px 8px; color: var(--muted-2); font-size: 10px; }