/* ===== TROMBINOSCOPE FRONT ===== */
#trombi-app * { box-sizing: border-box; }

.trombi-filter-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.trombi-filter-row:last-child { margin-bottom:0; }
.trombi-filter-label { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.45); white-space:nowrap; margin-right:4px; }

.trombi-chip { background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); border:1.5px solid rgba(255,255,255,.25); border-radius:20px; padding:5px 14px; font-size:12.5px; font-weight:400; cursor:pointer; transition:all .18s ease; white-space:nowrap; font-family:inherit; }
.trombi-chip.active, .trombi-chip:hover { background:var(--chip-color,#3CB54A); color:#fff; border-color:var(--chip-color,#3CB54A); font-weight:700; }

.trombi-section { margin-bottom:40px; }
.trombi-section-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.trombi-team-icon  { width:20px; height:20px; object-fit:contain; }
.trombi-team-badge { border-radius:8px; padding:4px 14px; font-size:13px; font-weight:700; color:#fff; }
.trombi-team-type  { font-size:11px; color:#999; font-style:italic; }
.trombi-team-count { font-size:11px; color:#aaa; margin-left:auto; }
.trombi-section-header::after { content:''; flex:1; height:1px; background:#E8E8E8; min-width:20px; order:10; }
.trombi-team-count { order:11; }

.trombi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:16px; }

.trombi-card { background:#fff; border-radius:16px; padding:24px 16px 20px; display:flex; flex-direction:column; align-items:center; gap:12px; box-shadow:0 2px 12px rgba(0,0,0,.07); transition:all .22s ease; border:1.5px solid transparent; cursor:default; }
.trombi-card:hover { box-shadow:0 8px 32px rgba(60,181,74,.18); transform:translateY(-4px); border-color:#3CB54A; }
.trombi-avatar-wrap { transition:transform .22s ease; }
.trombi-card:hover .trombi-avatar-wrap { transform:scale(1.04); }
.trombi-card-body { text-align:center; width:100%; }

.trombi-btn-contact { display:inline-flex; align-items:center; gap:5px; color:#fff !important; border-radius:20px; padding:6px 14px; font-size:11px; font-weight:600; text-decoration:none !important; transition:opacity .2s; }
.trombi-btn-contact:hover { opacity:.85; }

@media(max-width:600px){
    .trombi-grid { grid-template-columns:repeat(2,1fr); }
    .trombi-filters, .trombi-content { padding-left:16px !important; padding-right:16px !important; }
    #trombi-app .trombi-header { padding:20px 16px 16px !important; }
}