.tl-data-widget { margin: 16px 0; }
.tl-data-strip {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 4px 6px 8px;
cursor: grab;
}
.tl-data-strip.is-dragging { cursor: grabbing; }
.tl-data-strip::-webkit-scrollbar { display: none; }
.tl-data-card {
flex: 1 1 0;
min-width: 80px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
padding: 16px 10px;
text-align: center;
cursor: pointer;
transition: box-shadow .15s, transform .15s, border-color .15s, background .15s, color .15s;
border: 1.5px solid transparent;
user-select: none;
-webkit-tap-highlight-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
}
@media (max-width: 600px) {
.tl-data-card { flex: 0 0 88px; }
}
.tl-data-widget--country .tl-data-card {
flex: 1 0 104px;
min-width: 104px;
padding: 18px 12px;
}
.tl-data-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.10), 0 0 0 1.5px rgba(32,60,133,.2);
transform: translateY(-2px);
}
.tl-data-card.is-active {
background: linear-gradient(135deg, #1b2f63 0%, #203c85 55%, #24337a 100%);
border-color: transparent;
box-shadow: 0 4px 18px rgba(32,60,133,.28);
}
.tl-data-card.is-active .tl-dc-label { color: rgba(255,255,255,.6); }
.tl-data-card.is-active .tl-dc-value { color: #fff; }
.tl-data-card.is-active:hover {
background: linear-gradient(135deg, #1b2f63 0%, #203c85 55%, #24337a 100%);
border-color: transparent;
box-shadow: 0 8px 26px rgba(32,60,133,.36);
transform: translateY(-2px);
}
.tl-dc-label {
font-size: 10px; color: #94a3b8; display: block;
text-transform: uppercase; letter-spacing: .05em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1; transition: color .15s;
}
.tl-dc-icon  { font-size: 22px; line-height: 1; display: block; }
.tl-dc-value {
font-size: 15px; font-weight: 700; color: #0f172a;
display: block; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; line-height: 1.2; transition: color .15s;
}
.tl-data-panel {
display: none;
margin-top: 10px;
text-align: center;
}
.tl-data-pill {
display: inline-block;
background: linear-gradient(135deg, #1b2f63 0%, #203c85 55%, #24337a 100%);
color: #fff;
padding: 8px 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 2px 14px rgba(32,60,133,.28);
letter-spacing: .01em;
max-width: min(600px, 92vw);
}