/* CIS FINDER v1.7 — Visual Refinement: wider, less cramped, intentional hierarchy.
   Pure presentation layer. Keeps original branding and API/Telegram behavior intact. */
:root{--cf-drawer-width:clamp(520px,40.5vw,735px)}
/* Global frame and readable display hierarchy */
body.concept-a{font-size:14px;letter-spacing:.003em}
body.concept-a .header-inner{max-width:2020px;min-height:67px;padding-inline:clamp(20px,2.25vw,52px);gap:clamp(14px,1.5vw,30px)}
body.concept-a .site-nav .navitem{font-size:12.5px;padding-inline:clamp(8px,.78vw,14px)}
body.concept-a .inner{width:100%;max-width:2000px;padding:21px clamp(20px,2.4vw,52px) 70px}
/* Hero now leaves useful space above the fold; original brand artwork stays. */
body.concept-a .hero{min-height:245px;padding:19px clamp(29px,2.65vw,51px);border-radius:11px;
 background-image:linear-gradient(90deg,rgba(4,13,28,.96) 0%,rgba(4,13,27,.9) 28%,rgba(4,13,28,.64) 59%,rgba(3,12,31,.2) 100%),url('/assets/brand/cis-finder-blue-background.png');
 background-size:cover;background-position:center 45%}
body.concept-a .hero h1{font-size:clamp(36px,2.9vw,47px);line-height:1.07;letter-spacing:-1.9px;max-width:860px;margin:8px 0 11px}
body.concept-a .hero p{font-size:13px;line-height:1.6;max-width:655px;margin-bottom:14px}
body.concept-a .hero-search{max-width:680px;min-height:48px}
body.concept-a .hero-shortcuts{display:none}
body.concept-a .hero-shortcuts button{padding:6px 13px}
body.concept-a .hero-signature{width:195px;height:195px;opacity:.045}
body.concept-a .statbar{margin-bottom:13px;padding:6px 0 7px}
body.concept-a .stat{padding:5px 18px 5px 0}
body.concept-a .stat strong{font-size:20px}
body.concept-a .stat span{font-size:10.5px}
body.concept-a .sectionhead{margin-bottom:9px}
body.concept-a .sectionhead h2{font-size:27px;margin:3px 0 4px}
body.concept-a .sectionhead p{font-size:12.5px}
/* Filters: visually quieter but legible. */
body.concept-a .filters{padding:11px 16px;background:rgba(8,23,43,.85);border-color:#274363}
body.concept-a .fhead{font-size:12px}
body.concept-a .fblock label{font-size:11.5px;margin-bottom:6px}
body.concept-a .fblock .input,body.concept-a .fblock .select{min-height:39px;font-size:12px}
body.concept-a .filter-actions .btn{min-height:39px;font-size:11.5px}
body.concept-a .listingbar{font-size:12px;margin-bottom:10px}
/* Open, glass-like roster rows, not tiny dashboard chips. */
body.concept-a .cards{gap:10px}
body.concept-a .cf-player-row{
 min-height:105px;grid-template-columns:minmax(195px,1.7fr) minmax(120px,.7fr) minmax(310px,1.38fr) minmax(94px,.49fr) 33px;
 column-gap:clamp(10px,1.1vw,22px);row-gap:8px;padding:15px 17px 12px;
 background:linear-gradient(105deg,rgba(13,28,50,.8),rgba(5,15,31,.76));
 border-radius:10px;border-color:rgba(103,154,207,.3)}
body.concept-a .cf-card-person{gap:13px}
body.concept-a .cf-card-person .avatar{width:56px;height:56px;border-radius:10px}
body.concept-a .cf-person-text h3{font-size:16px;line-height:1.25;margin-bottom:4px;letter-spacing:-.3px}
body.concept-a .cf-person-sub{font-size:11px;line-height:1.4}
body.concept-a .cf-person-tags{margin-top:6px}
body.concept-a .cf-search-badge,body.concept-a .cf-muted-chip{font-size:10px;padding:3px 7px}
body.concept-a .cf-current-elo strong{font-size:23px;line-height:1.08}
body.concept-a .cf-current-elo>span{font-size:10.5px}
body.concept-a .cf-card-rating{gap:11px}
body.concept-a .cf-card-rating .faceit-badge{width:39px;height:39px;min-width:39px;min-height:39px;flex-basis:39px}
body.concept-a .cf-card-rating .faceit-badge img{width:39px;height:39px}
body.concept-a .cf-card-stats{gap:6px}
body.concept-a .cf-tiny-stat{min-height:54px;padding:7px 5px;border-radius:7px}
body.concept-a .cf-tiny-stat strong{font-size:15px;line-height:1.25}
body.concept-a .cf-tiny-stat span{font-size:10px}
body.concept-a .cf-card-matches strong{font-size:17px}
body.concept-a .cf-card-matches span{font-size:10px}
body.concept-a .cf-card-footer{font-size:11px;line-height:1.35;padding-top:8px}
body.concept-a .cf-card-footer time{font-size:10px}
body.concept-a .cf-player-row.cf-selected{box-shadow:inset 3px 0 0 #58ccff,0 0 0 1px #4cb7ff7a,0 0 26px #1f88ea75,0 16px 44px #0008}
/* Right side: properly scaled player identity, legible facts, crisp data. */
.cf-drawer{background:linear-gradient(165deg,#102341 0%,#09192e 46%,#061020 100%)}
.cf-drawer-top{min-height:62px;padding:14px 23px}
.cf-back{font-size:13px}
.cf-nav-arrow,.cf-drawer-x{height:36px;width:38px}
.cf-drawer-scroll{padding:27px clamp(22px,2vw,39px) 43px}
.cf-profile-intro{grid-template-columns:99px minmax(0,1fr) auto;gap:16px}
.cf-profile-avatar{width:99px;height:99px;border-radius:13px}
.cf-profile-person h2{font-size:clamp(25px,2vw,30px);line-height:1.15;letter-spacing:-.9px;margin-bottom:10px}
.cf-profile-meta{font-size:12px;line-height:1.45;gap:9px}
.cf-profile-person>small{font-size:11px;margin-top:10px}
.cf-profile-rating{gap:10px;padding-left:17px}
body.concept-a .cf-profile-rating .faceit-badge{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px}
body.concept-a .cf-profile-rating .faceit-badge img{width:44px;height:44px}
.cf-profile-rating .cf-current-elo strong{font-size:29px}
.cf-profile-tags{margin:20px 0 16px;gap:8px}
.cf-profile-tags>span{font-size:12px;padding:7px 11px;border-radius:7px}
.cf-profile-quote{margin-bottom:21px;gap:13px}
.cf-profile-quote p{font-size:13.5px;line-height:1.7;color:#d0def1}
.cf-profile-quote>span{font-size:60px}
.cf-profile-actions{gap:9px;padding-bottom:24px}
.cf-profile-actions .btn{font-size:12px;min-height:41px;padding:9px 14px}
.cf-profile-section{margin-top:25px}
.cf-profile-section h3{font-size:16px;margin-bottom:15px}
.cf-section-head h3 span{font-size:12px}
.cf-section-head>small{font-size:10.5px}
.cf-detail-stats{gap:8px}
.cf-detail-stat{padding:15px 10px;gap:5px;border-radius:8px}
.cf-detail-stat>span{font-size:11px}
.cf-detail-stat strong{font-size:20px;line-height:1.25}
.cf-detail-stat small{font-size:10px}
.cf-total-matches{margin-top:9px;padding:14px 17px}
.cf-total-matches strong{font-size:20px}
.cf-total-matches small,.cf-total-matches a{font-size:11px}
.cf-info-grid{padding:5px 17px}
.cf-info-grid>div{font-size:12.5px;padding:11px 0;grid-template-columns:138px minmax(0,1fr)}
.cf-raw-details summary{font-size:12.5px;padding:16px}
.cf-provenance{font-size:10.5px}
/* The catalog stays readable with the drawer open. Don't shrink its typography to 8px. */
@media(min-width:761px){
 body.cf-drawer-open .inner{padding:16px clamp(14px,1.2vw,25px) 45px}
 body.cf-drawer-open .header-inner{padding:0 13px;gap:10px}
 body.cf-drawer-open .site-brand{font-size:17px}
 body.cf-drawer-open .site-brand>img{width:36px;height:36px}
 body.cf-drawer-open .site-nav{overflow-x:auto;scrollbar-width:none;min-width:0}
 body.cf-drawer-open .site-nav::-webkit-scrollbar{display:none}
 body.cf-drawer-open .site-nav .navitem{font-size:11px;padding:0 10px;flex-shrink:0}
 body.cf-drawer-open .header-actions .btn.primary{font-size:10.5px;padding:8px 10px;white-space:nowrap}
 body.cf-drawer-open .hero{min-height:170px;padding:17px 24px;background-position:58% 44%}
 body.cf-drawer-open .hero h1{font-size:clamp(28px,2.65vw,38px);letter-spacing:-1.2px;margin:6px 0 7px;max-width:670px}
 body.cf-drawer-open .hero p{font-size:11.5px;line-height:1.5;margin-bottom:11px;max-width:580px}
 body.cf-drawer-open .hero-search{min-height:42px;max-width:555px}
 body.cf-drawer-open .hero-shortcuts,body.cf-drawer-open .hero-corner-label{display:none}
 body.cf-drawer-open .sectionhead{margin-top:14px;margin-bottom:8px}
 body.cf-drawer-open .sectionhead h2{font-size:21px}
 body.cf-drawer-open .filters{padding:12px;gap:8px}
 body.cf-drawer-open .fblock label{font-size:10px}
 body.cf-drawer-open .fblock .input,body.cf-drawer-open .fblock .select{font-size:11px;min-height:35px}
 body.cf-drawer-open .cf-player-row{
   grid-template-columns:minmax(160px,1.6fr) minmax(96px,.72fr) minmax(200px,1.55fr) minmax(72px,.5fr) 27px;
   column-gap:9px;min-height:91px;padding:11px 12px;row-gap:7px}
 body.cf-drawer-open .cf-card-person .avatar{width:49px;height:49px}
 body.cf-drawer-open .cf-person-text h3{font-size:13.5px}
 body.cf-drawer-open .cf-person-sub{font-size:10px}
 body.cf-drawer-open .cf-search-badge{font-size:9.5px}
 body.cf-drawer-open .cf-card-rating{gap:7px}
 body.cf-drawer-open .cf-current-elo strong{font-size:19px}
 body.cf-drawer-open .cf-current-elo>span{font-size:10px}
 body.cf-drawer-open .cf-card-rating .faceit-badge{width:31px;height:31px;min-width:31px;min-height:31px;flex-basis:31px}
 body.cf-drawer-open .cf-card-rating .faceit-badge img{width:31px;height:31px}
 body.cf-drawer-open .cf-tiny-stat{min-height:43px;padding:5px 2px}
 body.cf-drawer-open .cf-tiny-stat strong{font-size:12.5px}
 body.cf-drawer-open .cf-tiny-stat span{font-size:9px}
 body.cf-drawer-open .cf-card-matches strong{font-size:13.5px}
 body.cf-drawer-open .cf-card-matches span{font-size:9px}
 body.cf-drawer-open .cf-person-tags{margin-top:4px}
 body.cf-drawer-open .listingbar{font-size:11px}
 body.cf-drawer-open .cf-player-row .bookmark{font-size:21px;width:25px}
}
/* Intermediate widths: show metrics on their own line instead of micro-shrinking them. */
@media(min-width:761px) and (max-width:1460px){
 body.cf-drawer-open .cf-player-row{
  grid-template-columns:minmax(0,1fr) 112px 27px;
  grid-template-areas:'person rating fav' 'stats stats stats' 'foot foot foot';
  row-gap:7px;min-height:122px;padding:12px 15px}
 body.cf-drawer-open .cf-card-stats{gap:7px}
 body.cf-drawer-open .cf-tiny-stat{min-height:43px}
 body.cf-drawer-open .cf-card-matches{display:none}
 body.cf-drawer-open .cf-card-footer{display:flex;font-size:10px}
 body.cf-drawer-open .cf-person-text h3{font-size:14px}
 body.cf-drawer-open .cf-card-person .avatar{height:46px;width:46px}
 body.cf-drawer-open .cf-card-rating .faceit-badge{width:31px;height:31px;flex-basis:31px}
 body.cf-drawer-open .cf-card-rating{gap:6px;justify-self:end}
 body.cf-drawer-open .cf-person-sub{font-size:10px}
}
/* Narrow desktop: fewer metric columns, and filters flow in readable rows. */
@media(min-width:761px) and (max-width:1350px){
 .cf-drawer .cf-detail-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cf-drawer .cf-detail-stat{min-height:79px}
 body.cf-drawer-open .filters{display:flex;flex-direction:column;align-items:stretch;gap:10px}
 body.cf-drawer-open .filtergrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
 body.cf-drawer-open .filtergrid .fblock,body.cf-drawer-open .filtergrid .fblock:first-child{flex:none;min-width:0;width:auto}
 body.cf-drawer-open .fblock label{font-size:10.5px;display:flex;flex-wrap:wrap;gap:3px 7px;align-items:baseline}
 body.cf-drawer-open .fblock label span{white-space:nowrap}
 body.cf-drawer-open .filter-actions{display:flex;flex-wrap:wrap;gap:9px}
 body.cf-drawer-open .filter-actions .btn{min-height:34px}
}
/* Catalog without drawer: graceful two-row layout at modest screens. */
@media(min-width:761px) and (max-width:1110px){
 body.concept-a:not(.cf-drawer-open) .cf-player-row{
  grid-template-columns:minmax(0,1fr) 120px 29px;
  grid-template-areas:'person rating fav' 'stats stats stats' 'matches matches matches' 'foot foot foot';
  gap:8px}
 body.concept-a:not(.cf-drawer-open) .cf-card-stats{gap:8px}
 body.concept-a:not(.cf-drawer-open) .cf-card-matches{display:none}
}
/* Mobile Mini App: full-screen profile, comfortable typography. */
@media(max-width:760px){
 body.concept-a .inner{padding:14px 14px 50px}
 body.concept-a .hero{min-height:0;padding:24px 20px 22px}
 body.concept-a .hero h1{font-size:clamp(28px,7vw,36px);line-height:1.12;letter-spacing:-1.1px}
 body.concept-a .hero p{font-size:12px}
 body.concept-a .hero-shortcuts{display:none}
 body.concept-a .cf-player-row{
  grid-template-columns:minmax(0,1fr) minmax(91px,.5fr) 25px;
  grid-template-areas:'person rating fav' 'stats stats stats' 'foot foot foot';
  column-gap:9px;min-height:0;padding:14px;row-gap:9px}
 body.concept-a .cf-card-stats{grid-template-columns:repeat(4,minmax(0,1fr));min-width:0}
 body.concept-a .cf-card-matches{display:none}
 body.concept-a .cf-card-footer{min-width:0;overflow:hidden}
 body.concept-a .cf-person-text h3{font-size:15px}
 body.concept-a .cf-card-person .avatar{width:47px;height:47px}
 body.concept-a .cf-tiny-stat strong{font-size:14px}
 body.concept-a .cf-tiny-stat span{font-size:10px}
 body.concept-a .cf-card-footer{font-size:10.5px}
 .cf-drawer-scroll{padding:19px 17px 45px}
 .cf-profile-intro{grid-template-columns:76px minmax(0,1fr);gap:13px}
 .cf-profile-avatar{width:76px;height:76px}
 .cf-profile-person h2{font-size:24px}
 .cf-profile-rating{grid-column:1/-1;border-top:1px solid #1d3550;border-left:0;padding:13px 0 0;justify-content:flex-start}
 .cf-profile-quote p{font-size:13px}
 .cf-detail-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
 .cf-detail-stat strong{font-size:18px}
 .cf-detail-stat small{font-size:9px}
 .cf-section-head{align-items:flex-start}
 .cf-profile-actions .btn{font-size:12px}
}
@media(max-width:420px){
 .cf-profile-intro{grid-template-columns:67px minmax(0,1fr)}
 .cf-profile-avatar{width:67px;height:67px}
 .cf-detail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cf-info-grid>div{grid-template-columns:105px minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.cf-drawer,.cf-player-row{animation:none!important;transition:none!important}}