.chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 25%,transparent);font-size:12px;font-weight:700;color:var(--c)}.play-btn{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;border:none;cursor:pointer;text-align:left;transition:transform .12s,box-shadow .12s}.play-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #00000026}.play-btn:active{transform:translateY(0)}.play-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tab-btn{flex-shrink:0;padding:8px 18px;border-radius:999px;border:none;background:#f1f5f9;color:#94a3b8;font-weight:700;font-size:13px;cursor:pointer;transition:all .15s}.tab-btn.active-tab{background:#ffd166;color:#1f2a44}.tab-pane{padding-bottom:80px}.sort-btn{padding:5px 12px;border-radius:999px;border:none;background:#f1f5f9;color:#94a3b8;font-weight:700;font-size:12px;cursor:pointer}.sort-btn.active-sort{background:#ffd166;color:#1f2a44}.lsort-btn{flex-shrink:0;padding:6px 12px;border-radius:999px;border:none;background:#f1f5f9;color:#94a3b8;font-weight:700;font-size:12px;cursor:pointer}.lsort-btn.active-lsort{background:#ffd166;color:#1f2a44}.invite-modal{display:none;position:fixed;inset:0;background:#0f172a8c;backdrop-filter:blur(3px);z-index:40;align-items:flex-end;justify-content:center;padding:16px}.invite-card{width:min(620px,100%);background:linear-gradient(180deg,#f8fbff,#fff 26%);border-radius:22px;overflow:hidden;border:1px solid #dbe5f1;box-shadow:0 22px 60px #00000047}.invite-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid #e7eef7;background:linear-gradient(135deg,#4d96ff24,#ffd1662e)}.invite-title{color:#1f2a44;font-size:16px;font-weight:900}.invite-sub{margin:4px 0 0;color:#64748b;font-size:12px;font-weight:600;line-height:1.4;max-width:420px}.invite-close{border:1px solid #d7e2f1;background:#fff;color:#475569;border-radius:10px;padding:6px 10px;font-size:12px;font-weight:800;cursor:pointer}.invite-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}.invite-search{width:100%;height:42px;border:1px solid #dbe5f1;border-radius:12px;padding:0 12px;outline:none;font-size:13px;color:#1f2a44;background:#fff}.invite-search:focus{border-color:#4d96ff;box-shadow:0 0 0 3px #4d96ff26}.invite-section{border:1px solid #e7eef7;border-radius:14px;background:#fff;padding:10px}.invite-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.invite-section-head p{margin:0;color:#334155;font-size:12px;font-weight:900}.invite-section-head span{min-width:22px;height:22px;border-radius:999px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;background:#ffd16647;color:#8b6a00;font-size:11px;font-weight:900}.invite-hint{margin:0 0 8px;color:#64748b;font-size:12px;font-weight:700}.invite-list{display:flex;flex-direction:column;gap:8px;max-height:190px;overflow:auto;padding-right:2px}.invite-search-list{max-height:240px}.invite-pick{width:100%;display:flex;align-items:center;gap:10px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:9px 10px;cursor:pointer;text-align:left;transition:transform .12s,border-color .16s,box-shadow .16s}.invite-pick:hover{transform:translateY(-1px);border-color:#4d96ff;box-shadow:0 6px 18px #4d96ff24}.invite-empty{margin:0;padding:8px 2px;color:#94a3b8;font-size:12px;font-weight:600}.invite-error{margin:0;padding:8px 2px;color:#ef4444;font-size:12px;font-weight:700}.follow-btn{border:1px solid #d1d5db;background:#fff;color:#1f2a44;border-radius:10px;padding:6px 10px;font-size:11px;font-weight:800;cursor:pointer;transition:transform .12s,background .18s,color .18s,border-color .18s}.follow-btn:hover{transform:translateY(-1px)}.follow-btn.following{background:#1f2a44;color:#fff;border-color:#1f2a44}.follow-btn.busy{opacity:.65;cursor:wait}.follow-btn.pop{animation:btnPop .22s ease}@keyframes btnPop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.stat-card{background:#fff;border-radius:16px;border:1px solid #e5e7eb;padding:16px;text-align:center}.stat-val{color:#1f2a44;font-size:1.5rem;font-weight:900;margin:0 0 4px}.stat-label{color:#94a3b8;font-size:11px;font-weight:600;margin:0}.spinner{width:24px;height:24px;border:3px solid #ffd166;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}