
:root{
  --tm-accent:var(--sn-brand-accent, var(--accent));
  --tm-accent-hover:var(--sn-brand-accent-hover, var(--accent-hover));
  --tm-chev:var(--sn-chev);
}

html{scrollbar-gutter:stable}
#tm_view{display:grid;gap:var(--shell-gap);align-content:start}
body[data-shell="teammates"] .shell-main{max-width:var(--content-max);width:100%;justify-self:center}
.tm-profile-label-short,.tm-mobile-filter-toggle{display:none}

/* Область ограничена вкладкой и не затрагивает глобальный поиск. */
.teammates-page :is(#tm_view,#tm_onboard,#auth_prompt) input:not([type=range]):not([type=checkbox]):not([type=radio]):not(.input),
.teammates-page :is(#tm_view,#tm_onboard,#auth_prompt) select:not(.tm-hidden-control):not(.select),
.teammates-page :is(#tm_view,#tm_onboard,#auth_prompt) textarea{
  width:100%;min-width:0;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--bg);color:var(--text);
  font-family:var(--site-font);font-weight:var(--site-font-weight);font-size:14px;line-height:1.4;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
html[data-theme="light"] .teammates-page :is(#tm_view,#tm_onboard,#auth_prompt) input:not([type=range]):not([type=checkbox]):not(.input),
html[data-theme="light"] .teammates-page :is(#tm_view,#tm_onboard,#auth_prompt) select:not(.tm-hidden-control):not(.select),
html[data-theme="light"] .teammates-page :is(#tm_view,#tm_onboard,#auth_prompt) textarea{background:var(--card-soft)}
.teammates-page :is(#tm_view,#tm_onboard,#auth_prompt) input:not([type=range]):not([type=checkbox]):not(.input):focus,
.teammates-page :is(#tm_view,#tm_onboard,#auth_prompt) select:not(.tm-hidden-control):not(.select):focus,
.teammates-page :is(#tm_view,#tm_onboard,#auth_prompt) textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--bg);
}
.teammates-page :is(#tm_view,#tm_onboard) select:not(.tm-hidden-control):not(.select){
  appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:var(--tm-chev);background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
}
.teammates-page .tm-hidden-control{display:none}
.teammates-page :is(#tm_view,#tm_onboard,#auth_prompt) ::placeholder{color:var(--muted-2)}

.tm-lookup{padding:12px;display:grid;gap:0}
.tm-lookup .lookup-row{display:flex;align-items:center;gap:8px}
.tm-lookup .lookup-row .input-search{
  flex:1 1 auto;height:40px;border-radius:var(--radius-full);
  background-color:var(--card-soft);border-color:transparent;
}
.tm-lookup .lookup-row .input-search:focus{background-color:var(--bg);border-color:var(--accent)}

#result.hint{color:var(--muted);font-size:13px}
#result:empty{display:none}
#result.has-results{color:var(--text);margin-top:10px}
.lookup-list{display:grid;gap:2px}
.lookup-list .lookup-row{
  display:flex;align-items:center;gap:11px;padding:8px;border-radius:var(--radius-md);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out);
}
.lookup-list .lookup-row:hover{background:var(--card-soft)}
.lookup-meta{flex:1 1 auto;min-width:0}
.lookup-name{font-size:14.5px;font-weight:var(--site-font-strong);color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lookup-bio{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lookup-list .lookup-row .uc-btn--friend{margin-left:auto;flex:0 0 auto;height:30px;padding:0 12px}
.lookup-list .lookup-row .uc-btn--friend::before{display:none}

.tm-filters{padding:14px 16px;display:grid;gap:12px}
.tm-filters-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tm-filters-copy{display:grid;gap:3px;min-width:0}
.filters-title{font-size:15px;font-weight:var(--site-font-strong);color:var(--text-strong)}
.tiny{font-size:12px}
.muted{color:var(--muted)}

.tm-filters--rail{
  position:sticky;
  top:calc(var(--topbar-h) + var(--shell-gap));
  padding:6px 0 10px;
  gap:0;
  align-self:start;
}
.tm-filters--rail .tm-filters-head{
  display:grid;
  gap:3px;
  padding:12px 16px 8px;
}
.tm-filters--rail .filters-title{
  font-size:13.5px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.tm-filters--rail .tm-filters-head .tiny{
  font-size:11.5px;
  line-height:1.35;
  color:var(--muted-2);
}
.tm-filters--rail .tm-filter-form{padding:0 8px 4px;gap:0}
.tm-filters--rail .tm-filter-section > summary{
  min-height:34px;
  padding:8px;
  border-radius:var(--radius-sm);
  font-size:13px;
}
.tm-filters--rail .tm-filter-section > summary:hover{background:var(--card-soft)}
.tm-filters--rail .tm-filter-body-inner{gap:10px;padding:0 8px}
.tm-filters--rail .tm-filter-section.is-expanded > .tm-filter-body > .tm-filter-body-inner{padding:2px 8px 12px}
.tm-filters--rail .tm-filter-field{gap:5px}
.tm-filters--rail .tm-filter-field > span{font-size:12px}
.tm-filters--rail .tm-filter-row{gap:8px}
.tm-filters--rail .tm-filter-row--location{grid-template-columns:minmax(0,1fr)}
.tm-filters--rail .tm-rank-range{grid-template-columns:1fr;gap:7px}
.teammates-page .tm-filters--rail input:not([type=range]):not([type=checkbox]):not([type=radio]):not(.input),
.teammates-page .tm-filters--rail select:not(.tm-hidden-control):not(.select),
.teammates-page .tm-filters--rail textarea{
  min-height:34px;
  padding:7px 10px;
  border-radius:var(--radius-sm);
  font-size:13px;
}
.teammates-page .tm-filters--rail select:not(.tm-hidden-control):not(.select){
  padding-right:29px;
  background-position:right 9px center;
}
.tm-filters--rail .tm-choice-grid,
.tm-filters--rail .tm-day-grid,
.tm-filters--rail .tm-quick-row,
.tm-filters--rail .tm-role-grid,
.tm-filters--rail .tm-language-grid{gap:5px}
.tm-filters--rail .tm-day-grid--filter{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.tm-filters--rail .tm-choice-grid--gender{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.tm-filters--rail .tm-quick-row--time{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.tm-filters--rail .tm-choice-grid button,
.tm-filters--rail .tm-day-grid button,
.tm-filters--rail .tm-quick-row button,
.tm-filters--rail .tm-role-chip,
.tm-filters--rail .tm-language-grid button{
  height:28px;
  min-width:0;
  padding:0 9px;
  font-size:12px;
}
.tm-filters--rail .tm-day-grid button{padding:0}
.tm-filters--rail .tm-filter-field--range{
  padding:11px 8px 0;
  margin-top:0;
}
.tm-filters--rail .range{height:4px}
.tm-filters--rail .range::-webkit-slider-thumb{width:16px;height:16px}
.tm-filters--rail .range::-moz-range-thumb{width:16px;height:16px}
.tm-filters--rail .tm-filter-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
  padding:10px 8px 0;
}
.tm-filters--rail .tm-filter-actions .btn{
  width:100%;
  height:32px;
  padding:0 11px;
  font-size:13px;
}
.tm-filters--rail .tm-filter-actions .btn-primary{
  min-width:0;
  max-width:none;
}

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

.tm-filter-section{min-width:0;border:0;margin:0;border-top:1px solid var(--line-soft)}
.tm-filter-section:first-of-type{border-top:0}
.tm-filter-section > summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:11px 2px;
  font-size:13px;font-weight:var(--site-font-strong);color:var(--text);
  transition:color var(--dur-fast) var(--ease-out);
}
.tm-filter-section > summary:hover{color:var(--text-strong)}
.tm-filter-section > summary::-webkit-details-marker{display:none}
.tm-filter-section > summary::after{
  content:"";margin-left:auto;width:15px;height:15px;flex:0 0 auto;background:currentColor;color:var(--muted-2);
  -webkit-mask:var(--tm-chev) center/contain no-repeat;mask:var(--tm-chev) center/contain no-repeat;
  transition:transform var(--dur-mid) var(--ease-out);
}
.tm-filter-section.is-expanded > summary::after{transform:rotate(180deg)}
.tm-filter-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-mid) var(--ease-out)}
.tm-filter-section.is-expanded > .tm-filter-body{grid-template-rows:1fr}
.tm-filter-section:not(.is-expanded) > .tm-filter-body{visibility:hidden}
/* Боковой отступ сохраняет фокусное кольцо крайних чипов. */
.tm-filter-body-inner{overflow:hidden;min-height:0;display:grid;gap:12px;padding:0 4px}
/* Нижний отступ добавляется только раскрытому разделу. */
.tm-filter-section.is-expanded > .tm-filter-body > .tm-filter-body-inner{padding:3px 4px 14px}
.tm-filter-section.is-expanded > .tm-filter-body > .tm-filter-body-inner{overflow:visible}

.tm-filter-field{display:grid;gap:6px;min-width:0}
.tm-filter-field > span{font-size:12.5px;color:var(--muted);font-weight:var(--site-font-strong)}
.tm-filter-field > span b{color:var(--text-strong)}
.tm-filter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.tm-filter-row > *{min-width:0}
.tm-filter-row :is(input,select,.sn-combo){max-width:100%;box-sizing:border-box}
.tm-filter-field[hidden],
.tm-rank-filter-field[hidden],
.teammates-page .tm-role-grid[hidden]{display:none}

/* Равная ширина действует только внутри опроса. */
.tm-onboard .tm-choice-grid,
.tm-onboard .tm-day-grid,
.tm-onboard .tm-quick-row,
.tm-onboard .tm-role-grid,
.tm-onboard .tm-language-grid{
  display:grid;
  gap:8px;
}
.tm-onboard .tm-choice-grid--profile-gender{grid-template-columns:repeat(4,minmax(0,1fr))}
.tm-onboard .tm-language-grid{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.tm-onboard .tm-day-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.tm-onboard .tm-quick-row[data-day-quick]{grid-template-columns:repeat(3,minmax(0,1fr))}
.tm-onboard .tm-quick-row--time{grid-template-columns:repeat(4,minmax(0,1fr))}
.tm-onboard .tm-role-grid{grid-template-columns:repeat(auto-fit,minmax(136px,1fr))}
.tm-onboard .tm-choice-grid button,
.tm-onboard .tm-day-grid button,
.tm-onboard .tm-quick-row button,
.tm-onboard .tm-role-chip,
.tm-onboard .tm-language-grid button{
  width:100%;
  min-width:0;
  height:34px;
  padding:0 10px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tm-onboard .tm-progress__steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.tm-onboard .tm-step-chip{
  width:100%;
  min-width:0;
  justify-content:center;
}
.tm-onboard .tm-step-chip__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tm-rank-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tm-rank-hint{font-size:12px;color:var(--muted-2)}

.tm-filter-field--range{
  grid-column:1/-1;display:grid;gap:9px;
  padding-top:14px;margin-top:2px;border-top:1px solid var(--line-soft);
}
.tm-filter-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;padding-top:12px}
.tm-filter-actions .btn{flex:0 0 auto}
.tm-filter-actions .btn-primary{min-width:140px;flex:1 1 auto;max-width:220px}
.tm-filter-actions .btn-ghost{flex:0 0 auto}

.range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:var(--radius-full);background:var(--card-soft);cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--tm-accent);border:2px solid var(--bg-elev);box-shadow:var(--shadow-sm);cursor:pointer}
.range::-moz-range-thumb{width:18px;height:18px;border:2px solid var(--bg-elev);border-radius:50%;background:var(--tm-accent);cursor:pointer}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-soft)}

.tm-choice-grid,
.tm-day-grid,
.tm-quick-row,
.tm-role-grid,
.tm-language-grid{display:flex;flex-wrap:wrap;gap:6px}

.tm-choice-grid button,
.tm-day-grid button,
.tm-quick-row button,
.tm-role-chip,
.tm-language-grid button{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-full);
  background:transparent;color:var(--text);cursor:pointer;
  font-family:var(--site-font);font-size:13px;font-weight:var(--site-font-strong);line-height:1;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.tm-day-grid button{min-width:42px;padding:0 10px}
.tm-choice-grid button:hover,
.tm-day-grid button:hover,
.tm-quick-row button:hover,
.tm-role-chip:hover,
.tm-language-grid button:hover{background:var(--card-soft);border-color:var(--muted-2)}
.tm-choice-grid button.is-active,
.tm-day-grid button.is-active,
.tm-quick-row button.is-active,
.tm-role-chip.is-active,
.tm-language-grid button.is-active{
  background:var(--tm-accent);border-color:var(--tm-accent);color:var(--on-accent);
}
.teammates-page .tm-role-grid[hidden]{display:none}

.tm-rank-preset{display:grid;gap:9px;padding:11px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--card-soft)}
.teammates-page .tm-rank-preset[hidden]{display:none}
.tm-rank-preset__head{display:grid;gap:2px}
.tm-rank-preset__head strong{font-size:13px;color:var(--text-strong)}
.tm-rank-preset__head span{font-size:12px;color:var(--muted)}
.tm-rank-free{font-size:12.5px;color:var(--muted);line-height:1.45}

/* Комбобокс переехал в components.css: им пользуются и лента, и тиммейты. */

.panel-suggestions{display:grid;gap:12px}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.results-head-main{min-width:0;display:grid;gap:2px}
.results-head .filters-title{font-size:16px}
#summary{font-size:12.5px}
.results-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.results-tools .select{width:auto;min-width:180px;height:34px;padding-top:0;padding-bottom:0}
.results-tools .sn-combo{width:204px;max-width:min(100%,204px)}
.results-tools .sn-combo__input{height:34px;padding-top:0;padding-bottom:0}

.applied{display:flex;flex-wrap:wrap;gap:6px}
.applied:empty{display:none}
.applied .chip{cursor:default}
.applied .chip:hover{background:transparent}

.empty{
  padding:40px 24px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5;
  border:1px dashed var(--line);border-radius:var(--radius-lg);
}
.empty[hidden]{display:none}

.tm-results-pager{
  min-height:36px;display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--muted);font-size:12.5px;
}
.tm-results-pager[hidden]{display:none}
.tm-results-pager:not(.is-loading){min-height:1px}
.tm-results-pager:not(.is-loading) > *{visibility:hidden}
.tm-results-pager .spinner{width:17px;height:17px}

.cards{display:grid;grid-template-columns:1fr;gap:10px}

.usercard{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;
  padding:12px 14px;min-width:0;cursor:pointer;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.usercard:hover{border-color:var(--line);background:var(--card-hover);transform:translateY(-1px)}
.usercard .tm-avatar-frame--card{flex:0 0 auto}

.uc-main{min-width:0;display:grid;gap:6px;align-content:start}
.uc-top{display:flex;align-items:center;gap:8px;min-width:0}
.uc-name{font-size:15px;font-weight:var(--site-font-strong);color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.uc-presence{flex:0 0 auto;font-size:11.5px;color:var(--muted);padding:1px 8px;border-radius:var(--radius-full);background:var(--card-soft)}
.uc-presence.is-online{color:var(--text)}
.uc-presence.is-online::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--presence-online);margin-right:5px;vertical-align:middle}
.uc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.uc-location,.uc-meta-item{font-size:12.5px;color:var(--muted)}
.uc-meta-item{white-space:nowrap}

.uc-games{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.uc-game{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.uc-game-title{font-size:12.5px;font-weight:var(--site-font-strong);color:var(--text)}
.uc-game-pill{font-size:11px;padding:2px 8px;border-radius:var(--radius-full);background:var(--card-soft);color:var(--muted);border:1px solid var(--line-soft)}
.uc-game-role{color:var(--text)}
.uc-game-rank{color:var(--text-strong)}

.uc-bio{font-size:13px;color:var(--text);font-weight:640;line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.tags{display:flex;flex-wrap:wrap;gap:5px}
.tags:empty{display:none}
.tag{font-size:11px;padding:2px 8px;border-radius:var(--radius-full);background:var(--card-soft);color:var(--muted)}

.uc-actions{display:flex;flex-direction:column;gap:7px;width:132px;align-self:center}
.uc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:0;height:32px;padding:0 11px;border:1px solid transparent;border-radius:var(--radius-md);
  font-family:var(--site-font);font-size:12.5px;font-weight:var(--site-font-strong);cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out);
}
.uc-btn .icon{width:15px;height:15px;flex:0 0 auto}
.uc-btn-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
.uc-btn--primary{background:var(--tm-accent);color:var(--on-accent)}
.uc-btn--primary:hover{background:var(--tm-accent-hover)}
.uc-btn--friend{background:var(--card-soft);color:var(--text);border-color:var(--line)}
.uc-btn--friend:hover{background:var(--card-hover);border-color:var(--muted-2)}
.uc-btn--friend.is-outgoing{background:transparent;color:var(--muted);border-color:var(--line)}
.uc-btn--friend.is-outgoing:hover{background:var(--card-soft);color:var(--text)}
.uc-btn--friend.is-incoming{background:var(--tm-accent);color:var(--on-accent);border-color:var(--tm-accent)}
.uc-btn--friend.is-friends{background:var(--accent-soft);color:var(--text-strong);border-color:color-mix(in srgb,var(--tm-accent) 45%,var(--line))}
.uc-btn[disabled]{opacity:.6;cursor:default;pointer-events:none}

.tm-avatar-frame{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;padding:2px;overflow:hidden;background:var(--card-soft);box-shadow:inset 0 0 0 1px var(--line-soft)}
.tm-avatar-frame .avatar{border-radius:50%;clip-path:circle(50%);object-fit:cover;display:block;overflow:hidden;background:var(--card-soft)}
.tm-avatar-frame--card{width:54px;height:54px}
.tm-avatar-frame--card .avatar{width:100%;height:100%}
.tm-avatar-frame--lookup{width:42px;height:42px}
.tm-avatar-frame--lookup .avatar{width:100%;height:100%}

.skel{position:relative;overflow:hidden;background:var(--card-soft);border-radius:var(--radius-sm);color:transparent}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);animation:tm-skel 1.3s infinite;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent)}
html[data-theme="light"] .skel::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.045),transparent)}
@keyframes tm-skel{to{transform:translateX(100%)}}
.usercard.skel{cursor:default;pointer-events:none;box-shadow:none}
.usercard.skel .avatar{width:54px;height:54px;border-radius:50%}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}

.tm-onboard{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,7,12,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tm-onboard.hidden{display:none}
.tm-onboard__sheet{
  width:100%;max-width:640px;max-height:min(88dvh,820px);display:flex;flex-direction:column;
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-pop);
  animation:modal-pop var(--dur-mid) var(--ease-emph);
}
.tm-onboard__top{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 14px;flex:0 0 auto}
.tm-onboard__heading{flex:1 1 auto;min-width:0}
.tm-onboard__heading h2{font-size:17px}
.tm-onboard__lead{margin-top:3px;font-size:13px;color:var(--muted);line-height:1.45}
.tm-onboard__x{--sn-symbol-size:14px;--sn-symbol-stroke:2.2px;flex:0 0 auto;width:34px;height:34px;border:0;border-radius:var(--radius-md);background:var(--card-soft);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.tm-onboard__x:hover{background:var(--card-hover);color:var(--text)}
.tm-onboard__error{margin:0 18px 4px;padding:9px 12px;border-radius:var(--radius-md);background:var(--danger-soft);color:var(--danger);font-size:13px;line-height:1.4}
.tm-onboard__error[hidden]{display:none}

.tm-progress{display:grid;gap:10px;padding:0 18px 14px;flex:0 0 auto}
.tm-progress__steps{display:flex;gap:6px;flex-wrap:wrap}
.tm-step-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 8px;border:1px solid var(--line);border-radius:var(--radius-full);background:transparent;color:var(--muted);cursor:pointer;font-family:var(--site-font);font-size:12.5px;font-weight:var(--site-font-strong);transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.tm-step-chip:hover:not(:disabled){border-color:var(--muted-2);color:var(--text)}
.tm-step-chip:disabled{cursor:default}
.tm-step-chip__num{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--card-soft);color:var(--muted);font-size:11px;flex:0 0 auto}
.tm-step-chip.is-active{border-color:var(--tm-accent);color:var(--text-strong);background:var(--accent-soft)}
.tm-step-chip.is-active .tm-step-chip__num{background:var(--tm-accent);color:var(--on-accent)}
.tm-step-chip.is-done{color:var(--text)}
.tm-step-chip.is-done .tm-step-chip__num{background:var(--accent-soft-2);color:var(--text-strong)}
.tm-progress__bar{height:4px;border-radius:var(--radius-full);background:var(--card-soft);overflow:hidden}
.tm-progress__bar > i{display:block;height:100%;background:var(--tm-accent);border-radius:inherit;transition:width var(--dur-mid) var(--ease-out)}
@keyframes tm-chip-bump{50%{transform:scale(1.05)}}
.tm-step-chip.is-bump{animation:tm-chip-bump .3s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.tm-step-chip.is-bump{animation:none}}

.tm-steps{padding:4px 18px 18px;overflow-y:auto;min-height:0;flex:1 1 auto}
.tm-step{display:grid;gap:14px}
.tm-step[hidden]{display:none}

.tm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tm-field{display:grid;gap:6px;min-width:0}
.tm-field--block{grid-column:1/-1}
.tm-field__label{font-size:12.5px;color:var(--muted);font-weight:var(--site-font-strong)}
.tm-field__hint{font-size:12px;color:var(--muted-2);line-height:1.4}
.tm-role-box{position:relative}

.tm-toggle-row{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--card-soft);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}
.tm-toggle-row:hover{border-color:var(--line)}
.tm-toggle-row input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--tm-accent);cursor:pointer}
.tm-toggle-row__text{display:grid;gap:2px;min-width:0}
.tm-toggle-row__text b{font-size:13.5px;color:var(--text-strong)}
.tm-toggle-row__text span{font-size:12px;color:var(--muted);line-height:1.4}
.tm-toggle-row--compact{padding:10px 12px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tm-add-btn{width:100%;justify-content:center;margin-top:2px}

.tm-step-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;align-items:start}
.tm-step-cols__editor,.tm-step-cols__list{display:grid;gap:12px;align-content:start;min-width:0}
.tm-added-title{margin-bottom:2px}

.tm-listbox{display:grid;gap:8px;font-size:13px}
.tm-listbox.is-empty{
  display:flex;align-items:center;justify-content:center;
  padding:18px 12px;text-align:center;color:var(--muted-2);font-size:12.5px;
  border:1px dashed var(--line);border-radius:var(--radius-md);background:transparent;
}
.tm-mini-item{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:9px 10px 9px 12px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--card-soft);
}
.tm-mini-main{display:grid;gap:5px;min-width:0}
.tm-mini-title{font-size:13.5px;font-weight:var(--site-font-strong);color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-mini-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.tm-pill{display:inline-flex;align-items:center;font-size:11.5px;line-height:1;padding:3px 8px;border-radius:var(--radius-full);background:var(--bg);color:var(--text);border:1px solid var(--line-soft)}
html[data-theme="light"] .tm-pill{background:var(--card)}
.tm-pill--accent{background:var(--accent-soft);color:var(--text-strong);border-color:transparent}
.tm-pill--muted{color:var(--muted);background:transparent;border-color:var(--line-soft)}
.tm-icon-btn{
  --sn-symbol-size:12px;--sn-symbol-stroke:1.9px;
  flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:transparent;color:var(--muted-2);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.tm-icon-btn:hover{background:var(--danger-soft);color:var(--danger);border-color:transparent}

.tm-onboard__nav{display:flex;align-items:center;gap:10px;padding:13px 18px;border-top:1px solid var(--line-soft);flex:0 0 auto;background:var(--bg-elev);border-radius:0 0 var(--radius-xl) var(--radius-xl)}
.spacer,.tm-onboard__nav .spacer{flex:1 1 auto}
.tm-step-indicator{font-size:12.5px;color:var(--muted-2)}

.tm-onboard{
  padding:24px;
  background:rgba(5,7,12,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.tm-onboard__sheet{
  width:min(760px,calc(100vw - 32px));
  max-width:none;
  /* Постоянная высота, как у листа на телефоне: иначе окно меняло размер
     на каждом шаге. */
  height:min(82dvh,660px);
  max-height:min(90dvh,780px);
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-elev) 96%,#fff 4%),var(--bg-elev));
  box-shadow:0 26px 80px rgba(0,0,0,.42);
}
.tm-onboard__top{
  padding:18px 20px 12px;
  border-bottom:1px solid var(--line-soft);
}
.tm-onboard__heading h2{font-size:18px;line-height:1.2}
.tm-onboard__lead{max-width:520px;color:var(--muted-2)}
.tm-onboard__x{width:36px;height:36px;border-radius:12px}
.tm-onboard__error{margin:0 20px 10px}
.tm-progress{padding:14px 20px 12px;gap:10px}
.tm-onboard .tm-progress__steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.tm-onboard .tm-step-chip{
  height:36px;
  justify-content:center;
  border-radius:12px;
  background:var(--bg);
  border-color:var(--line-soft);
}
.tm-onboard .tm-step-chip.is-active{
  background:var(--card-soft);
  border-color:var(--text-strong);
  color:var(--text-strong);
}
.tm-onboard .tm-step-chip.is-done{background:var(--card);border-color:var(--line)}
.tm-onboard button.tm-step-chip{
  appearance:none;
  -webkit-appearance:none;
}
.tm-onboard button.tm-step-chip.is-active,
.tm-onboard button.tm-step-chip.is-active:disabled{
  opacity:1;
  background:var(--card-soft);
  border-color:var(--text-strong);
  color:var(--text-strong);
}
.tm-onboard button.tm-step-chip.is-active .tm-step-chip__num,
.tm-onboard button.tm-step-chip.is-active:disabled .tm-step-chip__num{
  background:var(--text-strong);
  color:var(--bg);
}
.tm-progress__bar{height:3px;background:var(--line-soft)}
/* Пустая анкета до ответа сервера показывала сырые значения: «RU», список
   языков через запятую. */
.tm-onboard.is-loading .tm-step{opacity:0}
.tm-onboard.is-loading .tm-steps{position:relative}
.tm-onboard.is-loading .tm-steps::after{
  content:"";position:absolute;left:50%;top:64px;width:22px;height:22px;margin-left:-11px;
  border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite;
}
@media (prefers-reduced-motion:reduce){.tm-onboard.is-loading .tm-steps::after{animation:none}}

.tm-steps{
  /* Занимает остаток листа: так короткий шаг не схлопывает окно. */
  flex:1 1 0;
  padding:0 20px 18px;
  max-height:none;
  overflow-y:auto;
  scrollbar-width:thin;
}
.tm-step{gap:16px}
.tm-step[data-step="0"] .tm-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tm-step[data-step="1"] > .tm-field,
.tm-step[data-step="1"] > .tm-field--block,
.tm-step-cols__editor,
.tm-step-cols__list{
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:14px;
  background:color-mix(in srgb,var(--card) 72%,transparent);
}
.tm-step[data-step="1"] > .tm-field{gap:10px}
.tm-field{gap:7px}
.tm-field__label{
  font-size:12px;
  line-height:1.3;
  color:var(--muted);
  text-transform:none;
}
.tm-field__hint{font-size:12px;color:var(--muted-2)}
.teammates-page .tm-onboard input:not([type=range]):not([type=checkbox]):not([type=radio]):not(.input),
.teammates-page .tm-onboard select:not(.tm-hidden-control):not(.select),
.teammates-page .tm-onboard textarea{
  min-height:40px;
  padding:9px 12px;
  border-radius:12px;
  background:var(--bg);
}
.tm-onboard .tm-choice-grid,
.tm-onboard .tm-day-grid,
.tm-onboard .tm-quick-row,
.tm-onboard .tm-role-grid,
.tm-onboard .tm-language-grid{gap:8px}
.tm-onboard .tm-choice-grid button,
.tm-onboard .tm-day-grid button,
.tm-onboard .tm-quick-row button,
.tm-onboard .tm-role-chip,
.tm-onboard .tm-language-grid button{
  height:34px;
  border-radius:12px;
  justify-content:center;
  font-size:13px;
}
.tm-onboard .tm-language-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.tm-onboard .tm-day-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.tm-onboard .tm-quick-row[data-day-quick]{grid-template-columns:repeat(3,minmax(0,1fr))}
.tm-onboard .tm-quick-row--time{grid-template-columns:repeat(4,minmax(0,1fr))}
.tm-time-grid,.tm-game-meta-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tm-toggle-row{
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border-radius:14px;
  background:var(--card);
}
.tm-toggle-row input{margin-top:0}
.tm-toggle-row__text b{
  display:block;
  line-height:1.28;
  white-space:normal;
}
.tm-toggle-row__text span{line-height:1.35}
.tm-step-cols{
  grid-template-columns:minmax(0,1fr) minmax(230px,.78fr);
  gap:14px;
}
.tm-step-cols__editor,.tm-step-cols__list{gap:12px}
.tm-step-cols__list .tm-listbox{min-height:58px}
.tm-add-btn{height:38px;border-radius:12px}
.tm-listbox.is-empty{
  min-height:58px;
  border-radius:12px;
}
.tm-onboard__nav{
  padding:14px 20px;
  background:var(--bg-elev);
}
.tm-onboard__nav .btn{
  min-width:74px;
  height:36px;
  border-radius:12px;
}

#auth_prompt{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(5,7,12,.6)}
#auth_prompt.hidden{display:none}
#auth_prompt .sheet{width:100%;max-width:420px;padding:22px;background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-pop);display:grid;gap:12px}
#auth_prompt .sheet h3{font-size:17px}
#auth_prompt .sheet p{font-size:13.5px}
#auth_prompt .hstack{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#auth_prompt .hstack button{
  height:38px;padding:0 16px;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;
  background:var(--accent);color:var(--on-accent);font-family:var(--site-font);font-weight:var(--site-font-strong);font-size:14px;
}
#auth_prompt .hstack .ghost{background:var(--card-soft);border-color:var(--line);color:var(--text)}

@media (max-width:860px){
  .tm-step-cols{grid-template-columns:1fr}
}
@media (max-width:720px){
  #tm_view{gap:10px}
  .teammates-page .page-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:2px 2px 0;flex-wrap:nowrap}
  .teammates-page .page-head h1{font-size:21px;line-height:1.1}
  .teammates-page .page-head .sub{max-width:270px;margin-top:4px;font-size:12.5px;line-height:1.35}
  #tm_open_onboard_side{height:34px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card);color:var(--text-strong);font-size:13px}
  #tm_open_onboard_side:hover{background:var(--card-hover)}
  .tm-profile-label-full{display:none}
  .tm-profile-label-short{display:inline}
  .tm-lookup{padding:8px;border-radius:var(--radius-lg)}
  .tm-lookup .lookup-row .input-search{height:44px;font-size:16px}
  .tm-filters{padding:10px 12px;gap:0;border-radius:var(--radius-lg)}
  .tm-filters-head{align-items:center;gap:8px;flex-wrap:nowrap}
  .tm-filters-head .tiny{display:none}
  .tm-filters .filters-title{font-size:14px}
  .tm-mobile-filter-toggle{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius-md);display:inline-flex;align-items:center;gap:7px;background:var(--card-soft);color:var(--text);font:700 12.5px/1 var(--site-font);cursor:pointer}
  .tm-mobile-filter-toggle i{width:14px;height:14px;background:currentColor;-webkit-mask:var(--tm-chev) center/contain no-repeat;mask:var(--tm-chev) center/contain no-repeat;transition:transform var(--dur-mid) var(--ease-out)}
  .tm-mobile-filter-toggle[aria-expanded="true"] i{transform:rotate(180deg)}
  .tm-filters:not(.is-mobile-open) .tm-filter-form{display:none}
  .tm-filters.is-mobile-open .tm-filter-form{margin-top:8px;padding-top:4px;border-top:1px solid var(--line-soft)}
  .tm-form-grid,.grid-2,.tm-rank-range,.tm-filter-row{grid-template-columns:1fr}
  .panel-suggestions{gap:9px}
  .results-head{gap:8px}
  .results-head .filters-title{font-size:15px}
  .results-tools{width:100%;gap:6px;flex-wrap:nowrap}
  .results-tools .select{flex:1 1 auto;width:auto;min-width:0;height:32px;font-size:12.5px}
  .results-tools .btn{height:32px;padding:0 10px;font-size:12.5px}
  .cards{gap:8px}
  .usercard{grid-template-columns:44px minmax(0,1fr);gap:9px;padding:10px}
  .tm-avatar-frame--card{width:44px;height:44px}
  .uc-main{gap:4px}
  .uc-top{gap:6px}
  .uc-name{font-size:14px}
  .uc-presence{padding:1px 6px;font-size:10.5px}
  .uc-meta{gap:3px 7px}
  .uc-location,.uc-meta-item{font-size:11.5px}
  .uc-games{gap:4px 7px}
  .uc-game-title{font-size:11.5px}
  .uc-game-pill,.tag{padding:2px 6px;font-size:10px}
  .uc-bio{font-size:12px;-webkit-line-clamp:1}
  .uc-actions{grid-column:1/-1;width:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-self:auto;margin-top:0}
  .uc-btn{height:30px;padding:0 8px;font-size:11.5px;border-radius:var(--radius-sm)}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .teammates-page .page-head .sub{max-width:230px}
  .tm-filter-actions .btn-primary{max-width:none}
  .tm-onboard .tm-progress__steps,
  .tm-onboard .tm-choice-grid--profile-gender,
  .tm-onboard .tm-quick-row[data-day-quick],
  .tm-onboard .tm-quick-row--time{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-onboard .tm-day-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:640px){
  .tm-onboard{
    align-items:flex-end;
    overflow:hidden;
    inset:0 auto auto 0;
    width:100%;
    height:var(--app-height,100dvh);
    padding:max(8px,env(safe-area-inset-top,0px)) 0 0;
  }
  .tm-onboard__sheet{
    width:100%;max-width:none;
    height:min(94%,760px);
    max-height:calc(100% - max(8px,env(safe-area-inset-top,0px)));
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    border-left:0;border-right:0;border-bottom:0;
    padding-bottom:0;
    animation:tm-sheet-up var(--dur-mid) var(--ease-emph);
  }
  .tm-onboard__top{padding:14px 14px 10px}
  .tm-onboard__heading h2{font-size:17px}
  .tm-onboard__lead{font-size:12.5px;line-height:1.38}
  .tm-onboard__x{width:40px;height:40px;border-radius:13px}
  .tm-progress{padding:10px 14px 10px;gap:8px}
  .tm-onboard .tm-progress__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .tm-onboard .tm-step-chip{height:38px;gap:5px;padding:0 7px;font-size:11.5px}
  .tm-onboard .tm-step-chip__num{width:20px;height:20px}
  .tm-steps{
    flex:1 1 0;
    max-height:none;
    min-height:0;
    padding:2px 14px 22px;
    overscroll-behavior:contain;
    scroll-padding-block:12px 28px;
  }
  .tm-step[data-step="0"] .tm-form-grid,
  .tm-onboard .tm-language-grid,
  .tm-step-cols{grid-template-columns:1fr}
  .teammates-page .tm-onboard input:not([type=range]):not([type=checkbox]):not([type=radio]):not(.input),
  .teammates-page .tm-onboard select:not(.tm-hidden-control):not(.select),
  .teammates-page .tm-onboard textarea{
    min-height:46px;
    padding:11px 13px;
    border-radius:14px;
    font-size:16px;
    scroll-margin-block:90px;
  }
  .tm-onboard .tm-choice-grid button,
  .tm-onboard .tm-day-grid button,
  .tm-onboard .tm-quick-row button,
  .tm-onboard .tm-role-chip,
  .tm-onboard .tm-language-grid button{height:42px}
  .tm-onboard__nav{
    min-height:62px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    border-radius:0;
  }
  .tm-onboard__nav .btn{height:42px;min-width:84px}
  @keyframes tm-sheet-up{from{transform:translateY(40px);opacity:.6}}
}
