/* ---- Gruppen ---- */
.group-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 8px; }
.group-cta > div { flex: 1; min-width: 240px; }
.group-cta .section-title { margin-bottom: 4px; }
.group-cta p { margin: 0; }
.create-group { width: min(360px, 100%); }
.my-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 24px; }
.group-head h1 { margin: 2px 0; font-size: 26px; letter-spacing: -.02em; }
.group-head .upper { display: flex; align-items: center; gap: 6px; }
.group-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.admin-box .search { max-width: 520px; }
.rename { margin-top: 10px; }
.rename summary { cursor: pointer; }
.rename-form { display: flex; gap: 8px; margin-top: 8px; max-width: 520px; }
.text-input { flex: 1; min-width: 0; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; padding: 9px 12px; outline: none; }
.text-input:focus { border-color: var(--accent); }
.hint { margin: 10px 0 0; }

.group-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 20px; }
.seg a { display: inline-block; color: var(--muted); font: 600 12.5px 'Plus Jakarta Sans', sans-serif; padding: 7px 12px; }
.seg a.active { background: rgba(99, 102, 241, .14); color: #fff; }

.highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hl-label { display: flex; align-items: center; gap: 6px; }
.hl-value { font: 700 22px/1.3 var(--mono); margin-top: 6px; }
.hl-name { font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-name:hover { color: var(--accent-2); }
.pos { color: #7cc0ff; }
.neg { color: #ff8a98; }

.board { padding: 0; overflow: hidden; }
.board-row { display: grid; grid-template-columns: 28px minmax(150px, 1.4fr) minmax(140px, 1fr) 110px 120px 110px 34px; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
.board-labels { border-top: 0; padding-top: 12px; padding-bottom: 6px; }
.pos-num { font: 700 14px var(--mono); color: var(--muted); }
.board-row:nth-child(2) .pos-num { color: #fff; }
.b-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.b-player img { width: 34px; height: 34px; border-radius: 9px; }
.b-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-player:hover .b-name { color: var(--accent-2); }
.b-rank { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.b-rank > span { display: flex; flex-direction: column; line-height: 1.25; }
.b-lp { font: 700 15px var(--mono); }
.b-rec, .b-all { font-size: 14px; font-weight: 600; }
.icon-btn { background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); padding: 6px; cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { border-color: var(--line); }
.icon-btn .icon { color: inherit; }
.b-act form { margin: 0; }
.board-note { padding: 0 16px 12px; margin: 0; }

.g-feed { list-style: none; margin: 0; padding: 0; }
.g-feed li { border-top: 1px solid var(--line); }
.g-feed li:first-child { border-top: 0; }
.g-feed a { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.g-feed a:hover { background: rgba(255, 255, 255, .03); }
.g-feed img { width: 34px; height: 34px; border-radius: 9px; }
.gf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gf-kda { font: 600 13px var(--mono); }
.gf-res { width: 92px; text-align: right; font-weight: 700; font-size: 13px; }
.g-feed .win .gf-res { color: var(--win); }
.g-feed .loss .gf-res { color: var(--loss); }
.g-feed .remake .gf-res { color: var(--muted); }

@media (max-width: 900px) {
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .board-labels { display: none; }
  .board-row { grid-template-columns: 24px 1fr auto; grid-template-areas: "n player lp" "n rank rec" "n all act"; row-gap: 6px; }
  .pos-num { grid-area: n; align-self: start; padding-top: 8px; }
  .b-player { grid-area: player; }
  .b-lp { grid-area: lp; text-align: right; }
  .b-rank { grid-area: rank; }
  .b-rec { grid-area: rec; text-align: right; }
  .b-all { grid-area: all; font-size: 13px; color: var(--muted); }
  .b-act { grid-area: act; justify-self: end; }
}
@media (max-width: 640px) {
  .gf-res { width: auto; }
  .gf-kda { display: none; }
}