/* ═══════════════════════════════════════════════════════════
   TalkVatar Peer Talk CSS v3.0
   ═══════════════════════════════════════════════════════════ */

.tv-peer-app { max-width:1100px; margin:0 auto; font-family:inherit; position:relative; }
.tv-w-full { width:100%; box-sizing:border-box; }
.tv-muted { color:#94a3b8; font-size:0.8rem; }
.tv-empty-state { text-align:center; color:#94a3b8; padding:24px; }

/* ── Setup ─────────────────────────────────────────────────── */
.tv-peer-setup { display:flex; align-items:center; justify-content:center; min-height:60vh; padding:20px; }
.tv-peer-setup-card { background:#fff; border-radius:20px; padding:36px; box-shadow:0 8px 40px rgba(79,70,229,.12); max-width:480px; width:100%; text-align:center; }
.tv-setup-icon { font-size:3rem; margin-bottom:10px; }
.tv-peer-setup-card h2 { margin:0 0 6px; font-size:1.4rem; color:#1e293b; }
.tv-setup-sub { color:#64748b; margin:0 0 24px; font-size:.88rem; }
.tv-field { margin-bottom:14px; text-align:left; }
.tv-field label { display:block; font-weight:600; font-size:.82rem; color:#374151; margin-bottom:4px; }
.tv-field input,.tv-field select { width:100%; padding:9px 12px; border:1.5px solid #e2e8f0; border-radius:8px; font-size:.9rem; box-sizing:border-box; transition:border-color .2s; }
.tv-field input:focus,.tv-field select:focus { border-color:#4f46e5; outline:none; }
.tv-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tv-location-notice { background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px; padding:9px 12px; font-size:.8rem; color:#0369a1; margin-bottom:18px; text-align:left; }

/* ── My bar ────────────────────────────────────────────────── */
.tv-my-bar { background:#fff; border-radius:12px; padding:12px 14px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.tv-my-bar-left { display:flex; align-items:center; gap:10px; }
.tv-my-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; background:#f1f5f9; display:flex; align-items:center; justify-content:center; }
.tv-my-avatar-img { width:100%; height:100%; object-fit:cover; }
.tv-my-avatar-emoji { font-size:1.5rem; }
.tv-my-info strong { display:block; color:#1e293b; font-size:.9rem; }
.tv-my-info small { color:#64748b; font-size:.75rem; }
.tv-my-bar-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tv-toggle-wrap { display:flex; align-items:center; gap:6px; cursor:pointer; }
.tv-toggle-wrap input { width:16px; height:16px; accent-color:#10b981; }
.tv-toggle-lbl { font-size:.78rem; font-weight:600; }

/* ── Filters ────────────────────────────────────────────────── */
.tv-filters-bar { display:flex; gap:20px; flex-wrap:wrap; align-items:center; background:#fff; border-radius:12px; padding:10px 14px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.tv-filter-group { display:flex; align-items:center; gap:10px; }
.tv-filter-group label { font-size:.82rem; font-weight:600; color:#374151; white-space:nowrap; }
.tv-select { padding:5px 10px; border-radius:8px; border:1.5px solid #e2e8f0; font-size:.82rem; }
.tv-slider { width:140px; accent-color:#4f46e5; }

/* ── Tabs ───────────────────────────────────────────────────── */
.tv-tabs { display:flex; gap:4px; margin-bottom:12px; background:#f1f5f9; border-radius:10px; padding:4px; }
.tv-tab-btn { flex:1; padding:7px 10px; border:none; border-radius:7px; background:transparent; font-size:.82rem; font-weight:600; color:#64748b; cursor:pointer; transition:all .18s; position:relative; }
.tv-tab-btn.active { background:#fff; color:#4f46e5; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.tv-tab-badge { position:absolute; top:-5px; right:-2px; background:#ef4444; color:#fff; font-size:.6rem; font-weight:700; width:15px; height:15px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.tv-tab-pane { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden; }

/* ── Map + List ─────────────────────────────────────────────── */
.tv-people-layout { display:grid; grid-template-columns:1fr 340px; gap:0; }
@media(max-width:768px){.tv-people-layout{grid-template-columns:1fr;}}
.tv-map-wrap { border-right:1px solid #f1f5f9; }
.tv-peer-map { height:400px; }
.tv-map-legend { padding:6px 10px; font-size:.72rem; color:#64748b; background:#f8fafc; }
.tv-map-me { background:#4f46e5; color:#fff; border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.tv-map-user { font-size:1.3rem; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.9); border-radius:50%; border:2px solid #4f46e5; box-shadow:0 2px 6px rgba(0,0,0,.2); cursor:pointer; }
.tv-map-me-legend { background:#4f46e5; color:#fff; padding:1px 6px; border-radius:4px; font-size:.68rem; font-weight:700; }
.tv-map-popup { font-size:.82rem; }

/* ── User List ──────────────────────────────────────────────── */
.tv-list-wrap { padding:12px; }
.tv-list-title { margin:0 0 10px; font-size:.9rem; color:#1e293b; }
.tv-peer-list { display:flex; flex-direction:column; gap:8px; max-height:380px; overflow-y:auto; }
.tv-peer-loading { text-align:center; padding:30px; color:#94a3b8; }
.tv-peer-empty  { text-align:center; padding:30px 16px; color:#94a3b8; }
.tv-peer-card { display:flex; align-items:center; gap:10px; padding:10px; background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:10px; transition:border-color .2s; }
.tv-peer-card:hover { border-color:#c7d2fe; }
.tv-peer-avatar-wrap { width:44px; height:44px; border-radius:50%; overflow:hidden; background:#f1f5f9; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tv-peer-avatar-img { width:100%; height:100%; object-fit:cover; }
.tv-peer-avatar-emoji { font-size:1.6rem; }
.tv-peer-card-info { flex:1; min-width:0; }
.tv-peer-card-name { font-weight:700; color:#1e293b; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-peer-card-meta { display:flex; flex-wrap:wrap; gap:4px; margin:3px 0; }
.tv-tag { padding:1px 7px; border-radius:10px; font-size:.7rem; background:#f1f5f9; color:#475569; }
.tv-tag-male { background:#dbeafe; color:#1d4ed8; } .tv-tag-female { background:#fce7f3; color:#be185d; }
.tv-peer-avail { font-size:.72rem; } .tv-peer-avail.avail { color:#10b981; } .tv-peer-avail.busy { color:#ef4444; }
.tv-peer-card-actions { display:flex; flex-direction:column; gap:4px; flex-shrink:0; }

/* ── Chat Panel ─────────────────────────────────────────────── */
.tv-chat-panel { position:fixed; right:0; top:0; bottom:0; width:min(360px,100vw); background:#fff; box-shadow:-4px 0 20px rgba(0,0,0,.12); display:flex; flex-direction:column; z-index:99990; }
.tv-chat-panel-header { display:flex; align-items:center; gap:10px; padding:12px 14px; background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; flex-shrink:0; }
.tv-chat-panel-header .tv-close-btn { background:rgba(255,255,255,.2); border:none; color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; }
.tv-chat-partner-name { font-weight:700; font-size:.95rem; }
.tv-chat-messages-box { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; background:#f8fafc; }
.tv-chat-input-area { display:flex; align-items:center; gap:6px; padding:8px 10px; border-top:1px solid #e2e8f0; background:#fff; flex-shrink:0; }
.tv-chat-input { flex:1; padding:8px 12px; border:1.5px solid #e2e8f0; border-radius:20px; font-size:.88rem; outline:none; }
.tv-chat-input:focus { border-color:#4f46e5; }
.tv-chat-send { border-radius:20px !important; padding:7px 16px !important; font-size:.82rem !important; }

/* Chat messages */
.tv-chat-msg { display:flex; gap:6px; max-width:85%; }
.tv-msg-mine { align-self:flex-end; flex-direction:row-reverse; }
.tv-msg-theirs { align-self:flex-start; }
.tv-msg-avatar { width:28px; height:28px; border-radius:50%; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; overflow:hidden; }
.tv-msg-avatar-img { width:100%; height:100%; object-fit:cover; }
.tv-msg-bubble-wrap { display:flex; flex-direction:column; }
.tv-msg-sender { font-size:.68rem; color:#64748b; margin-bottom:2px; padding-left:4px; }
.tv-msg-bubble { background:#fff; border:1px solid #e2e8f0; border-radius:12px 12px 12px 2px; padding:8px 10px; font-size:.88rem; color:#1e293b; position:relative; }
.tv-msg-mine .tv-msg-bubble { background:#4f46e5; color:#fff; border:none; border-radius:12px 12px 2px 12px; }
.tv-msg-time { display:block; font-size:.63rem; opacity:.6; margin-top:3px; text-align:right; }
.tv-msg-text { word-break:break-word; }
.tv-msg-media { max-width:200px; max-height:200px; border-radius:8px; display:block; cursor:pointer; }
.tv-msg-img:hover { opacity:.9; }
.tv-msg-video { max-width:220px; border-radius:8px; }

/* GIF picker */
.tv-gif-picker { position:absolute; bottom:50px; left:0; background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); width:300px; z-index:9999; padding:10px; }
.tv-gif-search { display:flex; gap:6px; margin-bottom:8px; }
.tv-gif-search input { flex:1; padding:6px 10px; border:1.5px solid #e2e8f0; border-radius:8px; font-size:.82rem; }
.tv-gif-results { display:flex; flex-wrap:wrap; gap:4px; max-height:200px; overflow-y:auto; }
.tv-gif-thumb { width:90px; height:70px; object-fit:cover; border-radius:6px; cursor:pointer; transition:opacity .2s; }
.tv-gif-thumb:hover { opacity:.8; }

/* ── Conversations ───────────────────────────────────────────── */
.tv-conv-list { display:flex; flex-direction:column; max-height:500px; overflow-y:auto; }
.tv-conv-item { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; border-bottom:1px solid #f1f5f9; transition:background .15s; }
.tv-conv-item:hover { background:#f8fafc; }
.tv-conv-avatar { position:relative; width:42px; height:42px; border-radius:50%; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; overflow:hidden; }
.tv-conv-avatar-img { width:100%; height:100%; object-fit:cover; }
.tv-conv-avatar-emoji { font-size:1.4rem; }
.tv-conv-online { position:absolute; bottom:0; right:0; width:10px; height:10px; border-radius:50%; border:2px solid #fff; }
.tv-conv-online.on { background:#10b981; } .tv-conv-online.off { background:#94a3b8; }
.tv-conv-info { flex:1; min-width:0; }
.tv-conv-name { font-weight:600; color:#1e293b; font-size:.88rem; display:flex; align-items:center; gap:6px; }
.tv-conv-preview { font-size:.78rem; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-unread-badge { background:#ef4444; color:#fff; font-size:.65rem; font-weight:700; padding:1px 6px; border-radius:10px; flex-shrink:0; }

/* ── Friends ────────────────────────────────────────────────── */
.tv-friends-section { padding:12px 14px; border-bottom:1px solid #f1f5f9; }
.tv-friends-section h4 { margin:0 0 10px; font-size:.85rem; color:#374151; font-weight:700; }
.tv-friend-requests { display:flex; flex-direction:column; gap:8px; }
.tv-req-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; background:#f8fafc; border-radius:8px; font-size:.82rem; flex-wrap:wrap; }
.tv-friends-list { display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; }
.tv-friend-item { display:flex; align-items:center; gap:10px; padding:8px 10px; background:#f8fafc; border-radius:8px; }
.tv-friend-avatar { width:36px; height:36px; border-radius:50%; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-size:1.2rem; position:relative; flex-shrink:0; overflow:hidden; }
.tv-friend-avatar-img { width:100%; height:100%; object-fit:cover; }
.tv-friend-online { position:absolute; bottom:0; right:0; width:8px; height:8px; border-radius:50%; border:1.5px solid #fff; }
.tv-friend-online.on { background:#10b981; }
.tv-friend-info { flex:1; min-width:0; }
.tv-friend-info strong { display:block; font-size:.85rem; color:#1e293b; }
.tv-friend-info small { color:#64748b; font-size:.73rem; }
.tv-friend-actions { display:flex; gap:4px; flex-shrink:0; }

/* ── Groups ─────────────────────────────────────────────────── */
.tv-groups-list { display:flex; flex-direction:column; gap:0; max-height:500px; overflow-y:auto; }
.tv-group-card { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid #f1f5f9; }
.tv-group-card:last-child { border-bottom:none; }
.tv-group-avatar { width:44px; height:44px; border-radius:10px; background:#ede9fe; display:flex; align-items:center; justify-content:center; font-size:1.5rem; overflow:hidden; flex-shrink:0; }
.tv-group-avatar img { width:100%; height:100%; object-fit:cover; }
.tv-group-info { flex:1; min-width:0; }
.tv-group-name { font-weight:700; color:#1e293b; font-size:.88rem; }
.tv-group-desc { font-size:.75rem; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-group-meta { font-size:.72rem; color:#94a3b8; margin-top:2px; }
.tv-group-actions { display:flex; gap:5px; flex-shrink:0; }

/* ── Modals ─────────────────────────────────────────────────── */
.tv-modal { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:99999; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px); }
.tv-modal-box { background:#fff; border-radius:18px; padding:28px 24px; max-width:400px; width:90%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.2); animation:tv-mi .25s ease; }
@keyframes tv-mi{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.tv-modal-box h3{margin:0 0 8px;font-size:1.1rem;color:#1e293b}
.tv-modal-box p{color:#475569;margin:5px 0;font-size:.88rem}
.tv-modal-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.tv-textarea{width:100%;box-sizing:border-box;margin-top:10px;border:1.5px solid #e2e8f0;border-radius:8px;padding:8px;font-size:.88rem;resize:none}
.tv-wait-spinner{font-size:2.2rem;margin-bottom:6px;animation:tv-sp 2s linear infinite}
@keyframes tv-sp{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.tv-wait-dots{color:#4f46e5}
.tv-ring{font-size:2.5rem;animation:tv-rg .5s ease-in-out infinite alternate}
@keyframes tv-rg{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.tv-inc-msg{font-style:italic;background:#f8fafc;padding:7px 10px;border-radius:7px;margin:6px 0 0;font-size:.83rem}
.tv-btn-success{background:#10b981;color:#fff;border:none;padding:9px 18px;border-radius:8px;cursor:pointer;font-weight:600;transition:background .2s}
.tv-btn-success:hover{background:#059669}

/* ── Call UI ─────────────────────────────────────────────────── */
.tv-call-ui{position:fixed;bottom:20px;right:20px;z-index:99998;animation:tv-su .3s ease}
@keyframes tv-su{from{transform:translateY(80px);opacity:0}to{transform:translateY(0);opacity:1}}
.tv-call-box{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-radius:18px;padding:18px 20px;width:280px;box-shadow:0 12px 40px rgba(79,70,229,.4)}
.tv-call-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.tv-call-icon{font-size:2rem}
.tv-call-name{font-weight:700;font-size:.95rem}
.tv-call-status{font-size:.75rem;opacity:.8}
.tv-call-timer{margin-left:auto;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.tv-sound-wave{display:flex;align-items:center;gap:3px;justify-content:center;height:36px;margin:0 0 12px}
.tv-sound-wave span{width:4px;background:rgba(255,255,255,.7);border-radius:4px;animation:tv-wv 1s ease-in-out infinite}
.tv-sound-wave span:nth-child(1){animation-delay:0s}.tv-sound-wave span:nth-child(2){animation-delay:.1s}
.tv-sound-wave span:nth-child(3){animation-delay:.2s}.tv-sound-wave span:nth-child(4){animation-delay:.3s}
.tv-sound-wave span:nth-child(5){animation-delay:.4s}
@keyframes tv-wv{0%,100%{height:6px}50%{height:28px}}
.tv-call-tip{font-size:.72rem;opacity:.75;background:rgba(255,255,255,.12);border-radius:7px;padding:6px 9px;margin-bottom:12px}
.tv-call-actions{display:flex;gap:8px}
.tv-call-actions .tv-btn{flex:1;justify-content:center}
.tv-call-actions .tv-btn-outline{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);color:#fff}
.tv-call-actions .tv-btn-outline.muted{background:rgba(239,68,68,.3)}

/* ── Toast ───────────────────────────────────────────────────── */
.tv-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);color:#fff;padding:10px 22px;border-radius:100px;font-size:.85rem;font-weight:600;z-index:999999;box-shadow:0 8px 30px rgba(0,0,0,.2);transition:transform .3s,opacity .3s;opacity:0;white-space:nowrap}
.tv-toast.tv-toast-show{transform:translateX(-50%) translateY(0);opacity:1}

/* ── Btn helpers ─────────────────────────────────────────────── */
.tv-btn-xs{padding:4px 10px !important;font-size:.72rem !important;border-radius:6px !important}
.tv-btn-lg{padding:12px 20px}
.tv-btn-danger{background:#ef4444;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:600;transition:background .2s}
.tv-btn-danger:hover{background:#dc2626}

/* ── Multi-select language picker ──────────────────────────────────────────── */
.tv-multi-select { padding:8px !important; min-height:80px; }

/* ── Language pair display in user cards ───────────────────────────────────── */
.tv-peer-langs { display:flex; gap:8px; font-size:0.72rem; color:#475569; margin-top:3px; flex-wrap:wrap; }
.tv-lang-native { color:#1d4ed8; font-weight:600; }
.tv-lang-learn { color:#7c3aed; font-weight:600; }
.tv-tag-level { background:#fef3c7; color:#92400e; text-transform:capitalize; }

/* Match badge — perfect language pair */
.tv-match-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #fff; font-size: 0.6rem; padding: 1px 6px;
    border-radius: 8px; margin-left: 4px; font-weight: 700;
}
.tv-peer-match {
    border: 2px solid #f59e0b !important;
    background: linear-gradient(to right, #fffbeb, #fff) !important;
}

/* ── Practice tab ───────────────────────────────────────────────────────────── */
.tv-practice-section {
    padding: 16px; border-bottom: 1px solid #f1f5f9;
}
.tv-practice-section:last-child { border-bottom: none; }
.tv-practice-section h4 { margin: 0 0 12px; font-size: 0.95rem; color: #1e293b; }

/* SRS card */
.tv-srs-card {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 12px; padding: 24px; text-align: center;
    border: 2px solid #bae6fd;
}
.tv-srs-progress { font-size: 0.78rem; color: #0369a1; margin-bottom: 12px; font-weight: 600; }
.tv-srs-word { font-size: 2rem; font-weight: 800; color: #0c4a6e; margin: 8px 0; }
.tv-srs-langs { font-size: 0.78rem; color: #64748b; margin-bottom: 16px; }
.tv-srs-show { padding: 8px 18px !important; }
.tv-srs-answer { margin-top: 16px; }
.tv-srs-translation { font-size: 1.4rem; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.tv-srs-example { font-style: italic; color: #475569; margin-bottom: 12px; padding: 8px; background: rgba(255,255,255,0.6); border-radius: 6px; }
.tv-srs-rate { display: flex; gap: 10px; justify-content: center; }

/* Mistakes list */
.tv-mistakes-list { display: flex; flex-direction: column; gap: 8px; }
.tv-mistake-card {
    background: #fff7ed; border-left: 3px solid #f59e0b;
    padding: 10px 12px; border-radius: 8px; font-size: 0.85rem;
}
.tv-mistake-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tv-mistake-row:last-child { margin-bottom: 0; }
.tv-mistake-tag {
    font-weight: 700; padding: 1px 7px; border-radius: 4px; font-size: 0.7rem; flex-shrink: 0;
}
.tv-mistake-wrong { background: #fee2e2; color: #b91c1c; }
.tv-mistake-right { background: #d1fae5; color: #065f46; }

/* Conversation starters */
.tv-starters-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tv-starter-chip {
    background: #ede9fe; color: #6d28d9;
    padding: 6px 12px; border-radius: 16px;
    font-size: 0.82rem; cursor: pointer; transition: all 0.15s;
    border: 1.5px solid transparent;
}
.tv-starter-chip:hover { background: #ddd6fe; border-color: #7c3aed; }

/* ── Leaderboard ────────────────────────────────────────────────────────────── */
.tv-lb-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.tv-lb-header h4 { margin: 0; }
.tv-leaderboard-list { padding: 8px 0; }
.tv-lb-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.tv-lb-item:hover { background: #f8fafc; }
.tv-lb-item.tv-lb-mine {
    background: linear-gradient(to right, #ede9fe, transparent);
    border-left: 3px solid #4f46e5;
}
.tv-lb-rank { width: 36px; text-align: center; font-size: 1.4rem; font-weight: 700; color: #475569; flex-shrink: 0; }
.tv-lb-avatar { width: 38px; height: 38px; border-radius: 50%; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.tv-lb-info { flex: 1; min-width: 0; }
.tv-lb-info strong { display: block; color: #1e293b; font-size: 0.88rem; }
.tv-lb-info small { color: #64748b; font-size: 0.72rem; }
.tv-lb-xp { text-align: right; flex-shrink: 0; }
.tv-lb-xp strong { color: #4f46e5; font-size: 1.15rem; }
.tv-lb-xp small { display: block; color: #94a3b8; font-size: 0.65rem; }

/* Badges */
.tv-badges-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(90px,1fr)); gap: 8px; }
.tv-badge-item {
    text-align: center; padding: 12px 8px;
    background: #f8fafc; border-radius: 10px;
    border: 1.5px solid #e2e8f0; transition: all 0.18s;
}
.tv-badge-item.earned {
    background: linear-gradient(135deg, #fef3c7, #fef9c3);
    border-color: #fbbf24;
}
.tv-badge-item.locked { opacity: 0.4; filter: grayscale(0.7); }
.tv-badge-icon { font-size: 1.8rem; margin-bottom: 4px; }
.tv-badge-name { font-size: 0.7rem; font-weight: 600; color: #374151; }

/* Friends section heading */
.tv-friends-section h4 { margin:0 0 10px; font-size:.85rem; color:#374151; font-weight:700; }