/* =========
   Layout & Topbar (стилистика профиля)
   ========= */

.teammates-page .wrap{
  max-width:1000px;
  margin:0 auto;
  padding:24px;
  display:grid;
  gap:24px;
}

.topbar{
  max-width: 1000px;
  margin: 16px auto 0;
  padding: 12px 24px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#161616;
  border:1px solid var(--line);
  border-radius:24px;
  position:sticky;
  top:0;
  z-index:10;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.topbar .spacer{flex:1}

.brand-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.24);
  font-weight:800;
  letter-spacing:-.04em;
  transition:var(--transition);
}
.brand-link:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.36)}

.topnav{display:flex;gap:8px;align-items:center;flex:1}

.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  height:40px;
  padding:0 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  background:rgba(32,32,32,.72);
  border:1px solid rgba(255,255,255,.10);
  font-weight:600;
  transition:var(--transition);
}
.tab:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.20)}
.tab.active{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.30)}

.actions{display:flex; gap:12px}
.btn-icon{
  width:40px;
  height:40px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(32,32,32,.92);
  box-shadow:var(--shadow-sm);
  font-size:18px;
  line-height:1;
  transition:var(--transition);
  cursor:pointer;
}
.btn-icon:hover{background:rgba(45,45,45,.85);border-color:#4a4a4a;transform:translateY(-1px)}

.hidden{display:none !important}

/* =========
   Card & headings
   ========= */

.card{
  margin:0;
  background:rgba(18,18,18,0.88);
  border:1px solid var(--line);
  border-radius:28px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}

.tm-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.tm-title{
  font-size:38px;
  margin: 0 0 16px; /* было 8px: увеличили отступ до подзаголовка */
  letter-spacing:-.02em;
  line-height: 1.1;
}

.tm-sub{margin:0}

/* =========
   Segmented control
   ========= */

.seg{
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius:18px;
  background:rgba(18,18,18,0.72);
  border:1px solid rgba(255,255,255,0.08);
}

.seg-btn{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
}
.seg-btn:hover{
  color:var(--text);
  border-color:rgba(255,255,255,0.08);
}
.seg-btn.is-active{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.24);
  color:var(--text);
}

/* =========
   Panels
   ========= */

.panel{ margin-top: 20px; }
.panel[hidden]{display:none !important}

/* LOOKUP */

.lookup{
  display:grid;
  gap:10px; /* было 16px: уменьшаем расстояние до подсказок */
}

.lookup-row{
  display:flex;
  gap:18px;
  align-items:center;
}

.lookup-row input{
  flex: 1;
  min-width: 0;
  height:52px;
  padding-left:16px;
}

.lookup-row button{
  height:52px;
  min-width:140px;
}

/* подсказки под инпутом */
.lookup-help{
  display:flex;
  flex-wrap:wrap;
  gap:10px;       /* было 12px */
  margin-top:4px; /* было 12px: делаем ближе к полю */
}

.help-chip{
  display:inline-flex;
  align-items:center;
  padding: 10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  color:var(--muted);
  font-size:13px;
  line-height:1;
}

.help-chip.kbd{
  border-color:rgba(255,255,255,0.20);
  background:rgba(255,255,255,0.07);
  color:var(--text);
}

.hint{
  color:#dddddd;
  font-size:14px;
  padding:10px 14px;
  background:rgba(255,255,255,0.055);
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.14);
  margin-top:12px;
}
.hint:empty{display:none}

/* =========
   SMART MATCH
   ========= */

.tm-layout{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:16px;
  margin-top:14px;
}

.tm-layout--reco{grid-template-columns:1fr}

.filters, .results{
  background:rgba(18,18,18,0.72);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  padding:16px;
}

.filters-head, .results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.filters-title{
  font-weight:800;
  font-size:16px;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.filter{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.12);
  border-radius:16px;
  padding:12px;
  margin-bottom:12px;
}
.filter:last-of-type{margin-bottom:14px}

.filter > summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.filter > summary::-webkit-details-marker{display:none}

.filter > summary::after{
  content:"▾";
  opacity:.75;
  transition:transform .18s ease;
}
.filter[open] > summary::after{transform:rotate(180deg)}

.filter-body{
  padding-top:12px;
  display:grid;
  gap:10px;
}

.filter label{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

.range{accent-color:#9a9a9a}

.filters button#btn_smart{
  width:100%;
  height:46px;
  margin-top:2px;
}

/* applied filter chips (пусто — не показываем) */
.applied{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.applied:empty{display:none}

.applied .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:var(--text);
  font-size:13px;
}
.applied .chip button{
  height:auto;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
}
.applied .chip button:hover{color:var(--text)}

/* result cards grid (под JS-разметку) */
.cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.usercard{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.18);
  transition:var(--transition);
}
.usercard:hover{
  border-color:rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.07);
  cursor:pointer;
}

.avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  flex:0 0 auto;
  overflow:hidden;
}
.avatar img{width:100%; height:100%; object-fit:cover}

.uc-main{flex:1; min-width:0}
.uc-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.uc-name{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.uc-score{font-weight:800; color:rgba(245,245,245,0.95)}
.uc-bio{
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.tag{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  font-size:12px;
  opacity:.9;
}

.empty{
  margin-top:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.12);
}

/* =========
   Responsive
   ========= */

@media (max-width: 900px){
  .tm-head{flex-direction:column; align-items:stretch}
  .seg{align-self:flex-start}
  .tm-layout{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .teammates-page .wrap{padding:16px}
  .card{padding:18px}
  .lookup-row{flex-direction:column; align-items:stretch}
  .lookup-row button{width:100%}
}

/* =========
   ONBOARD MODAL
   ========= */

.grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.tm-onboard{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55);z-index:1000}
.tm-onboard.hidden{display:none}
.tm-onboard__sheet{width:min(720px,100%);background:#161616;border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 20px 80px rgba(0,0,0,.45)}
.tm-onboard__top{display:flex;align-items:center;gap:12px}
.tm-onboard__top h2{margin:0;font-size:18px}
.tm-onboard__nav{display:flex;align-items:center;gap:10px;margin-top:14px}
.tm-steps{position:relative;min-height:240px}
.tm-step{will-change:transform,opacity}
@media (prefers-reduced-motion: reduce){
  .tm-step{transition:none !important;animation:none !important}
}
/* ===== АВТОРИЗАЦИЯ (модал) ===== */
#auth_prompt{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  padding:6vh 16px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  z-index:5000;
}
#auth_prompt:not(.hidden){ display:flex; }

#auth_prompt .sheet{
  width:min(560px,100%);
  background:rgba(18,18,18,.98);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  padding:20px;
}
#auth_prompt h3{ margin:0 0 8px; font-size:18px; }
#auth_prompt p{ margin:0 0 12px; color:var(--muted); }
#auth_prompt .hstack{ display:flex; gap:8px; justify-content:flex-start; }


/* ===== ONBOARD UX UPGRADE (append) ===== */

.tm-onboard{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 1;
}

.tm-onboard__sheet{
  width:min(820px, calc(100vw - 32px));
  max-height:min(calc(var(--vh, 1vh) * 100 - 32px), 820px);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto minmax(0, 1fr) auto;
  border-radius:26px;
  padding:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(22,22,22,.96), rgba(15,15,15,.98)),
    #161616;
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.04) inset,
    0 0 0 1px rgba(255,255,255,.05) inset;
  transform-origin: 50% 12%;
}

.tm-onboard__top{
  position: relative;
  z-index: 2;
  margin: -6px -6px 10px;
  padding: 8px 8px 12px;
  background: linear-gradient(180deg, rgba(22,22,22,.98), rgba(18,18,18,.92));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tm-onboard__top h2{
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -.02em;
}

#tm_onboard_close.btn-icon{
  margin-left:auto;
  border-radius:14px;
  width:42px;
  height:42px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
#tm_onboard_close.btn-icon:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

.tm-progress{
  margin: 2px 0 12px;
  display:grid;
  gap:10px;
}
.tm-progress__bar{
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.tm-progress__bar > i{
  position:relative;
  display:block;
  height:100%;
  width:33.333%;
  border-radius:inherit;
  background: linear-gradient(90deg, rgba(210,210,210,.70), rgba(255,255,255,.92));
  box-shadow: 0 0 24px rgba(255,255,255,.18);
  transition: width .42s cubic-bezier(.18,1,.22,1), filter .24s ease;
  overflow:hidden;
}
.tm-progress__bar > i::after{
  content:"";
  position:absolute;
  inset:0 auto 0 -32%;
  width:34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  opacity:0;
  pointer-events:none;
}
.tm-progress__bar.is-animating > i{
  filter:saturate(1.08) brightness(1.03);
}
.tm-progress__bar.is-animating > i::after{
  opacity:1;
  animation: tmProgressSweep .5s cubic-bezier(.22,.8,.2,1);
}
.tm-progress__dots{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.tm-dot{
  width:32px;
  height:32px;
  padding:0;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  line-height:1;
  font-size:14px;
  text-align:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor:pointer;
  transition:
    transform .2s cubic-bezier(.22,.8,.2,1),
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}
.tm-dot:hover{
  color: var(--text);
  border-color: rgba(255,255,255,.16);
}
.tm-dot.is-done{
  color: #e7e7e7;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.tm-dot.is-active{
  color: #fff;
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
  transform: translateY(-1px);
}
.tm-dot.is-bump{
  animation: tmDotBump .34s cubic-bezier(.22,.9,.24,1);
}

.tm-steps{
  position:relative;
  min-height: 0;
  height: 100%;
  border-radius: 18px;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding: 6px 4px 10px;
  scroll-padding-top: 8px;
  scroll-padding-bottom: 18px;
}
.tm-step{
  will-change: transform, opacity;
  padding: 2px 2px 8px;
}
.tm-step[hidden]{display:none !important;}

.tm-dot:focus-visible{
  outline:none;
  border-color: rgba(255,255,255,.52);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}

.tm-steps{
  overflow-x: clip;
}

.tm-step label{
  display:block;
  margin-bottom:6px;
  color:#dedede;
  font-weight:600;
}

.tm-step input,
.tm-step select{
  width:100%;
  min-width:0;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(14,14,14,.88);
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset;
  transition:
    border-color .22s cubic-bezier(.22,.8,.2,1),
    background-color .22s ease,
    box-shadow .22s ease,
    transform .18s ease;
}
.tm-step input::placeholder{
  color: rgba(156,163,175,.85);
}

.tm-step .grid-2,
.tm-step .grid-3{
  gap:12px;
}
.tm-step .grid-2 > *,
.tm-step .grid-3 > *{
  min-width:0;
}
.lookup-row input{
  transition:
    border-color .22s cubic-bezier(.22,.8,.2,1),
    background-color .22s ease,
    box-shadow .22s ease,
    transform .18s ease;
}
.lookup-row input:hover,
.tm-step input:not([type="checkbox"]):hover,
.tm-step select:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(18,18,18,.90);
}
.lookup-row input:focus,
.lookup-row input:focus-visible,
.tm-step input:not([type="checkbox"]):focus,
.tm-step input:not([type="checkbox"]):focus-visible,
.tm-step select:focus,
.tm-step select:focus-visible{
  outline:none;
  border-color: rgba(255,255,255,.38);
  background: rgba(12,12,12,.96);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.10),
    0 12px 28px rgba(2,6,23,.28),
    inset 0 1px 0 rgba(255,255,255,.03);
}
.lookup-row input:focus-visible,
.tm-step input:not([type="checkbox"]):focus-visible,
.tm-step select:focus-visible{
  transform: translateY(-1px);
}

.tm-check{
  margin-top: 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  width:fit-content;
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.tm-check input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:#9a9a9a;
  margin:0;
  flex:0 0 auto;
}

#tm_slots.hint,
#tm_games.hint{
  margin-top:10px;
  color: var(--text);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:10px;
}

.tm-listbox{
  display:grid;
  gap:8px;
}
.tm-listbox.is-empty{
  color: var(--muted);
  border-style:dashed !important;
  background: rgba(255,255,255,.02) !important;
}

.tm-mini-item{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.14);
}
.tm-mini-item:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.tm-mini-main{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.tm-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size:12px;
  line-height:1;
  color: var(--text);
}
.tm-pill--accent{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #ededed;
}
.tm-pill--muted{
  color: var(--muted);
}

.tm-icon-btn{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  cursor:pointer;
  transition: var(--transition);
  padding:0;
}
.tm-icon-btn:hover{
  color: #fff;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}

.tm-onboard__nav{
  position: relative;
  z-index: 2;
  margin: 14px -6px -6px;
  padding: 12px 6px 6px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(0deg, rgba(22,22,22,.98), rgba(18,18,18,.92));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tm-onboard__nav button{
  min-width: 120px;
  height: 44px;
  border-radius: 14px;
}
.tm-onboard__nav button:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none !important;
}

#tm_add_slot.btn-ghost,
#tm_add_game.btn-ghost{
  margin-top:10px !important;
  border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
#tm_add_slot.btn-ghost:hover,
#tm_add_game.btn-ghost:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

@media (max-width: 760px){
  .tm-head .hstack{
    flex-wrap:wrap;
    row-gap:10px;
  }
  .tm-onboard{
    align-items:flex-end;
    padding:10px 10px max(10px, env(safe-area-inset-bottom, 0px));
  }
  .tm-onboard__sheet{
    width:100%;
    max-height:calc(var(--vh, 1vh) * 100 - 12px);
    border-radius:20px;
    padding:16px;
  }
  .tm-progress__dots{gap:6px}
  .tm-dot{width:28px;height:28px;border-radius:10px}
  .tm-step .grid-3{
    grid-template-columns:1fr;
  }
  .tm-step .grid-2{
    grid-template-columns:1fr;
  }
}

@media (max-height: 760px) and (min-width: 761px){
  .tm-onboard{
    align-items:center;
    justify-content:center;
    padding:16px;
  }
  .tm-onboard__sheet{
    width:min(820px, calc(100vw - 32px));
    max-height:min(calc(var(--vh, 1vh) * 100 - 32px), 760px);
    margin:auto;
  }
  .tm-steps{
    padding-bottom:12px;
  }
}

@media (max-width: 640px){
  .topbar{
    padding:12px 14px;
    gap:8px;
    flex-wrap:wrap;
  }
  .topnav{
    order:2;
    flex:1 1 100%;
    overflow:auto;
    padding-top:2px;
  }
  .actions{
    margin-left:auto;
  }
}

@keyframes tmProgressSweep{
  from{ transform:translateX(0); }
  to{ transform:translateX(360%); }
}

@keyframes tmDotBump{
  0%{ transform:translateY(0) scale(1); }
  45%{ transform:translateY(-2px) scale(1.08); }
  100%{ transform:translateY(-1px) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .tm-progress__bar > i,
  .tm-dot,
  .tm-mini-item{
    transition:none !important;
  }
  .tm-dot.is-bump,
  .tm-progress__bar.is-animating > i::after{
    animation:none !important;
  }
}

/* ===== Teammates profile-style shell ===== */
:root{
  --tm-bg:#050505;
  --tm-panel:#0a0a0a;
  --tm-card:#101010;
  --tm-card-soft:#151515;
  --tm-line:#242424;
  --tm-text:#e8e8e8;
  --tm-muted:#929292;
  --tm-accent:#9a9a9a;
  --tm-menu-accent:#9a87b9;
  --tm-menu-accent-hover:#a493c2;
  --tm-mint:#c8c8c8;
  --tm-amber:#dddddd;
  --tm-rose:#adadad;
  --tm-font:var(--site-font);

  --i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 20c-.55 0-1.02-.2-1.41-.59S2 18.55 2 18V6c0-.55.2-1.02.59-1.41S3.45 4 4 4h16c.55 0 1.02.2 1.41.59S22 5.45 22 6v12c0 .55-.2 1.02-.59 1.41S20.55 20 20 20H4Zm2-4h8v-2H6v2Zm0-3h12v-2H6v2Zm0-3h12V8H6v2Z'/%3E%3C/svg%3E");
  --i-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3ZM8 11c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3Zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5C23 14.17 18.33 13 16 13Z'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4Zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4Z'/%3E%3C/svg%3E");
  --i-feed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16v3H4V4Zm0 5h10v3H4V9Zm0 5h16v6H4v-6Zm12-5h4v3h-4V9Z'/%3E%3C/svg%3E");
  --i-gear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49 1a7.28 7.28 0 0 0-1.69-.98L14.5 2.42A.49.49 0 0 0 14 2h-4c-.25 0-.46.18-.5.42L9.12 5.07c-.61.23-1.18.55-1.69.98l-2.49-1a.5.5 0 0 0-.6.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.12.22.37.31.6.22l2.49-1c.51.4 1.08.74 1.69.98l.38 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.38-2.65c.61-.24 1.18-.58 1.69-.98l2.49 1c.23.08.48 0 .6-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
}

html,
body{
  background:var(--tm-bg) !important;
}

.teammates-page{
  margin:0;
  min-height:100dvh;
  background:var(--tm-bg);
  color:var(--tm-text);
  font-family:var(--tm-font);
}

.tm-shell{
  min-height:100dvh;
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:14px;
  align-items:start;
  align-content:start;
  padding:14px;
}

.tm-sidebar{
  min-width:0;
  position:sticky;
  top:14px;
  display:flex;
  flex-direction:column;
  height:calc(100dvh - 28px);
  max-height:calc(100dvh - 28px);
  border:2px solid #000;
  border-radius:18px;
  background:var(--tm-panel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  overflow:hidden;
}

.tm-nav-card{
  height:253px;
  min-height:253px;
  padding:24px 24px 14px;
  display:flex;
  flex-direction:column;
  gap:18px;
  background:var(--tm-panel);
  border-bottom:1px solid #171717;
}

.tm-brand-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.tm-brand{
  display:inline-flex;
  gap:6px;
  color:#9f9f9f;
  text-decoration:none;
}

.tm-brand-mark{
  font-size:42px;
  line-height:.9;
  font-weight:800;
  font-style:italic;
  letter-spacing:-.08em;
}

.tm-brand-mark::after{
  content:"◦";
  display:inline-block;
  margin-left:6px;
  font-size:22px;
  transform:translateY(-10px);
  opacity:.75;
}

.tm-top-actions{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-left:auto;
}

.tm-mini-btn{
  height:40px;
  min-width:40px;
  padding:0 13px;
  border:1px solid #171717;
  border-radius:8px;
  background:#111111;
  color:#ededed;
  font-family:var(--tm-font);
  font-size:15px;
  font-style:italic;
  font-weight:800;
  line-height:1;
  box-shadow:none;
}

.tm-mini-btn:hover{
  background:#151515;
  border-color:var(--tm-menu-accent);
  box-shadow:none;
  transform:none;
}

.tm-mini-btn:focus-visible,
.tm-nav-item:focus-visible,
.tm-side-action:focus-visible{
  outline:1px solid var(--tm-accent);
  outline-offset:2px;
}

.tm-help-btn{
  width:40px;
  padding:0;
  border-radius:50%;
}

.tm-nav-grid{
  display:grid;
  grid-template-columns:repeat(6,44px);
  grid-template-rows:64px 64px;
  justify-content:center;
  justify-items:center;
  align-items:center;
  gap:0;
  width:264px;
  height:158px;
  margin:0 auto;
  padding:16px 0 14px;
}

.tm-nav-item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  min-width:58px;
  padding:0;
  border:0;
  border-radius:50%;
  appearance:none;
  -webkit-appearance:none;
  background:#8f8f8f;
  color:#202020;
  box-shadow:0 3px 0 rgba(255,255,255,.18) inset,0 7px 14px rgba(0,0,0,.42);
  text-decoration:none;
  font-size:0;
}

.tm-nav-item:hover,
.tm-nav-item.active{
  background:var(--tm-menu-accent);
  transform:translateY(-1px);
}

.tm-nav-item:hover{
  background:var(--tm-menu-accent-hover);
}

.tm-nav-item::before{
  content:"";
  width:24px;
  height:24px;
  background:currentColor;
  -webkit-mask:var(--ico,var(--i-chat)) center/contain no-repeat;
  mask:var(--ico,var(--i-chat)) center/contain no-repeat;
}

.tm-nav-chat{--ico:var(--i-chat)}
.tm-nav-users{--ico:var(--i-users)}
.tm-nav-user{--ico:var(--i-user)}
.tm-nav-feed{--ico:var(--i-feed)}
.tm-nav-gear{--ico:var(--i-gear)}
.tm-nav-item:nth-child(1){grid-column:2 / span 2;grid-row:1}
.tm-nav-item:nth-child(2){grid-column:4 / span 2;grid-row:1}
.tm-nav-item:nth-child(3){grid-column:1 / span 2;grid-row:2}
.tm-nav-item:nth-child(4){grid-column:3 / span 2;grid-row:2}
.tm-nav-item:nth-child(5){grid-column:5 / span 2;grid-row:2}
.tm-nav-item span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.tm-side-card{
  min-height:0;
  overflow:auto;
  flex:1 1 auto;
  padding:24px 30px 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
    var(--tm-panel);
}

.tm-side-action{
  display:block;
  width:100%;
  padding:4px 0;
  border:0;
  background:transparent;
  color:#969696;
  font-family:var(--site-font);
  font-size:16px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.1em;
  text-align:left;
  box-shadow:none;
}

.tm-side-action:hover,
.tm-side-action.is-active{
  color:#d1d1d1;
  background:transparent;
  transform:none;
  box-shadow:none;
}

.teammates-page .wrap{
  max-width:none;
  margin:0;
  padding:0;
  display:block;
}

.tm-main{
  min-width:0;
  min-height:calc(100dvh - 28px);
  max-height:calc(100dvh - 28px);
  overflow:auto;
  border:2px solid #000;
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 28%),
    linear-gradient(315deg, rgba(255,255,255,.025), transparent 32%),
    var(--tm-panel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  padding:22px 30px;
}

.teammates-page .card{
  max-width:none;
  margin:0;
  padding:clamp(22px,3vw,34px);
  border:1px solid #1f1f1f;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%),
    var(--tm-card);
  box-shadow:0 18px 46px rgba(0,0,0,.34);
}

.tm-head{
  align-items:flex-start;
  margin-bottom:24px;
}

.tm-title{
  margin:0 0 10px;
  color:#f5f5f5;
  font-family:var(--tm-font);
  font-size:clamp(36px,4.2vw,58px);
  font-style:italic;
  font-weight:800;
  line-height:.95;
  letter-spacing:0;
}

.tm-sub{
  max-width:520px;
  color:#f0f0f0;
  font-family:var(--site-font);
}

.seg{
  padding:4px;
  border-radius:10px;
  background:#111;
  border:1px solid #272727;
}

.seg-btn{
  height:38px;
  border-radius:7px;
  color:#a5a5a5;
  font-family:var(--tm-font);
  font-style:italic;
  font-weight:800;
}

.seg-btn:hover{
  color:#e3e3e3;
  background:#191919;
  border-color:#303030;
}

.seg-btn.is-active{
  color:#151515;
  background:var(--tm-accent);
  border-color:var(--tm-accent);
}

#tm_open_onboard,
#btn_smart,
#btn_find,
.tm-onboard__nav button,
#tm_add_slot,
#tm_add_game{
  font-family:var(--tm-font);
  font-style:italic;
  font-weight:800;
}

#tm_open_onboard.btn-ghost,
#btn_smart.btn-ghost,
#tm_add_slot.btn-ghost,
#tm_add_game.btn-ghost{
  border-color:#2d2d2d;
  background:#171717;
  color:#d6d6d6;
}

#tm_open_onboard.btn-ghost:hover,
#btn_smart.btn-ghost:hover,
#tm_add_slot.btn-ghost:hover,
#tm_add_game.btn-ghost:hover{
  border-color:var(--tm-accent);
  background:#202020;
  color:#fff;
}

.lookup{
  gap:12px;
}

.lookup-row{
  gap:12px;
}

.lookup-row input{
  height:52px;
  border-color:#262626;
  border-radius:8px;
  background:#0d0d0d;
  color:var(--tm-text);
  font-family:var(--site-font);
}

.lookup-row input:hover{
  border-color:#363636;
}

.lookup-row input:focus,
.lookup-row input:focus-visible{
  border-color:var(--tm-accent);
  background:#101010;
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
  transform:none;
}

.lookup-row button,
.tm-onboard__nav button:not(.ghost){
  border:1px solid rgba(255,255,255,.34);
  background:var(--tm-accent);
  color:#161616;
}

.lookup-row button:hover,
.tm-onboard__nav button:not(.ghost):hover{
  border-color:#d8d8d8;
  background:#c8c8c8;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

.filters,
.results{
  border-color:#242424;
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 34%),
    #101010;
}

.filters-title{
  color:#d8d8d8;
  font-family:var(--site-font);
  letter-spacing:.04em;
}

.usercard{
  border-color:#262626;
  border-radius:12px;
  background:#151515;
}

.usercard:hover{
  border-color:rgba(255,255,255,.22);
  background:#1b1b1b;
}

.uc-score{
  color:var(--tm-mint);
}

.tag:nth-child(3n+1){
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}

.tag:nth-child(3n+2){
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}

.tag:nth-child(3n){
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}

.hint{
  color:#dddddd;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.055);
}

.empty{
  border-color:#2c2c2c;
  background:#111;
}

.tm-onboard{
  background:rgba(0,0,0,.68);
}

.tm-onboard__sheet,
#auth_prompt .sheet,
#sessions_container .sheet{
  border-color:#242424;
  background:var(--tm-card);
  color:var(--tm-text);
  font-family:var(--site-font);
}

#sessions_container header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid #242424;
}

#sessions_container header strong{
  font-family:var(--tm-font);
  font-size:20px;
  font-style:italic;
}

#sessions_container table{
  width:100%;
  border-collapse:collapse;
}

#sessions_container th,
#sessions_container td{
  padding:12px;
  text-align:left;
  border-bottom:1px solid #242424;
}

#sessions_container thead th{
  color:var(--tm-muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

#sessions_container tbody td{
  color:var(--tm-text);
  font-size:14px;
}

#sessions_container tbody tr:hover{
  background:rgba(255,255,255,.05);
}

#sessions_container .actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}

#sessions_container button:not(.btn-icon){
  border:1px solid #2d2d2d;
  border-radius:8px;
  background:#171717;
  color:#d6d6d6;
  font-family:var(--tm-font);
  font-style:italic;
  font-weight:800;
}

#sessions_container button:not(.btn-icon):hover{
  border-color:var(--tm-accent);
  background:#202020;
  box-shadow:none;
}

#sessions_container .ghost.btn-icon[data-action="close"]{
  width:38px;
  height:38px;
  min-width:38px;
  border:1px solid #2d2d2d;
  border-radius:50%;
  background:#171717;
  color:#d6d6d6;
  box-shadow:none;
}

#sessions_container .ghost.btn-icon[data-action="close"]:hover{
  border-color:var(--tm-accent);
  background:#202020;
  transform:none;
}

.tm-onboard__top,
.tm-onboard__nav{
  background:linear-gradient(180deg, rgba(20,20,20,.98), rgba(16,16,16,.92));
}

.tm-progress__bar > i{
  background:linear-gradient(90deg, #8f8f8f, #d8d8d8, #ffffff);
}

.tm-dot.is-active{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.30);
}

.tm-dot.is-done{
  color:#e8e8e8;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}

.tm-step input,
.tm-step select{
  border-color:#292929;
  background:#0d0d0d;
  color:var(--tm-text);
}

.tm-step input:not([type="checkbox"]):hover,
.tm-step select:hover{
  border-color:#3a3a3a;
  background:#101010;
}

.tm-step input:not([type="checkbox"]):focus,
.tm-step input:not([type="checkbox"]):focus-visible,
.tm-step select:focus,
.tm-step select:focus-visible{
  border-color:var(--tm-accent);
  background:#101010;
  box-shadow:0 0 0 3px rgba(255,255,255,.10);
  transform:none;
}

@media (max-width: 980px){
  .tm-shell{
    grid-template-columns:1fr;
  }

  .tm-sidebar{
    position:relative;
    top:auto;
    height:auto;
    max-height:none;
  }

  .tm-side-card{
    display:none;
  }

  .tm-main{
    min-height:auto;
    max-height:none;
  }
}

@media (max-width: 640px){
  .tm-shell{
    padding:8px;
    gap:8px;
  }

  .tm-nav-card{
    height:auto;
    min-height:0;
    padding:20px 16px 12px;
  }

  .tm-brand-mark{
    font-size:38px;
  }

  .tm-nav-grid{
    transform:scale(.9);
    transform-origin:center top;
    margin-bottom:-12px;
  }

  .tm-main{
    padding:16px;
  }

  .teammates-page .card{
    padding:18px;
  }

  .tm-head .hstack,
  .seg{
    width:100%;
  }

  .seg-btn{
    flex:1 1 0;
  }
}

/* ===== Final dark pass: neutral monochrome shell ===== */
:root{
  --tm-panel:#0a0a0a;
  --tm-card:#101010;
  --tm-card-soft:#151515;
  --tm-control:#9a9a9a;
  --tm-control-hover:#b1b1b1;
  --tm-control-dark:#242424;
  --tm-control-dark-hover:#2e2e2e;
  --tm-control-line:#343434;
  --tm-focus:#4a4a4a;
  --i-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m6.4 19-1.4-1.4 5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19Z'/%3E%3C/svg%3E");
}

.tm-sidebar,
.tm-nav-card,
.tm-side-card{
  background:var(--tm-panel);
}

.tm-side-card{
  background:var(--tm-panel);
}

.tm-main{
  background:var(--tm-panel);
}

.tm-brand-mark{
  position:relative;
  display:inline-block;
  padding-right:10px;
}

.tm-brand-mark::after{
  content:"\00B0";
  position:absolute;
  left:calc(100% - 4px);
  top:4px;
  display:block;
  margin-left:0;
  font-size:17px;
  line-height:1;
  transform:none;
  opacity:.75;
  letter-spacing:0;
}

.teammates-page .card{
  background:var(--tm-card);
  border-color:#1f1f1f;
}

.filters,
.results,
.usercard,
.tm-onboard__sheet,
#auth_prompt .sheet{
  background:var(--tm-card);
  border-color:#2a2a2a;
}

.tm-mini-btn:hover{
  border-color:var(--tm-menu-accent);
  background:#151515;
  box-shadow:0 0 0 3px rgba(154,135,185,.10);
}

.tm-side-action:focus-visible,
.seg-btn:focus-visible,
.lookup-row input:focus-visible,
.tm-step input:not([type="checkbox"]):focus-visible,
.tm-step select:focus-visible{
  outline:1px solid var(--tm-control);
  outline-offset:2px;
}

.tm-mini-btn:focus-visible{
  outline:1px solid var(--tm-menu-accent);
  outline-offset:2px;
}

.tm-nav-item:focus-visible{
  outline:1px solid var(--tm-menu-accent);
  outline-offset:2px;
}

.tm-nav-item:hover,
.tm-nav-item.active{
  background:var(--tm-menu-accent);
}

.tm-nav-item:hover{
  background:var(--tm-menu-accent-hover);
}

.seg{
  background:#101010;
  border-color:#2a2a2a;
}

.seg-btn.is-active,
.lookup-row button,
.tm-onboard__nav button:not(.ghost){
  background:var(--tm-control);
  border-color:var(--tm-control);
  color:#202020;
}

.seg-btn.is-active:hover,
.lookup-row button:hover,
.tm-onboard__nav button:not(.ghost):hover{
  background:var(--tm-control-hover);
  border-color:var(--tm-control-hover);
  color:#202020;
  box-shadow:none;
}

#tm_open_onboard.btn-ghost,
#btn_smart.btn-ghost,
#tm_add_slot.btn-ghost,
#tm_add_game.btn-ghost{
  background:var(--tm-control-dark);
  border-color:var(--tm-control-line);
  color:#e0e0e0;
}

#tm_open_onboard.btn-ghost:hover,
#btn_smart.btn-ghost:hover,
#tm_add_slot.btn-ghost:hover,
#tm_add_game.btn-ghost:hover{
  background:var(--tm-control-dark-hover);
  border-color:var(--tm-focus);
  color:#f0f0f0;
  box-shadow:none;
}

.lookup-row input{
  background:#0b0b0b;
}

.lookup-row input:focus,
.lookup-row input:focus-visible,
.tm-step input:not([type="checkbox"]):focus,
.tm-step input:not([type="checkbox"]):focus-visible,
.tm-step select:focus,
.tm-step select:focus-visible{
  border-color:#6a6a6a;
  box-shadow:0 0 0 3px rgba(154,154,154,.12);
}

.usercard:hover{
  background:#202020;
  border-color:#3f3f3f;
}

.uc-score{
  color:#d0d0d0;
}

.tag,
.tag:nth-child(3n+1),
.tag:nth-child(3n+2),
.tag:nth-child(3n){
  border-color:#343434;
  background:#202020;
  color:#d8d8d8;
}

.hint,
.empty{
  color:#d0d0d0;
  border-color:#343434;
  background:#151515;
}

.tm-onboard{
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.tm-onboard__top,
.tm-onboard__nav{
  background:#151515;
  border-color:#2a2a2a;
}

.tm-progress__bar > i{
  background:linear-gradient(90deg,#7f7f7f,var(--tm-control));
  box-shadow:none;
}

.tm-dot.is-active,
.tm-dot.is-done{
  color:#f0f0f0;
  background:#242424;
  border-color:#4a4a4a;
  box-shadow:none;
}

#sessions_container{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:6vh 16px;
  overflow:auto;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

#sessions_container:not(.hidden){
  display:flex;
}

#sessions_container::before{
  background:rgba(0,0,0,.65);
}

#sessions_container .sheet{
  width:min(760px,100%);
  margin:0;
  padding:18px;
  border:1px solid #2a2a2a;
  border-radius:18px;
  background:#151515;
  color:#d0d0d0;
  box-shadow:0 18px 44px rgba(0,0,0,.7);
}

#sessions_container header{
  margin:0;
  padding:6px 4px 12px;
  border-bottom:1px solid #2a2a2a;
}

#sessions_container header strong{
  color:#e0e0e0;
  font-family:var(--tm-font);
  font-size:16px;
  font-style:normal;
  font-weight:700;
}

#sessions_container table{
  margin-top:8px;
}

#sessions_container th,
#sessions_container td{
  border-bottom:0;
}

#sessions_container thead th{
  color:#a0a0a0;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.05em;
}

#sessions_container tbody tr{
  border-bottom:1px solid #282828;
  background:transparent;
}

#sessions_container tbody tr:hover{
  background:#202020;
}

#sessions_container tbody td{
  color:#d0d0d0;
}

#sessions_container .actions{
  gap:8px;
  padding-top:12px;
  margin-top:12px;
  border-top:1px solid #2a2a2a;
}

#sessions_container button:not(.btn-icon){
  padding:8px 12px;
  border:1px solid var(--tm-control-line);
  border-radius:12px;
  background:var(--tm-control-dark);
  color:#e0e0e0;
  box-shadow:none;
}

#sessions_container button:not(.btn-icon):hover{
  background:var(--tm-control-dark-hover);
  border-color:var(--tm-focus);
  transform:none;
}

#sessions_container .actions button{
  padding:11px 18px;
  border-color:var(--tm-control);
  background:var(--tm-control);
  color:#202020;
}

#sessions_container .actions button:hover{
  border-color:var(--tm-control-hover);
  background:var(--tm-control-hover);
}

#sessions_container .ghost.btn-icon[data-action="close"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  min-width:42px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--tm-control);
  color:#202020;
  font-size:0;
  line-height:1;
}

#sessions_container .ghost.btn-icon[data-action="close"]:hover{
  background:var(--tm-control-hover);
  transform:none;
}

#sessions_container .ghost.btn-icon[data-action="close"]::before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  margin:auto;
  background:currentColor;
  -webkit-mask:var(--i-close) center/contain no-repeat;
  mask:var(--i-close) center/contain no-repeat;
}

.tm-mini-btn:hover,
.tm-mini-btn:focus-visible{
  border-color:var(--tm-menu-accent);
}

/* ===== Teammate search layout: filters + fixed recommendations ===== */
.tm-filters{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:22px 24px 26px;
}

.tm-filter-panel-head{
  display:grid;
  gap:4px;
  padding-bottom:12px;
  border-bottom:1px solid #232323;
}

.tm-filter-kicker{
  color:#8f8f8f;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.tm-filter-panel-head h2{
  margin:0;
  color:#e8e8e8;
  font-family:var(--tm-font);
  font-size:24px;
  font-style:italic;
  font-weight:800;
  line-height:1.05;
}

.tm-filter-form{
  display:grid;
  gap:12px;
}

.tm-filter-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.tm-filter-row--time{
  grid-template-columns:1.05fr .9fr .9fr;
}

.tm-filter-field{
  min-width:0;
  display:grid;
  gap:6px;
}

.tm-filter-field > span{
  color:#a8a8a8;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}

.tm-filter-field input,
.tm-filter-field select{
  width:100%;
  min-width:0;
  height:42px;
  padding:8px 10px;
  border:1px solid #2d2d2d;
  border-radius:8px;
  background:#0d0d0d;
  color:var(--tm-text);
  font-size:14px;
  line-height:1.2;
  transition:var(--transition);
}

.tm-filter-field input::placeholder{
  color:#686868;
}

.tm-filter-field input:hover,
.tm-filter-field select:hover{
  border-color:#3a3a3a;
  background:#101010;
}

.tm-filter-field input:focus,
.tm-filter-field input:focus-visible,
.tm-filter-field select:focus,
.tm-filter-field select:focus-visible{
  outline:none;
  border-color:#6a6a6a;
  background:#101010;
  box-shadow:0 0 0 3px rgba(154,154,154,.12);
}

.tm-filter-field--range input{
  height:auto;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.tm-filter-field--range input:focus,
.tm-filter-field--range input:focus-visible{
  box-shadow:none;
}

.tm-filter-actions{
  display:grid;
  gap:8px;
  padding-top:4px;
}

.tm-filter-button{
  width:100%;
  min-height:42px;
  border:1px solid var(--tm-control);
  border-radius:8px;
  background:var(--tm-control);
  color:#202020;
  font-family:var(--tm-font);
  font-style:italic;
  font-weight:800;
  box-shadow:none;
}

.tm-filter-button:hover{
  border-color:var(--tm-control-hover);
  background:var(--tm-control-hover);
  color:#202020;
  box-shadow:none;
}

.tm-filter-button--ghost{
  border-color:var(--tm-control-line);
  background:var(--tm-control-dark);
  color:#e0e0e0;
}

.tm-filter-button--ghost:hover{
  border-color:var(--tm-focus);
  background:var(--tm-control-dark-hover);
  color:#f0f0f0;
}

.panel-lookup{
  margin-top:0;
  padding-bottom:22px;
  border-bottom:1px solid #242424;
}

.panel-lookup > .filters-title{
  margin-bottom:10px;
}

.panel-suggestions{
  margin-top:22px;
}

.panel-suggestions .tm-layout{
  margin-top:0;
}

.lookup-list{
  display:grid;
  gap:8px;
}

#result.has-results{
  padding:0;
  border:0;
  background:transparent;
  color:var(--tm-text);
}

.lookup-list .lookup-row{
  min-height:64px;
  padding:10px 12px;
  border:1px solid #262626;
  border-radius:12px;
  background:#151515;
  cursor:pointer;
}

.lookup-list .lookup-row:hover{
  border-color:#3f3f3f;
  background:#202020;
}

.lookup-meta{
  min-width:0;
}

.lookup-name{
  overflow:hidden;
  color:#eeeeee;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.lookup-bio{
  overflow:hidden;
  color:#9b9b9b;
  font-size:13px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.applied{
  margin:0 0 12px;
}

@media (max-width: 980px){
  .tm-side-card.tm-filters{
    display:flex;
  }
}

@media (max-width: 640px){
  .tm-filters{
    padding:18px 16px 20px;
  }

  .tm-filter-row,
  .tm-filter-row--time{
    grid-template-columns:1fr;
  }

  .tm-title{
    font-size:clamp(32px,12vw,42px);
  }
}

/* ===== Compact search pass ===== */
.tm-main{
  padding:16px;
  background:var(--tm-panel);
}

.teammates-page .card{
  min-height:calc(100dvh - 64px);
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.tm-head,
.tm-title,
.tm-sub{
  display:none;
}

.panel-lookup{
  position:sticky;
  top:0;
  z-index:5;
  margin:0;
  padding:0 0 12px;
  border-bottom:1px solid #202020;
  background:var(--tm-panel);
}

.lookup{
  gap:0;
}

.lookup-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px 96px;
  align-items:center;
  gap:8px;
}

.lookup-row input{
  height:42px;
  padding:0 14px;
  border:1px solid #252525;
  border-radius:8px;
  background:#151515;
  color:#e5e5e5;
  font-size:15px;
}

.lookup-row input::placeholder{
  color:#8d8d8d;
}

.lookup-row button,
.tm-profile-chip.btn-ghost{
  height:42px;
  min-width:0;
  padding:0 12px;
  border-radius:8px;
  font-size:15px;
}

.tm-profile-chip.btn-ghost{
  border-color:#2f2f2f;
  background:#202020;
  color:#d6d6d6;
}

.panel-suggestions{
  margin-top:14px;
}

.panel-suggestions .results{
  padding:14px;
  border-radius:12px;
  border-color:#222;
  background:#101010;
}

.results-head{
  min-height:38px;
  margin-bottom:10px;
}

.results-head .filters-title{
  font-size:17px;
  line-height:1.15;
}

.results-head .tiny{
  margin-top:2px;
  color:#8f8f8f;
}

#btn_smart.btn-ghost{
  height:34px;
  padding:0 12px;
  border-radius:8px;
  font-size:14px;
}

.tm-filter-panel-head{
  padding:0 0 8px;
  border-bottom:0;
}

.tm-filter-panel-head h2{
  font-family:var(--site-font);
  font-size:16px;
  font-style:normal;
  font-weight:800;
  line-height:1.2;
  letter-spacing:0;
}

.tm-filter-kicker{
  display:none;
}

.tm-filters{
  gap:8px;
  padding:14px 16px 16px;
  background:var(--tm-panel);
}

.tm-filter-form{
  gap:8px;
}

.tm-filter-section{
  border:1px solid #242424;
  border-radius:8px;
  background:#151515;
  overflow:hidden;
}

.tm-filter-section > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:34px;
  padding:0 10px;
  color:#d6d6d6;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  line-height:1;
  list-style:none;
}

.tm-filter-section > summary::-webkit-details-marker{
  display:none;
}

.tm-filter-section > summary::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid #8f8f8f;
  border-bottom:2px solid #8f8f8f;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .16s ease;
}

.tm-filter-section[open] > summary{
  border-bottom:1px solid #242424;
}

.tm-filter-section[open] > summary::after{
  transform:rotate(225deg) translateY(-1px);
}

.tm-filter-section > .tm-filter-field,
.tm-filter-section > .tm-filter-row{
  margin:8px 10px;
}

.tm-filter-section > .tm-filter-field + .tm-filter-field,
.tm-filter-section > .tm-filter-row + .tm-filter-row{
  margin-top:0;
}

.tm-filter-row{
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}

.tm-filter-row--time{
  grid-template-columns:1fr 1fr 1fr;
}

.tm-filter-field{
  gap:4px;
}

.tm-filter-field > span{
  color:#969696;
  font-size:11px;
  font-weight:700;
}

.tm-filter-field input,
.tm-filter-field select{
  height:32px;
  padding:0 8px;
  border-color:#2b2b2b;
  border-radius:7px;
  background:#111;
  color:#d8d8d8;
  font-size:13px;
}

.tm-filter-field input:hover,
.tm-filter-field select:hover{
  background:#171717;
  border-color:#3a3a3a;
}

.tm-filter-field input:focus,
.tm-filter-field input:focus-visible,
.tm-filter-field select:focus,
.tm-filter-field select:focus-visible{
  border-color:#6a6a6a;
  background:#171717;
  box-shadow:0 0 0 2px rgba(154,154,154,.12);
}

.tm-filter-field--range{
  padding:4px 0 0;
}

.tm-filter-field--range input{
  height:16px;
}

.tm-filter-actions{
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding-top:2px;
}

#btn_apply_filters{
  grid-column:1 / -1;
}

.tm-filter-button{
  min-height:34px;
  border-radius:8px;
  font-size:14px;
}

.applied{
  gap:6px;
  margin-bottom:10px;
}

.applied .chip{
  padding:4px 8px;
  border-radius:8px;
  border-color:#303030;
  background:#1d1d1d;
  color:#d6d6d6;
  font-size:12px;
}

.cards{
  gap:8px;
}

.usercard{
  min-height:66px;
  padding:10px;
  border-radius:8px;
  background:#151515;
}

.avatar{
  width:38px;
  height:38px;
  border-radius:12px;
}

.uc-bio{
  margin-top:3px;
}

.tags{
  margin-top:6px;
}

.tag{
  border-radius:7px;
}

#result{
  margin-top:8px;
}

.lookup-list .lookup-row{
  grid-template-columns:38px minmax(0,1fr);
  min-height:58px;
  padding:8px 10px;
  border-radius:8px;
}

@media (max-width: 980px){
  .tm-main{
    padding:12px;
  }

  .teammates-page .card{
    min-height:auto;
  }
}

@media (max-width: 640px){
  .lookup-row{
    grid-template-columns:1fr;
  }

  .lookup-row button,
  .tm-profile-chip.btn-ghost{
    width:100%;
  }

  .tm-filter-row,
  .tm-filter-row--time,
  .tm-filter-actions{
    grid-template-columns:1fr;
  }

  #btn_apply_filters{
    grid-column:auto;
  }
}

/* ===== Friendly minimal filters: monochrome Aceternity-inspired surfaces ===== */
:root{
  --tm-filter-accent:#d7d7d7;
  --tm-filter-accent-hover:#f4f4f4;
  --tm-filter-accent-soft:rgba(255,255,255,.10);
  --tm-filter-ink:#171717;
  --tm-filter-surface:#121212;
  --tm-filter-surface-2:#1a1a1a;
  --tm-filter-line:#2a2a2a;
  --tm-filter-line-strong:#3a3a3a;
}

.tm-side-card.tm-filters{
  position:relative;
  gap:10px;
  padding:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 34%),
    var(--tm-panel);
  scrollbar-color:#565656 transparent;
}

.tm-side-card.tm-filters::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:13px;
  pointer-events:none;
  opacity:.65;
}

.tm-filter-panel-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:30px;
  padding:0 2px 2px;
}

.tm-filter-panel-head h2{
  color:#d7d7d7;
  font-size:15px;
  font-weight:800;
}

#tm_filters.tm-filter-form{
  position:relative;
  z-index:1;
  gap:7px;
}

#tm_filters .tm-filter-section{
  border:1px solid var(--tm-filter-line);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.006)),
    var(--tm-filter-surface);
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset;
}

#tm_filters .tm-filter-section:hover{
  border-color:#343434;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
    #151515;
}

#tm_filters .tm-filter-section[open]{
  border-color:rgba(255,255,255,.22);
  background:
    linear-gradient(#151515,#151515) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.34), rgba(58,58,58,.35)) border-box;
  box-shadow:
    0 1px 0 rgba(255,255,255,.035) inset,
    0 12px 26px rgba(0,0,0,.22);
}

#tm_filters .tm-filter-section > summary{
  min-height:34px;
  padding:0 10px;
  color:#d2d2d2;
  font-size:13px;
  letter-spacing:0;
}

#tm_filters .tm-filter-section > summary::before{
  content:"";
  width:6px;
  height:6px;
  margin-right:8px;
  border-radius:999px;
  background:#5b5b5b;
  box-shadow:0 0 0 3px rgba(255,255,255,.025);
}

#tm_filters .tm-filter-section[open] > summary::before{
  background:var(--tm-menu-accent);
  box-shadow:
    0 0 0 3px rgba(154,135,185,.16),
    0 0 18px rgba(154,135,185,.28);
}

#tm_filters .tm-filter-section[open] > summary{
  border-bottom-color:#2d2d2d;
}

#tm_filters .tm-filter-section > .tm-filter-field,
#tm_filters .tm-filter-section > .tm-filter-row{
  margin:8px;
}

#tm_filters .tm-filter-field > span{
  color:#9c9c9c;
  font-size:11px;
  font-weight:800;
}

#tm_filters .tm-filter-field input,
#tm_filters .tm-filter-field select{
  height:34px;
  border:1px solid #2c2c2c;
  border-radius:9px;
  background:#1c1c1c;
  color:#dddddd;
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset;
}

#tm_filters .tm-filter-field select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:26px;
  background:
    linear-gradient(45deg, transparent 50%, #9a9a9a 50%) calc(100% - 14px) 14px / 6px 6px no-repeat,
    linear-gradient(135deg, #9a9a9a 50%, transparent 50%) calc(100% - 10px) 14px / 6px 6px no-repeat,
    #1c1c1c;
}

#tm_filters .tm-filter-field input::placeholder{
  color:#777;
}

#tm_filters .tm-filter-field input:hover,
#tm_filters .tm-filter-field select:hover{
  border-color:#3c3c3c;
  background-color:#202020;
}

#tm_filters .tm-filter-field input:focus,
#tm_filters .tm-filter-field input:focus-visible,
#tm_filters .tm-filter-field select:focus,
#tm_filters .tm-filter-field select:focus-visible{
  border-color:rgba(255,255,255,.36);
  background-color:#202020;
  box-shadow:0 0 0 3px var(--tm-filter-accent-soft);
}

#tm_filters .tm-filter-field--range{
  padding:2px 2px 0;
}

#tm_filters .tm-filter-field--range input{
  accent-color:var(--tm-filter-accent);
}

#tm_filters .tm-filter-actions{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:7px;
  padding-top:3px;
}

#tm_filters #btn_apply_filters{
  grid-column:auto;
}

#tm_filters button.tm-filter-button,
#tm_filters .tm-filter-button{
  min-height:34px;
  width:auto;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:9px;
  background:var(--tm-filter-accent);
  color:#181818;
  font-family:var(--site-font);
  font-size:13px;
  font-style:normal;
  font-weight:900;
  line-height:1;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 8px 18px rgba(0,0,0,.22);
  transform:none;
}

#tm_filters button.tm-filter-button:hover,
#tm_filters .tm-filter-button:hover{
  border-color:var(--tm-filter-accent-hover);
  background:var(--tm-filter-accent-hover);
  color:#141414;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 20px rgba(0,0,0,.26);
  transform:none;
}

#tm_filters button.tm-filter-button--ghost,
#tm_filters .tm-filter-button--ghost{
  border-color:#343434;
  background:#202020;
  color:#d6d6d6;
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset;
}

#tm_filters button.tm-filter-button--ghost:hover,
#tm_filters .tm-filter-button--ghost:hover{
  border-color:rgba(255,255,255,.24);
  background:#252525;
  color:#eeeeee;
}

#tm_filters button.tm-filter-button:focus-visible,
#tm_filters .tm-filter-button:focus-visible{
  outline:0;
  box-shadow:
    0 0 0 3px var(--tm-filter-accent-soft),
    0 1px 0 rgba(255,255,255,.12) inset;
}

@media (max-width: 640px){
  #tm_filters .tm-filter-actions{
    grid-template-columns:1fr 1fr;
  }

  #tm_filters #btn_apply_filters{
    grid-column:1 / -1;
  }
}

/* ===== Unified monochrome button system + friendlier filter choices ===== */
:root{
  --tm-action:#d8d8d8;
  --tm-action-hover:#f2f2f2;
  --tm-action-press:#bdbdbd;
  --tm-action-ring:rgba(255,255,255,.12);
  --tm-action-text:#111111;
  --tm-action-secondary:#202020;
  --tm-action-secondary-hover:#282828;
}

.teammates-page button{
  box-shadow:none;
}

.teammates-page #btn_find,
.teammates-page #btn_apply_filters,
.teammates-page .tm-onboard__nav button:not(.ghost){
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.36);
  background:var(--tm-action);
  color:var(--tm-action-text);
  font-family:var(--site-font);
  font-style:normal;
  font-weight:900;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 9px 20px rgba(0,0,0,.24);
  transform:none;
}

.teammates-page #btn_find::before,
.teammates-page #btn_apply_filters::before,
.teammates-page .tm-onboard__nav button:not(.ghost)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(120deg, transparent 0 34%, rgba(255,255,255,.30) 50%, transparent 66%);
  transform:translateX(-125%);
  transition:transform .55s cubic-bezier(.22,.8,.2,1);
}

.teammates-page #btn_find:hover,
.teammates-page #btn_apply_filters:hover,
.teammates-page .tm-onboard__nav button:not(.ghost):hover{
  border-color:var(--tm-action-hover);
  background:var(--tm-action-hover);
  color:var(--tm-action-text);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 11px 22px rgba(0,0,0,.28);
  transform:none;
}

.teammates-page #btn_find:hover::before,
.teammates-page #btn_apply_filters:hover::before,
.teammates-page .tm-onboard__nav button:not(.ghost):hover::before{
  transform:translateX(125%);
}

.teammates-page #btn_find:active,
.teammates-page #btn_apply_filters:active,
.teammates-page .tm-onboard__nav button:not(.ghost):active{
  background:var(--tm-action-press);
}

.teammates-page #tm_open_onboard,
.teammates-page #btn_smart,
.teammates-page #btn_reset,
.teammates-page #tm_open_onboard_side,
.teammates-page #tm_add_slot,
.teammates-page #tm_add_game,
.teammates-page .tm-onboard__nav button.ghost{
  border:1px solid #343434;
  background:var(--tm-action-secondary);
  color:#d9d9d9;
  font-family:var(--site-font);
  font-style:normal;
  font-weight:850;
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset;
  transform:none;
}

.teammates-page #tm_open_onboard:hover,
.teammates-page #btn_smart:hover,
.teammates-page #btn_reset:hover,
.teammates-page #tm_open_onboard_side:hover,
.teammates-page #tm_add_slot:hover,
.teammates-page #tm_add_game:hover,
.teammates-page .tm-onboard__nav button.ghost:hover{
  border-color:rgba(255,255,255,.24);
  background:var(--tm-action-secondary-hover);
  color:#f0f0f0;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transform:none;
}

.teammates-page button:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--tm-action-ring), 0 1px 0 rgba(255,255,255,.08) inset;
}

.tm-hidden-control{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.tm-choice-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
}

.tm-choice-grid--gender{
  grid-template-columns:1.3fr .8fr .8fr 1.2fr;
}

.tm-choice-grid button{
  min-width:0;
  min-height:32px;
  padding:0 8px;
  border:1px solid #303030;
  border-radius:9px;
  background:#1c1c1c;
  color:#cfcfcf;
  font-family:var(--site-font);
  font-size:13px;
  font-style:normal;
  font-weight:850;
  line-height:1;
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset;
  transform:none;
}

.tm-choice-grid button:hover{
  border-color:#404040;
  background:#222;
  color:#eeeeee;
}

.tm-choice-grid button.is-active{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.10);
  color:#f4f4f4;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}

#tm_filters .tm-filter-section[open] > summary::before{
  background:var(--tm-menu-accent);
  box-shadow:
    0 0 0 3px rgba(154,135,185,.16),
    0 0 18px rgba(154,135,185,.28);
}

#tm_filters .tm-filter-section[open]{
  border-color:rgba(255,255,255,.22);
}

#tm_filters .tm-filter-actions{
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
}

#tm_filters #btn_apply_filters,
#tm_filters #btn_reset,
#tm_filters #tm_open_onboard_side{
  width:100%;
  min-height:34px;
  padding:0 8px;
  border-radius:9px;
  font-size:13px;
}

.panel-suggestions #btn_smart,
.lookup-row #tm_open_onboard,
.lookup-row #btn_find{
  font-size:14px;
}

@media (max-width: 640px){
  .tm-choice-grid--gender{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  #tm_filters .tm-filter-actions{
    grid-template-columns:1fr;
  }
}

/* ===== Patch: make teammates sidebar header match profile + black filters background ===== */
.teammates-page .tm-top-actions{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-left:auto;
}

.teammates-page .tm-mini-btn{
  height:32px;
  min-width:32px;
  padding:0 10px;
  border:1px solid #1c1c1c;
  border-radius:7px;
  background:rgba(31,41,55,.5);
  color:#d0d0d0;
  font-family:var(--tm-font);
  font-size:14px;
  font-style:italic;
  font-weight:800;
  line-height:1;
  box-shadow:none;
  transform:none;
}

.teammates-page .tm-mini-btn:hover{
  background:rgba(31,41,55,.5);
  border-color:var(--tm-menu-accent);
  box-shadow:none;
  transform:none;
}

.teammates-page .tm-mini-btn:focus-visible{
  outline:1px solid var(--tm-menu-accent);
  outline-offset:2px;
  box-shadow:none;
}

.teammates-page .tm-help-btn{
  width:32px;
  padding:0;
  border-radius:50%;
}

.teammates-page .tm-side-card,
.teammates-page .tm-side-card.tm-filters{
  background:var(--tm-panel) !important;
  background-image:none !important;
}

.teammates-page .tm-side-card.tm-filters::before{
  display:none;
}

#tm_filters .tm-filter-section,
#tm_filters .tm-filter-section:hover,
#tm_filters .tm-filter-section[open]{
  background:#151515 !important;
  background-image:none !important;
}

/* ===== Teammates filter motion + profile-aligned calm ===== */
.teammates-page .tm-side-card.tm-filters{
  gap:12px;
  padding:18px;
}

.teammates-page .tm-filter-panel-head{
  min-height:28px;
  padding:0 1px 4px;
}

.teammates-page .tm-filter-panel-head h2{
  color:#d4d4d4;
  font-size:16px;
  font-weight:850;
}

#tm_filters.tm-filter-form{
  gap:8px;
}

#tm_filters .tm-filter-section,
#tm_filters .tm-filter-section:hover,
#tm_filters .tm-filter-section[open]{
  overflow:hidden;
  border-color:#232323;
  background:#101010 !important;
  box-shadow:none;
  transition:
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease;
}

#tm_filters .tm-filter-section:hover{
  border-color:#303030;
  background:#131313 !important;
}

#tm_filters .tm-filter-section[open]{
  border-color:#2b2b2b;
  background:#151515 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

#tm_filters .tm-filter-section > summary{
  min-height:42px;
  padding:0 12px;
  color:#cfcfcf;
  font-size:14px;
  border-bottom:0;
  transition:
    color .22s ease,
    border-color .22s ease,
    background-color .22s ease;
}

#tm_filters .tm-filter-section[open] > summary{
  color:#eeeeee;
  border-bottom:1px solid #232323;
}

#tm_filters .tm-filter-section > summary::before{
  width:5px;
  height:5px;
  background:#686868;
  box-shadow:none;
}

#tm_filters .tm-filter-section[open] > summary::before{
  background:rgba(154,135,185,.95);
  box-shadow:0 0 0 3px rgba(154,135,185,.13);
}

#tm_filters .tm-filter-section > .tm-filter-body{
  display:grid;
  gap:10px;
  overflow:hidden;
  padding:10px 10px 12px;
}

#tm_filters .tm-filter-section:not([open]) > .tm-filter-body{
  height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
}

#tm_filters .tm-filter-section.is-animating > .tm-filter-body{
  pointer-events:none;
  will-change:height, opacity;
}

#tm_filters .tm-filter-body > .tm-filter-field,
#tm_filters .tm-filter-body > .tm-filter-row{
  margin:0;
}

#tm_filters .tm-filter-body > .tm-filter-field + .tm-filter-field,
#tm_filters .tm-filter-body > .tm-filter-row + .tm-filter-row,
#tm_filters .tm-filter-body > .tm-filter-row + .tm-filter-field,
#tm_filters .tm-filter-body > .tm-filter-field + .tm-filter-row{
  margin-top:0;
}

#tm_filters .tm-filter-field input,
#tm_filters .tm-filter-field select,
.tm-choice-grid button{
  border-color:#2b2b2b;
  background-color:#1a1a1a;
  box-shadow:none;
}

#tm_filters .tm-filter-field input:hover,
#tm_filters .tm-filter-field select:hover,
.tm-choice-grid button:hover{
  border-color:#383838;
  background-color:#202020;
}

#tm_filters .tm-filter-field input:focus,
#tm_filters .tm-filter-field input:focus-visible,
#tm_filters .tm-filter-field select:focus,
#tm_filters .tm-filter-field select:focus-visible{
  border-color:rgba(255,255,255,.28);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}

.tm-choice-grid button.is-active{
  border-color:rgba(154,135,185,.55);
  background:rgba(154,135,185,.16);
  color:#f1f1f1;
}

/* ===== Class-driven filter drawer ===== */
#tm_filters .tm-filter-section,
#tm_filters .tm-filter-section[open],
#tm_filters .tm-filter-section:not(.is-expanded){
  border-color:#232323;
  background:#101010 !important;
  box-shadow:none;
}

#tm_filters .tm-filter-section.is-expanded{
  border-color:#2b2b2b;
  background:#151515 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

#tm_filters .tm-filter-section > summary,
#tm_filters .tm-filter-section[open] > summary,
#tm_filters .tm-filter-section:not(.is-expanded) > summary{
  border-bottom:0;
  color:#cfcfcf;
}

#tm_filters .tm-filter-section.is-expanded > summary{
  color:#eeeeee;
  border-bottom:1px solid #232323;
}

#tm_filters .tm-filter-section > summary::before,
#tm_filters .tm-filter-section[open] > summary::before,
#tm_filters .tm-filter-section:not(.is-expanded) > summary::before{
  background:#686868;
  box-shadow:none;
}

#tm_filters .tm-filter-section.is-expanded > summary::before{
  background:rgba(154,135,185,.95);
  box-shadow:0 0 0 3px rgba(154,135,185,.13);
}

#tm_filters .tm-filter-section > .tm-filter-body{
  display:grid;
  grid-template-rows:0fr;
  height:auto;
  overflow:hidden;
  padding:0 10px;
  opacity:0;
  transition:
    grid-template-rows .28s cubic-bezier(.22,.8,.2,1),
    padding .28s cubic-bezier(.22,.8,.2,1),
    opacity .2s ease;
}

#tm_filters .tm-filter-section.is-expanded > .tm-filter-body{
  grid-template-rows:1fr;
  padding:10px 10px 12px;
  opacity:1;
}

#tm_filters .tm-filter-body-inner{
  display:grid;
  gap:10px;
  min-height:0;
  overflow:hidden;
}

#tm_filters .tm-filter-body-inner > .tm-filter-field,
#tm_filters .tm-filter-body-inner > .tm-filter-row{
  margin:0;
}

#tm_filters .tm-filter-body-inner > .tm-filter-field + .tm-filter-field,
#tm_filters .tm-filter-body-inner > .tm-filter-row + .tm-filter-row,
#tm_filters .tm-filter-body-inner > .tm-filter-row + .tm-filter-field,
#tm_filters .tm-filter-body-inner > .tm-filter-field + .tm-filter-row{
  margin-top:0;
}

@media (prefers-reduced-motion: reduce){
  #tm_filters .tm-filter-section > .tm-filter-body{
    transition:none;
  }
}